What is CSS and how does it work?

8/9/2019 What is CSS and how does it work?

1/42

Section 1: What is CSS?

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.

CSS is an acronym forCascading Style Sheets.

What can I do with CSS?

CSS is a style language that defines layout of HTML documents. For example, CSS

covers fonts, colours, margins, lines, height, width, background images, advancedpositions and many other things. Just wait and see!

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.

What is the difference between CSS and HTML?

HTML is used to structure content. CSS is used for formatting structured content.

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 totext. An author could mark his text by stating "this is a headline" or "this is a paragraph"

using HTML tags such as and

.

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 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 were

increasingly being misused to layout pages instead of adding structure to text. Many new

layout tags such as were only supported by one type of browser. "You needbrowser 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 alot easier.


2/42

Which benefits will CSS give me?

CSS was a revolution in the world of web design. The concrete benefits of CSS include:

control layout of many documents from one single style sheet;

more precise control of layout; apply different layout to different media-types (screen, print, etc.);

numerous advanced and sophisticated techniques.

Section 2: How does CSS work?

In this Section you will learn how to make your first style sheet. You will get to know

about the basic CSS model and which codes are necessary to use CSS in an HTML

document.

Many of the properties used in Cascading Style Sheets (CSS) are similar to those ofHTML. 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.

The basic CSS syntax

Let's say we want a nice red color as the background of a webpage:

Using HTML we could have done it like this:

With CSS the same result can be achieved like this:

body {background-color: #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:


3/42

But where do you put the CSS code? This is exactly what we will go over now.

Applying CSS to an HTML document

There are three ways you can apply CSS to an HTML document. These methods are all

outlined below. We recommend that you focus on the third method i.e. external.

Method 1: In-line (the attribute style)

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:

Example

This is a red page

Method 2: Internal (the tag style)

Another way is to include the CSS codes using the HTML tag . For example like

this:

Example

body {background-color: #FF0000;}

This is a red page

Method 3: External (link to a style sheet)

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:


4/42


5/42

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

My document

My first stylesheet

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!

Section 3: Colors and backgrounds

In this Section you will learn how to apply colors and background colors to yourwebsites. We will also look at advanced methods to position and control background

images. The following CSS properties will be explained:

color

background-color

background-image

background-repeat

background-attachment background-position

background

Foreground color: the 'color' property

The color property describes the foreground color of an element.
http://html.net/tutorials/css/lesson3.asp#s1http://html.net/tutorials/css/lesson3.asp#s2http://html.net/tutorials/css/lesson3.asp#s3http://html.net/tutorials/css/lesson3.asp#s4http://html.net/tutorials/css/lesson3.asp#s5http://html.net/tutorials/css/lesson3.asp#s6http://html.net/tutorials/css/lesson3.asp#s7http://html.net/tutorials/css/lesson3.asp#s1http://html.net/tutorials/css/lesson3.asp#s2http://html.net/tutorials/css/lesson3.asp#s3http://html.net/tutorials/css/lesson3.asp#s4http://html.net/tutorials/css/lesson3.asp#s5http://html.net/tutorials/css/lesson3.asp#s6http://html.net/tutorials/css/lesson3.asp#s7


6/42


7/42

To insert the image of the butterfly as a background image for a web page, simply applythe background-image property to 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 toimages 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") .

Repeat background image [background-repeat]

In the example above, did you notice that by default the butterfly was repeated both

horizontally and vertically to cover the entire screen? The property background-repeat

controls this behaviour.

The table below outlines the four different values forbackground-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


8/42

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;}


}

Lock background image [background-attachment]

The property background-attachment specifies whether a background picture is fixed

or scrolls along with the containing element.

A fixed background image will not move with the text when a reader is scrolling thepage, whereas an unlocked background image will scroll along with the text of the web

page.

The table below outlines the two different values forbackground-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;}


}


9/42

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 ofbackground-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 thebrowser 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. Themodel below illustrates the system:

The table below gives some examples.

Value Description

background-position: 2cm2cm

The image is positioned 2 cm from the left and 2 cm

down the page

background-position: 50%25%

The image is centrally positioned and one fourth downthe page

