Basic Web Development Module 3:

CSS

22.0

INTR D!CTI N T

CSS

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 4.0 to solve a problem E ternal Style Sheets can save yo! a lot of wor" E ternal Style Sheets are stored in CSS files M!ltiple style definitions will cascade into one

Styles Solve a Common Problem HTML tags were originally designed to define the content of a doc!ment. They were s!pposed to say #This is a header#$ #This is a paragraph#$ #This is a table#$ by !sing tags li"e %h&'$ %p'$ %table'$ and so on. The layo!t of the doc!ment was s!pposed to be ta"en care of by the browser$ witho!t !sing any formatting tags. (s the two ma)or browsers * +etscape and ,nternet E plorer * contin!ed to add new HTML tags and attrib!tes -li"e the %font' tag and the color attrib!te. to the original HTML specification$ it became more and more diffic!lt to create /eb sites where the content of HTML doc!ments was clearly separated from the doc!ment0s presentation layo!t. To solve this problem$ the /orld /ide /eb Consorti!m -/1C. * the non profit$ standard setting consorti!m responsible for standardi2ing HTML * created ST3LES in addition to HTML 4.0. 4oth +etscape 4.0 and ,nternet E plorer 4.0 s!pport Cascading Style Sheets. Style Sheets Can Save a Lot of Work Styles in HTML 4.0 define how HTML elements are displayed$ )!st li"e the font tag and the color attrib!te in HTML 1.5. Styles are normally saved in files e ternal to yo!r HTML doc!ments. E ternal style sheets enable yo! to change the appearance and layo!t of all the pages in yo!r /eb$ )!st by editing a single CSS doc!ment. ,f yo! have ever tried to change the font or color of all the headings in all yo!r /eb pages$ yo! will !nderstand how CSS can save yo! a lot of wor". CSS is a brea"thro!gh in /eb design beca!se it allows developers to control the style and layo!t of m!ltiple /eb pages all at once. (s a /eb developer yo! can define a style for each HTML element and apply it to as many /eb pages as yo! want. To ma"e a global change$ simply change the style$ and all elements in the /eb are !pdated a!tomatically. Multiple Styles Will Cascade Into One 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 CSS file. Even m!ltiple e ternal Style Sheets can be referenced inside a single HTML doc!ment. Cascading 6rder

Module 3: CSS Page 2 of 70

What style will be used when there is more than one style specified for an element?

!ML

7enerally spea"ing we can say that all the styles will #cascade# into a new #virt!al# Style Sheet by the following r!les$ where n!mber fo!r has the highest priority8 &. 4rowser defa!lt 5. E ternal Style Sheet 1. ,nternal Style Sheet -inside the %head' tag. 4. ,nline Style -inside HTML element. So$ an inline style -inside an HTML element. 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 -a defa!lt val!e..

Module 3: CSS Page 3 of 70

23.0

CSS S"NT#$

The CSS synta is made !p of three parts8 a selector$ a property and a val!e8 selector 9property8 val!e: The selector is normally the element;tag yo! wish to define$ the property is the attrib!te yo! wish to change$ and each property can ta"e a val!e. The property and val!e are separated by a colon and s!rro!nded by c!rly braces8 body 9color8 blac": ,f the val!e is m!ltiple words$ p!t <!otes aro!nd the val!e8 p 9font*family8 #sans serif#: +ote8 ,f yo! wish to specify more than one property$ yo! sho!ld separate each property with a semi*colon. The e ample below shows how to define a center aligned paragraph$ with a red te t color8 p 9te t*align8 center= color8 red: To ma"e the style definitions more readable$ yo! can describe one property on each line$ li"e this8 p 9 te t*align8 center= color8 blac"= font*family8 arial : "roupin# 3o! can gro!p selectors. Separate each selector with a comma. ,n the e ample below we have gro!ped all the header elements. Each header element will be green8 h&$ h5$ h1$ h4$ h>$ h? 9 color8 green : !he class $ttribute /ith the class attrib!te yo! can define different styles for the same element. Say that yo! wo!ld li"e to have two types of paragraphs in yo!r doc!ment8 one right*aligned paragraph$ and one center*aligned paragraph. Here is how yo! can do it with styles8
Module 3: CSS Page 4 of 70

p.right 9te t*align8 right: p.center 9te t*align8 center: 3o! have to !se the class attrib!te in yo!r HTML doc!ment8 %p class@#right#' This paragraph will be right*aligned. %;p' %p class@#center#' This paragraph will be center*aligned. %;p' 3o! can also omit the tag name in the selector to define a style that can be !sed by many elements8 .center 9te t*align8 center: ,n the code below both the h& element and the p element are classed with #center#. This means that both of the elements will follow the r!les in the #.center# selector8 %h& class@#center#' This heading will be center*aligned %;h&' %p class@#center#' This paragraph will also be center*aligned. %;p' !he id $ttribute The id attrib!te can be defined in two ways. ,t can be defined to match all elements with a partic!lar id$ or to match only one element with a partic!lar id. %p id@#intro#' This paragraph will be right*aligned. %;p' ,n this e ample the id attrib!te will match all elements with id@#intro#8 Aintro 9 font*si2e8&&0B= font*weight8bold= color8A0000ff= bac"gro!nd*color8transparent :

Module 3: CSS Page 5 of 70

,n this e ample the id attrib!te will match only p elements with id@#intro#8 pAintro 9 font*si2e8&&0B= font*weight8bold= color8A0000ff= bac"gro!nd*color8transparent : CSS Comments 3o! can insert comments in CSS to e plain yo!r code$ which can help yo! when yo! edit the so!rce code at a later date. ( comment will be ignored by the browser. ( CSS comment begins with #;C#$ and ends with #C;#$ li"e this8 ;C This is a comment C; p 9 te t*align8 center= ;C This is another comment C; color8 blac"= font*family8 arial :

Module 3: CSS Page 6 of 70

2%.0

CSS & W T

