CSS Tutorial

CSS Tut or i al
CSS Tut or i al - Tabl e of cont ent s

I nt roduct ion
A brief int roduct ion t o t he t ut orial and what you can expect t o learn.
Lesson 1: What is CSS?
A lit t le on why CSS came in t o t he world, and why it is clever t o choose CSS over
HTML for layout and design.
Lesson 2: How does CSS work?
Learn t he basic synt ax of CSS and have t o creat e your first st ylesheet .
Lesson 3: Colors and backgrounds
Learn how t o apply colors and background colors t o your websit e and how t o use
background images.
Lesson 4: Font s
I n t his lesson you will learn about font s and how t hey are applied using CSS.
Lesson 5: Text
I n t his lesson you will be int roduced t o t he amazing opport unit ies CSS gives you t o
add layout t o t ext .
Lesson 6: Links
About how you can add fancy and useful effect s t o links and work wit h pseudo-
classes.
Lesson 7: I dent ificat ion and grouping of element s (class and id)
A closer look at how you can use class and id t o specify propert ies for select ed
element s.
Lesson 8: Grouping of element s (span and div)
A closer look at t he use of span and div as exact ly t hese t wo HTML element s are of
cent ral import ance wit h regards t o CSS
Lesson 9: The box model
The box model in CSS describes t he boxes which are being generat ed for HTML-
element s.
Lesson 10: The box model - margin & padding
Change t he present at ion of element s by set t ing t he margin and padding propert ies.
Lesson 11: The box model - borders
Learn about t he endless opt ions when using borders in your pages wit h CSS
Lesson 12: The Box model - Height and widt h
I n t his lesson, we will t ake a look at how you easily can define t he height and
widt h of an element .
Lesson 13: Float ing element s (float s)
An element can be float ed t o t he right or t o left by using t he propert y float
Lesson 14: Posit ioning of element s
Wit h CSS posit ioning, you can place an element exact ly where you want it on your
page.
Lesson 15: Layer on layer wit h z-index (Layers)
I n t his lesson, we will learn how t o let different element s overlapping one anot her
using layers.
Crcaicd Dy www.clooliuiorials.llogsoi.in
Conicni Downloadcd Fron www.Iinl.nci 1
Lesson 16: Web-st andards and validat ion
This last lesson is about t he W3C-st andards and how t o check your CSS is correct .
I nt r oduct i on - Fr ee CSS Tut or i al
Cascading St yle Sheet s (CSS) is a fant ast ic t ool t o add layout t o your
websit es. I t can save you a lot of t ime and it enables you t o design
websit es in a complet ely new way. CSS is a must for anyone working wit h
web design.
This t ut orial will get you st art ed wit h CSS in j ust a few hours. I t is easy t o
underst and and it will t each you all t he sophist icat ed t echniques.
Learning CSS is fun. As you go along t hrough t he t ut orial, remember t o t ake enough
t ime t o properly experiment wit h what you learn in each lesson.
Using CSS r equi r es basi c exper i ence wi t h HTML. I f you are not familiar wit h HTML,
please st art wit h our HTML t ut orial before moving on t o CSS.
Whi ch sof t war e do I need?
Please avoid using soft ware such as Front Page, DreamWeaver or Word wit h t his
t ut orial. Advanced soft ware will not help you learn CSS. I nst ead, it will limit you and
slow down your learning curve significant ly.
All you need is a free and simple t ext edit or.
For example, Microsoft Windows comes wit h a program called Not epad. I t is usually
locat ed in Accessories in t he st art menu under Programs. Alt ernat ively, you can use a
similar t ext edit or e.g. Pico for Linux or Simple Text for Macint osh.
A simple t ext edit or is ideal for learning HTML and CSS because it doesn't affect or
change t he codes you t ype. That way, your successes and errors can only be at t ribut ed
t o yourself - not t he soft ware.
You can use any browser wit h t his t ut orial. We encourage you t o always keep your
browser updat ed and use t he lat est version.
A browser and a simple t ext edit or is all you need.
Let 's get st art ed!
Lesson 1: What i s CSS?
Maybe you already heard about CSS wit hout really knowing what it is. I n t his lesson you
will learn more about what CSS is and what it can do for you.
CSS is an acronym for Cascading St yle Sheet s.
What can I do wi t h CSS?
CSS is a st yle language t hat defines layout of HTML document s. For example, CSS
covers font s, colours, margins, lines, height , widt h, background images, advanced
posit ions and many ot her t hings. Just wait and see!
HTML can be (mis-)used t o add layout t o websit es. But CSS offers more opt ions and is
more accurat e and sophist icat ed. CSS is support ed by all browsers t oday.
Aft er only a few lessons of t his t ut orial you will be able t o make your own st yle sheet s
using CSS t o give your websit e a new great look.
What i s t he di f f er ence bet ween CSS and HTML?
HTML is used t o st ruct ure cont ent . CSS is used for format t ing st ruct ured cont ent .
Okay, it sounds a bit t echnical and confusing. But please cont inue reading. I t will all
make sense t o you soon.
Back in t he good old days when Madonna was a virgin and a guy called Tim Berners
Lee invent ed t he World Wide Web, t he language HTML was only used t o add st ruct ure
t o t ext . An aut hor could mark his t ext by st at ing "t his is a headline" or "t his is a
paragraph" using HTML t ags such as <h1> and <p>.
As t he Web gained popularit y, designers st art ed looking for possibilit ies t o add layout t o
online document s. To meet t his demand, t he browser producers (at t hat t ime Net scape
and Microsoft ) invent ed new HTML t ags such as for example <font> which differed from
t he original HTML t ags by defining layout - and not st ruct ure.
This also led t o a sit uat ion where original st ruct ure t ags such as < t able> were
increasingly being misused t o layout pages inst ead of adding st ruct ure t o t ext . Many
new layout t ags such as < blink> were only support ed by one t ype of browser. "You
need browser X t o view t his page" became a common disclaimer on web sit es.
CSS was invent ed t o remedy t his sit uat ion by providing web designers wit h
sophist icat ed layout opport unit ies support ed by all browsers. At t he same t ime,
separat ion of t he present at ion st yle of document s from t he cont ent of document s,
makes sit e maint enance a lot easier.
Whi ch benef i t s wi l l CSS gi ve me?
CSS was a revolut ion in t he world of web design. The concret e benefit s of CSS include:
cont rol layout of many document s from one single st yle sheet ;
more precise cont rol of layout ;
apply different layout t o different media-t ypes (screen, print , et c.);
numerous advanced and sophist icat ed t echniques.
I n t he next lesson we t ake a closer look at how CSS act ually works and how you get
st art ed.
Lesson 2: How does CSS wor k?
I n t his lesson you will learn how t o make your first st yle sheet . You will get t o know
about t he basic CSS model and which codes are necessary t o use CSS in an HTML
document .
Many of t he propert ies used in Cascading St yle Sheet s (CSS) are similar t o t hose of
HTML. Thus, if you are used t o use HTML for layout , you will most likely recognize
many of t he codes. Let us look at a concret e example.
The basi c CSS synt ax
Let 's say we want a nice red color as t he background of a webpage:
Using HTML we could have done it like t his:
<body bgcolor="#FF0000">
Wit h CSS t he same result can be achieved like t his:
body {background-color: #FF0000;}
As you will not e, t he codes are more or less ident ical for HTML and CSS. The above
example also shows you t he fundament al CSS model:
But where do you put t he CSS code? This is exact ly what we will go over now.
Appl yi ng CSS t o an HTML document
There are t hree ways you can apply CSS t o an HTML document . These met hods are all
out lined below. We recommend t hat you focus on t he t hird met hod i.e. ext ernal.
Met hod 1: I n- l i ne ( t he at t r i but e st yl e)
One way t o apply CSS t o HTML is by using t he HTML at t ribut e style. Building on t he
above example wit h t he red background color, it can be applied like t his:
<html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>
Met hod 2: I nt er nal ( t he t ag st yl e)
Anot her way is t o include t he CSS codes using t he HTML t ag <style>. For example like
t his:
<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>
Met hod 3: Ext er nal ( l i nk t o a st yl e sheet )
The recommended met hod is t o link t o a so-called ext ernal st yle sheet . Throughout t his
t ut orial we will use t his met hod in all our examples.
An ext ernal st yle sheet is simply a t ext file wit h t he ext ension .css. Like any ot her file,
you can place t he st yle sheet on your web server or hard disk.
For example, let 's say t hat your st yle sheet is named st yl e.css and is locat ed in a
folder named st yl e. The sit uat ion can be illust rat ed like t his:
The t rick is t o creat e a link from t he HTML document (default .ht m) t o t he st yle sheet
(st yle.css). Such link can be creat ed wit h one line of HTML code:
<link rel="stylesheet" type="text/css" href="style/style.css" />
Not ice how t he pat h t o our st yle sheet is indicat ed using t he at t ribut e href.
The line of code must be insert ed in t he header sect ion of t he HTML code i.e. bet ween
t he <head> and </head> t ags. Like t his:
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
This link t ells t he browser t hat it should use t he layout from t he CSS file when
displaying t he HTML file.
The really smart t hing is t hat several HTML document s can be linked t o t he same st yle
sheet . I n ot her words, one CSS file can be used t o cont rol t he layout of many HTML
document s.
This t echnique can save you a lot of work. I f you, for example, would like t o change t he
background color of a websit e wit h 100 pages, a st yle sheet can save you from having
t o manually change all 100 HTML document s. Using CSS, t he change can be made in a
few seconds j ust by changing one code in t he cent ral st yle sheet .
Let 's put what we j ust learned int o pract ice.
Tr y i t your sel f
Open Not epad (or what ever t ext edit or you use) and creat e t wo files - an HTML file and
a CSS file - wit h t he following cont ent s:
def aul t .ht m
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>My first stylesheet</h1>
</body>
</html>
st yl e.css
body {
background-color: #FF0000;
}
Now place t he t wo files in t he same folder. Remember t o save t he files wit h t he right
ext ensions (respect ively ".ht m" and ".css")
Open def aul t .ht m wit h your browser and see how t he page has a red background.
Congrat ulat ions! You have made your first st yle sheet !
Hurry on t o t he next lesson where we will t ake a look at some of t he propert ies in CSS.
Lesson 3: Col or s and backgr ounds
I n t his lesson you will learn how t o apply colors and background colors t o your
websit es. We will also look at advanced met hods t o posit ion and cont rol background
images. The following CSS propert ies will be explained:
color
background-color
background-image
background-repeat
background-at t achment
background-posit ion
background
For egr ound col or : t he ' col or ' pr oper t y
The color propert y describes t he foreground color of an element .
For example, imagine t hat we want all headlines in a document t o be dark red. The
headlines are all marked wit h t he HTML element <h1>. The code below set s t he color of
<h1> element s t o red.
h1 {
color: #ff0000;
}
Show example
Colors can be ent ered as hexadecimal values as in t he example above (# ff0000), or you
can use t he names of t he colors ("red") or rgb-values (rgb(255,0,0)).
The ' backgr ound- col or ' pr oper t y
The background-color propert y describes t he background color of element s.
The element <body> cont ains all t he cont ent of an HTML document . Thus, t o change t he
background color of an ent ire page, t he background-color propert y should be applied t o
t he <body> element .
You can also apply background colors t o ot her element s including headlines and t ext . I n
t he example below, different background colors are applied t o <body> and <h1>
element s.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Show example
Not ice t hat we applied t wo propert ies t o <h1> by dividing t hem by a semicolon.
Backgr ound i mages [ backgr ound- i mage]
The CSS propert y background-image is used t o insert a background image.
As an example of a background image, we use t he but t erfly below. You can download
t he image so you can use it on your own comput er (right click t he image and choose
"save image as"), or you can use anot her image as you see fit .
To insert t he image of t he but t erfly as a background image for a web page, simply
apply t he background-image propert y t o <body> and specify t he locat ion of t he image.
body {
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
}
Show example
NB: Not ice how we specified t he locat ion of t he image as ur l ( " but t er f l y.gi f " ) . This
means t hat t he image is locat ed in t he same folder as t he st yle sheet . You can also
refer t o images in ot her folders using ur l ( " ../ i mages/ but t er f l y.gi f " ) or even on t he
I nt ernet indicat ing t he full address of t he file:
ur l ( " ht t p: / / www.ht ml .net / but t er f l y.gi f " ) .
Repeat backgr ound i mage [ backgr ound- r epeat ]
I n t he example above, did you not ice t hat by default t he but t erfly was repeat ed bot h
horizont ally and vert ically t o cover t he ent ire screen? The propert y background-repeat
cont rols t his behaviour.
The t able below out lines t he four different values for background-repeat.
Val ue Descr i pt i on Exampl e
background-repeat: repeat-x
The image is repeat ed horizont ally Show example
background-repeat: repeat-y
The image is repeat ed vert ically Show example
background-repeat: repeat
The image is repeat ed bot h horizont ally and vert ically Show example
background-repeat: no-repeat
The image is not repeat ed Show example
For example, t o avoid repet it ion of a background image t he code should look like t his:
body {
background-repeat: no-repeat;
}
h1 {
color: #990000;
}
Show example
Lock backgr ound i mage [ backgr ound- at t achment ]
The propert y background-attachment specifies whet her a background pict ure is fixed or
scrolls along wit h t he cont aining element .
A fixed background image will not move wit h t he t ext when a reader is scrolling t he
page, whereas an unlocked background image will scroll along wit h t he t ext of t he web
page.
The t able below out lines t he t wo different values for background-attachment. Click on
t he examples t o see t he difference bet ween scroll and fixed.
Background-attachment: scroll
The image scrolls wit h t he page - unlocked Show example
Background-attachment: fixed
The image is locked Show example
For example, t he code below will fix t he background image.
body {
background-attachment: fixed;
}
h1 {
color: #990000;
}
Show example
Pl ace backgr ound i mage [ backgr ound- posi t i on]
By default , a background image will be posit ioned in t he t op left corner of t he screen.
The propert y background-position allows you t o change t his default and posit ion t he
background image anywhere you like on t he screen.
There are numerous ways t o set t he values of background-position. However, all of
t hem are format t ed as a set of coordinat es. For example, t he value '100px 200px'
posit ions t he background image 100px from t he left side and 200px from t he t op of t he
browser window.
The coordinat es can be indicat ed as percent ages of t he browser window, fixed unit s
(pixels, cent imet res, et c.) or you can use t he words t op, bot t om, cent er, left and right .
The model below illust rat es t he syst em:
The t able below gives some examples.
background-position: 2cm
2cm
The image is posit ioned 2 cm from t he left and 2 cm down
t he page
Show
example
background-position: 50%
25%
The image is cent rally posit ioned and one fourt h down t he
page
Show
example
background-position: top
right
The image is posit ioned in t he t op-right corner of t he page
Show
example
The code example below posit ions t he background image in t he bot t om right corner:
body {
background-position: right bottom;
}
h1 {
color: #990000;
}
Show example
Compi l i ng [ backgr ound]
The propert y background is a short hand for all t he background propert ies list ed in t his
lesson.
Wit h background you can compress several propert ies and t hereby writ e your st yle sheet
in a short er way which makes it easier t o read.
For example, look at t hese five lines:
background-position: right bottom;
Using background t he same result can be achieved in j ust 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]
I f a propert y is left out , it will aut omat ically be set t o it s default value. For example, if
background-attachment and background-position are t aken out of t he example:
background: #FFCC66 url("butterfly.gif") no-repeat;
These t wo propert ies t hat are not specified would merely be set t o t heir default values
which as you know are scroll and t op left .
Summar y
I n t his lesson, you have already learned new t echniques t hat would not be possible
using HTML. The fun cont inues in t he next lesson which examines t he broad range of
possibilit ies when using CSS t o describe font s.
Lesson 4: Font s
I n t his lesson you will learn about font s and how t hey are applied using CSS. We will
also look at how t o work around t he issue t hat specific font s chosen for a websit e can
only be seen if t he font is inst alled on t he PC used t o access t he websit e. The following
CSS propert ies will be described:
font -family
font -st yle
font -variant
font -weight
font -size
font
Font f ami l y [ f ont - f ami l y]
The propert y font-family is used t o set a priorit ized list of font s t o be used t o display a
given element or web page. I f t he first font on t he list is not inst alled on t he comput er
used t o access t he sit e, t he next font on t he list will be t ried unt il a suit able font is
found.
There are t wo t ypes of names used t o cat egorize font s: family-names and generic
families. The t wo t erms are explained below.
Family-name
Examples of a family-name (oft en 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 wit h uniformed
appearances. An example is sans-serif, which is a collect ion of font s wit hout "feet ".
The difference can also be illust rat ed like t his:
Lesson 5: Text
Format t ing and adding st yle t o t ext is a key issue for any web designer. I n t his lesson
you will be int roduced t o t he amazing opport unit ies CSS gives you t o add layout t o t ext .
The following propert ies will be described:
t ext -indent
t ext -align
t ext -decorat ion
let t er-spacing
t ext -t ransform
Text i ndent i on [ t ext - i ndent ]
The propert y text-indent allows you t o add an elegant t ouch t o t ext paragraphs by
applying an indent t o t he first line of t he paragraph. I n t he example below a 30px is
applied t o all t ext paragraphs marked wit h <p>:
p {
text-indent: 30px;
}
Show example
Text al i gnment [ t ext - al i gn]
The CSS propert y text-align corresponds t o t he at t ribut e align used in old versions of
HTML. Text can eit her be aligned t o t he l ef t , t o t he r i ght or cent r ed. I n addit ion t o
t his, t he value j ust i f y will st ret ch each line so t hat bot h t he right and left margins are
st raight . You know t his layout from for example newspapers and magazines.
I n t he example below t he t ext in t able headings <th> is aligned t o t he right while t he
t able dat a <td> are cent red. I n addit ion, normal t ext paragraphs are j ust ified:
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
Show example
Text decor at i on [ t ext - decor at i on]
The propert y text-decoration makes it is possible t o add different "decorat ions" or
"effect s" t o t ext . For example, you can underline t he t ext , have a line t hrough or above
t he t ext , et c. I n t he following example, <h1> are underlined headlines, <h2> are
headlines wit h a line above t he t ext and <h3> are headlines wit h a line t hough t he t ext .
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Show example
Let t er space [ l et t er - spaci ng]
The spacing bet ween t ext charact ers can be specified using t he propert y letter-
spacing. The value of t he propert y is simply t he desired widt h. For example, if you want
a spacing of 3px bet ween t he let t ers in a t ext paragraph <p> and 6px bet ween let t ers
in headlines <h1> t he code below could be used.
h1 {
letter-spacing: 6px;
}
p {
}
Show example
Text t r ansf or mat i on [ t ext - t r ansf or m]
The text-transform propert y cont rols t he capit alizat ion of a t ext . You can choose t o
capi t al i ze, use upper case or l ower case regardless of how t he original t ext is looks
in t he HTML code.
An example could be t he word "headline" which can be present ed t o t he user as
"HEADLI NE" or "Headline". There are four possible values for t ext -t ransform:
capit alize
Capit alizes t he first let t er of each word. For example: "j ohn doe" will be "John
Doe".
uppercase
Convert s all let t ers t o uppercase. For example: "j ohn doe" will be "JOHN DOE".
lowercase
Convert s all let t ers t o lowercase. For example: "JOHN DOE" will be "j ohn doe".
none
No t ransformat ions - t he t ext is present ed as it appears in t he HTML code.
As an example, we will use a list of names. The names are all marked wit h <li> (list -
it em). Let 's say t hat we want names t o be capit alized and headlines t o be present ed in
uppercase let t ers.
Try t o t ake a look at t he HTML code for t his example and you will see t hat t he t ext
act ually is in lowercase.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Show example
Summar y
I n t he last t hree lessons you have already learned several CSS propert ies, but t here is
much more t o CSS. I n t he next lesson we will t ake a look at links.
When you list font s for your web sit e, you nat urally st art wit h t he most preferred font
followed by some alt ernat ive font s. I t is recommended t o complet e t he list wit h a
generic font family. That way at least t he page will be shown using a font of t he same
family if none of t he specified font s are available.
An example of a priorit ized list of font s could look like t his:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Show example
Headlines marked wit h <h1> will be displayed using t he font "Arial". I f t his font is not
inst alled on t he user's comput er, "Verdana" will be used inst ead. I f bot h t hese font s are
unavailable, a font from t he sans- ser i f family will be used t o show t he headlines.
Not ice how t he font name "Times New Roman" cont ains spaces and t herefore is list ed
using quot at ion marks.
Font st yl e [ f ont - st yl e]
The propert y font-style defines t he chosen font eit her in nor mal , i t al i c or obl i que.
I n t he example below, all headlines marked wit h <h2> will be shown in it alics.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}
Show example
Font var i ant [ f ont - var i ant ]
The propert y font-variant is used t o choose bet ween nor mal or smal l - caps variant s
of a font . A smal l - caps font is a font t hat uses smaller sized capit alized let t ers (upper
case) inst ead of lower case let t ers. Confused? Take a look at t hese examples:
I f font-variant is set t o smal l - caps and no small -caps font is available t he browser
will most likely show t he t ext in uppercase inst ead.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Show example
Font wei ght [ f ont - wei ght ]
The propert y font-weight describes how bold or "heavy" a font should be present ed. A
font can eit her be nor mal or bol d. Some browsers even support t he use of numbers
bet ween 100-900 (in hundreds) t o describe t he weight of a font .
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Show example
Font si ze [ f ont - si ze]
The size of a font is set by t he propert y font-size.
There are many different unit s (e.g. pixels and percent ages) t o choose from t o describe
font sizes. I n t his t ut orial we will focus on t he most common and appropriat e unit s.
Examples include:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Show example
There is one key difference bet ween t he four unit s above. The unit s ' px' and ' pt ' make
t he font size absolut e, while ' % ' and ' em' allow t he user t o adj ust t he font size as
he/ she see fit . Many users are disabled, elderly or simply suffer from poor vision or a
monit or of bad qualit y. To make your websi t e accessi bl e for everybody, you should
use adj ust able unit s such as ' % ' or ' em'.
Below you can see an illust rat ion of how t o adj ust t he t ext size in Mozilla Firefox and
I nt ernet Explorer. Try it yourself - neat feat ure, don't you t hink?
Compi l i ng [ f ont ]
Using t he font short hand propert y it is possible t o cover all t he different font propert ies
in one single propert y.
For example, imagine t hese four lines of code used t o describe font -propert ies for <p>:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Using t he short hand propert y, t he code can be simplified:
p {
font: italic bold 30px arial, sans-serif;
}
The order of values for font is:
font-style | font-variant | font-weight | font-size | font-family
Summar y
You have now learned about some of t he possibilit ies relat ed t o font s. Remember t hat
one of t he maj or advant ages of using CSS t o specify font s is t hat at any given t ime, you
can change font on an ent ire websit e in j ust a few minut es. CSS saves t ime and makes
your life easier. I n t he next lesson we will look at t ext .
Lesson 6: Li nks
You can apply what you already learned in t he previous lessons t o links (i.e. change
colors, font s, underline, et c). The new t hing is t hat CSS allows you t o define t hese
propert ies different ly depending on whet her t he link is unvisit ed, visit ed, act ive, or
whet her t he cursor is on t he link. This makes it possible t o add fancy and useful effect s
t o your websit e. To cont rol t hese effect s you use so-called pseudo-classes.
What i s a pseudo- cl ass?
A pseudo-class allows you t o t ake int o account different condit ions or event s when
defining a propert y for an HTML t ag.
Let 's look at an example. As you know, links are specified in HTML wit h <a> t ags. We
can t herefore use a as a select or in CSS:
a {
color: blue;
}
A link can have different st at es. For example, it can be visit ed or not visit ed. You can
use pseudo-classes t o assign different st yles t o visit ed and unvisit ed links.
a:link {
color: blue;
}
a:visited {
color: red;
}
Use a:link and a:visited for unvisit ed and visit ed links respect ively. Links t hat are
act ive have t he pseudo-class a:active and a:hover is when t he cursor is on t he link.
We will now go t hrough each of t he four pseudo-classes wit h examples and furt her
explanat ion.
Pseudo- cl ass: l i nk
The pseudo-class :link is used for links leading t o pages t hat t he user has not visit ed.
I n t he code example below, unvisit ed links will be light blue.
a:link {
color: #6699CC;
}
Show example
Pseudo- cl ass: vi si t ed
The pseudo-class :visited is used for links leading t o pages t hat t he user has visit ed.
For example, t he code below would make all visit ed links dark purple:
a:visited {
color: #660099;
}
Show example
Pseudo- cl ass: act i ve
The pseudo-class :active is used for links t hat are act ive.
This example gives act ive links a yellow background color:
a:active {
background-color: #FFFF00;
}
Show example
Pseudo- cl ass: hover
The pseudo-class :hover is used when t he mouse point er hovers over a link.
This can be used t o creat e int erest ing effect s. For example, if we want our links t o be
orange and be it alicized when t he cursor is point ed at t hem, our CSS should look like
t his:
a:hover {
color: orange;
font-style: italic;
}
Show example
Exampl e 1: Ef f ect when t he cur sor i s over a l i nk
I t is part icular popular t o creat e different effect s when t he cursor is over a link. We will
t herefore look at a few ext ra examples relat ed t o t he pseudo-class :hover.
Exampl e 1a: Spaci ng bet ween l et t er s
As you will remember from lesson 5, t he spacing bet ween let t ers can be adj ust ed using
t he propert y letter-spacing. This can be applied t o links for a special effect :
a:hover {
font-weight:bold;
color:red;
}
Show example
Exampl e 1b: UPPERCASE and l ower case
I n lesson 5 we looked at t he propert y text-transform, which can swit ch bet ween upper -
and lowercase let t ers. This can also be used t o creat e an effect for links:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Show example
The t wo examples gives you an idea about t he almost endless possibilit ies for combining
different propert ies. You can creat e your own effect s - give it a t ry!
Exampl e 2: Remove under l i ne of l i nks
A frequent ly asked quest ion is how t o remove t he underlining of links?
You shoul d consi der car ef ul l y whet her i t i s necessar y t o r emove t he
under l i ni ng as i t mi ght decr ease usabi l i t y of your websi t e si gni f i cant l y. People
are used t o blue underlined links on web pages and know t hat t hey can click on t hem.
Even my mum knows t hat ! I f you change t he underlining and color of links t here is a
good chance t hat users will get confused and t herefore not get t he full benefit of t he
cont ent on your websit e.
That said, it is very simple t o remove t he underlining of links. As you will recall from
lesson 5, t he propert y text-decoration can be used t o det ermine whet her t ext is
underlined or not . To remove underlining, simply set t he value of text-decoration t o
none.
a {
text-decoration:none;
}
Alt ernat ively, you can set text-decoration along wit h ot her propert ies for all four
pseudo-classes.
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:active {
background-color: yellow;
}
a:hover {
color:red;
}
Show example
Summar y
I n t his lesson you have learned about pseudo-classes, using some of t he propert ies
from t he previous lessons. This should give you an idea of some t he possibilit ies CSS
provides.
I n t he next lesson we will t each you how t o define propert ies for specific element s and
groups of element s.
Lesson 7: I dent i f i cat i on and gr oupi ng of
el ement s ( cl ass and i d)
Somet imes you want t o apply a special st yle t o a part icular element or a part icular
group of element s. I n t his lesson, we will t ake a closer look at how you can use class
and id t o specify propert ies for select ed element s.
How can you color one part icular headline different ly t han t he ot her headlines on your
websit e? How can you group your links int o different cat egories and give each cat egory
a special st yle? These are j ust examples of quest ions we will answer in t his lesson.
Gr oupi ng el ement s wi t h cl ass
Let 's say t hat we have t wo list s of links of different grapes used for whit e wine and red
wine. The HTML code could look like t his:
<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Grapes for red wine:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
Show example
Then we want t he whit e wine links t o be yellow, t he red wine links t o be red and t he
rest of t he exist ing links on t he webpage t o st ay blue.
To achieve t his, we divide t he links int o t wo cat egories. This is done by assigning a
class t o each link using t he at t ribut e class.
Let us t ry t o specify some classes in t he example above:
<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>
<p>Grapes for red wine:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
We can hereaft er define special propert ies for links belonging t o whit ewine and
redwine, respect ively.
a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
Show example
As shown in t he example you can define t he propert ies for element s which belong t o a
cert ain class by using .cl assname in t he st yle sheet of t he document .
I dent i f i cat i on of el ement usi ng i d
I n addit ion t o grouping element s, you might need t o ident ify one unique element . This
is done by using t he at t ribut e id.
What is special about t he at t ribut e id is t hat t here can not be t wo element s in t he same
document wit h t he same id. Each id has t o be unique. I n ot her cases, you should use
t he class at t ribut e inst ead. Now, let us t ake a look at an example of a possible usage of
id:
<h1>Chapter 1</h1>
...
<h2>Chapter 1.1</h2>
...
...
<h1>Chapter 2</h1>
...
...
<h3>Chapter 2.1.2</h3>
...
The above could be headings of any document split int o chapt ers or paragraphs. I t
would be nat ural t o assign an id t o each chapt er as follows:
<h1 id="c1">Chapter 1</h1>
...
<h2 id="c1-1">Chapter 1.1</h2>
...
...
<h1 id="c2">Chapter 2</h1>
...
...
<h3 id="c2-1-2">Chapter 2.1.2</h3>
...
Let us say t hat t he headline for chapt er 1.2 must be in red. This can be done
accordingly wit h CSS:
#c1-2 {
color: red;
}
Show example
As shown in t he example above you can define t he propert ies in a specific element by
using # id in t he st ylesheet of t he document .
Summar y
I n t his lesson we have learned t hat t hrough t he use of t he select ors, class and id, you
are able t o specify propert ies for specific element s.
I n t he next lesson, we will t ake a closer look at t wo HTML-element s which is widely
used in connect ion wit h CSS: <span> and <div>.
Lesson 8: Gr oupi ng of el ement s ( span
and di v)
The element s < span> and < div> are used t o group and st ruct ure a document and will
oft en be used t oget her wit h t he at t ribut es class and id.
I n t his lesson, we will t ake a closer look at t he use of < span> and < div> as exact ly
t hese t wo HTML element s are of cent ral import ance wit h regards t o CSS.
Grouping wit h <span>
Grouping wit h <div>
Gr oupi ng wi t h < span>
The element <span> is what you could call a neut ral element which does not add
anyt hing t o t he document it self. But wit h CSS, <span> can be used t o add visual
feat ures t o specific part s of t ext in your document s.
An example of t his could be t his Benj amin Franklin quot at ion:
<p>Early to bed and early to rise
makes a man healthy, wealthy and wise.</p>
Let s us say we want what Mr. Franklin sees as t he benefit s of not sleeping your day
away emphasized in red. For t hat purpose, we can mark t he benefit s wit h <span>. Each
span is t hen added a class, which we can define in our st yle sheet :
<p>Early to bed and early to rise
makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>
The CSS belonging t o it :
span.benefit {
color:red;
}
Show example
Of course you may also use id t o add st yle t o t he <span>-element s. Just as long as you
remember, t hat you'll have t o apply a unique id t o each of t he t hree <span>-element s,
as you learned in t he previous lesson.
Gr oupi ng wi t h < di v>
Whereas <span> is used wit hin a block-level element as seen in t he previous example,
<div> is used t o group one or more block-level element s.
Aside from t his difference, t he grouping wit h <div> works in more or less t he same way.
Let us t ake a look at an example wit h t wo list s of U.S. president s divided int o t heir
polit ical affiliat ions:
<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 st yle sheet , we can ut ilize t he grouping in t he exact same way as above:
#democrats {
background:blue;
}
#republicans {
background:red;
}
Show example
I n t he examples above, we have only used <div> and <span> on very simple t hings such
as t ext and background colors. Bot h element s have t he pot ent ial t o do much more
advanced t hings. However t his will not be int roduced in t his lesson. We will look int o
t hese lat er in t his t ut orial.
Summar y
I n lesson 7 and 8, you have learned about t he select ors id and class and t he element s
span and div.
You should now be able t o group and ident ify, more or less, all part s of a document ,
which is a big st ep in t he direct ion of mast ering CSS. I n lesson 9 we will int roduce you
t o t he box model.
Lesson 9: The box model
The box model in CSS describes t he boxes which are being generat ed for HTML-
element s. The box model also cont ains det ailed opt ions regarding adj ust ing margin,
border, padding and cont ent for each element . The diagram below shows how t he box
model is const ruct ed:
The box model i n CSS
The illust rat ion above might seem pret t y t heoret ical t o look at , so let 's t ry t o use t he
model in an act ual case wit h a headline and some t ext . The HTML for our example is
(from t he Universal Declarat ion of Human Right s):
<h1>Article 1:</h1>
<p>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>
By adding some color and font -informat ion t he example could be present ed as follows:
The example cont ains t wo element s: <h1> and <p>. The box model for t he t wo element s
can be illust rat ed as follows:
Even t hough it may look a bit complicat ed, t he illust rat ion shows how each HTML-
element is surrounded by boxes. Boxes which we can adj ust using CSS.
< % '
The propert ies which regulat e t he different boxes are: padding, margin and border. The
next t wo lessons deal wit h exact ly t hese t hree propert ies:
'
'
Lesson 10: The box model - margin & padding
'
Lesson 11: The box model - border
'
'
When you have finished t hese t wo lessons, you will mast er t he box model and be able
t o layout your document s much finer and more precise t han in t he old fashion using
t ables in HTML.
%>
Summar y
I n t his lesson you have been int roduced t o t he box model. I n t he following t hree lesson
we will t ake a closer look at how t o creat e and cont rol element s in t he box model.
Lesson 10: Mar gi n and paddi ng
I n t he previous lesson you were int roduced t o t he box model. I n t his lesson, we will
look at how you can change t he present at ion of element s by set t ing t he margin and
padding propert ies.
Set t he margin in an element
Set t he padding in an element
Set t he mar gi n i n an el ement
An element has four sides: right , left , t op and bot t om. The margin is t he dist ance from
each side t o t he neighboring element (or t he borders of t he document ). See also t he
diagram in lesson 9 for an illust rat ion.
As t he first example, we will look at how you define margins for t he document it self i.e.
for t he element <body>. The illust rat ion below shows how we want t he margins in our
pages t o be.
The CSS code for t his would look as follow:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
Or you could choose a more elegant compilat ion:
body {
margin: 100px 40px 10px 70px;
}
Show example
You can set t he margins in t he same way on almost every element . For example, we
can choose t o define margins for all of our t ext paragraphs marked wit h <p>:
body {
}
p {
}
Show example
Set paddi ng i n an el ement
Padding can also be underst ood as "filling". This makes sense as padding does not
affect t he dist ance of t he element t o ot her element s but only defines t he inner dist ance
bet ween t he border and t he cont ent of t he element .
The usage of padding can be illust rat ed by looking at a simple example where all
headlines have background colors:
h1 {
background: yellow;
}
h2 {
background: orange;
}
Show example
By defining padding for t he headlines, you change how much filling t here will be around
t he t ext in each headline:
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
Show example
Summar y
You are now on your way t o mast er t he box model in CSS. I n t he next lesson, we will
t ake a closer look at how t o set borders in different colors and how t o shape your
element s.
Lesson 11: Bor der s
Borders can be used for many t hings, for example as a decorat ive element or t o
underline a separat ion of t wo t hings. CSS gives you endless opt ions when using borders
in your pages.
border -widt h
border -color
border -st yle
border
The wi dt h of bor der s [ bor der - wi dt h]
The widt h of borders is defined by t he propert y border-width, which can obt ain t he
values t hin, medium, and t hick, or a numeric value, indicat ed in pixels. The figure below
illust rat es t he syst em:
The col or of bor der s [ bor der - col or ]
The propert y border -color defines which color t he border has. The values are t he
normal color-values for example "# 123456", "rgb(123,123,123)" or "yellow" .
Types of bor der s [ bor der - st yl e]
There are different t ypes of borders t o choose from. Below are shown 8 different t ypes
of borders as I nt ernet Explorer 5.5 int erpret s t hem. All examples are shown wit h t he
color "gold" and t he t hickness "t hick" but can nat urally be shown in ot her colors and
t hicknesses.
The values none or hidden can be used if you do not want any border.
Exampl es of def i ni ng bor der s
The t hree propert ies described above can be put t oget her by each element and t hereby
produce different borders. To illust rat e t his, we will t ake a look at a document where
we define different borders for <h1>, <h2>, <ul> and <p>. The result may not be t hat
pret t y but it illust rat es some of t he many possibilit ies:
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;
}
Show example
I t is also possible t o st at e special propert ies for t op-, bot t om-, 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;
}
Show example
Compi l at i on [ bor der ]
As it is also t he case for many ot her propert ies, you can compile many propert ies int o
one using border. Let us t ake a look at an example:
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
Can be compiled int o:
p {
border: 1px solid blue;
}
Summar y
I n t his lesson you have learned about t he endless opt ions CSS gives you when using
borders in your pages.
I n t he next lesson, we will look at how you define t he dimensions in t he box model -
height and widt h.
Lesson 12: Hei ght and wi dt h
Up unt il now, we have not cared much about t he dimensions of t he element s we have
worked wit h. I n t his lesson, we will t ake a look at how you easily can define t he height
and widt h of an element .
widt h
height
Set t i ng t he wi dt h [ wi dt h]
Wit h t he width-propert y, you can define a cert ain widt h of an element .
The simple example below provides us wit h a box wherein t ext can be t yped:
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
Show example
Set t i ng t he hei ght [ hei ght ]
I n t he example above not ice how t he height of t he box is set by t he cont ent of t he box.
You can affect t he height of an element wit h t he propert y height. As an example let us
t ry t o make t he box in t he example 500px high:
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
Show example
Summar y
Lesson 9, 10, 11 and 12 have given you an int roduct ion t o t he box model in CSS. As
you can probably see, t he box model gives you many new opt ions. You might have
been using t ables in HTML t o creat e your layout s unt il now, but wit h CSS and t he box
model you should now be able t o achieve elegant layout s more precisely and in
accordance wit h t he recommendat ions of W3C.
Lesson 13: Fl oat i ng el ement s ( f l oat s)
An element can be float ed t o t he right or t o left by using t he propert y float. That is t o
say t hat t he box wit h it s cont ent s eit her float s t o t he right or t o t he left in a document
(or t he cont aining box) (see lesson 9 for a descript ion of t he Box model). The following
figure illust rat es t he principle:
I f we for example would like t o have a t ext wrapping around a pict ure, t he result would
be like t his:
How i s i t done?
The HTML code for t he example above, look as follows:
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
To get t he pict ure float ing t o t he left and t he t ext t o surround it , you only have t o
define t he widt h of t he box which surrounds t he pict ure and t hereaft er set t he propert y
float t o left :
#picture {
float:left;
width: 100px;
}
Show example
Anot her exampl e: col umns
Float s can also be used for columns in a document . To creat e t he columns, you simply
have t o st ruct ure t he desired columns in t he HTML-code wit h <div> as follows:
<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,
</div>
<div id="column3">
<p>nam nihil esset in nostra
potestate si res ita se haberet...</p>
</div>
Now t he desired widt h of t he columns is set t o e.g. 33%, and t hen you simply float
each column t o t he left by defining t he propert y float:
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}
Show example
float can be set as eit her l ef t , r i ght or none.
The pr oper t y cl ear
The clear propert y is used t o cont rol how t he subsequent element s of float ed element s
in a document shall behave.
By default , t he subsequent element s are moved up t o fill t he available space which will
be freed when a box is float ed t o a side. Look at t he example above wherein t he t ext is
aut omat ically moved up beside t he pict ure of Bill Gat es.
The propert y clear can assume t he values l ef t , r i ght , bot h or none. The principle is,
if clear, for example, is set t o bot h for a box, t he t op margin border of t his box will
always be under t he lower margin border for possible float ing boxes coming from
above.
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<h1>Bill Gates</h1>
<p class="floatstop">causas naturales et antecedentes,
To avoid t he t ext from float ing up next t o t he pict ure, we can add t he following t o our
CSS:
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}
Show example
Summar y
Float s are useful in many sit uat ions and will oft en be used t oget her wit h posit ioning. I n
t he next lesson we will t ake a closer look at how t o posit ion a box, eit her relat ive or
absolut e.
Lesson 14: Posi t i oni ng of el ement s
Wit h CSS posit ioning, you can place an element exact ly where you want it on your
page. Toget her wit h float s (see lesson 13), posit ioning gives you many possibilit ies t o
creat e an advanced and precise layout .
The following will be discussed in t his lesson:
The principle behind CSS posit ioning
Absolut e posit ioning
Relat ive posit ioning
The pr i nci pl e behi nd CSS posi t i oni ng
I magine a browser window as a syst em of coordinat es:
The principle behind CSS posit ioning is t hat you can posit ion any box anywhere in t he
syst em of coordinat es.
Let 's say we want t o posit ion a headline. By using t he box model (see lesson 9) t he
headline will appear as follows:
I f we want t his headline posit ioned 100px from t he t op of t he document and 200px
from t he left of t he document , we could t ype t he following in our CSS:
h1 {
position:absolute;
top: 100px;
left: 200px;
}
The result will be as follows:
As you can see, posit ioning wit h CSS is a very precise t echnique t o place element s. I t is
much easier t han t rying t o use t ables, t ransparent images or anyt hing else.
Absol ut e posi t i oni ng
An element which is posit ioned absolut e does not obt ain any space in t he document .
This means t hat it does not leave an empt y space aft er being posit ioned.
To posit ion an element absolut ely, t he position propert y is set as absol ut e. You can
subsequent ly use t he propert ies l ef t , r i ght , t op, and bot t om t o place t he box.
As an example of absolut e posit ioning, we choose t o place 4 boxes in each corner of
t he 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;
}
Show example
Rel at i ve posi t i oni ng
To posit ion an element relat ively, t he propert y position is set as r el at i ve. The
difference bet ween absolut e and relat ive posit ioning is how t he posit ion is being
calculat ed.
The posit ion for an element which is relat ively posit ioned is cal cul at ed f r om t he
or i gi nal posi t i on i n t he document . That means t hat you move t he element t o t he
right , t o t he left , up or down. This way, t he element st ill obt ains a space in t he
document aft er it is posit ioned.
As an example of relat ive posit ioning, we can t ry t o posit ion t hree pict ures relat ively t o
t heir original posit ion on t he page. Not ice how t he pict ures leave empt y spaces at t heir
original posit ions in t he document :
#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}
Show example
Summar y
I n t he previous t wo lessons, you learned how t o float and posit ion element s. These t wo
met hods give you many opport unit ies t o const ruct your pages wit hout having t o use
some of t he old-fashioned met hods wit h t ables and t ransparent images in HTML. Use
CSS inst ead. I t is more precise, gives you more advant ages, and it is also far easier t o
maint ain.
Lesson 15: Layer on l ayer wi t h z-i ndex
( Layer s)
CSS operat es in t hree dimensions - height , widt h and dept h. We have seen t he first t wo
dimensions in previous lessons. I n t his lesson, we will learn how t o let different
element s become layers. I n short , t his means t he order of which t he element s overlap
one anot her.
For t hat purpose, you can assign each element a number ( z-index). The syst em is t hat
an element wit h a higher number overlaps an element wit h a lower number.
Let us say we are playing poker and have a royal flush. Our hand can be present ed in a
way where each card has got a z-index:
I n t his case, t he numbers follow on anot her (1-5) but t he same result can be obt ained
by using 5 different numbers. The import ant t hing is t he chronological sequence of t he
numbers (t he order).
The code in t he card example could look like t his:
#ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}
Show example
The met hod is relat ively simple but t he possibilit ies are several. You can place images
on t ext or t ext above t ext et c.
Summar y
Layers can be used in many sit uat ions. For example, t ry t o use z-index t o creat e effect s
in headlines inst ead of creat ing t hese as graphics. For one t hing, it is fast er t o load t ext
and for anot her, it provides a pot ent ially bet t er ranking in search engines.
Lesson 16: Web-st andar ds and
val i dat i on
W3C is t he World Wide Web Consort ium, which is an independent organizat ion t hat
manages code st andards on t he web (e.g. HTML, CSS, XML and ot hers). Microsoft , The
Mozilla Foundat ion and many ot hers are a part of W3C and agree upon t he fut ure
development s of t he st andards.
I f you have been working j ust a bit wit h web design, you probably know t hat t here can
be a big differences in how a webpage is present ed across different browsers. I t can be
very frust rat ing and t ime-consuming t o creat e a webpage which can be viewed in
Mozilla, I nt ernet Explorer, Opera and all t he rest of t he exist ing browsers.
The idea of having st andards is t o agree upon a common denominat or on how t o use
web t echnologies. This means t hat by observing t he st andards, a webdeveloper has a
cert aint y t hat what he or she does will work in a more appropriat e manner across
different plat forms. We t her ef or e r ecommend t hat you back up t he wor k car r i ed
out by t he W3C and val i dat e your CSS i n or der t o obser ve t he st andar d.
CSS val i dat or
To make it easier t o observe t he CSS st andard, W3C has made a so-called validat or
which reads your st ylesheet and ret urns a st at us list ing errors and warnings, if your CSS
does not validat e.
To make it easier for you t o validat e your st ylesheet , you can do it direct ly from t his
webpage. Simply replace t he URL wit h t he URL of your st ylesheet below and click t o
validat e. You will t hen be informed by t he W3C sit e if t here are any errors found.
I f t he validat or does not find any errors; t his pict ure will be shown, which you can put
on your websit e t o illust rat e t hat you are using validat ed coding:
The validat or can also be found at t his link: ht t p: / / j igsaw.w3.org/ css-validat or/
http://www.html.net/site/style/default.screen.css

CSS Tutorial

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Tutorial

Uploaded by

Copyright:

Available Formats

CSS Tut or i al

CSS Tut or i al - Tabl e of cont ent s

You might also like