background-position: topright

The image is positioned in the top-right corner of the

page


10/42

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;}


}

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.

For example, look at these five lines:

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:

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

The list of order is as follows:

[background-color] | [background-image] | [background-repeat] | [background-

attachment] | [background-position]

If a property is left out, it will automatically be set to its default value. For example, ifbackground-attachment and background-position are taken out of the example:

background: #FFCC66 url("butterfly.gif") no-repeat;


11/42

These two properties that are not specified would merely be set to their default values

which as you know are scroll and top left.

Summary

In this Section, you have already learned new techniques that would not be possible usingHTML. The fun continues in the next Sectionwhich 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 canonly 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

Font family [font-family]

The property font-family is used to set a prioritized list of fonts to be used to display a

given element or web page. If the first font on the list is not installed on the computerused to access the site, the next font on the list will be tried until a suitable font is found.

There are two types of names used to categorize fonts: family-names and generic

families. The two terms are explained below.

Family-nameExamples of a family-name (often known as "font") can e.g. be "Arial", "Times

New Roman" or "Tahoma".

Generic familyGeneric 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".
http://html.net/tutorials/css/lesson4.asphttp://html.net/tutorials/css/lesson4.asphttp://html.net/tutorials/css/lesson4.asp#s1http://html.net/tutorials/css/lesson4.asp#s2http://html.net/tutorials/css/lesson4.asp#s3http://html.net/tutorials/css/lesson4.asp#s4http://html.net/tutorials/css/lesson4.asp#s5http://html.net/tutorials/css/lesson4.asp#s6http://html.net/tutorials/css/lesson4.asphttp://html.net/tutorials/css/lesson4.asp#s1http://html.net/tutorials/css/lesson4.asp#s2http://html.net/tutorials/css/lesson4.asp#s3http://html.net/tutorials/css/lesson4.asp#s4http://html.net/tutorials/css/lesson4.asp#s5http://html.net/tutorials/css/lesson4.asp#s6


12/42

The difference can also be illustrated like this:

When you list fonts for your web site, you naturally start with the most preferred fontfollowed 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.

An example of a prioritized list of fonts could look like this:

h1 {font-family: arial, verdana, sans-serif;}h2 {font-family: "Times New Roman", serif;}

Headlines marked with 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-seriffamily will be used to show the headlines.

Notice how the font name "Times New Roman" contains spaces and therefore is listedusing quotation marks.

Font style [font-style]

The property font-style defines the chosen font either in normal, italic oroblique. In

the example below, all headlines marked with will be shown in italics.

h1 {font-family: arial, verdana, sans-serif;}h2 {font-family: "Times New Roman", serif; font-style: italic;}


13/42

Font variant [font-variant]

The property font-variant is used to choose between normal orsmall-caps variants of

a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case)instead of lower case letters. Confused? Take a look at these examples:

Iffont-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;}

Font weight [font-weight]The property font-weight describes how bold or "heavy" a font should be presented. A

font can either be normal orbold. Some browsers even support the use of numbersbetween 100-900 (in hundreds) to describe the weight of a font.

p {font-family: arial, verdana, sans-serif;}td {font-family: arial, verdana, sans-serif; font-weight: bold;}

Font size [font-size]

The size of a font is set by the property font-size.

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 thefont 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 unitssuch as '%' or 'em'.


14/42

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 {font-style: italic;font-weight: bold;font-size: 30px;font-family: arial, sans-serif;

}

Using the short hand property, the code can be simplified:

p {font: italic bold 30px arial, sans-serif;

}

The order of values forfont is:

font-style | font-variant | font-weight | font-size | font-family

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, youcan 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 Sectionyou 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
http://html.net/tutorials/css/lesson5.asp#s1http://html.net/tutorials/css/lesson5.asp#s2http://html.net/tutorials/css/lesson5.asp#s3http://html.net/tutorials/css/lesson5.asp#s4http://html.net/tutorials/css/lesson5.asp#s5http://html.net/tutorials/css/lesson5.asp#s1http://html.net/tutorials/css/lesson5.asp#s2http://html.net/tutorials/css/lesson5.asp#s3http://html.net/tutorials/css/lesson5.asp#s4http://html.net/tutorials/css/lesson5.asp#s5