%&amples (n HTML file !ses the %lin"' tag to lin" to an e ternal style sheet8 %'%(CIS% )*+ %html' %head' %lin" rel@#stylesheet# type@#te t;css# href@#e &.css# ;' %;head' %body' %h&'This header is 1? pt%;h&' %h5'This header is bl!e%;h5' %p'This paragraph has a left margin of >0 pi els%;p' %;body' %;html' This is the style sheet file -e &.css.8 %'%(CIS% )*+ ,con-t. body 9bac"gro!nd*color8 yellow: h& 9font*si2e8 1?pt: h5 9color8 bl!e: p 9margin*left8 >0p : (n HTML file !ses the %lin"' tag to lin" to an e ternal style sheet8 %'%(CIS% )*/ %html' %head' %lin" rel@#stylesheet# type@#te t;css# href@#e 5.css# ;' %;head' %body' %h&'This is a header &%;h&' %hr' %p'3o! can see that the style sheet formats the te t%;p' %p'%a href@#http8;;www.microsoft.com# target@#Dblan"#'This is a lin"%;a'%;p' %;body' %;html'

Module 3: CSS Page 7 of 70

This is the style sheet file -e 5.css.8 %'%(CIS% )*/ ,con-t. body 9bac"gro!nd*color8 tan: h& 9color8maroon= font*si2e850pt: hr 9color8navy: p 9font*si2e8&&pt= margin*left8 &>p : a8lin" 9color8green: a8visited 9color8yellow: a8active 9color8bl!e: a8hover 9color8blac": ow to Insert a Style Sheet /hen a browser reads a style sheet$ it will format the doc!ment according to it. There are three ways of inserting a style sheet8 &. E ternal Style Sheet (n e ternal style sheet is ideal when the style is applied to many pages. /ith an e ternal style sheet$ yo! can change the loo" of an entire /eb site by changing one file. Each page m!st lin" to the style sheet !sing the %lin"' tag. The %lin"' tag goes inside the head section8 %head' %lin" rel@#stylesheet# type@#te t;css# href@#mystyle.css# ;' %;head' The browser will read the style definitions from the file mystyle.css$ and format the doc!ment according to it. (n e ternal style sheet can be written in any te t editor. The file sho!ld not contain any html tags. 3o!r style sheet sho!ld be saved with a .css e tension. (n e ample of a style sheet file is shown below8 hr 9color8 sienna: p 9margin*left8 50p : body 9bac"gro!nd*image8 !rl-#images;bac"40.gif#.: 5. ,nternal Style Sheet (n internal style sheet sho!ld be !sed when a single doc!ment has a !ni<!e style. 3o! define internal styles in the head section by !sing the %style' tag$ li"e this8 %head' %style type@#te t;css#' hr 9color8 sienna: p 9margin*left8 50p : body 9bac"gro!nd*image8 !rl-#images;bac"40.gif#.: %;style' %;head'

Module 3: CSS Page 8 of 70

The browser will now read the style definitions$ and format the doc!ment according to it. +ote8 ( browser normally ignores !n"nown tags. This means that an old browser that does not s!pport styles$ will ignore the %style' tag$ b!t 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 element8 %head' %style type@#te t;css#' %E** hr 9color8 sienna: p 9margin*left8 50p : body 9bac"gro!nd*image8 !rl-#images;bac"40.gif#.: **' %;style' %;head' 1. ,nline Styles (n inline style loses many of the advantages of style sheets by mi ing content with presentation. Fse this method sparingly$ s!ch as when a style is to be applied to a single occ!rrence of an element. To !se inline styles yo! !se the style attrib!te in the relevant tag. The style attrib!te can contain any CSS property. The e ample shows how to change the color and the left margin of a paragraph8 %p style@#color8 sienna= margin*left8 50p #' This is a paragraph %;p' Multiple Style Sheets ,f some properties have been set for the same selector in different style sheets$ the val!es will be inherited from the more specific style sheet. Gor e ample$ an e ternal style sheet has these properties for the h1 selector8 h1 9 color8 red= te t*align8 left= font*si2e8 Hpt : (nd an internal style sheet has these properties for the h1 selector8 h1 9 te t*align8 right= font*si2e8 50pt :

Module 3: CSS Page 9 of 70

,f the page with the internal style sheet also lin"s to the e ternal style sheet the properties for h1 will be8 color8 red= te t*align8 right= font*si2e8 50pt The color is inherited from the e ternal style sheet and the te t*alignment and the font*si2e is replaced by the internal style sheet.

Module 3: CSS Page 10 of 70

2'.0

CSS B#C()R !ND

CSS 4ac"gro!nd properties define the bac"gro!nd effects of an element. %&amples Set the bac"gro!nd color This e ample demonstrates how to set the bac"gro!nd color for an element. %'%(CIS% )*0 %html' %head' %style type@#te t;css#' body 9bac"gro!nd*color8 yellow: h& 9bac"gro!nd*color8 A00ff00: h5 9bac"gro!nd*color8 transparent: p 9bac"gro!nd*color8 rgb-5>0$0$5>>.: %;style' %;head' %body' %h&'This is header &%;h&' %h5'This is header 5%;h5' %p'This is a paragraph%;p' %;body' %;html' Set an image as the bac"gro!nd This e ample demonstrates how to set an image as the bac"gro!nd. %'%(CIS% ))* %html' %head' %style type@#te t;css#' body 9 bac"gro!nd*image8 !rl-#..;images;bgdesert.)pg#. : %;style' %;head' %body' %;body' %;html'

Module 3: CSS Page 11 of 70

How to repeat a bac"gro!nd image This e ample demonstrates how to repeat a bac"gro!nd image only vertically. %'%(CIS% ))) %html' %head' %style type@#te t;css#' body 9 bac"gro!nd*image8 !rl-#..;images;bgdesert.)pg#.= bac"gro!nd*repeat8 repeat*y : %;style' %;head' %body' %;body' %;html' How to place the bac"gro!nd image This e ample demonstrates how to place the image on the page. %'%(CIS% ))1 %html' %head' %style type@#te t;css#' body 9 bac"gro!nd*image8 !rl-#..;images;smiley.gif#.= bac"gro!nd*repeat8 no*repeat= bac"gro!nd*position8 center center : %;style' %;head' %body' %p' %b'+ote8%;b' +etscape 4 does not s!pport the #bac"gro!nd*position# property. %;p' %;body' %;html'

Module 3: CSS Page 12 of 70

How to set a fi ed bac"gro!nd image This e ample demonstrates how to set a fi ed bac"gro!nd image. The image will not scroll with the rest of the page. %'%(CIS% ))2 %html' %head' %style type@#te t;css#' body 9 bac"gro!nd*image8 !rl-#..;images;smiley.gif#.= bac"gro!nd*repeat8 no*repeat= bac"gro!nd*attachment8 fi ed : %;style' %;head' %body' %br'%br' %p'%b'+ote8%;b' +etscape 4 does not s!pport the #bac"gro!nd*attachment# property. %;p' %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %p'The image will not scroll with the %;body' %;html'

rest rest rest rest rest rest rest rest rest rest rest rest rest rest rest rest rest rest rest rest rest rest rest rest

of of of of of of of of of of of of of of of of of of of of of of of of

the the the the the the the the the the the the the the the the the the the the the the the the

page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p' page%;p'

Module 3: CSS Page 13 of 70

Module 3: CSS Page 14 of 70

