Example: Image

beathachIf you wish to put an image on the page, with text beside it, this is how to do it. In this example a border is not put around the image. There is a margin between the image and the text.

.img_right
{
float: right;
border-style: none;
margin-left: 20px;
}

<p><img class="img_right" src="beathach.jpg" alt="beathach">If you wish to put an image...</p>

Example: Paragraph beginning with large capital letter

It can be an interesting effect when a paragraph is begun with a large capital letter. Use float:left
so that the rest of the paragraph flows directly beside it.

.drop_cap {
float:left;
width:0.7em;
font-size:4em;
font-family:algerian,courier;
line-height:80%;
}

<p> <span class="drop_cap">I</span>t can be an interesting effect...</p>

Example: Font

Different "fonts" are used here.

.first_word {
font-size: 18px;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: #0000AA;
background-color: yellow;
}

.italic_green {
font-style: italic;
color: green;
}

.courier_red {
font-size: 20px;
font-family: Courier, serif;
color: red;
}

.monospace_small_caps {
font-family: monospace;
font-variant: small-caps;
color: purple;
}

.bold_big {
font-weight: bold;
font-size: 20px;
}

<p><span class="first_word">Different</span> &quot;<span class="italic_green">fonts</span>&quot;
<span class="courier_red">are</span> used <span class="monospace_small_caps">here</span>.</p>

 

Example: Padding & Margins

A margin is the distance between two items. Padding is found within an item, for example the distance between a column of text and the edge of the box containing it.

 

 

 

<----padding-left--->Text goes here<----padding-right--->

<----margin---> Other text

 

 

 

 

 

Example: Alignment

Text can be left-, right-, centre- or fully-justified. This text uses the CSS text-align: justify for full justification. The other choices are: left, right and center. The following example shows how to use text-align: justify

p { text-align: justify; }

<p>Text can be left-, right-, centre- or fully-justified...</p>

and this example uses text-align: center:

h1 { text-align: center; }

<h1>Paragraph 1</h1>

which looks like this on the page:

Paragraph 1

Example: Background image

A background image can be added as follows:

body {
background-image: url('logo_cnag3.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}

The image remains in place when the page is scrolled. This is because background-attachment: fixed is used. If you wish the image to scroll with the page, use background-attachment: scroll instead.

Example: CSS Menu

It is possible to create a menu using a list and CSS (although the background colour of the menu is not rendered correctly by Opera):

 

ul.menu
{
position:relative;
left:30px;
padding:0;
margin:0;
list-style-type:none;
width:100%;
}

a.menu
{
float:left;
text-decoration:none;
color:white;
background-color:green;
padding-top:0.2em;
padding-bottom:0.2em;
border-right:1px solid white;
width:100px;
text-align:center;
}

.menu li {display:inline;}

ul.menu li {
margin-top: 5px;
padding: 0px;
}

a.menu:hover {background-color:lime}

<ul class="menu">
<li class="menu"><a class="menu" href="http://www.cnag.org.uk/>CnaG</a></li>
<li class="menu"><a class="menu" href="http://www.cli.org.uk/">Clì</a></li>
<li class="menu"><a class="menu" href="http://www.storlann.co.uk/">Stòrlann</a></li>
<li class="menu"><a class="menu" href="http://www.bord-na-gaidhlig.org.uk/">BnaG</a></li>
</ul>

Example: Another CSS menu

A vertical menu can also be created using a list and CSS:

ul.menu2
{
position:relative;
left:55px;
padding:0px;
margin:0;
list-style-type:none;
}

ul.menu2 li {
margin: 2px;
padding: 3px;
width: 65px;
background-color:green;
}

a.menu2
{
float:none;
text-decoration:none;
color:white;
background-color:green;
padding-top:0.2em;
padding-bottom:0.2em;
}

a.menu2:hover {color:lime;}

<ul class="menu2">
<li><a class="menu2" href="http://www.cnag.org.uk/">CnaG</a></li>
<li><a class="menu2" href="http://www.cli.org.uk/">Clì</a></li>
<li><a class="menu2" href="http://www.storlann.co.uk/">Stòrlann</a></li>
<li><a class="menu2" href="http://www.bord-na-gaidhlig.org.uk/">BnaG</a></li>
</ul>

Example: Absolute positioning

With absolute positioning, an item is positioned on the page using the absolute coordinates provided (c.f. relative positioning, below).

For example, if you wish to put an image 100 pixels from the left and 75 pixels from the top, the following code will do that.

0,0

Text starting at 0px,0px

Text starting at 100px, 75px

.offset_text_1 {
position: absolute;
left: 100px;
top: 75px;
color:red;
}

<p class="red_text"> Text starting at 0px,0px</p>
<p class="offset_text_1">Text starting at 100px, 75px</p>


Example: Relative positioning

With relative positioning, an item is positioned on the page relative to where it would otherwise have been placed using the normal flow of the HTML. The coordinates provided are therefore relative rather than absolute.

0,0

The usual position for the first paragraph

The usual position for the second paragraph

The first paragraph with r.p. 100px, 75px

The second paragraph with r.p. 0px, -15px

.offset_text_2, .offset_text_3 {
position: relative;
color:red;
}

.offset_text_2 {
left:100px;
top: 75px;
}

.offset_text_3 {
left: 0px;
top: -15px;
}

<p class="red_text">0,0</p>
<div class="background_box2">
<p class="offset_text_2">The first paragraph with r.p. 100px, 75px</p>
<p class="offset_text_3">The second paragraph with r.p. 0px, -15px</p>
</div>




Example: Two text columns side-by-side

This method can be used to position two columns of text side-by-side. Alternatively, you can use relative or absolute positioning.


This is the text in the left column. This is the text in the left column. This is the text in the left column. This is the text in the left column. This is the text in the left column.
This is the text in the right column. This is the text in the right column. This is the text in the right column. This is the text in the right column. This is the text in the right column.

 

.left-column {
float: left;
width: 250px;
margin: 0px;
padding: 5px;
border: solid red 1px;
background-color:#cc99ff;
}

.right-column {
width: 350px;
margin: 0px;
margin-left: 300px;
padding: 0px;
border: solid red 1px;
background-color:#ffff99;
}

<div class="left-column">
This is the text in the left column. .............
</div>

<div class="right-column">
This is the text in the right column. .............
</div>

Example: Links

Links can be given a different appearance using CSS, for example both the color and the background colour of the text below change when the cursor hovers over it:

Scottish Parliament

a.links {
font-size: 20px;
font-family: Courier, serif;
text-decoration: none;
background: yellow;
padding:3px;
}

a.links:hover {
color: red;
background-color: white;
}

<p><a class="links" href="http://www.scottish.parliament.uk/vli/language/gaelic/index.htm">
Scottish Parliament</a></p>

Example: Z-index

Images and text can be positioned above or below other images or text using CSS. The item with the highest z-index will be at the top, for example:

Here, the Saltire is positioned above the Union Flag:

union flagsaltire

img.union_flag {
z-index: 1;
}

img.saltire {
z-index: 2;
position: relative;
left: -50px;
}

<img class="union_flag" src="union_flag.jpg"><img class="saltire" src="saltire.jpg">

Here, the Union Flag is positioned above the Saltire:

union flagsaltire

img.union_flag2 {
z-index: 2;
}

img.saltire2 {
z-index: 1;
position: relative;
left: -50px;
}

<img class="union_flag2" src="union_flag.jpg"><img class="saltire2" src="saltire.jpg">