15/42

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 isapplied to all text paragraphs marked with

:

p {text-indent: 30px;

}

Text alignment [text-align]

The CSS property text-align corresponds to the attribute align used in old versions of

HTML. Text can either be aligned to the left, to the right orcentred. In addition to this,

the valuejustify will stretch each line so that both the right and left margins are straight.

You know this layout from for example newspapers and magazines.

In the example below the text in table headings is aligned to the right while thetable data are centred. In addition, normal text paragraphs are justified:

th {text-align: right;

}

td {text-align: center;

}

p {

text-align: justify;}

Text decoration [text-decoration]

The property text-decoration makes it is possible to add different "decorations" or

"effects" to text. For example, you can underline the text, have a line through or above

the text, etc. In the following example, are underlined headlines, are headlines

with a line above the text and are headlines with a line though the text.

h1 {text-decoration: underline;

}

h2 {text-decoration: overline;

}

h3 {text-decoration: line-through;

}


16/42

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 of3px between the letters in a text paragraph

and 6px between letters in

headlines the code below could be used.

h1 {letter-spacing: 6px;

}

p {letter-spacing: 3px;

}

Text transformation [text-transform]

The text-transform property controls the capitalization of a text. You can choose tocapitalize, use uppercase orlowercase regardless of how the original text is looks in the

HTML code.

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 (list-

item). Let's say that we want names to be capitalized and headlines to be presented inuppercase 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;

}


17/42

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 theseproperties 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 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.


18/42

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

The pseudo-class :active is used for links that are active.

This example gives active links a yellow background color:

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;

}

Example 1: Effect when the cursor is over a link

It is particular popular to create different effects when the cursor is over a link. We will

therefore look at a few extra examples related to the pseudo-class :hover.


19/42

Example 1a: Spacing between letters

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;

}

Example 1b: UPPERCASE and lowercase

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!

Example 2: Remove underline of linksA frequently asked question is how to remove the underlining of links?

You should consider carefully whether it is necessary to remove the underlining as it

might decrease usability of your website significantly. People are used to blue

underlined links on web pages and know that they can click on them. Even my mum

knows that! If you change the underlining and color of links there is a good chance thatusers will get confused and therefore not get the full benefit of the content on your

website.

That said, it is very simple to remove the underlining of links. As you will recall from thetext 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 oftext-

decoration to none.

a {text-decoration:none;

}


20/42

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.

Section 7: Identification and grouping of

elements (class and id)

Sometimes you want to apply a special style to a particular element or a particular groupof elements. In this Section, we will take a closer look at how you can use class and id

to specify properties for selected elements.

How can you color one particular headline differently than the other headlines on yourwebsite? 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.


21/42

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:

Star Wars Original Trilogy:

A New HopeThe Empire Strikes BackReturn of the Jedi

Star Wars Prequel Trilogy:
The Phantom MenaceAttack of the ClonesRevenge of the Sith
Then we want the white wine links to be yellow, the red wine links to be red and the restof 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.

Let us try to specify some classes in the example above:

Star Wars Original Trilogy:

A New HopeThe Empire Strikes BackReturn of the Jedi

Star Wars Prequel Trilogy:
The Phantom MenaceAttack of the ClonesRevenge of the Sith


22/42

We can hereafter define special properties for links belonging to original and prequel,

respectively.

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 acertain class by using .classname in the style sheet of the document.

Identification of element using idIn addition to grouping elements, you might need to identify one unique element. This is

done by using the attribute id.

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 ofid:

Chapter 1...Chapter 1.1...Chapter 1.2...Chapter 2...Chapter 2.1...Chapter 2.1.2...


23/42

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:

Chapter 1...Chapter 1.1...

Chapter 1.2...Chapter 2...Chapter 2.1...Chapter 2.1.2...

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, youare able to specify properties for specific elements.

Section 8: Grouping of elements (span

and div)

The elements and are used to group and structure a document and will

often be used together with the attributes class and id.

In this Section, we will take a closer look at the use of and as exactly thesetwo HTML elements are of central importance with regards to CSS.

