Introduction To CSS: What You Should Already Know

Cascading Style Sheets
Introduction to CSS
What You Should Already Know
Before you continue you should have some basic understanding of the following:
WWW, HTML and the basics of building Web pages
What is CSS?
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles are normally stored in Style Sheets
Styles were added to HTML !" to solve a problem
External Style Sheets can save you a lot of wor#
$%ternal Style Sheets are stored in CSS files
Multiple style definitions will cascade into one
CSS emo
With &SS, your HTML documents can be displayed using different output styles:
See how it wor#s
Styles Solve a Common !roblem
HTML tags were originally designed to define the content of a document! They were supposed to say 'This is a
header', 'This is a paragraph', 'This is a table', by using tags li#e (h)*, (p*, (table*, and so on! The layout of the
document was supposed to be ta#en care of by the browser, without using any formatting tags!
+s the two ma,or browsers - .etscape and /nternet $%plorer - continued to add new HTML tags and attributes 0li#e
the (font* tag and the color attribute1 to the original HTML specification, it became more and more difficult to create
Web sites where the content of HTML documents was clearly separated from the document2s presentation layout!
To solve this problem, the World Wide Web &onsortium 0W3&1 - the non profit, standard setting consortium
responsible for standardi4ing HTML - created ST5L$S in addition to HTML !"!
Both .etscape !" and /nternet $%plorer !" support &ascading Style Sheets!
Style Sheets Can Save a "ot of Wor#
6age ) of 78
Styles in HTML !" define how HTML elements are displayed, ,ust li#e the font tag and the color attribute in HTML
3!9! Styles are normally saved in files e%ternal to your HTML documents! $%ternal style sheets enable you to change
the appearance and layout of all the pages in your Web, ,ust by editing a single &SS document! /f you have ever tried
to change the font or color of all the headings in all your Web pages, you will understand how &SS can save you a lot
of wor#!
&SS is a brea#through in Web design because it allows developers to control the style and layout of multiple Web
pages all at once! +s a Web developer you can define a style for each HTML element and apply it to as many Web
pages as you want! To ma#e a global change, simply change the style, and all elements in the Web are updated
automatically!
$ultiple Styles Will Cascade into %ne
Style Sheets allow style information to be specified in many ways! Styles can be specified inside a single HTML
element, inside the (head* element of an HTML page, or in an e%ternal &SS file! $ven multiple e%ternal Style Sheets
can be referenced inside a single HTML document!
Cascadin& %rder
What style will be used when there is more than one style specified for an '($" element?
:enerally spea#ing we can say that all the styles will 'cascade' into a new 'virtual' Style Sheet by the following
rules, where number four has the highest priority:
)! Browser default
9! $%ternal Style Sheet
3! /nternal Style Sheet 0inside the (head* tag1
! /nline Style 0inside HTML element1
So, an inline style 0inside an HTML element1 has the highest priority, which means that it will override every style
declared inside the (head* tag, in an e%ternal style sheet, and in a browser 0a default value1!
CSS Syntax
Syntax
The &SS synta% is made up of three parts: a selector, a property and a value:
selector {property: value}
The selector is normally the HTML element;tag you wish to define, the property is the attribute you wish to change,
and each property can ta#e a value! The property and value are separated by a colon and surrounded by curly braces:
body {color: black}
/f the value is multiple words, put <uotes around the value:
6age 9 of 78
p {font-family: "sans serif"}
)ote* /f you wish to specify more than one property, you should separate each property with a semi-colon! The
e%ample below shows how to define a center aligned paragraph, with a red te%t color:
p {text-align:center;color:red}
To ma#e the style definitions more readable, you can describe one property on each line, li#e this:
p
{
text-align: center;
color: black;
font-family: arial
}
+roupin&
5ou can group selectors! Separate each selector with a comma! /n the e%ample below we have grouped all the header
elements! $ach header element will be green:
h1,h,h!,h",h#,h$
{
color: green
}
(he class Selector
With the class selector you can define different styles for the same type of HTML element! Say that you would li#e to
have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph! Here
is how you can do it with styles:
p%right {text-align: right}
p%center {text-align: center}
5ou have to use the class attribute in your HTML document:
&p class'"right"(
)his paragraph *ill be right-aligned%
&+p(
&p class'"center"(
)his paragraph *ill be center-aligned%
&+p(
)ote* =nly one class attribute can be specified per HTML element> The e%ample below is wrong:
6age 3 of 78
&p class'"right" class'"center"(
)his is a paragraph%
&+p(
5ou can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a
certain class! /n the e%ample below, all HTML elements with class?'center' will be center-aligned:
%center {text-align: center}
/n the code below both the h) element and the p element have class?'center'! This means that both elements will
follow the rules in the '!center' selector:
&h1 class'"center"(
)his heading *ill be center-aligned
&+h1(
&p class'"center"(
)his paragraph *ill also be center-aligned%
&+p(
(he id Selector
The id selector is different from the class selector> While a class selector may apply to S$@$A+L elements on a
page, an id selector always applies to only =.$ element!
+n /B attribute must be uni<ue within the document!
The style rule below will match a p element that has the id value 'para)':
p,para1
{
text-align: center;
color: red
}
The style rule below will match the first element that has the id value 'wer38':
-,*er!"# {color: green}
The rule above will match this h) element:
&h1 id'"*er!"#"(.ome text&+h1(
The style rule below will match a p element that has the id value 'wer38':
p,*er!"# {color: green}
The rule above will not match this h9 element:
6age of 78
&h id'"*er!"#"(.ome text&+h(
CSS Comments
5ou can insert comments in &SS to e%plain your code, which can help you when you edit the source code at a later
date! + comment will be ignored by the browser! + &SS comment begins with ';C', and ends with 'C;', li#e this:
+- )his is a comment -+
p
{
text-align: center;
+- )his is another comment -+
color: black;
font-family: arial
}
CSS 'ow (o,,,
Examples
Loo# at $%ample )
An HTML file uses the <link> tag to link to an external style sheet:
<html>
<head>
<link rel="stylesheet"
type="text/css" href="ex1.css" />
</head>
<body>
<h1>This header is 36 pt</h1>
<h2>This header is ble</h2>
<p>This para!raph has a left mar!in of "# pixels</p>
</body>
</html>
This is the style sheet file (ex1.css):
body {background-color: yello*}
h1 {font-si/e: !$pt}
h {color: blue}
p {margin-left: #0px}

(his header is -. pt
6age 8 of 78
(his header is blue
This paragraph has a left margin of 8" pi%els
Loo# at $%ample 9
&html(
&head(
&link rel'"stylesheet" type'"text+css"
href'"ex%css" +(
&+head(
&body(
&h1()his is a header 1&+h1(
&hr(
&p(1ou can see that the style
sheet formats the text&+p(
&p(&a href'"http:++***%microsoft%com"
target'"2blank"()his is a link&+a(&+p(
&+body(
&+html(
This is the style sheet file (ex2.css):
body {background-color: tan}
h1 {color:maroon; font-si/e:0pt}
hr {color:navy}
p {font-si/e:11pt; margin-left: 1#px}
a:link {color:green}
a:visited {color:yello*}
a:active {color:blue}
a:hover {color:black}

(his is a header /
6age D of 78
5ou can see that the style sheet formats the te%t
This is a lin#
'ow to Insert a Style Sheet
When a browser reads a style sheet, it will format the document according to it! There are three ways of inserting a
style sheet:
External Style Sheet
+n e%ternal style sheet is ideal when the style is applied to many pages! With an e%ternal style sheet, you can change
the loo# of an entire Web site by changing one file! $ach page must lin# to the style sheet using the (lin#* tag! The
(lin#* tag goes inside the head section:
&head(
&link rel'"stylesheet" type'"text+css"
href'"mystyle%css" +(
&+head(
The browser will read the style definitions from the file mystyle!css, and format the document according to it!
+n e%ternal style sheet can be written in any te%t editor! The file should not contain any html tags! 5our style sheet
should be saved with a !css e%tension! +n e%ample of a style sheet file is shown below:
hr {color: sienna}
p {margin-left: 0px}
body {background-image: url3"images+back"0%gif"4}
Internal Style Sheet
+n internal style sheet should be used when a single document has a uni<ue style! 5ou define internal styles in the
head section by using the (style* tag, li#e this:
&head(
&style type'"text+css"(
hr {color: sienna}
&+style(
&+head(
The browser will now read the style definitions, and format the document according to it!
6age E of 78
)ote* + browser normally ignores un#nown tags! This means that an old browser that does not support styles, will
ignore the (style* tag, but the content of the (style* tag will be displayed on the page! /t is possible to prevent an old
browser from displaying the content by hiding it in the HTML comment element:
&head(
&style type'"text+css"(
&5--
hr {color: sienna}
--(
&+style(
&+head(
Inline Styles
+n inline style loses many of the advantages of style sheets by mi%ing content with presentation! Fse this method
sparingly, such as when a style is to be applied to a single occurrence of an element!
To use inline styles you use the style attribute in the relevant tag! The style attribute can contain any &SS property!
The e%ample shows how to change the color and the left margin of a paragraph:
&p style'"color: sienna; margin-left: 0px"(
)his is a paragraph
&+p(
$ultiple Style Sheets
/f some properties have been set for the same selector in different style sheets, the values will be inherited from the
more specific style sheet!
Gor e%ample, an e%ternal style sheet has these properties for the h3 selector:
h!
{
color: red;
text-align: left;
font-si/e: 6pt
}
+nd an internal style sheet has these properties for the h3 selector:
h!
{
text-align: right;
font-si/e: 0pt
}
/f the page with the internal style sheet also lin#s to the e%ternal style sheet the properties for h3 will be:
6age 7 of 78
color: red;
text-align: right;
font-si/e: 0pt
The color is inherited from the e%ternal style sheet and the te%t-alignment and the font-si4e is replaced by the internal
style sheet!
CSS 0ac#&round !roperties
&SS Bac#ground properties define the bac#ground effects of an element!
Examples
Set the bac#ground color
This e%ample demonstrates how to set the bac#ground color for an element!
(html*
(head*
(style type?'te%t;css'*
body Hbac#ground-color: yellowI
h) Hbac#ground-color: J""ff""I
h9 Hbac#ground-color: transparentI
p Hbac#ground-color: rgb098",",9881I
(;style*
(;head*
(body*
(h)*This is header )(;h)*
(h9*This is header 9(;h9*
(p*This is a paragraph(;p*
(;body*
(;html*
Set an image as the bac#ground
This e%ample demonstrates how to set an image as the bac#ground!
(html*
(head*
body
H
bac#ground-image:
url0';images;bgdesert!,pg'1
6age K of 78
I
(;style*
(;head*
(body*
(;body*
(;html*
How to repeat a bac#ground image
This e%ample demonstrates how to repeat a bac#ground image only vertically!
(html*
(head*
body
H
bac#ground-image:
url0';images;bgdesert!,pg'1L
bac#ground-repeat: repeat-y
I
(;style*
(;head*
(body*
(;body*
(;html*
How to place the bac#ground image
This e%ample demonstrates how to place the image on the page!
(html*
(head*
body
H
bac#ground-image:
url0';images;smiley!gif'1L
bac#ground-repeat:
no-repeatL
bac#ground-position:
center center
I
(;style*
(;head*
(body*
(p*
(b*.ote:(;b*
.etscape does not support the
'bac#ground-position' property!
(;p*
6age )" of 78
(;body*
(;html*
How to set a fi%ed bac#ground image
This e%ample demonstrates how to set a fi%ed bac#ground image! The image will not scroll with the rest of the page!
(html*
(head*
body
H
bac#ground-image:
url0';images;smiley!gif'1L
bac#ground-repeat:
no-repeatL
bac#ground-attachment:
fi%ed
I
(;style*
(;head*
(body*
(br*(br*
(p*
(b*.ote:(;b*
.etscape does not support the
'bac#ground-attachment' property!
(;p*
(p*The image will not scroll with the rest of the page(;p*
M!!
M!!
(;body*
(;html*
+ll the bac#ground properties in one declaration
This e%ample demonstrates how to use the shorthand property for setting all of the bac#ground properties in one
declaration!
(html*
(head*
body
H
bac#ground: J""ff""
url0';images;smiley!gif'1
no-repeat fi%ed
6age )) of 78
center center
I
(;style*
(;head*
(body*
(p*
(b*.ote:(;b*
The bac#ground-attachment and the bac#ground-position
properties do not wor# in .etscape !"!
(;p*
(p*This is some te%t(;p*
M!!
M!!
(;body*
(;html*
CSS 0ac#&round
The Bac#ground properties allow you to control the bac#ground color of an element, set an image as the bac#ground,
repeat a bac#ground image vertically or hori4ontally, and position an image on a page!
0ac#&round !roperties*
)): .etscape, IE: /nternet $%plorer, W-C: Web Standard
!roperty escription 1alues )) IE W-C
bac#ground + shorthand property for setting
all bac#ground properties in one
declaration
background-color
background-image
background-repeat
background-attachment
background-position
D!" !" &SS)
bac#ground-attachment Sets whether a bac#ground image
is fi%ed or scrolls with the rest of
the page
scroll
fi%ed
D!" !" &SS)
bac#ground-color Sets the bac#ground color of an
element
color-rgb
color-hex
color-name
transparent
!" !" &SS)
6age )9 of 78
bac#ground-image Sets an image as the bac#ground url
none
!" !" &SS)
bac#ground-position Sets the starting position of a
bac#ground image
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
D!" !" &SS)
bac#ground-repeat Sets if;how a bac#ground image
will be repeated
repeat
repeat-%
repeat-y
no-repeat
!" !" &SS)
CSS (ext !roperties
&SS Te%t properties define the appearance of te%t!
Examples
Set the color of the te%t
This e%ample demonstrates how to set the color of the te%t!
(html*
(head*
h) Hcolor: J""ff""I
h9 Hcolor: Jdda"ddI
p Hcolor: rgb0",",9881I
(;style*
(;head*
(body*
(;body*
(;html*
6age )3 of 78
Specify the space between characters
This e%ample demonstrates how to increase or decrease the space between characters!
(html*
(head*
h) Hletter-spacing: -3p%I
h Hletter-spacing: "!8cmI
(;style*
(;head*
(body*
(p*
(b*.ote:(;b* .etscape does not support the 'letter-spacing' property!
(;p*
(h*This is header (;h*
(;body*
(;html*
(his is header /
( h i s i s h e a d e r 2
+lign the te%t
This e%ample demonstrates how to align the te%t!
(html*
(head*
h) Hte%t-align: centerI
h9 Hte%t-align: leftI
h3 Hte%t-align: rightI
(;style*
(;head*
(body*
(;body*
(;html*
(his is header /
6age ) of 78
(his is header 3
(his is header -
Becorate the te%t
This e%ample demonstrates how to add decoration to te%t!
(html*
(head*
h) Hte%t-decoration: overlineI
h9 Hte%t-decoration: line-throughI
h3 Hte%t-decoration: underlineI
a Hte%t-decoration: noneI
(;style*
(;head*
(body*
(p*
(a href?'http:;;www!w3schools!com;default!asp'*
This is a lin#(;a*
(;p*
(;body*
(;html*
444444444444444444444444444444444444444444444444444
(his is header /
(his is header 3
(his is header -
This is a lin#
/ndent te%t
This e%ample demonstrates how to indent the first line of a paragraph!
(html*
(head*
p Hte%t-indent: )cmI
(;style*
6age )8 of 78
(;head*
(body*
(p*
This is some te%t in a paragraph
(;p*
(;body*
(;html*
This is some te%t in a paragraph This is some te%t in a paragraph This is some te%t in a paragraph
This is some te%t in a paragraph This is some te%t in a paragraph This is some te%t in a paragraph
&ontrol the letters in a te%t
This e%ample demonstrates how to control the letters in a te%t!
(html*
(head*
p!uppercase Hte%t-transform: uppercaseI
p!lowercase Hte%t-transform: lowercaseI
p!capitali4e Hte%t-transform: capitali4eI
(;style*
(;head*
(body*
(p class?'uppercase'*
(;p*
(p class?'lowercase'*
(;p*
(p class?'capitali4e'*
(;p*
(;body*
(;html*
TH/S /S S=M$ T$NT /. + 6+A+:A+6H
6age )D of 78
CSS (ext
Te%t properties allow you to control the appearance of te%t! /t is possible to change the color of a te%t, increase or
decrease the space between characters in a te%t, align a te%t, decorate a te%t, indent the first line in a te%t, and more!
(ext !roperties*
!roperty escription !ossible 1alues )) IE W-C
color Sets the color of a te%t color !" 3!" &SS)
direction Sets the te%t direction ltr
rtl
&SS9
letter-spacing /ncrease or decrease the space
between characters
normal
length
D!" !" &SS)
te%t-align +ligns the te%t in an element left
right
center
,ustify
!" !" &SS)
te%t-decoration +dds decoration to te%t none
underline
overline
line-through
blin#
!" !" &SS)
te%t-indent /ndents the first line of te%t in an
element
length
%
!" !" &SS)
te%t-shadow none
color
length

te%t-transform &ontrols the letters in an element none
capitali4e
uppercase
lowercase
!" !" &SS)
unicode-bidi normal
embed
bidi-override
8!" &SS9
white-space Sets how white space inside an
element is handled
normal
pre
nowrap
!" 8!8 &SS)
word-spacing /ncrease or decrease the space normal D!" D!" &SS)
6age )E of 78
between words length
CSS 5ont !roperties
&SS Gont properties define the font in te%t!
Examples
Set the font of a te%t
This e%ample demonstrates how to set a font of a te%t!
(html*
(head*
h3 Hfont-family: timesI
p Hfont-family: courierI
p!sansserif Hfont-family: sans-serifI
(;style*
(;head*
(body*
(p*
This is a paragraph(;p*
(p class?'sansserif'*
(;body*
(;html*
(his is header -
This is a paragraph
This is a paragraph
Set the si4e of the font
This e%ample demonstrates how to set the si4e of a font!
(html*
(head*
6age )7 of 78
h) Hfont-si4e: )8"OI
h9 Hfont-si4e: )3"OI
p Hfont-si4e: )""OI
(;style*
(;head*
(body*
(;body*
(;html*
(his is header /
(his is header 3
This is a paragraph
Set the style of the font
This e%ample demonstrates how to set the style of a font!
(html*
(head*
h) Hfont-style: italicI
h9 Hfont-style: normalI
p Hfont-style: obli<ueI
(;style*
(;head*
(body*
(;body*
(;html*
(his is header /
6age )K of 78
(his is header 3
This is a paragraph
Set the variant of the font
This e%ample demonstrates how to set the variant of a font!
(html*
(head*
p!normal Hfont-variant: normalI
p!small Hfont-variant: small-capsI
(;style*
(;head*
(body*
(p*
(b*.ote:(;b* .etscape does not support the 'font-variant' property!
(;p*
(p class?'normal'*
(p class?'small'*
(;body*
(;html*
)ote* .etscape does not support the 'font-variant' property!
This is a paragraph
TH/S /S + 6+A+:A+6H
Set the boldness of the font
This e%ample demonstrates how to set the boldness of a font!
(html*
(head*
p!normal Hfont-weight: normalI
p!thic# Hfont-weight: boldI
p!thic#er Hfont-weight: K""I
(;style*
(;head*
6age 9" of 78
(body*
(p class?'normal'*
(p class?'thic#'*
(p class?'thic#er'*
(;body*
(;html*
This is a paragraph
(his is a para&raph
(his is a para&raph
+ll the font properties in one declaration
This e%ample demonstrates how to use the shorthand property for setting all of the font properties in one declaration!
(html*
(head*
p
H
font: italic small-caps K"" )9p% arial
I
(;style*
(;head*
(body*
(;body*
(;html*
THIS IS A PARAGRAPH
CSS 5onts
The Gont properties allow you to change the font family, boldness, si4e, and the style of a te%t!
6age 9) of 78
)otes 4 6seful (ips
Gonts are identified by their name in &SS)! .ote that if a browser does not support the font that is specified, it will
use a default font!
5ont !roperties*
font + shorthand property for setting
all of the properties for a font in
one declaration
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-bo%
small-caption
status-bar
!" !" &SS)
font-family + prioriti4ed list of font family
names and;or generic family
names for an element
family-name
generic-family
!" 3!" &SS)
font-si4e Sets the si4e of a font %%-small
%-small
small
medium
large
%-large
%%-large
smaller
larger
length
%
!" 3!" &SS)
font-si4e-ad,ust Specifies an aspect value for an
element that will preserve the %-
height of the first-choice font
none
number
&SS9
font-stretch &ondenses or e%pands the current
font-family
normal
wider
narrower
ultra-condensed
e%tra-condensed
condensed
semi-condensed
semi-e%panded
e%panded
e%tra-e%panded
&SS9
6age 99 of 78
ultra-e%panded
font-style Sets the style of the font normal
italic
obli<ue
!" !" &SS)
font-variant Bisplays te%t in a small-caps font
or a normal font
normal
small-caps
D!" !" &SS)
font-weight Sets the weight of a font normal
bold
bolder
lighter
)""
9""
3""
""
8""
D""
E""
7""
K""
!" !" &SS)
CSS 0order !roperties
&SS Border properties define the borders around an element!
Examples
Set the style of the four borders
This e%ample demonstrates how to set the style of the four borders!
(html*
(head*
p!dotted Hborder-style: dottedI
p!dashed Hborder-style: dashedI
p!solid Hborder-style: solidI
p!double Hborder-style: doubleI
p!groove Hborder-style: grooveI
p!ridge Hborder-style: ridgeI
p!inset Hborder-style: insetI
p!outset Hborder-style: outsetI
(;style*
(;head*
(body*
6age 93 of 78
(p*The 'border-style' property is not recogni4ed by .etscape !(;p*
(p*.etscape D supports all border styles!(;p*
(p*/nternet $%plorer 8!8 supports all border styles! /nternet $%plorer !" - 8!" do not support the 'dotted' and
'dashed' values(;p*
(p class?'dotted'*
+ dotted border(;p*
(p class?'dashed'*
+ dashed border(;p*
(p class?'solid'*
+ solid border(;p*
(p class?'double'*
+ double border(;p*
(p class?'groove'*
+ groove border(;p*
(p class?'ridge'*
+ ridge border(;p*
(p class?'inset'*
+n inset border(;p*
(p class?'outset'*
+n outset border(;p*
(;body*
(;html*
The 'border-style' property is not recogni4ed by .etscape !
.etscape D supports all border styles!
/nternet $%plorer 8!8 supports all border styles! /nternet $%plorer !" - 8!" do not support the 'dotted'
and 'dashed' values
+ dotted border
+ dashed border
+ solid border
+ double border
6age 9 of 78
+ groove border
+ ridge border
+n inset border
+n outset border
Set different borders on each side
This e%ample demonstrates how to set different borders on each side of the element!
(html*
(head*
p!soliddouble Hborder-style: solid doubleI
p!doublesolid Hborder-style: double solidI
p!groovedouble Hborder-style: groove doubleI
p!three Hborder-style: solid double grooveI
(;style*
(;head*
(body*
(p*
(b*.ote:(;b* .etscape does not support the 'border-style' property! Fse the 'border' property to set the borders in
.etscape!(;p*
(p class?'soliddouble'*
Some te%t(;p*
(br*
(p class?'doublesolid'*
Some te%t(;p*
(br*
(p class?'groovedouble'*
Some te%t(;p*
(br*
(p class?'three'*
Some te%t(;p*
(;body*
(;html*
)ote* .etscape does not support the 'border-style' property! Fse the 'border' property to set the
borders in .etscape!
6age 98 of 78
Some te%t
Some te%t
Some te%t
Some te%t
Set the color of the four borders
This e%ample demonstrates how to set the color of the four borders! /t can have from one to four colors!
(html*
(head*
p!one
H
border-style: solidL
border-color: J""""ff
I
p!two
H
border-color: Jff""""
J""""ff
I
p!three
H
J""ff"" J""""ff
I
p!four
H
J""ff"" J""""ff
rgb098",",9881
I
(;style*
(;head*
(body*
6age 9D of 78
(p class?'one'*(b*.ote:(;b* The 'border-color' property is not recogni4ed in /nternet
$%plorer if it is used alone! Fse the 'border-style' property to set the borders first
in /nternet $%plorer!(;p*
(p class?'two'*Some te%t(;p*
(p class?'three'*(b*.ote:(;b* .etscape does not support the 'border-color' property! Fse the 'border' property
to set the borders and colors in .etscape!(;p*
(p class?'four'*Some te%t(;p*
(;body*
(;html*
)ote* The 'border-color' property is not recogni4ed in /nternet $%plorer if it is used alone! Fse the
'border-style' property to set the borders first in /nternet $%plorer!
Some te%t
)ote* .etscape does not support the 'border-color' property! Fse the 'border' property to set the
borders and colors in .etscape!
Some te%t
Set the width of the bottom border
This e%ample demonstrates how to set the width of the bottom border!
(html*
(head*
p
H
border-bottom-width: )8p%
I
(;style*
(;head*
(body*
(p*The 'border-bottom-width' property is not recogni4ed in /nternet $%plorer if it is used alone! Fse the 'border-
style' property to set the borders first
with /nternet $%plorer!(;p*
(;body*
(;html*
6age 9E of 78
The 'border-bottom-width' property is not recogni4ed in /nternet $%plorer if it is used alone! Fse the
'border-style' property to set the borders first with /nternet $%plorer!
Set the width of the left border
This e%ample demonstrates how to set the width of the left border!
(html*
(head*
p
H
border-left-width: )8p%
I
(;style*
(;head*
(body*
(p*The 'border-left-width' property is not recogni4ed in /nternet $%plorer if it is used alone! Fse the 'border-style'
property to set the borders first
in /nternet $%plorer!(;p*
(;body*
(;html*
The 'border-left-width' property is not recogni4ed in /nternet $%plorer if it is used alone! Fse the
'border-style' property to set the borders first in /nternet $%plorer!
Set the width of the right border
This e%ample demonstrates how to set the width of the right border!
Set the width of the top border
This e%ample demonstrates how to set the width of the top border!
+ll the bottom border properties in one declaration
This e%ample demonstrates a shorthand property for setting all of the properties for the bottom border in one
declaration!
(html*
(head*
p
H
border-bottom: medium solid Jff""""
I
(;style*
(;head*
6age 97 of 78
(body*
(p*(b*.ote:(;b* .etscape does not support the 'border-bottom' property! Fse the 'border-bottom-width'
property to set the width of the bottom
border with .etscape!(;p*
(;body*
(;html*
)ote* .etscape does not support the 'border-bottom' property! Fse the 'border-bottom-width'
property to set the width of the bottom border with .etscape!
+ll the left border properties in one declaration
This e%ample demonstrates a shorthand property for setting all of the properties for the left border in one declaration!
+ll the right border properties in one declaration
This e%ample demonstrates a shorthand property for setting all of the properties for the right border in one
declaration!
+ll the top border properties in one declaration
This e%ample demonstrates a shorthand property for setting all of the properties for the top border in one declaration!
+ll the width of the border properties in one declaration
This e%ample demonstrates a shorthand property for setting the width of the four borders in one declaration, can have
from one to four values!
+ll the border properties in one declaration
This e%ample demonstrates a shorthand property for setting all of the properties for the four borders in one
declaration, can have from one to three values!
CSS 0orders
The Border properties allow you to specify the style, color, and width of an element2s border! /n HTML we used
tables to create borders around a te%t, but with the Border properties we can create borders with nice effects, and it
can be applied to any element!
0order !roperties*
border + shorthand property for setting
all of the properties for the four
borders in one declaration
border-width
border-style
border-color
!" !" &SS)
border-bottom + shorthand property for setting
all of the properties for the bottom
border-bottom-width
border-style
D!" !" &SS)
6age 9K of 78
border in one declaration border-color
border-bottom-color Sets the color of the bottom
border
border-color D!" !" &SS9
border-bottom-style Sets the style of the bottom border border-style D!" !" &SS9
border-bottom-width Sets the width of the bottom
border
thin
medium
thic#
length
!" !" &SS)
border-color Sets the color of the four borders,
can have from one to four colors
color D!" !" &SS)
border-left + shorthand property for setting
all of the properties for the left
border in one declaration
border-left-width
border-style
border-color
D!" !" &SS)
border-left-color Sets the color of the left border border-color D!" !" &SS9
border-left-style Sets the style of the left border border-style D!" !" &SS9
border-left-width Sets the width of the left border thin
medium
thic#
length
!" !" &SS)
border-right + shorthand property for setting
all of the properties for the right
border-right-width
border-style
border-color
D!" !" &SS)
border-right-color Sets the color of the right border border-color D!" !" &SS9
border-right-style Sets the style of the right border border-style D!" !" &SS9
border-right-width Sets the width of the right border thin
medium
thic#
length
!" !" &SS)
border-style Sets the style of the four borders,
can have from one to four styles
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
D!" !" &SS)
border-top + shorthand property for setting
all of the properties for the top
border-top-width
border-style
border-color
D!" !" &SS)
border-top-color Sets the color of the top border border-color D!" !" &SS9
border-top-style Sets the style of the top border border-style D!" !" &SS9
border-top-width Sets the width of the top border thin !" !" &SS)
6age 3" of 78
medium
thic#
length
border-width + shorthand property for setting
the width of the four borders in
one declaration, can have from
one to four values
thin
medium
thic#
length
!" !" &SS)
CSS $ar&in !roperties
&SS Margin properties define the space around elements!
Examples
Set the left margin of a te%t
This e%ample demonstrates how to set the left margin of a te%t!
(html*
(head*
p!margin Hmargin-left: 9cmI
(;style*
(;head*
(body*
(p*
This is a paragraph This is a paragraph
(;p*
(p class?'margin'*
This is a paragraph with a left margin
This is a paragraph with a left margin
(;p*
(;body*
(;html*
This is a paragraph This is a paragraph This is a paragraph This is a paragraph
This is a paragraph with a left margin This is a paragraph with a left margin
6age 3) of 78
Set the right margin of a te%t
This e%ample demonstrates how to set the right margin of a te%t!
Set the top margin of a te%t
This e%ample demonstrates how to set the top margin of a te%t!
Set the bottom margin of a te%t
This e%ample demonstrates how to set the bottom margin of a te%t!
+ll the margin properties in one declaration
This e%ample demonstrates how to set a shorthand property for setting all of the margin properties in one declaration!
CSS $ar&ins
The Margin properties define the space around elements! /t is possible to use negative values to overlap content! The
top, right, bottom, and left margin can be changed independently using separate properties! + shorthand margin
property can also be used to change all of the margins at once!
$ar&in !roperties*
margin + shorthand property for setting
the margin properties in one
declaration
margin-top
margin-right
margin-bottom
margin-left
!" !" &SS)
margin-bottom Sets the bottom margin of an
element
auto
length
%
!" !" &SS)
margin-left Sets the left margin of an element auto
length
%
!" 3!" &SS)
margin-right Sets the right margin of an
element
auto
length
%
!" 3!" &SS)
margin-top Sets the top margin of an element auto
length
%
!" 3!" &SS)
CSS !addin& !roperties
6age 39 of 78
&SS 6adding properties define the space between the element border and the element content!
Examples
Set the left padding
This e%ample demonstrates how to set the left padding of a tablecell!
(html*
(head*
td Hpadding-left: 9cmI
(;style*
(;head*
(body*
(table border?')'*
(tr*
(td*
This is a tablecell with a left padding
(;td*
(;tr*
(;table*
(;body*
(;html*
This is a tablecell with a left padding
Set the right padding
This e%ample demonstrates how to set the right padding of a tablecell!
Set the top padding
This e%ample demonstrates how to set the top padding of a tablecell!
Set the bottom padding
This e%ample demonstrates how to set the bottom padding of a tablecell!
+ll the padding properties in one declaration
This e%ample demonstrates a shorthand property for setting all of the padding properties in one declaration, can have
from one to four values!
CSS !addin&
6age 33 of 78
The 6adding properties define the space between the element border and the element content! .egative values are not
allowed! The top, right, bottom, and left padding can be changed independently using separate properties! + shorthand
padding property is also created to control multiple sides at once!
!addin& !roperties*
padding + shorthand property for setting
all of the padding properties in
one declaration
padding-top
padding-right
padding-bottom
padding-left
!" !" &SS)
padding-bottom
Sets the bottom padding of an
element
length
%
!" !" &SS)
padding-left
Sets the left padding of an element length
%
!" !" &SS)
padding-right
Sets the right padding of an
element
length
%
!" !" &SS)
padding-top Sets the top padding of an element length
%
!" !" &SS)
CSS "ist !roperties
The List properties allow you to change between different list-item mar#ers, set an image as a list-item mar#er, and
set where to place a list-item mar#er!
Examples
The different list-item mar#ers in unordered lists
This e%ample demonstrates the different list-item mar#ers in &SS!
(html*
(head*
ul!disc
H
list-style-type: disc
I
ul!circle
6age 3 of 78
H
list-style-type: circle
I
ul!s<uare
H
list-style-type: s<uare
I
ul!none
H
list-style-type: none
I
(;style*
(;head*
(body*
(ul class?'disc'*
(li*&offee(;li*
(li*Tea(;li*
(li*&oca &ola(;li*
(;ul*
(ul class?'circle'*
(li*&offee(;li*
(li*Tea(;li*
(li*&oca &ola(;li*
(;ul*
(ul class?'s<uare'*
(li*&offee(;li*
(li*Tea(;li*
(li*&oca &ola(;li*
(;ul*
(ul class?'none'*
(li*&offee(;li*
(li*Tea(;li*
(li*&oca &ola(;li*
(;ul*
(;body*
(;html*
&offee
Tea
&oca &ola
o &offee
o Tea
o &oca &ola
&offee
Tea
&oca &ola
6age 38 of 78
&offee
Tea
&oca &ola
The different list-item mar#ers in ordered lists
This e%ample demonstrates the different list-item mar#ers in &SS!
(html*
(head*
ol!decimal
H
list-style-type: decimal
I
ol!lroman
H
list-style-type: lower-roman
I
ol!uroman
H
list-style-type: upper-roman
I
ol!lalpha
H
list-style-type: lower-alpha
I
ol!ualpha
H
list-style-type: upper-alpha
I
(;style*
(;head*
(body*
(ol class?'decimal'*
(li*&offee(;li*
(li*Tea(;li*
(li*&oca &ola(;li*
(;ol*
(ol class?'lroman'*
(li*&offee(;li*
(li*Tea(;li*
(li*&oca &ola(;li*
(;ol*
(ol class?'uroman'*
(li*&offee(;li*
6age 3D of 78
(li*Tea(;li*
(li*&oca &ola(;li*
(;ol*
(ol class?'lalpha'*
(li*&offee(;li*
(li*Tea(;li*
(li*&oca &ola(;li*
(;ol*
(ol class?'ualpha'*
(li*&offee(;li*
(li*Tea(;li*
(li*&oca &ola(;li*
(;ol*
(;body*
(;html*
)! &offee
9! Tea
3! &oca &ola
i! &offee
ii! Tea
iii! &oca &ola
/! &offee
//! Tea
///! &oca &ola
a! &offee
b! Tea
c! &oca &ola
+! &offee
B! Tea
&! &oca &ola
Set an image as the list-item mar#er
This e%ample demonstrates how to set an image as the list-item mar#er!
(html*
(head*
ul
H
list-style-image: url0';images;arrow!gif'1
I
(;style*
(;head*
(body*
6age 3E of 78
(p*(b*.ote:(;b* .etscape does not support the 'list-style-image' property!(;p*
(ul*
(li*&offee(;li*
(li*Tea(;li*
(li*&oca &ola(;li*
(;ul*
(;body*
(;html*
)ote* .etscape does not support the 'list-style-image' property!
&offee
Tea
&oca &ola
6lace the list-item mar#er
This e%ample demonstrates where to place the list-item mar#er!
+ll list properties in one declaration
This e%ample demonstrates a shorthand property for setting all of the properties for a list in one declaration!
"ist !roperties*
list-style + shorthand property for setting
all of the properties for a list in
one declaration
list-style-type
list-style-position
list-style-image
D!" !" &SS)
list-style-image Sets an image as the list-item
mar#er
none
url
D!" !" &SS)
list-style-position 6laces the list-item mar#er in the
list
inside
outside
D!" !" &SS)
list-style-type Sets the type of the list-item
mar#er
none
disc
circle
s<uare
decimal
decimal-leading-4ero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-gree#
lower-latin
!" !" &SS)
6age 37 of 78
upper-latin
hebrew
armenian
georgian
c,#-ideographic
hiragana
#ata#ana
hiragana-iroha
#ata#ana-iroha
mar#er-offset auto
length
&SS9
CSS imension !roperties
The Bimension properties allow you to control the height and width of an element! /t also allows you to increase the
space between two lines!
Examples
Set the height and width of an image
This e%ample demonstrates how to set the height and width of an image!
(html*
(head*
img!normal
H
height: autoL
width: auto
I
img!big
H
height: 7"p%L
width: )""p%
I
img!small
H
height: 3"p%L
width: 8"p%
I
(;style*
(;head*
6age 3K of 78
(body*
(p*(b*.ote:(;b* .etscape does not support the 'height' property, and the 'width'
property does not wor# on images!(;p*
(img class?'normal' src?';images;bac#!gif' width?'E9' height?'"'*
(br*(br*
(img class?'big' src?';images;bac#!gif' width?'E9' height?'"'*
(br*(br*
(img class?'small' src?';images;bac#!gif' width?'E9' height?'"'*
(;body*
(;html*
)ote* .etscape does not support the 'height' property, and the 'width' property does not wor# on images!
/ncrease the space between lines
This e%ample demonstrates how to increase the space between the lines!
(html*
(head*
p!increase Hline-height: )cmI
(;style*
(;head*
(body*
(p*
This is a paragraph
(;p*
(p class?'increase'*
(;body*
6age " of 78
(;html*
This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph
This is a paragraph
This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph
This is a paragraph
imension !roperties*
height Sets the height of an element auto
length
%
D!" !" &SS)
line-height Sets the distance between lines normal
number
length
%
!" !" &SS)
ma%-height Sets the ma%imum height of an
element
none
length
%
&SS9
ma%-width Sets the ma%imum width of an
element
none
length
%
&SS9
min-height Sets the minimum height of an
element
length
%
&SS9
min-width Sets the minimum width of an
element
length
%
&SS9
width Sets the width of an element auto
%
length
!" !" &SS)
CSS Classification !roperties
The &lassification properties allow you to control how to display an element, set where an image will appear in
another element, position an element relative to its normal position, position an element using an absolute value, and
how to control the visibility of an element!
6age ) of 78
Examples
How to display an element
This e%ample demonstrates how to display an element!
(html*
(head*
div Hdisplay: noneI
p Hdisplay: inlineI
(;style*
(;head*
(body*
(div*
The div section is invisible
(;div*
(p*
With the value of 'inline' there should be
(;p*
(p*
no distance between the two paragraphs!
(;p*
(;body*
(;html*
With the value of 'inline' there should be no distance between the two paragraphs!
Gloat
This e%ample demonstrates how to set where an image will appear in another element!
(html*
(head*
img
H
float: left
I
(;style*
(;head*
(body*
6age 9 of 78
(p*
(img src?';images;boo#asp9"!gif'
width?')9"' height?')8)' ;*With the
value of 'left' the image will
float to the left in the
paragraph!
(;p*
(;body*
(;html*
With the value of 'left' the image will float to the left in the paragraph!

6osition:relative
This e%ample demonstrates how to position an element relative to its normal position!
(html*
(head*
h)!e%)
H
position:relativeL
left:9"p%
I
h)!e%9
H
position:relativeL
left:-9"p%
I
(;style*
(;head*
(body*
(h)*.ormal Heading(;h)*
(h) class?'e%)'*Heading P9"(;h)*
(h) class?'e%9'*Heading -9"(;h)*
(p*
Aelative positioning moves an element relative to its original position!
(;p*
(p*
'left:9"' adds 9" pi%els to the element2s L$GT position!
(;p*
6age 3 of 78
(p*
'left:-9"' subtracts 9" pi%els from the element2s L$GT position!
(;p*
(;body*
(;html*
)ormal 'eadin&
'eadin& 738
'eadin& 438
Aelative positioning moves an element relative to its original position!
'left:9"' adds 9" pi%els to the element2s L$GT position!
'left:-9"' subtracts 9" pi%els from the element2s L$GT position!
6osition:absolute
This e%ample demonstrates how to position an element using an absolute value!
(html*
(head*
h)!%
H
position:absoluteL
left:)""p%L
top:)8"p%
I
(;style*
(;head*
(body*
(h) class?'%'*This is a heading(;h)*
(p*
With absolute positioning, an element can be placed anywhere on a page!
(;p*
(p*
The L$GT position of the heading is )"" pi%els from the left of the page!
The T=6 position is )8" pi%els from the top of the page!
(;p*
(;body*
(;html*
6age of 78
With absolute positioning, an element can be placed anywhere on a page!
The L$GT position of the heading is )"" pi%els from the left of the page! The T=6 position is )8"
pi%els from the top of the page
(his is a headin&
How to ma#e an element invisible
This e%ample demonstrates how to ma#e an element invisible! Bo you want the element to show or notQ
(html*
(head*
h)!one
H
visibility:visible
I
h)!two
H
visibility:hidden
I
(;style*
(;head*
(body*
(p*(b*.ote:(;b* .etscape does not support the 'visibility' property!(;p*
(h) class?'one'*Heading one(;h)*
(h) class?'two'*Heading two(;h)*
(p*Where is heading twoQ(;p*
(;body*
(;html*
)ote* .etscape does not support the 'visibility' property!
'eadin& one
'eadin& two
Where is heading twoQ
&hange the cursor
This e%ample demonstrates how to change the cursor!
6age 8 of 78
(html*
(body*
(p*
(b*.ote:(;b* .etscape does not support the 'cursor' property!
(;p*
(p*
Move the mouse over the words to see the cursor change!
(;p*
(span style?'cursor:auto'*
+uto(;span*(br ;*
(span style?'cursor:crosshair'*
&rosshair(;span*(br ;*
(span style?'cursor:default'*
Befault(;span*(br ;*
(span style?'cursor:pointer'*
6ointer(;span*(br ;*
(span style?'cursor:move'*
Move(;span*(br ;*
(span style?'cursor:e-resi4e'*
e-resi4e(;span*(br ;*
(span style?'cursor:ne-resi4e'*
ne-resi4e(;span*(br ;*
(span style?'cursor:nw-resi4e'*
nw-resi4e(;span*(br ;*
(span style?'cursor:n-resi4e'*
n-resi4e(;span*(br ;*
(span style?'cursor:se-resi4e'*
se-resi4e(;span*(br ;*
(span style?'cursor:sw-resi4e'*
sw-resi4e(;span*(br ;*
(span style?'cursor:s-resi4e'*
s-resi4e(;span*(br ;*
(span style?'cursor:w-resi4e'*
w-resi4e(;span*(br ;*
(span style?'cursor:te%t'*
te%t(;span*(br ;*
(span style?'cursor:wait'*
wait(;span*(br ;*
(span style?'cursor:help'*
help(;span*
(;body*
(;html*
)ote* .etscape does not support the 'cursor' property!
Move the mouse over the words to see the cursor change!
+uto
&rosshair
Befault
6ointer
6age D of 78
Move
e-resi4e
ne-resi4e
nw-resi4e
n-resi4e
se-resi4e
sw-resi4e
s-resi4e
w-resi4e
te%t
wait
help
Classification !roperties*
clear Sets the sides of an element where
other floating elements are not
allowed
left
right
both
none
!" !" &SS)
cursor Specifies the type of cursor to be
displayed
url
auto
crosshair
default
pointer
move
e-resi4e
ne-resi4e
nw-resi4e
n-resi4e
se-resi4e
sw-resi4e
s-resi4e
w-resi4e
te%t
wait
help
D!" !" &SS9
display Sets how;if an element is
displayed
none
inline
bloc#
list-item
run-in
compact
mar#er
table
inline-table
table-row-group
table-header-group
table-footer-group
!" !" &SS)
6age E of 78
table-row
table-column-group
table-column
table-cell
table-caption
float Sets where an image or a te%t will
appear in another element
left
right
none
!" !" &SS)
position 6laces an element in a static,
relative, absolute or fi%ed position
static
relative
absolute
fi%ed
!" !" &SS9
visibility Sets if an element should be
visible or invisible
visible
hidden
collapse
D!" !" &SS9
CSS !ositionin& !roperties
&SS 6ositioning properties define the position of an element!
Examples
Set the shape of an element
This e%ample demonstrates how to set the shape of an element! The element is clipped into this shape, and displayed!
(html*
(head*
img
H
position:absoluteL
clip:rect0"p% )""p% 9""p% "p%1
I
(;style*
(;head*
(body*
(p*(b*.ote:(;b* .etscape does not support the 'clip' property!(;p*
(p*.ote that this property is cutting the image!
(br*
The width and the height properties 0or attributes1 decreases the image!
6age 7 of 78
(;p*
(p*
(img border?'"' src?';images;boo#ie8dhtml!gif' width?')8"' height?'998'*
(;p*
(;body*
(;html*
)ote* .etscape does not support the 'clip' property!
.ote that this property is cutting the image!
The width and the height properties 0or attributes1 decreases the image!
Set the left and top position of an element
This e%ample demonstrates how to set the left and top position of an element!
(html*
(head*
h)
H
position: absoluteL
top: )""p%L
left: )""p%
I
p
H
position: absoluteL
top: 9""p%L
left: )""p%
I
(;style*
(;head*
(body*
6age K of 78
(h)*+ heading(;h)*
(p*
The (b*heading(;b* is placed )""p%
down from the top of the document,
and )""p% to the right from the
left side of the document!
The (b*paragraph(;b* is placed 9""p%
down from the top of the document,
and )""p% to the right from the
left side of the document!
(;p*
(;body*
(;html*
Set the right and bottom position of an element
This e%ample demonstrates how to set the right and bottom position of an element!
=verflow
This e%ample demonstrates how to set the overflow property to specify what should happen when an element2s
content is too big to fit in a specified area!
(html*
(head*
div
H
bac#ground-color:J""GGGGL
width:)8"p%L
height:)8"p%L
overflow: scroll
I
(;style*
(;head*
(body*
(p*(b*.ote:(;b* .etscape does not support the 'overflow' property!(;p*
(p*
The overflow property decides what to do if the content inside an element e%ceeds the given width and height
properties! /f you set the overflow property to scroll, scrollbars will be added to the element!
(;p*
(div*
5ou can use the overflow property when you want to have better control of the layout!(br*(br*
Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens! The default value is
visible!
(;div*
(;body*
6age 8" of 78
(;html*
)ote* .etscape does not support the 'overflow' property!
The overflow property decides what to do if the content inside an element e%ceeds the given width and
height properties! /f you set the overflow property to scroll, scrollbars will be added to the element!
5ou can use the overflow property when you want to have better control of the layout!
Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens! The
default value is visible!
0See blue portion in vertical and hori4ontal scroll bars1!
@ertical align an image
This e%ample demonstrates how to vertical align an image in a te%t!
(html*
(head*
img!top Hvertical-align:te%t-topI
img!bottom Hvertical-align:te%t-bottomI
(;style*
(;head*
(body*
(p*
This is an
(img class?'top' border?'"'
src?';images;alertRredRbg!gif'
width?'))8' height?''*
image inside a paragraph!
(;p*
(p*
This is an
(img class?'bottom' border?'"'
src?';images;alertRredRbg!gif'
width?'))8' height?''*
image inside a paragraph!
(;p*
(;body*
(;html*
This is an image inside a paragraph!
6age 8) of 78
This is an image inside a paragraph!
S-inde%
S-inde% can be used to place an element 'behind' another element, using S-inde% priority!
(html*
(head*
img!%
H
position:absoluteL
left:"p%L
top:"p%L
4-inde%:-)
I
(;style*
(;head*
(body*
(p*(b*.ote:(;b* .etscape does not support the '4-inde%' property!(;p*
(h)*This is a Heading(;h)*
(img class?'%' src?';images;bulbon!gif' width?')""' height?')7"'*
(p*Befault 4-inde% is "! S-inde% -) has lower priority!(;p*
(;body*
(;html*
)ote* .etscape does not support the '4-inde%' property!
(his is a 'eadin&
Befault 4-inde% is "! S-inde% -) has lower priority!
S-inde%
&hec# that the elements now have changed their S-inde% priority!
6age 89 of 78
(html*
(head*
img!%
H
position:absoluteL
left:"p%L
top:"p%L
4-inde%:)
I
(;style*
(;head*
(body*
(p*(b*.ote:(;b* .etscape does not support the '4-inde%' property!(;p*
(h)*This is a Heading(;h)*
(img class?'%' src?';images;bulbon!gif' width?')""' height?')7"'*
(p*Befault 4-inde% is "! S-inde% ) has higher priority!(;p*
(;body*
(;html*
CSS !ositionin&
The 6ositioning properties allow you to specify the left, right, top, and bottom position of an element! /t also allows
you to set the shape of an element, place an element behind another, and to specify what should happen when an
element2s content is too big to fit in a specified area!
!ositionin& !roperties*
bottom Specifies the bottom edge of an
element
auto
%
length
D!" 8!" &SS9
clip Sets the shape of an element! The
element is clipped into this shape,
and displayed
shape
auto
D!" !" &SS9
left Specifies the left edge of an
element
auto
%
length
!" !" &SS9
overflow Sets what happens if the content
of an element overflow its area
visible
hidden
D!" !" &SS9
6age 83 of 78
scroll
auto
static
relative
absolute
fi%ed
!" !" &SS9
right Specifies the right edge of an
element
auto
%
length
8!" &SS9
top Sets how far the top edge of an
element is above;below the top
edge of the parent element
auto
%
length
!" !" &SS9
vertical-align Sets the vertical alignment of an
element
baseline
sub
super
top
te%t-top
middle
bottom
te%t-bottom
length
%
!" !" &SS)
4-inde% Sets the stac# order of an element auto
number
D!" !" &SS9
CSS !seudo4classes
6seudo-classes are used in &SS to add different effects to some selectors, or to a part of some selectors!
Examples
Hyperlin#
This e%ample demonstrates how to add different colors to a hyperlin# in a document!
(html*
(head*
a:lin# Hcolor: JGG""""I
a:visited Hcolor: J""GG""I
a:hover Hcolor: JGG""GGI
a:active Hcolor: J""""GGI
(;style*
6age 8 of 78
(;head*
(body*
(p*(b*(a href?'default!asp' target?'Rblan#'*This is a lin#(;a*(;b*(;p*
(p*(b*.ote:(;b* a:hover MFST come after a:lin# and a:visited in the &SS definition in order to be effective>>(;p*
(p*(b*.ote:(;b* a:active MFST come after a:hover in the &SS definition in order to be effective>>(;p*
(;body*
(;html*
(his is a lin#
)ote* a:hover MFST come after a:lin# and a:visited in the &SS definition in order to be effective>>
)ote* a:active MFST come after a:hover in the &SS definition in order to be effective>>
Hyperlin# 9
This e%ample demonstrates how to add other styles to hyperlin#s!
(html*
(head*
a!one:lin# Hcolor: Jff""""I
a!one:visited Hcolor: J""""ffI
a!one:hover Hcolor: Jffcc""I
a!two:lin# Hcolor: Jff""""I
a!two:visited Hcolor: J""""ffI
a!two:hover Hfont-si4e: )8"OI
a!three:lin# Hcolor: Jff""""I
a!three:visited Hcolor: J""""ffI
a!three:hover Hbac#ground: JDDffDDI
a!four:lin# Hcolor: Jff""""I
a!four:visited Hcolor: J""""ffI
a!four:hover Hfont-family: fi%edsysI
a!five:lin# Hcolor: Jff""""L te%t-decoration: noneI
a!five:visited Hcolor: J""""ffL te%t-decoration: noneI
a!five:hover Hte%t-decoration: underlineI
(;style*
(;head*
(body*
(p*Mouse over the lin#s to see them change layout!(;p*
(p*(b*(a class?'one' href?'default!asp' target?'Rblan#'*This lin# changes color(;a*(;b*(;p*
(p*(b*(a class?'two' href?'default!asp' target?'Rblan#'*This lin# changes font-si4e(;a*(;b*(;p*
(p*(b*(a class?'three' href?'default!asp' target?'Rblan#'*This lin# changes bac#ground-color(;a*(;b*(;p*
(p*(b*(a class?'four' href?'default!asp' target?'Rblan#'*This lin# changes font-family(;a*(;b*(;p*
(p*(b*(a class?'five' href?'default!asp' target?'Rblan#'*This lin# changes te%t-decoration(;a*(;b*(;p*
(;body*
6age 88 of 78
(;html*
Mouse over the lin#s to see them change layout!
(his lin# chan&es color
(his lin# chan&es font4si9e
(his lin# chan&es bac#&round4color
(his lin# chan&es font4family
(his lin# chan&es text4decoration
Syntax
The synta% of pseudo-classes:
selector:pseudo-class {property: value}
&SS classes can also be used with pseudo-classes:
selector%class:pseudo-class {property: value}
Anchor !seudo4classes
+ lin# that is active, visited, unvisited, or when you mouse over a lin# can all be displayed in different ways in a &SS-
supporting browser:
a:link {color: ,770000} +- unvisited link -+
a:visited {color: ,007700} +- visited link -+
a:hover {color: ,770077} +- mouse over link -+
a:active {color: ,000077} +- selected link -+
)ote* a:hover MFST come after a:lin# and a:visited in the &SS definition in order to be effective>>
)ote* a:active MFST come after a:hover in the &SS definition in order to be effective>>
)ote* 6seudo-class names are not case-sensitive!
)ote* /$ and higher supports the anchor pseudo-class! .. !8 and .etscape D support the anchor pseudo-class only
partially!
6age 8D of 78
!seudo4classes and CSS Classes
6seudo-classes can be combined with &SS classes:
a%red:visited {color: ,770000}
&a class'"red" href'"css2syntax%asp"(8.. .yntax&+a(
/f the lin# in the e%ample above has been visited, it will be displayed in red!
CSS3 4 (he *first4child !seudo4class
The :first-child pseudo-class matches a specified element that is the first child of another element!
/n this e%ample, the selector matches any p element that is the first child of a div element, and indents the first
paragraph inside a div element:
div ( p:first-child
{
text-indent:#px
}
This selector will match the first paragraph inside the div in the following HTML:
&div(
&p(
7irst paragraph in div%
)his paragraph *ill be indented%
&+p(
&p(
.econd paragraph in div%
)his paragraph *ill not be indented%
&+p(
&+div(
but it will not match the paragraph in this HTML:
&div(
&h1(9eader&+h1(
&p(
)he first paragraph inside the div%
)his paragraph *ill not be indented%
&+p(
&+div(
/n this e%ample, the selector matches any em element that is the first child of a p element, and sets the font-weight
to bold for the first em inside a p element:
6age 8E of 78
p:first-child em
{
font-*eight:bold
}
Gor e%ample, the em in the HTML below is the first child of the paragraph:
&p(: am a &em(strong&+em( man%&+p(
/n this e%ample, the selector matches any a element that is the first child of any element, and sets the te%t-
decoration to none:
a:first-child
{
text-decoration:none
}
Gor e%ample, the first a in the HTML below is the first child of the paragraph and will not be underlined! But the
second a in the paragraph is not the first child of the paragraph and will be underlined:
&p(
;isit &a href'"http:++***%*!schools%com"(<!.chools&+a(
and learn 8..5
;isit &a href'"http:++***%*!schools%com"(<!.chools&+a(
and learn 9)=>5
&+p(
CSS3 4 (he *lan& !seudo4class
The :lang pseudo-class allows the author to specify a language to use in a document or to use in a specified element!
/n the e%ample below, the rule sets the type of <uotation mar#s for an HTML document that is in .orwegian:
html:lang0no1
H
<uotes: 2T 2 2 U2
I
/n the ne%t e%ample, the rule sets the type of <uotation mar#s for bloc#<uote elements:
bloc#<uote:lang0no1
H
<uotes: 2T 2 2 U2
I
6age 87 of 78
!seudo4classes
!seudo4classes )) IE W-C !urpose
active !" &SS) +dds special style to a selected lin#
hover !" &SS) +dds special style to a lin# when you mouse over it
lin# !" 3!" &SS) +dds special style to an unvisited lin#
visited !" 3!" &SS) +dds special style to a visited lin#
:first-child E!" &SS9 +dds special style to an element that is the first child of some
other element
:lang &SS9
+llows the author to specify a language to use in a specified
element
CSS !seudo4elements
6seudo-elements are used in &SS to add different effects to some selectors, or to a part of some selectors!
Examples
Ma#e the first letter special
This e%ample demonstrates how to add special style to the first letter in a te%t!
(html*
(head*
div:first-letter
H
color: Jff""""L
font-si4e:%%-large
I
(;style*
(;head*
(body*
(p*(b*.ote:(;b* .etscape does not support the 'first-letter' property!(;p*
(p*(b*.ote:(;b* /nternet $%plorer 8!8 supports the 'first-letter' property!(;p*
6age 8K of 78
(div*
5ou can use the first-letter pseudo-element to add special style to the first letter of a te%t!
(;div*
(;body*
(;html*
)ote* .etscape does not support the 'first-letter' property!
)ote* /nternet $%plorer 8!8 supports the 'first-letter' property!
5ou can use the first-letter pseudo-element to add special style to the first letter of a te%t!
Ma#e the first line special
This e%ample demonstrates how to add special style to the first line in a te%t!
(html*
(head*
div:first-line
H
color: Jff""""L
font-variant: small-caps
I
(;style*
(;head*
(body*
(p*(b*.ote:(;b* .etscape does not support the 'first-line' property!(;p*
(p*(b*.ote:(;b* /nternet $%plorer 8!8 supports the 'first-line' property!(;p*
(div*
5ou can use the first-line pseudo-element to add special style to the first line of a te%t!
(;div*
(;body*
(;html*
)ote* .etscape does not support the 'first-line' property!
)ote* /nternet $%plorer 8!8 supports the 'first-line' property!
5=F &+. FS$ TH$ G/AST-L/.$ 6S$FB=-$L$M$.T T= +BB S6$&/+L ST5L$ to the first line
of a te%t!
6age D" of 78
Syntax
The synta% of pseudo-elements:
selector:pseudo-element {property: value}
&SS classes can also be used with pseudo-elements:
selector%class:pseudo-element {property: value}
(he *first4line !seudo4element
The 'first-line' pseudo-element is used to add special styles to the first line of the te%t in a selector:
p {font-si/e: 1pt}
p:first-line {color: ,000077; font-variant: small-caps}
&p(.ome text that ends up on t*o or more lines&+p(
The output could be something li#e this:
S=M$ T$NT TH+T $.BS
up on two or more lines
/n the e%ample above the browser displays the first line formatted according to the 'first-line' pseudo element!
Where the browser brea#s the line depends on the si4e of the browser window!
)ote* The 'first-line' pseudo-element can only be used with bloc#-level elements!
)ote* The following properties apply to the 'first-line' pseudo-element:
font properties
color properties
bac#ground properties
word-spacing
letter-spacing
te%t-decoration
vertical-align
te%t-transform
line-height
clear
)ote* /$ !") and /$ 8!" do not support the 'first-line' pseudo-element, but /$ 8!8 does!
)ote* .. !8 does not support the 'first-line' pseudo-element!
6age D) of 78
(he * first4letter !seudo4element
The 'first-letter' pseudo-element is used to add special style to the first letter of the te%t in a selector:
p {font-si/e: 1pt}
p:first-letter {font-si/e: 00?; float: left}
&p()he first *ords of an article%&+p(
RRR
V he first
V words of an
article!
)ote* The 'first-letter' pseudo-element can only be used with bloc#-level elements!
)ote* The following properties apply to the 'first-letter' pseudo- element:
font properties
color properties
bac#ground properties
margin properties
padding properties
border properties
te%t-decoration
vertical-align 0only if 2float2 is 2none21
te%t-transform
line-height
float
clear
)ote* /$ !") and /$ 8!" do not support the 'first-letter' pseudo-element, but /$ 8!8 does!
)ote* .. !8 does not support the 'first-letter' pseudo-element!
!seudo4elements and CSS Classes
6seudo-elements can be combined with &SS classes:
p%article:first-letter {color: ,770000}
&p class'"article"(@ paragraph in an article&+p(
The e%ample above will ma#e the first letter of all paragraphs with class?'article' red!
6age D9 of 78
$ultiple !seudo4elements
Several pseudo-elements can be combined:
p {font-si/e: 1pt}
p:first-letter {color: ,770000; font-si/e: 00?}
p:first-line {color: ,000077}
&p()he first *ords of an article&+p(
RRR
V he first
V words of an
article!
/n the e%ample above the first letter of the paragraph will be red with a font si4e of 9pt! The rest of the first line
would be blue while the rest of the paragraph would be the default color!
CSS3 4 (he *before !seudo4element
The ':before' pseudo-element can be used to insert some content before an element!
The style below will play a sound before each occurrence of a header one element!
h):before
H
content: url0beep!wav1
I
CSS3 4 (he *after !seudo4element
The ':after' pseudo-element can be used to insert some content after an element!
The style below will play a sound after each occurrence of a header one element!
h):after
H
content: url0beep!wav1
I
6age D3 of 78
!seudo4elements
!seudo4elements )) IE W-C !urpose
first-letter 8!8 &SS) +dds special style to the first letter of a te%t
first-line 8!8 &SS) +dds special style to the first line of a te%t
:before &SS9 /nserts some content before an element
:after &SS9 /nserts some content after an element
CSS3 $edia (ypes
Media Types allow you to specify how documents will be presented in different media! The document can be
displayed differently on the screen, on the paper, with an aural browser, etc!
$edia (ypes
Some &SS properties are only designed for a certain media! Gor e%ample the 'voice-family' property is designed for
aural user agents! Some other properties can be used for different media types! Gor e%ample, the 'font-si4e' property
can be used for both screen and print media, but perhaps with different values! + document usually needs a larger
font-si4e on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to
read on paper!
(he :media ;ule
The Wmedia rule allows different style rules for different media in the same style sheet!
The style in the e%ample below tells the browser to display a ) pi%els @erdana font on the screen! But if the page is
printed, it will be in a )" pi%els Times font! .otice that the font-weight is set to bold, both on screen and on paper:
&html(
&head(
&style(
Amedia screen
{
p%test {font-family:verdana,sans-serif; font-si/e:1"px}
}
Amedia print
6age D of 78
{
p%test {font-family:times,serif; font-si/e:10px}
}
Amedia screen,print
{
p%test {font-*eight:bold}
}
&+style(
&+head(
&body(
%%%%
&+body(
&+html(
See it yourself < /f you use /$ 8!" 0or higher1 and print this page, you will see that the paragraph under 'Media Types'
will be displayed in another font, and have a smaller font si4e than the rest of the te%t!
ifferent $edia (ypes
)ote* The media type names are not case-sensitive!
$edia (ype escription )) IE
all Fsed for all media type devices !"
aural Fsed for speech and sound synthesi4ers
braille Fsed for braille tactile feedbac# devices
embossed Fsed for paged braille printers
handheld Fsed for small or handheld devices
print Fsed for printers !"
pro,ection Fsed for pro,ected presentations, li#e slides
screen Fsed for computer screens !"
tty Fsed for media using a fi%ed-pitch character grid, li#e teletypes and terminals
tv Fsed for television-type devices
CSS Examples
0ac#&round
Set the bac#ground color
Set an image as the bac#ground
How to repeat a bac#ground image vertically
How to repeat a bac#ground image hori4ontally
6age D8 of 78
How to place the bac#ground image
+ fi%ed bac#ground image 0this image will not scroll with the rest of the page1
+ll the bac#ground properties in one declaration
(ext
Set the color of the te%t
Specify the space between characters
+lign the te%t
Becorate the te%t
/ndent te%t
&ontrol the letters in a te%t
5ont
Set the font of a te%t
Set the si4e of the font
Set the style of the font
Set the variant of the font
Set the boldness of the font
+ll the font properties in one declaration
0order
Set the style of the four borders
Set different borders on each side
Set the color of the four borders
Set the width of the bottom border
Set the width of the left border
Set the width of the right border
Set the width of the top border
+ll the bottom border properties in one declaration
+ll the left border properties in one declaration
+ll the right border properties in one declaration
+ll the top border properties in one declaration
+ll the width of the border properties in one declaration
+ll the border properties in one declaration
$ar&in
Set the left margin of a te%t
Set the right margin of a te%t
Set the top margin of a te%t
Set the bottom margin of a te%t
+ll the margin properties in one declaration
!addin&
Set the left padding of a tablecell
Set the right padding of a tablecell
Set the top padding of a tablecell
Set the bottom padding of a tablecell
+ll the padding properties in one declaration
6age DD of 78
"ist
The different list-item mar#ers in unordered lists
The different list-item mar#ers in ordered lists
Set an image as the list-item mar#er
6lace the list-item mar#er
+ll list properties in one declaration
imension
Set the height and width of an image
/ncrease the space between lines
Classification
How to display an elementQ
Set where an image will appear in another element
6osition an element relative to its normal position
6osition all headings relative to its normal position
6osition an element with an absolute value
How to ma#e an element invisible
&hange the cursor
!ositionin&
Set the shape of an element
Set the left and top position of an element
What should happen when an element2s content is too big to fit in a specified area
@ertical alignment of an image
6lace an element 'behind' another element
6lace an element 'behind' another element 9
!seudo4classes
+dd different colors to a hyperlin#
+dd other styles to hyperlin#s
!seudo4elements
Ma#e the first letter special in a te%t
Ma#e the first line special in a te%t
CSS3 ;eference
The lin#s in the '6roperty' column point to more useful information about the specific property!
0rowser support* ..: .etscape, /$: /nternet $%plorer, W3&: Web Standard
Bac#ground :enerated &ontent 6ositioning
6age DE of 78
Border
&lassification
Bimension
Gont
List and Mar#er
Margin
=utlines
6adding
Table
Te%t
0ac#&round
=n-line e%amples
bac#ground + shorthand property for setting
all bac#ground properties in one
declaration
background-color
background-image
background-repeat
background-attachment
background-position
D!" !" &SS)
bac#ground-attachment Sets whether a bac#ground image
is fi%ed or scrolls with the rest of
the page
scroll
fi%ed
D!" !" &SS)
bac#ground-color Sets the bac#ground color of an
element
color-rgb
color-hex
color-name
transparent
!" !" &SS)
bac#ground-image Sets an image as the bac#ground url
none
!" !" &SS)
bac#ground-position Sets the starting position of a
bac#ground image
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
D!" !" &SS)
bac#ground-repeat Sets if;how a bac#ground image
will be repeated
repeat
repeat-%
repeat-y
no-repeat
!" !" &SS)
0order
=n-line e%amples
border + shorthand property for setting border-width !" !" &SS)
6age D7 of 78
all of the properties for the four
borders in one declaration
border-style
border-color
border-bottom + shorthand property for setting
all of the properties for the bottom
border-bottom-width
border-style
border-color
D!" !" &SS)
border-bottom-color Sets the color of the bottom
border
border-color D!" !" &SS9
border-bottom-style Sets the style of the bottom border border-style D!" !" &SS9
border-bottom-width Sets the width of the bottom
border
thin
medium
thic#
length
!" !" &SS)
border-color Sets the color of the four borders,
can have from one to four colors
color D!" !" &SS)
border-left + shorthand property for setting
all of the properties for the left
border-left-width
border-style
border-color
D!" !" &SS)
border-left-color Sets the color of the left border border-color D!" !" &SS9
border-left-style Sets the style of the left border border-style D!" !" &SS9
border-left-width Sets the width of the left border thin
medium
thic#
length
!" !" &SS)
border-right + shorthand property for setting
all of the properties for the right
border-right-width
border-style
border-color
D!" !" &SS)
border-right-color Sets the color of the right border border-color D!" !" &SS9
border-right-style Sets the style of the right border border-style D!" !" &SS9
border-right-width Sets the width of the right border thin
medium
thic#
length
!" !" &SS)
border-style Sets the style of the four borders,
can have from one to four styles
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
D!" !" &SS)
border-top + shorthand property for setting
all of the properties for the top
border-top-width
border-style
border-color
D!" !" &SS)
6age DK of 78
border-top-color Sets the color of the top border border-color D!" !" &SS9
border-top-style Sets the style of the top border border-style D!" !" &SS9
border-top-width Sets the width of the top border thin
medium
thic#
length
!" !" &SS)
border-width + shorthand property for setting
the width of the four borders in
one declaration, can have from
one to four values
thin
medium
thic#
length
!" !" &SS)
Classification
=n-line e%amples
clear Sets the sides of an element where
other floating elements are not
allowed
left
right
both
none
!" !" &SS)
cursor Specifies the type of cursor to be
displayed
url
auto
crosshair
default
pointer
move
e-resi4e
ne-resi4e
nw-resi4e
n-resi4e
se-resi4e
sw-resi4e
s-resi4e
w-resi4e
te%t
wait
help
D!" !" &SS9
display Sets how;if an element is
displayed
none
inline
bloc#
list-item
run-in
compact
mar#er
table
inline-table
table-row-group
table-header-group
table-footer-group
!" !" &SS)
6age E" of 78
table-row
table-column-group
table-column
table-cell
table-caption
float Sets where an image or a te%t will
appear in another element
left
right
none
!" !" &SS)
static
relative
absolute
fi%ed
!" !" &SS9
visibility Sets if an element should be
visible or invisible
visible
hidden
collapse
D!" !" &SS9
imension
=n-line e%amples
height Sets the height of an element auto
length
%
D!" !" &SS)
line-height Sets the distance between lines normal
number
length
%
!" !" &SS)
ma%-height Sets the ma%imum height of an
element
none
length
%
&SS9
ma%-width Sets the ma%imum width of an
element
none
length
%
&SS9
min-height Sets the minimum height of an
element
length
%
&SS9
min-width Sets the minimum width of an
element
length
%
&SS9
width Sets the width of an element auto
%
length
!" !" &SS)
5ont
=n-line e%amples
6age E) of 78
font + shorthand property for setting
all of the properties for a font in
one declaration
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-bo%
small-caption
status-bar
!" !" &SS)
font-family + prioriti4ed list of font family
names and;or generic family
names for an element
family-name
generic-family
!" 3!" &SS)
font-si4e Sets the si4e of a font %%-small
%-small
small
medium
large
%-large
%%-large
smaller
larger
length
%
!" 3!" &SS)
font-si4e-ad,ust Specifies an aspect value for an
element that will preserve the %-
height of the first-choice font
none
number
&SS9
font-stretch &ondenses or e%pands the current
font-family
normal
wider
narrower
ultra-condensed
e%tra-condensed
condensed
semi-condensed
semi-e%panded
e%panded
e%tra-e%panded
ultra-e%panded
&SS9
font-style Sets the style of the font normal
italic
obli<ue
!" !" &SS)
font-variant Bisplays te%t in a small-caps font
or a normal font
normal
small-caps
D!" !" &SS)
font-weight Sets the weight of a font normal
bold
bolder
lighter
)""
!" !" &SS)
6age E9 of 78
9""
3""
""
8""
D""
E""
7""
K""
+enerated Content
content :enerates content in a document!
Fsed with the :before and :after
pseudo-elements
string
url
counter0name1
counter0name, list-style-
type1
counters0name, string1
counters0name, string, list-
style-type1
attr0N1
open-<uote
close-<uote
no-open-<uote
no-close-<uote
&SS9
counter-increment Sets how much the counter
increments on each occurrence of
a selector
none
identifier number
&SS9
counter-reset Sets the value the counter is set to
on each occurrence of a selector
none
identifier number
&SS9
<uotes Sets the type of <uotation mar#s none
string string
&SS9
"ist and $ar#er
=n-line e%amples
list-style + shorthand property for setting
all of the properties for a list in
one declaration
list-style-type
list-style-position
list-style-image
D!" !" &SS)
list-style-image Sets an image as the list-item
mar#er
none
url
D!" !" &SS)
list-style-position Sets where the list-item mar#er is
placed in the list
inside
outside
D!" !" &SS)
list-style-type Sets the type of the list-item none !" !" &SS)
6age E3 of 78
mar#er disc
circle
s<uare
decimal
decimal-leading-4ero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-gree#
lower-latin
upper-latin
hebrew
armenian
georgian
c,#-ideographic
hiragana
#ata#ana
hiragana-iroha
#ata#ana-iroha
mar#er-offset auto
length
&SS9
$ar&in
=n-line e%amples
margin + shorthand property for setting
the margin properties in one
declaration
margin-top
margin-right
margin-bottom
margin-left
!" !" &SS)
margin-bottom
Sets the bottom margin of an
element
auto
length
%
!" !" &SS)
margin-left
Sets the left margin of an element auto
length
%
!" 3!" &SS)
margin-right
Sets the right margin of an
element
auto
length
%
!" 3!" &SS)
margin-top Sets the top margin of an element auto
length
%
!" 3!" &SS)
%utlines
6age E of 78
outline + shorthand property for setting
all the outline properties in one
declaration
outline-color
outline-style
outline-width
&SS9
outline-color Sets the color of the outline
around an element
color
invert
&SS9
outline-style Sets the style of the outline around
an element
none
dotted
dashed
solid
double
groove
ridge
inset
outset
&SS9
outline-width Sets the width of the outline
around an element
thin
medium
thic#
length
&SS9
!addin&
=n-line e%amples
padding + shorthand property for setting
all of the padding properties in
one declaration
padding-top
padding-right
padding-bottom
padding-left
!" !" &SS)
padding-bottom
Sets the bottom padding of an
element
length
%
!" !" &SS)
padding-left
Sets the left padding of an element length
%
!" !" &SS)
padding-right
Sets the right padding of an
element
length
%
!" !" &SS)
padding-top Sets the top padding of an element length
%
!" !" &SS)
!ositionin&
=n-line e%amples
bottom Sets how far the bottom edge of
an element is above;below the
bottom edge of the parent element
auto
%
length
D!" 8!" &SS9
6age E8 of 78
clip Sets the shape of an element! The
element is clipped into this shape,
and displayed
shape
auto
D!" !" &SS9
left Sets how far the left edge of an
element is to the right;left of the
left edge of the parent element
auto
%
length
!" !" &SS9
overflow Sets what happens if the content
of an element overflow its area
visible
hidden
scroll
auto
D!" !" &SS9
right Sets how far the right edge of an
element is to the left;right of the
right edge of the parent element
auto
%
length
8!" &SS9
top Sets how far the top edge of an
element is above;below the top
edge of the parent element
auto
%
length
!" !" &SS9
vertical-align Sets the vertical alignment of an
element
baseline
sub
super
top
te%t-top
middle
bottom
te%t-bottom
length
%
!" !" &SS)
4-inde% Sets the stac# order of an element auto
number
D!" !" &SS9
(able
border-collapse Sets the border model of a table collapse
separate
8!" &SS9
border-spacing Sets the distance between the
borders of ad,acent cells 0only for
the 'separated borders' model1
length length &SS9
caption-side Sets the position of the caption
according to the table
top
bottom
left
right
&SS9
empty-cells Sets whether cells with no visible
content should have borders or not
0only for the 'separated borders'
model1
show
hide
D!9 &SS9
table-layout Sets the algorithm used to lay out auto 8!" &SS9
6age ED of 78
the table fi%ed
(ext
=n-line e%amples
!roperty escription !ossible 1alues )) IE W-C
color Sets the color of a te%t color !" 3!" &SS)
direction Sets the te%t direction ltr
rtl
&SS9
letter-spacing /ncrease or decrease the space
between characters
normal
length
D!" !" &SS)
te%t-align +ligns the te%t in an element left
right
center
,ustify
!" !" &SS)
te%t-decoration +dds decoration to te%t none
underline
overline
line-through
blin#
!" !" &SS)
te%t-indent /ndents the first line of te%t in an
element
length
%
!" !" &SS)
te%t-shadow none
color
length

te%t-transform &ontrols the letters in an element none
capitali4e
uppercase
lowercase
!" !" &SS)
unicode-bidi normal
embed
bidi-override
8!" &SS9
white-space Sets how white space inside an
element is handled
normal
pre
nowrap
!" 8!8 &SS)
word-spacing /ncrease or decrease the space
between words
normal
length
D!" D!" &SS)
CSS3 !rint ;eference
!rint !roperties
6age EE of 78
6rinting HTML documents has always been problematic! /n &SS9 the print properties are added to ma#e it easier to
print from the Web!
orphans Sets the minimum number of lines
for a paragraph that must be left at
the bottom of a page
number &SS9
mar#s Sets what sort of mar#s should be
rendered outside the page bo%
none
crop
cross

page Sets a page type to use when
displaying an element
auto
identifier
&SS9
page-brea#-after Sets the page-brea#ing behavior
after an element
auto
always
avoid
left
right
!" &SS9
page-brea#-before
Sets the page-brea#ing behavior
before an element
auto
always
avoid
left
right
!" &SS9
page-brea#-inside Sets the page-brea#ing behavior
inside an element
auto
avoid
&SS9
si4e Sets the orientation and si4e of a
page
auto
portrait
landscape

widows Sets the minimum number of lines
for a paragraph that must be left at
the top of a page
number &SS9
CSS3 Aural ;eference
Aural Style Sheets
+ural style sheets use a combination of speech synthesis and sound effects to ma#e the user listen to information,
instead of reading information!
6age E7 of 78
+ural presentation can be used:
by blind people
to help users learning to read
to help users who have reading problems
for home entertainment
in the car
by print-impaired communities
The aural presentation converts the document to plain te%t and feed this to a screen reader 0a program that reads all
the characters on the screen1!
+n e%ample of an +ural style sheet:
h1, h, h!, h"
{
voice-family: male;
richness: 60;
cue-before: url3"beep%au"4
}
The e%ample above will ma#e the speech synthesi4er play a sound, then spea# the headers in a very rich male voice!
CSS3 Aural ;eference
a4imuth Sets where the sound;voices
should come from 0hori4ontally1
angle
left-side
far-left
left
center-left
center
center-right
right
far-right
right-side
behind
leftwards
rightwards
&SS9
cue + shorthand property for setting
the cue-before and cue-after
properties in one declaration
cue-before
cue-after
&SS9
cue-after Specifies a sound to be played
after spea#ing an element2s
none
url
&SS9
6age EK of 78
content to delimit it from other
cue-before Specifies a sound to be played
before spea#ing an element2s
content to delimit it from other
none
url
&SS9
elevation Sets where the sound;voices
should come from 0vertically1
angle
below
level
above
higher
lower
&SS9
pause + shorthand property for setting
the pause-before and pause-after
properties in one declaration
pause-before
pause-after
&SS9
pause-after Specifies a pause after spea#ing
an element2s content
time
%
&SS9
pause-before Specifies a pause before spea#ing
an element2s content
time
%
&SS9
pitch Specifies the spea#ing voice frequency
%-low
low
medium
high
%-high
&SS9
pitch-range Specifies the variation in the
spea#ing voice! 0Monoton voice
or animated voiceQ1
number &SS9
play-during Specifies a sound to be played
while spea#ing an element2s
content
auto
none
url
mi%
repeat
&SS9
richness Specifies the richness in the
spea#ing voice! 0Aich voice or
thin voiceQ1
number &SS9
spea# Specifies whether content will
render aurally
normal
none
spell-out
&SS9
spea#-header Specifies how to handle table
headers! Should the headers be
spo#en before every cell, or only
before a cell with a different
header than the previous cell
always
once
&SS9
spea#-numeral Specifies how to spea# numbers digits
continuous
&SS9
spea#-punctuation Specifies how to spea#
punctuation characters
none
code
&SS9
6age 7" of 78
speech-rate Specifies the speed of the
spea#ing
number
%-slow
slow
medium
fast
%-fast
faster
slower
&SS9
stress Specifies the 'stress' in the
spea#ing voice
number &SS9
voice-family + prioriti4ed list of voice family
names that contain specific voices
specific-voice
generic-voice
&SS9
volume Specifies the volume of the
spea#ing
number
%
silent
%-soft
soft
medium
loud
%-loud
&SS9
CSS 6nits
$easurements
6nit escription
O a percentage of something
in inch
cm centimeter
mm millimeter
em one em is e<ual to the font si4e of the current element
e% one e% is the %-height of a font, the %-height is usually about half the font-si4e
pt point 0) pt is the same as );E9 inch1
pc pica 0) pc is the same as )9 points1
p% pi%els 0a dot on the computer screen1
Colors
6nit escription
color_name + color name 0red1
6age 7) of 78
rgb0%,%,%1 + rgb value 0rgb0988,","11
rgb0yO, yO, yO1 + rgb percentage value 0rgb0)""O,"O,"O11
Jrrggbb + he% number 0Jff""""1!
CSS Colors
&olors are displayed combining A$B, :A$$., and BLF$ light sources!
Color 1alues
&SS colors are defined using a he%adecimal notation for the combination of Aed, :reen, and Blue color values
0A:B1! The lowest value that can be given to one light source is " 0he% J""1! The highest value is 988 0he% JGG1!
This table shows the result of combining Aed, :reen, and Blue light sources:!
Color Color 'E= Color ;+0
J"""""" rgb0",","1
JGG"""" rgb0988,","1
J""GG"" rgb0",988,"1
J""""GG rgb0",",9881
JGGGG"" rgb0988,988,"1
J""GGGG rgb0",988,9881
JGG""GG rgb0988,",9881
J&"&"&" rgb0)K9,)K9,)K91
JGGGGGG rgb0988,988,9881
Color )ames
+ collection of color names are supported by newer versions of both .etscape and /nternet $%plorer!
)ote* &olor names are not supported by the W3& standards! /f you want to write correct &SS you should use the
Color 'E= values!
Color Color 'E= Color )ame
JG"G7GG +liceBlue
JG+$BBE +nti<ueWhite
JEGGGB +<uamarine
6age 79 of 78
J"""""" Blac#
J""""GG Blue
J7+9B$9 Blue@iolet
J+89+9+ Brown
Web Safe Colors
+ few years ago, when most computers supported only 98D different colors, a list of 9)D Web Safe &olors was
suggested as a Web standard! The reason for this was that Microsoft and Mac operating system used " different
'reserved' fi%ed system colors 0about 9" each1!
We are not sure how important this is now, since more and more computers are e<uipped with ability to display
millions of different colors, but the choice is left to you!
3/. Cross !latform Colors
This 9)D cross platform web safe color palette was originally created to ensure that all computers would display all
colors correctly when running a 98D color palette!
"""""" """"33 """"DD """"KK """"&& """"GG
""33"" ""3333 ""33DD ""33KK ""33&& ""33GG
""DD"" ""DD33 ""DDDD ""DDKK ""DD&& ""DDGG
GGKK"" GGKK33 GGKKDD GGKKKK GGKK&& GGKKGG
GG&&"" GG&&33 GG&&DD GG&&KK GG&&&& GG&&GG
GGGG"" GGGG33 GGGGDD GGGGKK GGGG&& GGGGGG
CSS Color 1alues
&olors are displayed combining A$B, :A$$., and BLF$ light sources!
Color 1alues
&SS colors are defined using a he%adecimal notation for the combination of Aed, :reen, and Blue color values
0A:B1! The lowest value that can be given to one light source is " 0he% J""1! The highest value is 988 0he% JGG1!
/.->2 ifferent Colors
Most modern monitors are capable of displaying at least )D37 different colors!
6age 73 of 78
/f you loo# at the color table below, you will see the result of varying the red light from " to 988, while #eeping the
green and blue light at 4ero!
To see a full list of )D37 different colors based on red light varying from " to 988, clic# on one of the he%adecimal or
rgb values below!
J"""""" rgb0",","1
J"7"""" rgb07,","1
J77"""" rgb0)3D,","1
J$7"""" rgb0939,","1
JG""""" rgb09",","1
JG7"""" rgb097,","1
JGG"""" rgb0988,","1
Shades of +ray
:ray colors are displayed using an e<ual amount of power to all of the light sources! To ma#e it easier for you to
select the right gray color we have compiled a table of gray shades for you:
A:B0",","1 J""""""
A:B07,7,71 J"7"7"7
A:B0)D7,)D7,)D71 J+7+7+7
A:B0)ED,)ED,)ED1 JB"B"B"
A:B0)7,)7,)71 JB7B7B7
A:B09",9",9"1 JG"G"G"
A:B097,97,971 JG7G7G7
A:B0988,988,9881 JGGGGGG
CSS Color )ames
=n this page you will find a table of color names that are supported by newer versions of both .etscape and /nternet
$%plorer!
)ote* &olor names are not supported by the W3& standards! /f you want to write correct &SS you should use the
Color 'E= values!
&lic# on a color name, or a he% value, to see the color as the bac#ground color along with different te%t colors!
6age 7 of 78
Color )ame Color 'E= Color
+liceBlue JG"G7GG
+nti<ueWhite JG+$BBE
+<ua J""GGGG
5ellow:reen JK+&B39
6age 78 of 78

Introduction To CSS: What You Should Already Know

Uploaded by

Document Information

Original Title

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

Introduction To CSS: What You Should Already Know

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets

You might also like