(ll the bac"gro!nd properties in one declaration This e ample demonstrates how to !se the shorthand property for setting all of the bac"gro!nd properties in one declaration. %'%(CIS% ))3 %html' %head' %style type@#te t;css#' body 9 bac"gro!nd8 A00ff00 !rl-#..;images;smiley.gif#. no*repeat fi ed center center : %;style' %;head' %body' %p' %b'+ote8%;b' The bac"gro!nd*attachment and the bac"gro!nd*position properties do not wor" in +etscape 4.0. %;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %p'This is some te t%;p' %;body' %;html'

Module 3: CSS Page 15 of 70

CSS 4ack#round The 4ac"gro!nd properties allow yo! to control the bac"gro!nd color of an element$ set an image as the bac"gro!nd$ repeat a bac"gro!nd image vertically or hori2ontally$ and position an image on a page. 4ack#round Properties5 668 +etscape$ I%8 ,nternet E plorer$ W2C8 /eb Standard Property bac"gro!nd 7escription 8alues 66 ?.0 I% 4.0 W2C CSS&

( shorthand property for bac"gro!nd*color setting all bac"gro!nd bac"gro!nd*image properties in one declaration bac"gro!nd*repeat bac"gro!nd* attachment bac"gro!nd*position Sets whether a bac"gro!nd scroll image is fi ed or scrolls with fi ed the rest of the page Sets the bac"gro!nd color of an element

bac"gro!nd* attachment bac"gro!nd*color

?.0

4.0

CSS&

color*rgb color*he color*name transparent !rl none

4.0

4.0

CSS&

bac"gro!nd*image bac"gro!nd*position

Sets an image as the bac"gro!nd

4.0 ?.0

4.0 4.0

CSS& CSS&

Sets the starting position of top left a bac"gro!nd image top center top right center left center center center right bottom left bottom center bottom right *B y*B *pos y*pos Sets if;how a bac"gro!nd image will be repeated repeat repeat* repeat*y no*repeat

bac"gro!nd*repeat

4.0

4.0

CSS&

Module 3: CSS Page 16 of 70

2*.0

CSS T+$T ,R ,+RTI+S

CSS Te t properties define the appearance of te t. %&amples Set the color of the te t This e ample demonstrates how to set the color of the te t. %'%(CIS% ))9 %html' %head' %style type@#te t;css#' h& 9color8 A00ff00: h5 9color8 Adda0dd: p 9color8 rgb-0$0$5>>.: %;style' %;head' %body' %h&'This is header &%;h&' %h5'This is header 5%;h5' %p'This is a paragraph%;p' %;body' %;html' Specify the space between characters This e ample demonstrates how to increase or decrease the space between characters. %'%(CIS% )): %html' %head' %style type@#te t;css#' h& 9letter*spacing8 *1p : h4 9letter*spacing8 0.>cm: %;style' %;head' %body' %p' %b'+ote8%;b' +etscape 4 does not s!pport the #letter*spacing# property. %;p' %h&'This is header &%;h&' %h4'This is header 4%;h4' %;body' %;html'

Module 3: CSS Page 17 of 70

(lign the te t This e ample demonstrates how to align the te t. %'%(CIS% ))+ %html' %head' %style type@#te t;css#' h& 9te t*align8 center: h5 9te t*align8 left: h1 9te t*align8 right: %;style' %;head' %body' %h&'This is header &%;h&' %h5'This is header 5%;h5' %h1'This is header 1%;h1' %;body' %;html' Iecorate the te t This e ample demonstrates how to add decoration to te t. %'%(CIS% ))/ %html' %head' %style type@#te t;css#' h& 9te t*decoration8 overline: h5 9te t*decoration8 line*thro!gh: h1 9te t*decoration8 !nderline: a 9te t*decoration8 none: %;style' %;head' %body' %h&'This is header &%;h&' %h5'This is header 5%;h5' %h1'This is header 1%;h1' %p' %a href@#http8;;www.engg.!pd.ed!.ph#'This is a lin"%;a' %;p' %;body' %;html'

Module 3: CSS Page 18 of 70

,ndent te t This e ample demonstrates how to indent the first line of a paragraph. %'%(CIS% ))0 %html' %head' %style type@#te t;css#' p 9te t*indent8 &cm: %;style' %;head' %body' %p' 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 %;p' %;body' %;html' Control the letters in a te t This e ample demonstrates how to control the letters in a te t. %'%(CIS% )1* %html' %head' %style type@#te t;css#' p.!ppercase 9te t*transform8 !ppercase: p.lowercase 9te t*transform8 lowercase: p.capitali2e 9te t*transform8 capitali2e: %;style' %;head' %body' %p class@#!ppercase#' This is some te t in a paragraph %;p' %p class@#lowercase#' This is some te t in a paragraph %;p' %p class@#capitali2e#' This is some te t in a paragraph %;p' %;body' %;html'

Module 3: CSS Page 19 of 70

CSS !e&t Te t properties allow yo! 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. !e&t Properties5 668 +etscape$ I%8 ,nternet E plorer$ W2C8 /eb Standard Property color direction letter*spacing te t*align 7escription Sets the color of a te t Sets the te t direction ,ncrease or decrease the space between characters (ligns the te t in an element Possible 8alues 66 4.0 I% 1.0 W2C CSS& CSS5 ?.0 4.0 4.0 4.0 CSS& CSS&

color
ltr rtl normal length left right center )!stify none !nderline overline line*thro!gh blin"

te t*decoration

(dds decoration to te t

4.0

4.0

CSS&

te t*indent te t*shadow

,ndents the first line of te t in an element

length B
none color length

4.0

4.0

CSS&

te t*transform

Controls the letters in an element

none capitali2e !ppercase lowercase normal embed bidi*override

4.0

4.0

CSS&

!nicode*bidi

>.0

CSS5

white*space

Sets how white space inside normal an element is handled pre nowrap ,ncrease or decrease the space between words normal length

4.0

>.>

CSS&

word*spacing

?.0

?.0

CSS&

Module 3: CSS Page 20 of 70

2-.0

CSS . NT ,R ,+RTI+S

CSS Gont properties define the font in te t. %&amples Set the font of a te t This e ample demonstrates how to set a font of a te t. %'%(CIS% )1) %html' %head' %style type@#te t;css#' h1 9font*family8 times: p 9font*family8 co!rier: p.sansserif 9font*family8 #sans*serif#: %;style' %;head' %body' %h1'This is header 1%;h1' %p' This is a paragraph%;p' %p class@#sansserif#' This is a paragraph%;p' %;body' %;html' Set the si2e of the font This e ample demonstrates how to set the si2e of a font. %'%(CIS% )11 %html' %head' %style type@#te t;css#' h& 9font*si2e8 &>0B: h5 9font*si2e8 &10B: p 9font*si2e8 &00B: %;style' %;head' %body' %h&'This is header &%;h&' %h5'This is header 5%;h5' %p'This is a paragraph%;p' %;body' %;html'

Module 3: CSS Page 21 of 70

Set the style of the font This e ample demonstrates how to set the style of a font. %'%(CIS% )12 %html' %head' %style type@#te t;css#' h& 9font*style8 italic: h5 9font*style8 normal: p 9font*style8 obli<!e: %;style' %;head' %body' %h&'This is header &%;h&' %h5'This is header 5%;h5' %p'This is a paragraph%;p' %;body' %;html' Set the variant of the font This e ample demonstrates how to set the variant of a font. %'%(CIS% )13 %html' %head' %style type@#te t;css#' p.normal 9font*variant8 normal: p.small 9font*variant8 small*caps: %;style' %;head' %body' %p' %b'+ote8%;b' +etscape 4 does not s!pport the #font*variant# property. %;p' %p class@#normal#' This is a paragraph%;p' %p class@#small#' This is a paragraph%;p' %;body' %;html'

Module 3: CSS Page 22 of 70

Set the boldness of the font This e ample demonstrates how to set the boldness of a font. %'%(CIS% )19 %html' %head' %style type@#te t;css#' p.normal 9font*weight8 normal: p.thic" 9font*weight8 bold: p.thic"er 9font*weight8 J00: %;style' %;head' %body' %p class@#normal#' This is a paragraph%;p' %p class@#thic"#' This is a paragraph%;p' %p class@#thic"er#' This is a paragraph%;p' %;body' %;html' (ll the font properties in one declaration This e ample demonstrates how to !se the shorthand property for setting all of the font properties in one declaration. %'%(CIS% )1: %html' %head' %style type@#te t;css#' p 9 font8 italic small*caps J00 &5p arial : %;style' %;head' %body' %p'This is a paragraph%;p' %;body' %;html' CSS ;onts The Gont properties allow yo! to change the font family$ boldness$ si2e$ and the style of a te t. 6otes < =seful !ips Gonts are identified by their name in CSS&. +ote that if a browser does not s!pport the font that is specified$ it will !se a defa!lt font.
Module 3: CSS Page 23 of 70

Module 3: CSS Page 24 of 70

;ont Properties5 668 +etscape$ I%8 ,nternet E plorer$ W2C8 /eb Standard Property font 7escription 8alues 66 4.0 I% 4.0 W2C CSS&

( shorthand property for font*style setting all of the properties font*variant for a font in one declaration font*weight font*si2e;line*height font*family caption icon men! message*bo small*caption stat!s*bar ( prioriti2ed list of font family*name family names and;or generic generic*family family names for an element Sets the si2e of a font *small *small small medi!m large *large *large smaller larger length B

font*family

4.0

1.0

CSS&

font*si2e

4.0

1.0

CSS&

font*si2e*ad)!st

Specifies an aspect val!e for none an element that will n!mber preserve the *height of the first*choice font Condenses or e pands the c!rrent font*family normal wider narrower !ltra*condensed e tra*condensed condensed semi*condensed semi*e panded e panded e tra*e panded !ltra*e panded normal italic obli<!e 4.0 4.0

CSS5

font*stretch

CSS5

font*style

Sets the style of the font

CSS&

Module 3: CSS Page 25 of 70

font*variant font*weight

Iisplays te t in a small*caps font or a normal font Sets the weight of a font

normal small*caps normal bold bolder lighter &00 500 100 400 >00 ?00 K00 H00 J00

?.0 4.0 CSS& 4.0 4.0 CSS&

Module 3: CSS Page 26 of 70

2/.0

CSS B RD+R ,R ,+RTI+S

CSS 4order properties define the borders aro!nd an element. %&amples Set the style of the fo!r borders This e ample demonstrates how to set the style of the fo!r borders. %'%(CIS% )1+ %html' %head' %style type@#te t;css#' p.dotted 9border*style8 dotted: p.dashed 9border*style8 dashed: p.solid 9border*style8 solid: p.do!ble 9border*style8 do!ble: p.groove 9border*style8 groove: p.ridge 9border*style8 ridge: p.inset 9border*style8 inset: p.o!tset 9border*style8 o!tset: %;style' %;head' %body' %p'The #border*style# property is not recogni2ed by +etscape 4.%;p' %p'+etscape ? s!pports all border styles.%;p' %p',nternet E plorer >.> s!pports all border styles. ,nternet E plorer 4.0 * >.0 does not s!pport the #dotted# and #dashed# val!es%;p' %p class@#dotted#' ( dotted border%;p' %p class@#dashed#' ( dashed border%;p' %p class@#solid#' ( solid border%;p' %p class@#do!ble#' ( do!ble border%;p' %p class@#groove#' ( groove border%;p' %p class@#ridge#' ( ridge border%;p' %p class@#inset#' (n inset border%;p' %p class@#o!tset#' (n o!tset border%;p' %;body' %;html'

Module 3: CSS Page 27 of 70

Set different borders on each side This e ample demonstrates how to set different borders on each side of the element. %'%(CIS% )1/ %html' %head' %style type@#te t;css#' p.soliddo!ble 9border*style8 solid do!ble: p.do!blesolid 9border*style8 do!ble solid: p.groovedo!ble 9border*style8 groove do!ble: p.three 9border*style8 solid do!ble groove: %;style' %;head' %body' %p' %b'+ote8%;b' +etscape 4 does not s!pport the #border*style# property. Fse the #border# property to set the borders in +etscape.%;p' %p class@#soliddo!ble#' Some te t%;p' %br' %p class@#do!blesolid#' Some te t%;p' %br' %p class@#groovedo!ble#' Some te t%;p' %br' %p class@#three#' Some te t%;p' %;body' %;html' Set the color of the fo!r borders This e ample demonstrates how to set the color of the fo!r borders. ,t can have from one to fo!r colors. %'%(CIS% )10 %html' %head' %style type@#te t;css#' p.one 9 border*style8 solid= border*color8 A0000ff :

Module 3: CSS Page 28 of 70

p.two 9 border*style8 solid= border*color8 Aff0000 A0000ff : p.three 9 border*style8 solid= border*color8 Aff0000 A00ff00 A0000ff : p.fo!r 9 border*style8 solid= border*color8 Aff0000 A00ff00 A0000ff rgb-5>0$0$5>>. : %;style' %;head' %body' %p class@#one#'%b'+ote8%;b' The #border*color# property is not recogni2ed in ,nternet E plorer if it is !sed alone. Fse the #border*style# property to set the borders first in ,nternet E plorer.%;p' %p class@#two#'Some te t%;p' %p class@#three#'%b'+ote8%;b' +etscape 4 does not s!pport the #border*color# property. Fse the #border# property to set the borders and colors in +etscape.%;p' %p class@#fo!r#'Some te t%;p' %;body' %;html' Set the width of the bottom border This e ample demonstrates how to set the width of the bottom border. %'%(CIS% )2* %html' %head' %style type@#te t;css#' p 9 border*style8 solid= border*bottom*width8 &>p : %;style' %;head'

Module 3: CSS Page 29 of 70

%body' %p'The #border*bottom*width# property is not recogni2ed in ,nternet E plorer if it is !sed alone. Fse the #border*style# property to set the borders first with ,nternet E plorer.%;p' %;body' %;html' Set the width of the left border This e ample demonstrates how to set the width of the left border. %'%(CIS% )2) %html' %head' %style type@#te t;css#' p 9 border*style8 solid= border*left*width8 &>p : %;style' %;head' %body' %p'The #border*left*width# property is not recogni2ed in ,nternet E plorer if it is !sed alone. Fse the #border*style# property to set the borders first in ,nternet E plorer.%;p' %;body' %;html' Set the width of the right border This e ample demonstrates how to set the width of the right border. %'%(CIS% )21 %html' %head' %style type@#te t;css#' p 9 border*style8 solid= border*right*width8 &>p : %;style' %;head' %body' %p'The #border*right*width# property is not recogni2ed in ,nternet E plorer if it is !sed alone. Fse the #border*style# property to set the borders first in ,nternet E plorer.%;p' %;body' %;html'
Module 3: CSS Page 30 of 70

Set the width of the top border This e ample demonstrates how to set the width of the top border. %'%(CIS% )22 %html' %head' %style type@#te t;css#' p 9 border*style8 solid= border*top*width8 &>p : %;style' %;head' %body' %p'The #border*top*width# property is not recogni2ed in ,nternet E plorer if it is !sed alone. Fse the #border*style# property to set the borders first in ,nternet E plorer.%;p' %;body' %;html' (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. %'%(CIS% )23 %html' %head' %style type@#te t;css#' p 9 border*bottom8 medi!m solid Aff0000 : %;style' %;head' %body' %p'%b'+ote8%;b' +etscape 4 does not s!pport the #border*bottom# property. Fse the #border* bottom*width# property to set the width of the bottom border with +etscape.%;p' %;body' %;html'

Module 3: CSS Page 31 of 70

(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. %'%(CIS% )29 %html' %head' %style type@#te t;css#' p 9 border*left8 medi!m solid Aff0000 : %;style' %;head' %body' %p'%b'+ote8%;b' +etscape 4 does not s!pport the #border*left# property. Fse the #border*left* width# property to set the width of the left border in +etscape.%;p' %;body' %;html' (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. %'%(CIS% )2: %html' %head' %style type@#te t;css#' p 9 border*right8 medi!m solid Aff0000 : %;style' %;head' %body' %p'%b'+ote8%;b' +etscape 4 does not s!pport the #border*right# property. Fse the #border* right*width# property to set the width of the right border in +etscape.%;p' %;body' %;html' (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. %'%(CIS% )2+ %html' %head'
Module 3: CSS Page 32 of 70

%style type@#te t;css#' p 9 border*top8 medi!m solid Aff0000 : %;style' %;head' %body' %p'%b'+ote8%;b' +etscape 4 does not s!pport the #border*top# property. Fse the #border*top* width# property to set the width of the top border in +etscape.%;p' %;body' %;html' (ll the width of the border properties in one declaration This e ample demonstrates a shorthand property for setting the width of the fo!r borders in one declaration$ can have from one to fo!r val!es. %'%(CIS% )2/ %html' %head' %style type@#te t;css#' p.one 9 border*style8 solid= border*width8 >p : p.two 9 border*style8 solid= border*width8 >p &0p : p.three 9 border*style8 solid= border*width8 >p &0p &p : p.fo!r 9 border*style8 solid= border*width8 >p &0p &p medi!m : %;style' %;head' %body' %p class@#one#' The #border*width# property is not recogni2ed in ,nternet E plorer if it is !sed alone. Fse the #border*style# property to set the borders first in ,nternet E plorer. %;p' %p class@#two#' Some te t
Module 3: CSS Page 33 of 70

%;p' %p class@#three#' Some te t %;p' %p class@#fo!r#' Some te t %;p' %;body' %;html' (ll the border properties in one declaration This e ample demonstrates a shorthand property for setting all of the properties for the fo!r borders in one declaration$ can have from one to three val!es. %'%(CIS% )20 %html' %head' %style type@#te t;css#' p 9 border8 medi!m do!ble rgb-5>0$0$5>>. : %;style' %;head' %body' %p'Some te t%;p' %;body' %;html' CSS 4orders The 4order properties allow yo! to specify the style$ color$ and width of an element0s border. ,n HTML we !sed tables to create borders aro!nd a te t$ b!t with the 4order properties we can create borders with nice effects$ and it can be applied to any element. 4order Properties5 668 +etscape$ I%8 ,nternet E plorer$ W2C8 /eb Standard Property border 7escription ( shorthand property for setting all of the properties for the fo!r borders in one declaration 8alues 66 4.0 I% 4.0 W2C CSS&

border*width border*style border*color

border*bottom

( shorthand property for border*bottom*width setting all of the properties border*style for the bottom border in one border*color declaration Sets the color of the bottom border*color

?.0

4.0

CSS&

border*bottom*color

?.0

4.0

CSS5

Module 3: CSS Page 34 of 70

border

Module 3: CSS Page 35 of 70

border* Sets the style of the bottom border bottom*style border* Sets the width of the bottom border bottom*width

border*style ?.0 4.0 CSS5

thin medi!m thic" length 4.0 4.0 CSS&

border*color border*left

Sets the color of the fo!r borders$ can have from one color to fo!r colors ( shorthand property for setting all of the properties for the left border in one declaration

?.0 4.0 CSS&

border*left* ?.0 4.0 CSS& width border*style border*color border*color ?.0 4.0 CSS5 border*style ?.0 4.0 CSS5
thin medi!m thic" length 4.0 4.0 CSS&

border*left* color border*left* style border*left* width

Sets the color of the left border Sets the style of the left border Sets the width of the left border

border*right

( shorthand property for setting all of the properties for the right border in one declaration

border* ?.0 4.0 CSS& right*width border*style border*color border*color ?.0 4.0 CSS5 border*style ?.0 4.0 CSS5
thin medi!m thic" length none hidden dotted dashed solid do!ble groove ridge inset o!tset 4.0 4.0 CSS&

border*right* Sets the color of the right border color border*right* Sets the style of the right border style border*right* Sets the width of the right border width

border*style

Sets the style of the fo!r borders$ can have from one to fo!r styles

?.0 4.0 CSS&

border*top

( shorthand property for setting all of the properties for the top border in one declaration

border*top* ?.0 4.0 CSS& width

Module 3: CSS Page 36 of 70

border*style border*color
border*top* color border*top* style border*top* width Sets the color of the top border Sets the style of the top border Sets the width of the top border

border*color ?.0 4.0 CSS5 border*style ?.0 4.0 CSS5

thin medi!m thic" length 4.0 4.0 CSS&

border*width ( shorthand property for setting the width of the fo!r thin borders in one declaration$ can have from one to fo!r medi!m val!es thic" length

4.0 4.0 CSS&

Module 3: CSS Page 37 of 70

20.0

CSS M#R)IN ,R ,+RTI+S

CSS Margin properties define the space aro!nd elements. E amples Set the left margin of a te t This e ample demonstrates how to set the left margin of a te t. %'%(CIS% )3* %html' %head' %style type@#te t;css#' p.margin 9margin*left8 5cm: %;style' %;head' %body' %p' This is a paragraph This is a paragraph 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' Set the right margin of a te t This e ample demonstrates how to set the right margin of a te t. %'%(CIS% )3) %html' %head' %style type@#te t;css#' p.margin 9margin*right8 >cm: %;style' %;head' %body' %p' This is a paragraph This is a paragraph This is a paragraph This is a paragraph %;p' %p class@#margin#' This is a paragraph with a right margin This is a paragraph with a right margin %;p' %;body' %;html'
Module 3: CSS Page 38 of 70

Set the top margin of a te t This e ample demonstrates how to set the top margin of a te t. %'%(CIS% )31 %html' %head' %style type@#te t;css#' p.margin 9margin*top8 >cm: %;style' %;head' %body' %p' This is a paragraph This is a paragraph This is a paragraph This is a paragraph %;p' %p class@#margin#' This is a paragraph with a top margin This is a paragraph with a top margin %;p' %;body' %;html' Set the bottom margin of a te t This e ample demonstrates how to set the bottom margin of a te t. %'%(CIS% )32 %html' %head' %style type@#te t;css#' p.margin 9margin*bottom8 H0p : %;style' %;head' %body' %p' This is a paragraph This is a paragraph This is a paragraph This is a paragraph %;p' %p class@#margin#' This is a paragraph with a bottom margin This is a paragraph with a bottom margin %;p' %p' This is a paragraph This is a paragraph This is a paragraph This is a paragraph %;p' %;body' %;html'

Module 3: CSS Page 39 of 70

(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. %'%(CIS% )33 %html' %head' %style type@#te t;css#' p.margin 9margin8 5cm 4cm 1cm 4cm: %;style' %;head' %body' %p' This is a paragraph %;p' %p class@#margin#' This is a paragraph with margins %;p' %p' This is a paragraph %;p' %;body' %;html' CSS Mar#ins The Margin properties define the space aro!nd elements. ,t is possible to !se negative val!es to overlap content. The top$ right$ bottom$ and left margin can be changed independently !sing separate properties. ( shorthand margin property can also be !sed to change all of the margins at once. Mar#in Properties5 668 +etscape$ I%8 ,nternet E plorer$ W2C8 /eb Standard Property margin 7escription 8alues 66 4.0 I% 4.0 W2C CSS&

( shorthand property for margin*top setting the margin margin*right properties in one declaration margin*bottom margin*left Sets the bottom margin of an element Sets the left margin of an element Sets the right margin of an element a!to length B a!to length B a!to length B

margin*bottom

4.0

4.0

CSS&

margin*left

4.0

1.0

CSS&

margin*right

4.0

1.0

CSS&

Module 3: CSS Page 40 of 70

margin*top

Sets the top margin of an element

a!to length B

4.0

1.0

CSS&

Module 3: CSS Page 41 of 70

30.0

CSS ,#DDIN) ,R ,+RTI+S

CSS Ladding properties define the space between the element border and the element content. %&amples Set the left padding This e ample demonstrates how to set the left padding of a tablecell. %'%(CIS% )39 %html' %head' %style type@#te t;css#' td 9padding*left8 5cm: %;style' %;head' %body' %table border@#&#' %tr' %td' This is a tablecell with a left padding %;td' %;tr' %;table' %;body' %;html' Set the right padding This e ample demonstrates how to set the right padding of a tablecell. %'%(CIS% )3: %html' %head' %style type@#te t;css#' td 9padding*right8 >cm: %;style' %;head' %body' %table border@#&#' %tr' %td' This is a tablecell with a right padding. This is a tablecell with a right padding. %;td' %;tr' %;table' %;body' %;html'

Module 3: CSS Page 42 of 70

Set the top padding This e ample demonstrates how to set the top padding of a tablecell. %'%(CIS% )3+ %html' %head' %style type@#te t;css#' td 9padding*top8 5cm: %;style' %;head' %body' %table border@#&#' %tr' %td' This is a tablecell with a top padding %;td' %;tr' %;table' %;body' %;html' Set the bottom padding This e ample demonstrates how to set the bottom padding of a tablecell. %'%(CIS% )3/ %html' %head' %style type@#te t;css#' td 9padding*bottom8 5cm: %;style' %;head' %body' %table border@#&#' %tr' %td' This is a tablecell with a bottom padding %;td' %;tr' %;table' %;body' %;html'

Module 3: CSS Page 43 of 70

(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 fo!r val!es. %'%(CIS% )30 %html' %head' %style type@#te t;css#' td 9padding8 &.>cm: td.twoval!es 9padding8 0.>cm 5.>cm: %;style' %;head' %body' %table border@#&#' %tr' %td' This is a tablecell with padding on each side %;td' %;tr' %;table' %br' %table border@#&#' %tr' %td class@#twoval!es#' This is a tablecell with padding on each side. The top and bottom padding have the same val!e -0.>cm.$ while the left and right padding have another val!e -5.>. %;td' %;tr' %;table' %;body' %;html' CSS Paddin# The Ladding properties define the space between the element border and the element content. +egative val!es are not allowed. The top$ right$ bottom$ and left padding can be changed independently !sing separate properties. ( shorthand padding property is also created to control m!ltiple sides at once. Paddin# Properties5 668 +etscape$ I%8 ,nternet E plorer$ W2C8 /eb Standard Property padding 7escription 8alues 66 4.0 I% 4.0 W2C CSS&

( shorthand property for padding*top setting all of the padding padding*right properties in one declaration padding*bottom padding*left Sets the bottom padding of an element

padding*bottom

length B

4.0

4.0

CSS&

Module 3: CSS Page 44 of 70

padding*left padding*right padding*top

Sets the left padding of an element

length B

4.0 4.0 4.0

4.0 4.0 4.0

CSS& CSS& CSS&

Sets the right padding of an length element B Sets the top padding of an element

length B

Module 3: CSS Page 45 of 70

31.0

CSS 2IST ,R ,+RTI+S

The List properties allow yo! 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. %&amples The different list*item mar"ers in !nordered lists This e ample demonstrates the different list*item mar"ers in CSS.

%'%(CIS% )9* %html' %head' %style type@#te t;css#' !l.disc 9 list*style*type8 disc : !l.circle 9 list*style*type8 circle : !l.s<!are 9 list*style*type8 s<!are : !l.none 9 list*style*type8 none : %;style' %;head' %body' %!l class@#disc#' %li'Coffee%;li' %li'Tea%;li' %li'Coca Cola%;li' %;!l' %!l class@#circle#' %li'Coffee%;li' %li'Tea%;li' %li'Coca Cola%;li' %;!l' %!l class@#s<!are#' %li'Coffee%;li' %li'Tea%;li' %li'Coca Cola%;li' %;!l'

Module 3: CSS Page 46 of 70

%!l class@#none#' %li'Coffee%;li' %li'Tea%;li' %li'Coca Cola%;li' %;!l' %;body' %;html' The different list*item mar"ers in ordered lists This e ample demonstrates the different list*item mar"ers in CSS. %'%(CIS% )9) %html' %head' %style type@#te t;css#' ol.decimal 9 list*style*type8 decimal : ol.lroman 9 list*style*type8 lower*roman : ol.!roman 9 list*style*type8 !pper*roman : ol.lalpha 9 list*style*type8 lower*alpha : ol.!alpha 9 list*style*type8 !pper*alpha : %;style' %;head' %body' %ol class@#decimal#' %li'Coffee%;li' %li'Tea%;li' %li'Coca Cola%;li' %;ol' %ol class@#lroman#' %li'Coffee%;li' %li'Tea%;li' %li'Coca Cola%;li' %;ol'

Module 3: CSS Page 47 of 70

%ol class@#!roman#' %li'Coffee%;li' %li'Tea%;li' %li'Coca Cola%;li' %;ol' %ol class@#lalpha#' %li'Coffee%;li' %li'Tea%;li' %li'Coca Cola%;li' %;ol' %ol class@#!alpha#' %li'Coffee%;li' %li'Tea%;li' %li'Coca Cola%;li' %;ol' %;body' %;html' Set an image as the list*item mar"er This e ample demonstrates how to set an image as the list*item mar"er. %'%(CIS% )91 %html' %head' %style type@#te t;css#' !l 9 list*style*image8 !rl-#..;images;arrow.gif#. : %;style' %;head' %body' %p'%b'+ote8%;b' +etscape 4 does not s!pport the #list*style*image# property.%;p' %!l' %li'Coffee%;li' %li'Tea%;li' %li'Coca Cola%;li' %;!l' %;body' %;html' Llace the list*item mar"er This e ample demonstrates where to place the list*item mar"er. %'%(CIS% )92 %html' %head' %style type@#te t;css#'
Module 3: CSS Page 48 of 70

!l.inside 9 list*style*position8 inside : !l.o!tside 9 list*style*position8 o!tside : %;style' %;head' %body' %p'%b'+ote8%;b' +etscape 4 does not s!pport the #list*style*position# property.%;p' %p'This list has a val!e of #inside#8%;p' %!l class@#inside#' %li' Earl 7rey Tea * ( fine blac" tea$ fermented to perfection in a complementary blend of bergamot oil. This combination creates an !ltra fine tea where precision and process gives birth to this m!ch*revered beverage. %;li' %li' Masmine Tea * ( fab!lo!s #all p!rpose# tea made of freshly pic"ed$ organic camellia sinensis -green tea. and )asmine flowers. %;li' %li' Honeyb!sh Tea * ( s!per fr!ity delight that is nat!rally sweet and almost !nbelievableE This magnificent tea imported from the Cape of 7ood Hope has a smooth and fr!itf!l body that reminds !s of those tangy tea blends c!rrently on the mar"et. However it sho!ld be pointed o!t that this is completely free of flavoring agents and other ingredients. %;li' %;!l' %p'This list has a val!e of #o!tside#8%;p' %!l class@#o!tside#' %li' Earl 7rey Tea * ( fine blac" tea$ fermented to perfection in a complementary blend of bergamot oil. This combination creates an !ltra fine tea where precision and process gives birth to this m!ch*revered beverage. %;li' %li' Masmine Tea * ( fab!lo!s #all p!rpose# tea made of freshly pic"ed$ organic camellia sinensis -green tea. and )asmine flowers. %;li' %li' Honeyb!sh Tea * ( s!per fr!ity delight that is nat!rally sweet and almost !nbelievableE This magnificent tea imported from the Cape of 7ood Hope has a smooth and fr!itf!l body that reminds !s of those tangy tea blends c!rrently on the mar"et. However it sho!ld be pointed o!t that this is completely free of flavoring agents and other ingredients. %;li' %;!l' %;body' %;html'
Module 3: CSS Page 49 of 70

(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. %'%(CIS% )93 %html' %head' %style type@#te t;css#' !l 9 list*style8 s<!are inside !rl-#..;images;arrow.gif#. : %;style' %;head' %body' %p'%b'+ote8%;b' +etscape 4 does not display the images or position the list.%;p' %!l' %li'Coffee%;li' %li'Tea%;li' %li'Coca Cola%;li' %;!l' %;body' %;html' List Properties5 668 +etscape$ I%8 ,nternet E plorer$ W2C8 /eb Standard Property list*style 7escription ( shorthand property for setting all of the properties for a list in one declaration Sets an image as the list* item mar"er Llaces the list*item mar"er in the list 8alues 66 ?.0 I% 4.0 W2C CSS&

list*style*type list*style*position list*style*image

none !rl inside o!tside

list*style*image list*style*position

?.0 ?.0

4.0 4.0

CSS& CSS&

Module 3: CSS Page 50 of 70

list*style*type

Sets the type of the list*item mar"er

none disc circle s<!are decimal decimal*leading*2ero lower*roman !pper*roman lower*alpha !pper*alpha lower*gree" lower*latin !pper*latin hebrew armenian georgian c)"*ideographic hiragana "ata"ana hiragana*iroha "ata"ana*iroha a!to length

4.0 4.0 CSS&

mar"er*offset

CSS5

Module 3: CSS Page 51 of 70

32.0

CSS DIM+NSI N ,R ,+RTI+S

The Iimension properties allow yo! to control the height and width of an element. ,t also allows yo! to increase the space between two lines. %&amples Set the height and width of an image This e ample demonstrates how to set the height and width of an image. %'%(CIS% )99 %html' %head' %style type@#te t;css#' img.normal 9 height8 a!to= width8 a!to : img.big 9 height8 H0p = width8 &00p : img.small 9 height8 10p = width8 >0p : %;style' %;head' %body' %p'%b'+ote8%;b' +etscape 4 does not s!pport the #height# property$ and the #width# property does not wor" on images.%;p' %img class@#normal# src@#..;images;bac".gif# width@#K5# height@#40#' %br'%br' %img class@#big# src@#..;images;bac".gif# width@#K5# height@#40#' %br'%br' %img class@#small# src@#..;images;bac".gif# width@#K5# height@#40#' %;body' %;html' ,ncrease the space between lines This e ample demonstrates how to increase the space between the lines. %'%(CIS% )9: %html' %head'
Module 3: CSS Page 52 of 70

%style type@#te t;css#' p.increase 9line*height8 &cm: %;style' %;head' %body' %p' 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 %;p' %p class@#increase#' 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%;p' %;body' %;html' 7imension Properties5 668 +etscape$ I%8 ,nternet E plorer$ W2C8 /eb Standard Property height 7escription Sets the height of an element Sets the distance between lines 8alues a!to length B normal n!mber length B 66 ?.0 I% 4.0 W2C CSS&

line*height

4.0

4.0

CSS&

ma *height

Sets the ma im!m height of none an element length B Sets the ma im!m width of none an element length B Sets the minim!m height of length an element B Sets the minim!m width of an element Sets the width of an element

CSS5

ma *width

CSS5

min*height min*width width

CSS5 CSS5 4.0 4.0 CSS&

length B
a!to B length

Module 3: CSS Page 53 of 70

33.0

CSS C2#SSI.IC#TI N ,R ,+RTI+S

The Classification properties allow yo! 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 !sing an absol!te val!e$ and how to control the visibility of an element. %&amples How to display an elementN This e ample demonstrates how to display an element. %'%(CIS% )9+ %html' %head' %style type@#te t;css#' div 9display8 none: p 9display8 inline: %;style' %;head' %body' %div' The div section is invisible %;div' %p' /ith the val!e of #inline# there sho!ld be %;p' %p' no distance between the two paragraphs. %;p' %;body' %;html' Gloat This e ample demonstrates how to set where an image will appear in another element. %'%(CIS% )9/ %html' %head' %style type@#te t;css#' img 9 float8 left : %;style' %;head' %body'

Module 3: CSS Page 54 of 70

%p' %img src@#..;images;boo"asp50.gif# width@#&50# height@#&>&#'/ith the val!e of #left# the image will float to the left in the paragraph. %;p' %;body' %;html' Losition8relative This e ample demonstrates how to position an element relative to its normal position. %'%(CIS% )90 %html' %head' %style type@#te t;css#' h&.e & 9 position8relative= left850 : h&.e 5 9 position8relative= left8*50 : %;style' %;head' %body' %h&'+ormal Heading%;h&' %h& class@#e &#'Heading O50%;h&' %h& class@#e 5#'Heading *50%;h&' %p' Pelative positioning moves an element relative to its original position. %;p' %p' #left850# adds 50 pi els to the element0s LEGT position. %;p' %p' #left8*50# s!btracts 50 pi els from the element0s LEGT position. %;p' %;body' %;html'

Module 3: CSS Page 55 of 70

Losition8absol!te This e ample demonstrates how to position an element !sing an absol!te val!e. %'%(CIS% ):* %html' %head' %style type@#te t;css#' h&. 9 position8absol!te= left8&00= top8&>0 : %;style' %;head' %body' %h& class@# #'This is a heading%;h&' %p' /ith absol!te positioning$ an element can be placed anywhere on a page. %;p' %p' The LEGT position of the heading is &00 pi els from the left of the page. The T6L position is &>0 pi els from the top of the page. %;p' %;body' %;html' How to ma"e an element invisible This e ample demonstrates how to ma"e an element invisible. Io yo! want the element to show or notN %'%(CIS% ):) %html' %head' %style type@#te t;css#' h&.one 9 visibility8visible : h&.two 9 visibility8hidden : %;style' %;head' %body' %p'%b'+ote8%;b' +etscape 4 does not s!pport the #visibility# property.%;p'

Module 3: CSS Page 56 of 70

%h& class@#one#'Heading one%;h&' %h& class@#two#'Heading two%;h&' %p'/here is heading twoN%;p' %;body' %;html' Change the c!rsor This e ample demonstrates how to change the c!rsor. %'%(CIS% ):1 %html' %body' %p' %b'+ote8%;b' +etscape 4 does not s!pport the #c!rsor# property. %;p' %p' Move the mo!se over the words to see the c!rsor change. %;p' %span style@#c!rsor8a!to#' (!to%;span'%br ;' %span style@#c!rsor8crosshair#' Crosshair%;span'%br ;' %span style@#c!rsor8defa!lt#' Iefa!lt%;span'%br ;' %span style@#c!rsor8hand#' Hand%;span'%br ;' %span style@#c!rsor8move#' Move%;span'%br ;' %span style@#c!rsor8e*resi2e#' e*resi2e%;span'%br ;' %span style@#c!rsor8ne*resi2e#' ne*resi2e%;span'%br ;' %span style@#c!rsor8nw*resi2e#' nw*resi2e%;span'%br ;' %span style@#c!rsor8n*resi2e#' n*resi2e%;span'%br ;' %span style@#c!rsor8se*resi2e#' se*resi2e%;span'%br ;' %span style@#c!rsor8sw*resi2e#' sw*resi2e%;span'%br ;' %span style@#c!rsor8s*resi2e#' s*resi2e%;span'%br ;' %span style@#c!rsor8w*resi2e#' w*resi2e%;span'%br ;' %span style@#c!rsor8te t#' te t%;span'%br ;'

Module 3: CSS Page 57 of 70

%span style@#c!rsor8wait#' wait%;span'%br ;' %span style@#c!rsor8help#' help%;span' %;body' %;html'

Classification Properties5 668 +etscape$ I%8 ,nternet E plorer$ W2C8 /eb Standard Property clear 7escription 8alues 66 4.0 I% 4.0 W2C CSS&

Sets the sides of an element left where other floating right elements are not allowed both none Specifies the type of c!rsor to be displayed

c!rsor

!rl a!to crosshair defa!lt pointer move e*resi2e ne*resi2e nw*resi2e n*resi2e se*resi2e sw*resi2e s*resi2e w*resi2e te t wait help hand

?.0

4.0

CSS5

Module 3: CSS Page 58 of 70

display

Sets how;if an element is displayed

none inline bloc" list*item r!n*in compact mar"er table inline*table table*row*gro!p table*header* gro!p table*footer* gro!p table*row table*col!mn* gro!p table*col!mn table*cell table*caption left right none static relative absol!te fi ed visible hidden collapse

4.0 4.0 CSS&

float

Sets where an image or a te t will appear in another element

4.0 4.0 CSS&

position Llaces an element in a static$ relative$ absol!te or fi ed position

4.0 4.0 CSS5

visibility Sets if an element sho!ld be visible or invisible

?.0 4.0 CSS5

Module 3: CSS Page 59 of 70

3%.0

CSS , SITI NIN) ,R ,+RTI+S

CSS Lositioning properties define the position of an element. %&amples 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. %'%(CIS% ):2 %html' %head' %style type@#te t;css#' img 9 position8absol!te= clip8rect-0 &00 500 0. : %;style' %;head' %body' %p'%b'+ote8%;b' +etscape 4 does not s!pport the #clip# property.%;p' %p'+ote that this property is c!tting the image. %br' The width and the height properties -or attrib!tes. decreases the image. %;p' %p' %img border@#0# src@#..;images;boo"ie>dhtml.gif# width@#&>0# height@#55>#' %;p' %;body' %;html' Set the left and top position of an element This e ample demonstrates how to set the left and top position of an element. %'%(CIS% ):3 %html' %head' %style type@#te t;css#' h& 9 position8 absol!te= top8 &00p = left8 &00p :

Module 3: CSS Page 60 of 70

L 9 position8 absol!te= top8 500p = left8 &00p : %;style' %;head' %body' %h&'( heading%;h&' %p' The %b'heading%;b' is placed &00p down from the top of the doc!ment$ and &00p to the right from the left side of the doc!ment. The %b'paragraph%;b' is placed 500p down from the top of the doc!ment$ and &00p to the right from the left side of the doc!ment. %;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. %'%(CIS% ):9 %html' %head' %style type@#te t;css#' h& 9 position8 absol!te= bottom8 10p = right8 40p : p 9 position8 absol!te= bottom8 H0p = right8 40p : %;style' %;head' %body' %h&'( heading%;h&' %p'

Module 3: CSS Page 61 of 70

The %b'heading%;b' is placed 10p !p from the bottom of the doc!ment$ and 40p to the left from the right side of the doc!ment. The %b'paragraph%;b' is placed H0p !p from the bottom of the doc!ment$ and 40p to the left from the right side of the doc!ment. %;p' %;body' %;html' 6verflow This e ample demonstrates how to set the overflow property to specify what sho!ld happen when an element0s content is too big to fit in a specified area. %'%(CIS% ):: %html' %head' %style type@#te t;css#' div 9 bac"gro!nd*color8A00GGGG= width8&>0= height8&>0= overflow8 scroll : %;style' %;head' %body' %p'%b'+ote8%;b' +etscape 4 does not s!pport 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 yo! set the overflow property to scroll$ scrollbars will be added to the element. %;p' %div' 3o! can !se the overflow property when yo! want to have better control of the layo!t.%br'%br' Try to change the overflow property to8 visible$ hidden$ a!to$ or inherit and see what happens. The defa!lt val!e is visible. %;div' %;body' %;html'

Module 3: CSS Page 62 of 70

Qertical align an image This e ample demonstrates how to vertical align an image in a te t. %'%(CIS% ):+ %html' %head' %style type@#te t;css#' img.top 9vertical*align8te t*top: img.bottom 9vertical*align8te t*bottom: %;style' %;head' %body' %p' This is an %img class@#top# border@#0# src@#..;images;alertDredDbg.gif# width@#&&># height@#44#' image inside a paragraph. %;p' %p' This is an %img class@#bottom# border@#0# src@#..;images;alertDredDbg.gif# width@#&&># height@#44#' image inside a paragraph. %;p' %;body' %;html' R*inde R*inde can be !sed to place an element #behind# another element$ !sing R*inde priority. %'%(CIS% ):/ %html' %head' %style type@#te t;css#' img. 9 position8absol!te= left80= top80= 2*inde 8*& : %;style' %;head'

Module 3: CSS Page 63 of 70

%body' %p'%b'+ote8%;b' +etscape 4 does not s!pport the #2*inde # property.%;p' %h&'This is a Heading%;h&' %img class@# # src@#..;images;b!lbon.gif# width@#&00# height@#&H0#' %p'Iefa!lt 2*inde is 0. R*inde *& has lower priority.%;p' %;body' %;html' R*inde Chec" that the elements now have changed their R*inde priority. %'%(CIS% ):0 %html' %head' %style type@#te t;css#' img. 9 position8absol!te= left80= top80= 2*inde 8& : %;style' %;head' %body' %p'%b'+ote8%;b' +etscape 4 does not s!pport the #2*inde # property.%;p' %h&'This is a Heading%;h&' %img class@# # src@#..;images;b!lbon.gif# width@#&00# height@#&H0#' %p'Iefa!lt 2*inde is 0. R*inde & has higher priority.%;p' %;body' %;html' CSS Positionin# The Lositioning properties allow yo! to specify the left$ right$ top$ and bottom position of an element. ,t also allows yo! to set the shape of an element$ place an element behind another$ and to specify what sho!ld happen when an element0s content is too big to fit in a specified area. Positionin# Properties5 668 +etscape$ I%8 ,nternet E plorer$ W2C8 /eb Standard Property bottom 7escription Sets how far the bottom edge of an element is above;below the bottom edge of the parent element Sets the shape of an 8alues a!to B length 66 ?.0 I% >.0 W2C CSS5

clip

shape

?.0

4.0

CSS5

Module 3: CSS Page 64 of 70

element. The element is clipped into this shape$ and displayed left

a!to

Sets how far the left edge of a!to an element is to the B right;left of the left edge of length the parent element Sets what happens if the content of an element overflow its area Sets how far the right edge of an element is to the left;right of the right edge of the parent element visible hidden scroll a!to a!to B length

4.0

4.0

CSS5

overflow

?.0

4.0

CSS5

right

>.0

CSS5

top

Sets how far the top edge of a!to an element is above;below B the top edge of the parent length element Sets the vertical alignment of an element baseline s!b s!per top te t*top middle bottom te t*bottom length B a!to n!mber

4.0

4.0

CSS5

vertical*align

4.0

4.0

CSS&

2*inde

Sets the stac" order of an element

?.0

4.0

CSS5

Module 3: CSS Page 65 of 70

3'.0

CSS ,S+!D 3C2#SS+S ,R ,+RTI+S

Lse!do*classes are !sed in CSS to add different effects to some selectors$ or to a part of some selectors. %&amples Hyperlin" This e ample demonstrates how to add different colors to a hyperlin" in a doc!ment. %'%(CIS% )+* %html' %head' %style type@#te t;css#' a8lin" 9color8 AGG0000: a8visited 9color8 A00GG00: a8hover 9color8 AGG00GG: a8active 9color8 A0000GG: %;style' %;head' %body' %p'%b'%a href@#defa!lt.asp# target@#Dblan"#'This is a lin"%;a'%;b'%;p' %p'%b'+ote8%;b' a8hover MFST come after a8lin" and a8visited in the CSS definition in order to be effectiveEE%;p' %p'%b'+ote8%;b' a8active MFST come after a8hover in the CSS definition in order to be effectiveEE%;p' %;body' %;html' Hyperlin" 5 This e ample demonstrates how to add other styles to hyperlin"s. %'%(CIS% )+) %html' %head' %style type@#te t;css#' a.one8lin" 9color8 Aff0000: a.one8visited 9color8 A0000ff: a.one8hover 9color8 Affcc00: a.two8lin" 9color8 Aff0000: a.two8visited 9color8 A0000ff: a.two8hover 9font*si2e8 &>0B: a.three8lin" 9color8 Aff0000: a.three8visited 9color8 A0000ff: a.three8hover 9bac"gro!nd8 A??ff??: a.fo!r8lin" 9color8 Aff0000:

Module 3: CSS Page 66 of 70

a.fo!r8visited 9color8 A0000ff: a.fo!r8hover 9font*family8 fi edsys: a.five8lin" 9color8 Aff0000= te t*decoration8 none: a.five8visited 9color8 A0000ff= te t*decoration8 none: a.five8hover 9te t*decoration8 !nderline: %;style' %;head' %body' %p'Mo!se over the lin"s to see them change layo!t.%;p' %p'%b'%a class@#one# href@#defa!lt.asp# target@#Dblan"#'This lin" changes color%;a'%;b'%;p' %p'%b'%a class@#two# href@#defa!lt.asp# target@#Dblan"#'This lin" changes font* si2e%;a'%;b'%;p' %p'%b'%a class@#three# href@#defa!lt.asp# target@#Dblan"#'This lin" changes bac"gro!nd* color%;a'%;b'%;p' %p'%b'%a class@#fo!r# href@#defa!lt.asp# target@#Dblan"#'This lin" changes font* family%;a'%;b'%;p' %p'%b'%a class@#five# href@#defa!lt.asp# target@#Dblan"#'This lin" changes te t* decoration%;a'%;b'%;p' %;body' %;html' Synta& The synta of pse!do*classes8 selector8pse!do*class 9property8 val!e: CSS classes can also be !sed with pse!do*classes8 selector.class8pse!do*class 9property8 val!e: $nchor Pseudo<classes ( lin" that is active$ visited$ !nvisited$ or when yo! mo!se over a lin" can all be displayed in different ways in a CSS*s!pporting browser8 a8lin" 9color8 AGG0000: ;C !nvisited lin" C; a8visited 9color8 A00GG00: ;C visited lin" C; a8hover 9color8 AGG00GG: ;C mo!se over lin" C; a8active 9color8 A0000GG: ;C selected lin" C; +ote8 a8hover MFST come after a8lin" and a8visited in the CSS definition in order to be effectiveEE +ote8 a8active MFST come after a8hover in the CSS definition in order to be effectiveEE +ote8 Lse!do*class names are not case*sensitive. +ote8 ,E 4 and higher s!pports the anchor pse!do*class. ++ 4.> and +etscape ? s!pports the anchor pse!do*class only partially.

Module 3: CSS Page 67 of 70

Pseudo<classes and CSS Classes Lse!do*classes can be combined with CSS classes8 a.red8visited 9color8 AGG0000: %a class@#red# href@#cssDsynta .asp#'CSS Synta %;a' ,f the lin" in the e ample above has been visited$ it will be displayed in red. CSS1 < !he 5first<child Pseudo<class The 8first*child pse!do*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 element8 div8first*child p 9 te t*indent85>p : This selector will match the first paragraph inside the div in the following HTML8 %div' %p' Girst paragraph in div. This paragraph will be indented. %;p' %p' Second paragraph in div. This paragraph will not be indented. %;p' %;div' b!t it will not match the paragraph in this HTML8 %div' %h&'Header%;h&' %p' The first paragraph inside the div. This paragraph will 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 element8 p8first*child em 9 font*weight8bold : Gor e ample$ the em in the HTML below is the first child of the paragraph8 %p', am a %em'strong%;em' man.%;p'

Module 3: CSS Page 68 of 70

,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 none8 a8first*child 9 te t*decoration8none : Gor e ample$ the first a in the HTML below is the first child of the paragraph and will not be !nderlined. 4!t the second a in the paragraph is not the first child of the paragraph and will be !nderlined8 %p' Qisit %a href@#http8;;www.engg.!pd.ed!.ph#'F.L. College of Engineering%;a' and learn CSSE Qisit %a href@#http8;;www. engg.!pd.ed!.ph #' F.L. College of Engineering %;a' and learn HTMLE %;p' CSS1 < !he 5lan# Pseudo<class The 8lang pse!do*class allows the a!thor to specify a lang!age to !se in a doc!ment or to !se in a specified element. ,n the e ample below$ the r!le sets the type of <!otation mar"s for an HTML doc!ment that is in +orwegian8 html8lang-no. 9 <!otes8 0S 0 0 T0 : ,n the ne t e ample$ the r!le sets the type of <!otation mar"s for bloc"<!ote elements8 bloc"<!ote8lang-no. 9 <!otes8 0S 0 0 T0 : Pseudo<classes 668 +etscape$ I%8 ,nternet E plorer$ W2C8 /eb Standard Pseudo<classes active hover lin" visited 8first*child 8lang 66 I% W2C Purpose (dds special style to a selected lin" (dds special style to a lin" when yo! mo!se over it (dds special style to an !nvisited lin" (dds special style to a visited lin" (dds special style to an element that is the first child of some other element (llows the a!thor to specify a lang!age to !se in a specified element
Module 3: CSS Page 69 of 70

4.0 CSS& 4.0 CSS& 4.0 1.0 CSS& 4.0 1.0 CSS& CSS5 CSS5

Module 3: CSS Page 70 of 70

3*.0

CSS ,S+!D 3+2+M+NTS ,R ,+RTI+S

Lse!do*elements are !sed in CSS to add different effects to some selectors$ or to a part of some selectors. %&amples Ma"e the first letter special This e ample demonstrates how to add special style to the first letter in a te t. %'%(CIS% )+1 %html' %head' %style type@#te t;css#' div8first*letter 9 color8 Aff0000= font*si2e8 *large : %;style' %;head' %body' %p'%b'+ote8%;b' +etscape 4 does not s!pport the #first*letter# property.%;p' %p'%b'+ote8%;b' ,nternet E plorer >.> s!pports the #first*letter# property.%;p' %div' 3o! can !se the first*letter pse!do*element to add special style to the first letter of a te t. %;div' %;body' %;html' Ma"e the first line special This e ample demonstrates how to add special style to the first line in a te t. %'%(CIS% )+2 %html' %head' %style type@#te t;css#' div8first*line 9 color8 Aff0000= font*variant8 small*caps : %;style' %;head'

Module 3: CSS Page 71 of 70

%body' %p'%b'+ote8%;b' +etscape 4 does not s!pport the #first*line# property.%;p' %p'%b'+ote8%;b' ,nternet E plorer >.> s!pports the #first*line# property.%;p' %div' 3o! can !se the first*line pse!do*element to add special style to the first line of a te t. %;div' %;body' %;html' Synta& The synta of pse!do*elements8 selector8pse!do*element 9property8 val!e: CSS classes can also be !sed with pse!do*elements8 selector.class8pse!do*element 9property8 val!e: !he first<line Pseudo<element The #first*line# pse!do*element is !sed to add special styles to the first line of the te t in a selector8 p 9font*si2e8 &5pt: p8first*line 9color8 A0000GG font*variant8 small*caps: %p'Some te t that ends !p on two or more lines%;p' The o!tp!t co!ld be something li"e this8 S6ME TEUT TH(T E+IS !p on two or more lines ,n the e ample above the browser displays the first line formatted according to the #first*line# pse!do element. Where the browser brea"s the line$ depends on the si2e of the browser window. +ote8 The #first*line# pse!do*element can only be !sed with bloc"*level elements. +ote8 The following properties applies to the #first*line# pse!do*element8 font properties color properties bac"gro!nd properties word*spacing letter*spacing te t*decoration vertical*align te t*transform line*height clear
Module 3: CSS Page 72 of 70

+ote8 ,E 4.0& and ,E >.0 does not s!pport the #first*line# pse!do*element$ b!t ,E >.> does. +ote8 ++ 4.> does not s!pport the #first*line# pse!do*element. !he first<letter Pseudo<element The #first*letter# pse!do*element is !sed to add special style to the first letter of the te t in a selector8 p 9font*si2e8 &5pt: p8first*letter 9font*si2e8 500B= float8 left: %p'The first words of an article.%;p' The o!tp!t co!ld be something li"e this8 DDD V he first V words of an article. +ote8 The #first*letter# pse!do*element can only be !sed with bloc"*level elements. +ote8 The following properties applies to the #first*letter# pse!do* element8 font properties color properties bac"gro!nd properties margin properties padding properties border properties te t*decoration vertical*align -only if 0float0 is 0none0. te t*transform line*height float clear +ote8 ,E 4.0& and ,E >.0 does not s!pport the #first*letter# pse!do*element$ b!t ,E >.> does. +ote8 ++ 4.> does not s!pport the #first*letter# pse!do*element. Pseudo<elements and CSS Classes Lse!do*elements can be combined with CSS classes8 p.article8first*letter 9color8 AGG0000: %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.

Module 3: CSS Page 73 of 70

Multiple Pseudo<elements Several pse!do*elements can be combined8 p 9font*si2e8 &5pt: p8first*letter 9color8 AGG0000= font*si2e8 500B: p8first*line 9color8 A0000GG: %p'The first words of an article%;p' The o!tp!t co!ld be something li"e this8 DDD 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 si2e of 54pt. The rest of the first line wo!ld be bl!e while the rest of the paragraph wo!ld be the defa!lt color. CSS1 < !he 5before Pseudo<element The #8before# pse!do*element can be !sed to insert some content before an element. The style below will play a so!nd before each occ!rrence of a header one element. h&8before 9 content8 !rl-beep.wav. : CSS1 < !he 5after Pseudo<element The #8after# pse!do*element can be !sed to insert some content after an element. The style below will play a so!nd after each occ!rrence of a header one element. h&8after 9 content8 !rl-beep.wav. : Pseudo<elements 668 +etscape$ I%8 ,nternet E plorer$ W2C8 /eb Standard Pseudo<elements first*letter first*line 8before 8after 66 I% W2C Purpose (dds special style to the first letter of a te t (dds special style to the first line of a te t ,nserts some content before an element ,nserts some content after an element
Module 3: CSS Page 74 of 70

>.> CSS& >.> CSS& CSS5 CSS5

Module 3: CSS Page 75 of 70