Grouping with

Grouping with
http://html.net/tutorials/css/lesson8.asp#s1http://html.net/tutorials/css/lesson8.asp#s1http://html.net/tutorials/css/lesson8.asp#s1http://html.net/tutorials/css/lesson8.asp#s2http://html.net/tutorials/css/lesson8.asp#s2http://html.net/tutorials/css/lesson8.asp#s2http://html.net/tutorials/css/lesson8.asp#s1http://html.net/tutorials/css/lesson8.asp#s2


24/42

Grouping with

The element is what you could call a neutral element which does not add

anything to the document itself. But with CSS, can be used to add visual features

to specific parts of text in your documents.

An example of this could be this Benjamin Franklin quotation:

Early to bed and early to risemakes a man healthy, wealthy and wise.

Lets us say we want what Mr. Franklin sees as the benefits of not sleeping your day awayemphasized in red. For that purpose, we can mark the benefits with . Each span is

then added a class, which we can define in our style sheet:

Early to bed and early to rise

makes a manhealthy,wealthyandwise.

The CSS belonging to it:

span.benefit {color:red;

}

Of course you may also use id to add style to the -elements. Just as long as you

remember, that you'll have to apply a unique id to each of the three -elements, as

you learned in the previous Section.

Grouping with

Whereas is used within a block-level element as seen in the previous example,

is used to group one or more block-level elements.


25/42

Aside from this difference, the grouping with works in more or less the same way.

Let us take a look at an example with two lists of U.S. presidents divided into their

political affiliations:

Franklin D. Roosevelt

Harry S. TrumanJohn F. KennedyLyndon B. JohnsonJimmy CarterBill Clinton

Dwight D. EisenhowerRichard NixonGerald FordRonald ReaganGeorge BushGeorge W. Bush

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 and 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 intothese 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.


26/42

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 box model in CSS

The illustration above might seem pretty theoretical to look at, so let's try to use themodel in an actual case with a headline and some text. The HTML for our example is

(from the Universal Declaration of Human Rights):

Article 1:

All human beings are born freeand equal in dignity and rights.They are endowed with reason and conscienceand should act towards one another in aspirit of brotherhood

By adding some color and font-information the example could be presented as follows:


27/42

The example contains two elements: and

. 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.

Section 10: Margin and paddingIn the previous Section you were introduced to the box model. In this Section, we will

look at how you can change the presentation of elements by setting the margin and

padding properties.

Set the margin in an element

Set the padding in an element
http://html.net/tutorials/css/lesson10.asp#s1http://html.net/tutorials/css/lesson10.asp#s2http://html.net/tutorials/css/lesson10.asp#s1http://html.net/tutorials/css/lesson10.asp#s2


28/42

Set the margin in an element

An element has four sides: right, left, top and bottom. The margin is the distance from

each side to the neighboring element (or the borders of the document). See also thediagram in the box model section for an illustration.

As the first example, we will look at how you define margins for the document itself i.e.

for the element . The illustration below shows how we want the margins in ourpages to be.

The CSS code for this would look as follow:

body {margin-top: 100px;margin-right: 40px;margin-bottom: 10px;

margin-left: 70px;}

Or you could choose a more elegant compilation:

body {margin: 100px 40px 10px 70px;

}


29/42

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

:

body {margin: 100px 40px 10px 70px;

}

p { margin: 5px 50px 5px 50px;}

Set padding in an element

Padding can also be understood as "filling". This makes sense as padding does not affectthe distance of the element to other elements but only defines the inner distance between

the border and the content of the element.

The usage of padding can be illustrated by looking at a simple example where allheadlines 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.


30/42

Section 11: Borders

Borders can be used for many things, for example as a decorative element or to underlinea separation of two things. CSS gives you endless options when using borders in your

pages.

border-width

border-color

border-style

border

The width of borders [border-width]

The width of borders is defined by the property border-width, which can obtain the

values thin, medium, and thick, or a numeric value, indicated in pixels. The figure below

illustrates the system:

The color of borders [border-color]

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" .

Types of borders [border-style]

There are different types of borders to choose from. Below are shown 8 different types ofborders as Internet Explorer 5.5 interprets them. All examples are shown with the color

