Académique Documents
Professionnel Documents
Culture Documents
Maybe you already heard about CSS without really knowing what it is. In this Section
you will learn more about what CSS is and what it can do for you.
HTML can be (mis-)used to add layout to websites. But CSS offers more options and is
more accurate and sophisticated. CSS is supported by all browsers today.
After only a few Sections of this tutorial you will be able to make your own style sheets
using CSS to give your website a new great look.
Okay, it sounds a bit technical and confusing. But please continue reading. It will all
make sense to you soon.
Back in the good old days when Madonna was a virgin and a guy called Tim Berners Lee
invented the World Wide Web, the language HTML was only used to add structure to
text. An author could mark his text by stating "this is a headline" or "this is a paragraph"
using HTML tags such as <h1> and <p>.
As the Web gained popularity, designers started looking for possibilities to add layout to
online documents. To meet this demand, the browser producers (at that time Netscape
and Microsoft) invented new HTML tags such as for example <font> which differed
from the original HTML tags by defining layout - and not structure.
This also led to a situation where original structure tags such as <table> were
increasingly being misused to layout pages instead of adding structure to text. Many new
layout tags such as <blink> were only supported by one type of browser. "You need
browser X to view this page" became a common disclaimer on web sites.
CSS was invented to remedy this situation by providing web designers with sophisticated
layout opportunities supported by all browsers. At the same time, separation of the
presentation style of documents from the content of documents, makes site maintenance a
lot easier.
Which benefits will CSS give me?
CSS was a revolution in the world of web design. The concrete benefits of CSS include:
Many of the properties used in Cascading Style Sheets (CSS) are similar to those of
HTML. Thus, if you are used to use HTML for layout, you will most likely recognize
many of the codes. Let us look at a concrete example.
<body bgcolor="#FF0000">
As you will note, the codes are more or less identical for HTML and CSS. The above
example also shows you the fundamental CSS model:
But where do you put the CSS code? This is exactly what we will go over now.
One way to apply CSS to HTML is by using the HTML attribute style. Building on the
above example with the red background color, it can be applied like this:
<html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>
Another way is to include the CSS codes using the HTML tag <style>. For example like
this:
<html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
The recommended method is to link to a so-called external style sheet. Throughout this
tutorial we will use this method in all our examples.
An external style sheet is simply a text file with the extension .css. Like any other file,
you can place the style sheet on your web server or hard disk.
For example, let's say that your style sheet is named style.css and is located in a folder
named style. The situation can be illustrated like this:
www.ccsb.com
The trick is to create a link from the HTML document (default.htm) to the style sheet
(style.css). Such link can be created with one line of HTML code:
Notice how the path to our style sheet is indicated using the attribute href.
The line of code must be inserted in the header section of the HTML code i.e. between
the <head> and </head> tags. Like this:
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
This link tells the browser that it should use the layout from the CSS file when displaying
the HTML file.
The really smart thing is that several HTML documents can be linked to the same style
sheet. In other words, one CSS file can be used to control the layout of many HTML
documents.
This technique can save you a lot of work. If you, for example, would like to change the
background color of a website with 100 pages, a style sheet can save you from having to
manually change all 100 HTML documents. Using CSS, the change can be made in a few
seconds just by changing one code in the central style sheet.
Let's put what we just learned into practice.
Try it yourself
Open Notepad (or whatever text editor you use) and create two files - an HTML file and
a CSS file - with the following contents:
default.htm
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>My first stylesheet</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
Now place the two files in the same folder. Remember to save the files with the right
extensions (respectively ".htm" and ".css")
Open default.htm with your browser and see how the page has a red background.
Congratulations! You have made your first style sheet!
• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background
h1 {
color: #ff0000;
}
Colors can be entered as hexadecimal values as in the example above (#ff0000), or you
can use the names of the colors ("red") or rgb-values (rgb(255,0,0)).
The element <body> contains all the content of an HTML document. Thus, to change the
background color of an entire page, the background-color property should be applied to
the <body> element.
You can also apply background colors to other elements including headlines and text. In
the example below, different background colors are applied to <body> and <h1>
elements.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
As an example of a background image, we use the butterfly below. You can download
the image so you can use it on your own computer (right click the image and choose
"save image as"), or you can use another image as you see fit.
To insert the image of the butterfly as a background image for a web page, simply apply
the background-image property to <body> and specify the location of the image.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
NB: Notice how we specified the location of the image as url("butterfly.gif"). This
means that the image is located in the same folder as the style sheet. You can also refer to
images in other folders using url("../images/butterfly.gif") or even on the Internet
indicating the full address of the file: url("http://www.ccsb.com/butterfly.gif").
The table below outlines the four different values for background-repeat.
Value Description
background-repeat: repeat-x The image is repeated horizontally
background-repeat: repeat-y The image is repeated vertically
background-repeat: repeat The image is repeated both horizontally and vertically
background-repeat: no-repeat The image is not repeated
For example, to avoid repetition of a background image the code should look like this:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
A fixed background image will not move with the text when a reader is scrolling the
page, whereas an unlocked background image will scroll along with the text of the web
page.
The table below outlines the two different values for background-attachment. Click on
the examples to see the difference between scroll and fixed.
Value Description
Background-attachment: scroll The image scrolls with the page - unlocked
Background-attachment: fixed The image is locked
For example, the code below will fix the background image.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Place background image [background-position]
By default, a background image will be positioned in the top left corner of the screen.
The property background-position allows you to change this default and position the
background image anywhere you like on the screen.
There are numerous ways to set the values of background-position. However, all of
them are formatted as a set of coordinates. For example, the value '100px 200px'
positions the background image 100px from the left side and 200px from the top of the
browser window.
The coordinates can be indicated as percentages of the browser window, fixed units
(pixels, centimetres, etc.) or you can use the words top, bottom, center, left and right. The
model below illustrates the system:
Value Description
background-position: 2cm The image is positioned 2 cm from the left and 2 cm
2cm down the page
background-position: 50% The image is centrally positioned and one fourth down
25% the page
background-position: top The image is positioned in the top-right corner of the
right page
The code example below positions the background image in the bottom right corner:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Compiling [background]
The property background is a short hand for all the background properties listed in this
Section.
With background you can compress several properties and thereby write your style sheet
in a shorter way which makes it easier to read.
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Using background the same result can be achieved in just one line of code:
If a property is left out, it will automatically be set to its default value. For example, if
background-attachment and background-position are taken out of the example:
Summary
In this Section, you have already learned new techniques that would not be possible using
HTML. The fun continues in the next Section which examines the broad range of
possibilities when using CSS to describe fonts.
Section 4: Fonts
In this Section you will learn about fonts and how they are applied using CSS. We will
also look at how to work around the issue that specific fonts chosen for a website can
only be seen if the font is installed on the PC used to access the website. The following
CSS properties will be described:
• font-family
• font-style
• font-variant
• font-weight
• font-size
• font
There are two types of names used to categorize fonts: family-names and generic
families. The two terms are explained below.
Family-name
Examples of a family-name (often known as "font") can e.g. be "Arial", "Times
New Roman" or "Tahoma".
Generic family
Generic families can best be described as groups of family-names with uniformed
appearances. An example is sans-serif, which is a collection of fonts without
"feet".
The difference can also be illustrated like this:
When you list fonts for your web site, you naturally start with the most preferred font
followed by some alternative fonts. It is recommended to complete the list with a generic
font family. That way at least the page will be shown using a font of the same family if
none of the specified fonts are available.
Headlines marked with <h1> will be displayed using the font "Arial". If this font is not
installed on the user's computer, "Verdana" will be used instead. If both these fonts are
unavailable, a font from the sans-serif family will be used to show the headlines.
Notice how the font name "Times New Roman" contains spaces and therefore is listed
using quotation marks.
If font-variant is set to small-caps and no small-caps font is available the browser will
most likely show the text in uppercase instead.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
There are many different units (e.g. pixels and percentages) to choose from to describe
font sizes. In this tutorial we will focus on the most common and appropriate units.
Examples include:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
There is one key difference between the four units above. The units 'px' and 'pt' make the
font size absolute, while '%' and 'em' allow the user to adjust the font size as he/she see
fit. Many users are disabled, elderly or simply suffer from poor vision or a monitor of bad
quality. To make your website accessible for everybody, you should use adjustable units
such as '%' or 'em'.
Try adjusting the font size of your favorite web site. In Internet Explorer, click on View,
select Font Size, then change the size.
Compiling [font]
Using the font short hand property it is possible to cover all the different font properties
in one single property.
For example, imagine these four lines of code used to describe font-properties for <p>:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
p {
font: italic bold 30px arial, sans-serif;
}
Summary
You have now learned about some of the possibilities related to fonts. Remember that
one of the major advantages of using CSS to specify fonts is that at any given time, you
can change font on an entire website in just a few minutes. CSS saves time and makes
your life easier.
Section 5: Text
Formatting and adding style to text is a key issue for any web designer. In this Section
you will be introduced to the amazing opportunities CSS gives you to add layout to text.
The following properties will be described:
• text-indent
• text-align
• text-decoration
• letter-spacing
• text-transform
Text indention [text-indent]
The property text-indent allows you to add an elegant touch to text paragraphs by
applying an indent to the first line of the paragraph. In the example below a 30px is
applied to all text paragraphs marked with <p>:
p {
text-indent: 30px;
}
In the example below the text in table headings <th> is aligned to the right while the
table data <td> are centred. In addition, normal text paragraphs are justified:
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Letter space [letter-spacing]
The spacing between text characters can be specified using the property letter-
spacing. The value of the property is simply the desired width. For example, if you want
a spacing of 3px between the letters in a text paragraph <p> and 6px between letters in
headlines <h1> the code below could be used.
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
An example could be the word "headline" which can be presented to the user as
"HEADLINE" or "Headline". There are four possible values for text-transform:
Capitalize-
Capitalizes the first letter of each word. For example: "john doe" will be "John
Doe".
Uppercase-
Converts all letters to uppercase. For example: "john doe" will be "JOHN DOE".
Lowercase-
Converts all letters to lowercase. For example: "JOHN DOE" will be "john doe".
None-
No transformations - the text is presented as it appears in the HTML code.
As an example, we will use a list of names. The names are all marked with <li> (list-
item). Let's say that we want names to be capitalized and headlines to be presented in
uppercase letters.
Try to take a look at the HTML code for this example and you will see that the text
actually is in lowercase.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Summary
In the last three Sections you have already learned several CSS properties, but there is
much more to CSS.
Section 6: Links
You can apply what you already learned in the previous Sections to links (i.e. change
colors, fonts, underline, etc). The new thing is that CSS allows you to define these
properties differently depending on whether the link is unvisited, visited, active, or
whether the cursor is on the link. This makes it possible to add fancy and useful effects to
your website. To control these effects you use so-called pseudo-classes.
What is a pseudo-class?
A pseudo-class allows you to take into account different conditions or events when
defining a property for an HTML tag.
Let's look at an example. As you know, links are specified in HTML with <a> tags. We
can therefore use a as a selector in CSS:
a {
color: blue;
}
A link can have different states. For example, it can be visited or not visited. You can use
pseudo-classes to assign different styles to visited and unvisited links.
a:link {
color: blue;
}
a:visited {
color: red;
}
Use a:link and a:visited for unvisited and visited links respectively. Links that are
active have the pseudo-class a:active and a:hover is when the cursor is on the link.
We will now go through each of the four pseudo-classes with examples and further
explanation.
Pseudo-class: link
The pseudo-class :link is used for links leading to pages that the user has not visited.
In the code example below, unvisited links will be light blue.
a:link {
color: #6699CC;
}
Pseudo-class: visited
The pseudo-class :visited is used for links leading to pages that the user has visited.
For example, the code below would make all visited links dark purple:
a:visited {
color: #660099;
}
Pseudo-class: active
a:active {
background-color: #FFFF00;
}
Pseudo-class: hover
The pseudo-class :hover is used when the mouse pointer hovers over a link.
This can be used to create interesting effects. For example, if we want our links to be
orange and be italicized when the cursor is pointed at them, our CSS should look like
this:
a:hover {
color: orange;
font-style: italic;
}
As you will remember from when we worked with Text, the spacing between letters can
be adjusted using the property letter-spacing. This can be applied to links for a special
effect:
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
When working with the previous sections, Text, we looked at the property text-
transform, which can switch between upper- and lowercase letters. This can also be
used to create an effect for links:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
The two examples gives you an idea about the almost endless possibilities for combining
different properties. You can create your own effects - give it a try!
That said, it is very simple to remove the underlining of links. As you will recall from the
text section of this handout the property text-decoration can be used to determine
whether text is underlined or not. To remove underlining, simply set the value of text-
decoration to none.
a {
text-decoration:none;
}
Alternatively, you can set text-decoration along with other properties for all four
pseudo-classes.
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
Summary
In this section you have learned about pseudo-classes, using some of the properties from
the previous sections. This should give you an idea of some the possibilities CSS
provides.
How can you color one particular headline differently than the other headlines on your
website? How can you group your links into different categories and give each category a
special style? These are just examples of questions we will answer in this Section.
Grouping elements with class
Let's say that we have two lists of links of different Star Wars movies separated by
trilogies. The HTML code could look like this:
Then we want the white wine links to be yellow, the red wine links to be red and the rest
of the existing links on the webpage to stay blue.
To achieve this, we divide the links into two categories. This is done by assigning a class
to each link using the attribute class.
a {
color: blue;
}
a.original {
color: #FFBB00;
}
a.prequel {
color: #800000;
}
As shown in the example you can define the properties for elements which belong to a
certain class by using .classname in the style sheet of the document.
What is special about the attribute id is that there can not be two elements in the same
document with the same id. Each id has to be unique. In other cases, you should use the
class attribute instead. Now, let us take a look at an example of a possible usage of id:
<h1>Chapter 1</h1>
...
<h2>Chapter 1.1</h2>
...
<h2>Chapter 1.2</h2>
...
<h1>Chapter 2</h1>
...
<h2>Chapter 2.1</h2>
...
<h3>Chapter 2.1.2</h3>
...
The above could be headings of any document split into chapters or paragraphs. It would
be natural to assign an id to each chapter as follows:
Let us say that the headline for chapter 1.2 must be in red. This can be done accordingly
with CSS:
#c1-2 {
color: red;
}
As shown in the example above you can define the properties in a specific element by
using #id in the stylesheet of the document.
Summary
In this Section we have learned that through the use of the selectors, class and id, you
are able to specify properties for specific elements.
In this Section, we will take a closer look at the use of <span> and <div> as exactly these
two HTML elements are of central importance with regards to CSS.
Lets us say we want what Mr. Franklin sees as the benefits of not sleeping your day away
emphasized in red. For that purpose, we can mark the benefits with <span>. Each span is
then added a class, which we can define in our style sheet:
span.benefit {
color:red;
}
Of course you may also use id to add style to the <span>-elements. Just as long as you
remember, that you'll have to apply a unique id to each of the three <span>-elements, as
you learned in the previous Section.
<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>
And in our style sheet, we can utilize the grouping in the exact same way as above:
#democrats {
background:blue;
}
#republicans {
background:red;
}
In the examples above, we have only used <div> and <span> on very simple things such
as text and background colors. Both elements have the potential to do much more
advanced things. However this will not be introduced in this Section. We will look into
these later in this tutorial.
Summary
In the last two sections, you have learned about the selectors id and class and the
elements span and div.
You should now be able to group and identify, more or less, all parts of a document,
which is a big step in the direction of mastering CSS.
Section 9: The box model
The box model in CSS describes the boxes which are being generated for HTML-
elements. The box model also contains detailed options regarding adjusting margin,
border, padding and content for each element. The diagram below shows how the box
model is constructed:
The illustration above might seem pretty theoretical to look at, so let's try to use the
model in an actual case with a headline and some text. The HTML for our example is
(from the Universal Declaration of Human Rights):
<h1>Article 1:</h1>
By adding some color and font-information the example could be presented as follows:
The example contains two elements: <h1> and <p>. The box model for the two elements
can be illustrated as follows:
Even though it may look a bit complicated, the illustration shows how each HTML-
element is surrounded by boxes. Boxes which we can adjust using CSS.
Summary
In this section you have been introduced to the box model. In the following three sections
we will take a closer look at how to create and control elements in the box model.
As the first example, we will look at how you define margins for the document itself i.e.
for the element <body>. The illustration below shows how we want the margins in our
pages to be.
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
body {
margin: 100px 40px 10px 70px;
}
You can set the margins in the same way on almost every element. For example, we can
choose to define margins for all of our text paragraphs marked with <p>:
body {
margin: 100px 40px 10px 70px;
}
p {
margin: 5px 50px 5px 50px;
}
The usage of padding can be illustrated by looking at a simple example where all
headlines have background colors:
h1 {
background: yellow;
}
h2 {
background: orange;
}
By defining padding for the headlines, you change how much filling there will be around
the text in each headline:
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
Summary
You are now on your way to master the box model in CSS. In the next section, we will
take a closer look at how to set borders in different colors and how to shape your
elements.
Section 11: Borders
Borders can be used for many things, for example as a decorative element or to underline
a separation of two things. CSS gives you endless options when using borders in your
pages.
• border-width
• border-color
• border-style
• border
The property border-color defines which color the border has. The values are the normal
color-values for example "#123456", "rgb(123,123,123)" or "yellow" .
The values none or hidden can be used if you do not want any border.
Examples of defining borders
The three properties described above can be put together by each element and thereby
produce different borders. To illustrate this, we will take a look at a document where we
define different borders for <h1>, <h2>, <ul> and <p>. The result may not be that pretty
but it illustrates some of the many possibilities:
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}
ul {
border-width: thin;
border-style: solid;
border-color: orange;
}
It is also possible to state special properties for top-, bottom-, right- or left borders. The
following example shows you how:
h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}
Compilation [border]
As it is also the case for many other properties, you can compile many properties into one
using border. Let us take a look at an example:
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
p {
border: 1px solid blue;
}
Summary
In this section you have learned about the endless options CSS gives you when using
borders in your pages.
In the next section, we will look at how you define the dimensions in the box model -
height and width.
Section 12: Height and width
Up until now, we have not cared much about the dimensions of the elements we have
worked with. In this Section, we will take a look at how you easily can define the height
and width of an element.
• width
• height
The simple example below provides us with a box wherein text can be typed:
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
Summary
The past four sections have given you an introduction to the box model in CSS. As you
can probably see, the box model gives you many new options. You might have been
using tables in HTML to create your layouts until now, but with CSS and the box model
you should now be able to achieve elegant layouts more precisely and in accordance with
the recommendations of W3C.
Section 13: Floating elements (floats)
An element can be floated to the right or to left by using the property float. That is to
say that the box with its contents either floats to the right or to the left in a document (or
the containing box). The following figure illustrates the principle:
If we for example would like to have a text wrapping around a picture, the result would
be like this:
How is it done?
The HTML code for the example above, look as follows:
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
#picture {
float:left;
width: 100px;
}
<div id="column1">
<p>Haec disserens qua de re agatur
et in quo causa consistat non videt...</p>
</div>
<div id="column2">
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
</div>
<div id="column3">
<p>nam nihil esset in nostra
potestate si res ita se haberet...</p>
</div>
Now the desired width of the columns is set to e.g. 33%, and then you simply float each
column to the left by defining the property float:
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}
By default, the subsequent elements are moved up to fill the available space which will
be freed when a box is floated to a side. Look at the example above wherein the text is
automatically moved up beside the picture of Bill Gates.
The property clear can assume the values left, right, both or none. The principle is, if
clear, for example, is set to both for a box, the top margin border of this box will always
be under the lower margin border for possible floating boxes coming from above.
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<h1>Bill Gates</h1>
To avoid the text from floating up next to the picture, we can add the following to our
CSS:
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}
Summary
Floats are useful in many situations and will often be used together with positioning. In
the next section we will take a closer look at how to position a box, either relative or
absolute.
Section 14: Positioning of elements
With CSS positioning, you can place an element exactly where you want it on your page.
Together with floats, positioning gives you many possibilities to create an advanced and
precise layout.
The principle behind CSS positioning is that you can position any box anywhere in the
system of coordinates.
Let's say we want to position a headline. By using the box model the headline will appear
as follows:
If we want this headline positioned 100px from the top of the document and 200px from
the left of the document, we could type the following in our CSS:
h1 {
position:absolute;
top: 100px;
left: 200px;
}
As you can see, positioning with CSS is a very precise technique to place elements. It is
much easier than trying to use tables, transparent images or anything else.
Absolute positioning
An element which is positioned absolute does not obtain any space in the document. This
means that it does not leave an empty space after being positioned.
To position an element absolutely, the position property is set as absolute. You can
subsequently use the properties left, right, top, and bottom to place the box.
As an example of absolute positioning, we choose to place 4 boxes in each corner of the
document:
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
Relative positioning
To position an element relatively, the property position is set as relative. The
difference between absolute and relative positioning is how the position is being
calculated.
The position for an element which is relatively positioned is calculated from the
original position in the document. That means that you move the element to the right,
to the left, up or down. This way, the element still obtains a space in the document after it
is positioned.
As an example of relative positioning, we can try to position three pictures relatively to
their original position on the page. Notice how the pictures leave empty spaces at their
original positions in the document:
#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}
Summary
In the previous two sections, you learned how to float and position elements. These two
methods give you many opportunities to construct your pages without having to use some
of the old-fashioned methods with tables and transparent images in HTML. Use CSS
instead. It is more precise, gives you more advantages, and it is also far easier to
maintain.
For that purpose, you can assign each element a number (z-index). The system is that an
element with a higher number overlaps an element with a lower number.
Let us say we are playing poker and have a royal flush. Our hand can be presented in a
way where each card has got a z-index:
In this case, the numbers follow on another (1-5) but the same result can be obtained by
using 5 different numbers. The important thing is the chronological sequence of the
numbers (the order).
#ten_of_diamonds {
position: absolute;
left: 100px;
bottom: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
bottom: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
bottom: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
bottom: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
bottom: 160px;
z-index: 5;
}
The method is relatively simple but the possibilities are several. You can place images on
text or text above text etc.
Summary
Layers can be used in many situations. For example, try to use z-index to create effects
in headlines instead of creating these as graphics. For one thing, it is faster to load text
and for another, it provides a potentially better ranking in search engines.
If you have been working just a bit with web design, you probably know that there can be
a big differences in how a webpage is presented across different browsers. It can be very
frustrating and time-consuming to create a webpage which can be viewed in Mozilla,
Internet Explorer, Opera and all the rest of the existing browsers.
The idea of having standards is to agree upon a common denominator on how to use web
technologies. This means that by observing the standards, a webdeveloper has a certainty
that what he or she does will work in a more appropriate manner across different
platforms. We therefore recommend that you back up the work carried out by the
W3C and validate your CSS in order to observe the standard.
CSS validator
To make it easier to observe the CSS standard, W3C has made a so-called validator
which reads your stylesheet and returns a status listing errors and warnings, if your CSS
does not validate.