"gold" and the thickness "thick" but can naturally be shown in other colors and

thicknesses.

The values none or hidden can be used if you do not want any border.
http://html.net/tutorials/css/lesson11.asp#s1http://html.net/tutorials/css/lesson11.asp#s2http://html.net/tutorials/css/lesson11.asp#s3http://html.net/tutorials/css/lesson11.asp#s5http://html.net/tutorials/css/lesson11.asp#s1http://html.net/tutorials/css/lesson11.asp#s2http://html.net/tutorials/css/lesson11.asp#s3http://html.net/tutorials/css/lesson11.asp#s5


31/42

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 wedefine different borders for, , and

. 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;

}


32/42

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;

}

Can be compiled into:

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.


33/42

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 heightand width of an element.

width height

Setting the width [width]

With the width-property, you can define a certain width of an element.

The simple example below provides us with a box wherein text can be typed:

div.box {

width: 200px;border: 1px solid black;background: orange;

}

Setting the height [height]

In the example above notice how the height of the box is set by the content of the box.You can affect the height of an element with the property height. As an example let us

try to make the box in the example 500px high:

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 youcan 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 modelyou should now be able to achieve elegant layouts more precisely and in accordance withthe recommendations of W3C.
http://html.net/tutorials/css/lesson12.asp#s1http://html.net/tutorials/css/lesson12.asp#s2http://html.net/tutorials/css/lesson12.asp#s1http://html.net/tutorials/css/lesson12.asp#s2


34/42

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:

causas naturales et antecedentes,idciro etiam nostrarum voluntatum...


35/42

To get the picture floating to the left and the text to surround it, you only have to define

the width of the box which surrounds the picture and thereafter set the property float to

left:

#picture {

float:left;width: 100px;

}

Another example: columns

Floats can also be used for columns in a document. To create the columns, you simply

have to structure the desired columns in the HTML-code with as follows:

Haec disserens qua de re agaturet in quo causa consistat non videt...


nam nihil esset in nostrapotestate si res ita se haberet...

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%;

}

float can be set as eitherleft, right ornone.


36/42

The property clear

The clear property is used to control how the subsequent elements of floated elements in

a document shall behave.

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 ornone. 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.

Bill Gates


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 orabsolute.


37/42

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 andprecise layout.

The following will be discussed in this Section:

The principle behind CSS positioning

Absolute positioning

Relative positioning

The principle behind CSS positioning

Imagine a browser window as a system of coordinates:

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 appearas 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:
http://html.net/tutorials/css/lesson14.asp#s1http://html.net/tutorials/css/lesson14.asp#s2http://html.net/tutorials/css/lesson14.asp#s3http://html.net/tutorials/css/lesson14.asp#s1http://html.net/tutorials/css/lesson14.asp#s2http://html.net/tutorials/css/lesson14.asp#s3


38/42

h1 {position:absolute;top: 100px;left: 200px;

}

The result will be as follows:

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.


39/42

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 theoriginal 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 itis positioned.


40/42

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 someof 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.

Section 15: Layer on layer with z-index

(Layers)

CSS operates in three dimensions - height, width and depth. We have seen the first two

dimensions in previous Sections. In this Section, we will learn how to let different

elements become layers. In short, this means the order of which the elements overlap oneanother.

For that purpose, you can assign each element a number (z-index). The system is that anelement 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:


41/42

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).

The code in the card example could look like this:

#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;

}


42/42

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.

Section 16: Web-standards and validation

W3C is the World Wide Web Consortium, which is an independent organization that

manages code standards on the web (e.g. HTML, CSS, XML and others). Microsoft, The

Mozilla Foundation and many others are a part of W3C and agree upon the futuredevelopments of the standards.

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 certaintythat 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 theW3C 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.
http://www.w3.org/http://www.w3.org/TR/REC-CSS2/http://www.w3.org/TR/REC-CSS2/http://jigsaw.w3.org/css-validator/http://www.w3.org/http://www.w3.org/TR/REC-CSS2/http://jigsaw.w3.org/css-validator/

Documents

What is CSS and how does it work?