Vous êtes sur la page 1sur 27

Internet Programming

Unit 1

CSS

CSS Introduction
We have introduced the XHTML for marking up information to be representing in a browser. Now we focus on formatting and presenting information. For this we use a W3 techno!og" ca!!ed cascading st"!e sheet # $$% that a!!ows document author to specif" the presentation of e!ement on a web page #e.g. Font& spacing& co!or etc.% separate!" from the structure of the document. 't wi!! simp!if" maintaing ( modif"ing the web page. 'f a website)s presentation is determined entire!" b" a st"!e sheet& a web designer can simp!" swap in a new st"!e sheet to comp!ete!" change the appearance of the site. $$ provides a wa" to app!" st"!e outside of XHTML document bod". $o XHTML now dictate the content whi!e the $$ dictate how it is presented. Like XHTML& the W3 a!so provides a va!idator for $$. $$ code va!idator !ocated at http://jigsaw.w3.org/css.validator. The W3 )s $$ specification is current!" in its second ma*or version& with a third in deve!opment.

What is CSS?
$$ stands for ascading $t"!e $heets $t"!es define how to disp!a" HTML e!ements $t"!es were added to XHTML to so!ve a prob!em +,terna! $t"!e $heets can save a !ot of work +,terna! $t"!e $heets are stored in $$ fi!es

CSS Syntax
$$ ru!e has two main parts. a se!ector& and one or more dec!arations.

The se!ector is norma!!" the HTML e!ement "ou want to st"!e. +ach dec!aration consists of a propert" and a va!ue. The propert" is the st"!e attribute "ou want to change. +ach propert" has a va!ue. Note. style = attribute:value1; attribute2:value2

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1

CSS

Three Ways to Insert CSS


There are three wa"s for using cascading st"!e sheet # $$% with XHTML document. 'n!ine st"!e sheet 'nterna! / embedded st"!e sheet. +,terna! st"!e sheet

Inline Styles
This section presents in!ine st"!e for an individua! XHTML e!ement)s format. -n 'n!ine st"!e overrides a!! other st"!es. -n in!ine st"!e !oses man" of the advantages of st"!e sheets b" mi,ing content with presentation. To use in!ine st"!es "ou use the st"!e attribute in the re!evant tag. The st"!e attribute can contain an" $$ propert". The e,amp!e shows how to change the co!or and the !eft margin of a paragraph.
-p style=.c&l&r:sie$$a;mar'i$/le(t:20p1.2#+is is a para'rap+3-!p2 Code Showing Inline style

Note. 0. Line 00 1p2 e!ement does not app!" an" st"!e for te,t. 3. !ine 03 403 1p2 e!ement app!" in!ine st"!e on 1p2 e!ement.

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1

CSS

Internal / !"#edded Style Sheet


-n interna! st"!e sheet shou!d be used when a sing!e document has a uni5ue st"!e. 6ou define interna! st"!es in the head section of an XHTML page& b" using the 1st"!e2 tag. +mbedded st"!e sheets enab!e "ou to embed an entire $$ document in an XHTML document head section. To achieve this separation between the $$ code ( the XHTML that it st"!es& we wi!! use $$ se!ectors. $t"!es p!aced in the head app!" to matching e!ements wherever the" appear in the entire document. The bod" of st"!e sheet dec!ares the $$ ru!es for the st"!e sheet. - $$ se!ector determines which e!ement wi!! be st"!ed according to a ru!e.

4utput:

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1 CSS e" $ %ont weight property 7 specifies the ita!ic st"!e ( bo!dness of te,t. 'ts va!ue is mu!tip!e of 088 starts from 088 7 to 7 988. For Norma! font st"!e em : ;88 ( for bo!d te,t em : <88. $$ ru!es in embedded st"!e sheets use the same s"nta, as in!ine st"!es. The propert" name is fo!!owed b" a co!on #.% and the va!ue of propert". Mu!tip!e properties are separated b" semico!on #=%. >!xternal Style Sheet +,terna! st"!e sheets are separate document that contains on!" $$ ru!es. -n e,terna! st"!e sheet provides uniform !ook ( fee! to an entire website. -n e,terna! st"!e sheet is idea! when the common st"!e is app!ied to man" pages. With an e,terna! st"!e sheet& "ou can change the !ook of an entire Web site b" changing one fi!e. +ach page must !ink to the st"!e sheet using the 1!ink2 tag. The 1!ink2 tag goes inside the head section.
-+ead2 -li$k rel=.styles+eet. type=.te1t!css. +re(=.mystyle3css. !2 -!+ead2

5$ e1ter$al style s+eet ca$ be 6ritte$ i$ a$y te1t edit&r3 #+e (ile s+&uld $&t c&$tai$ a$y +tml ta's3 7&ur style s+eet s+&uld be saved 6it+ a 3css e1te$si&$3 5$ e1ample &( a style s+eet (ile is s+&6$ bel&6:
+r 8c&l&r:sie$$a;9 p 8mar'i$/le(t:20p1;9 b&dy 8back'r&u$d/ima'e:url:.ima'es!back;03'i(.<;9 &o not leave spaces #etween the property value and the units' ("argin)le%t:*+ px( ,instead o% ("argin)le%t:*+px(- will wor. in I!/ #ut not in 0ire%ox or 1pera.

Example: tep 1: Creati$' )1ter$al style s+eet as e1tcss3css

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1 Note $t"!es. 0. text $ decoration . none/under!ine/?ver!ine/!ine4through/b!ink. a.nodec 4 H"per!ink te,t wi!! not be under!ined 3. hover 7 't is a pseudo c!ass& which is activated d"namica!!" when the user moves cursor over the e!ement. @seudo c!ass is separated from the e!ement b" a co!on #.% from the name of the e!ement to which the" are app!ied. 2elative $ length "easure"ent. 't varies in siAe& based on screen reso!ution. 't inc!udes p,& em& e,. @ercent. em 7 the M4height of the font& which is usua!!" set to the height of an uppercase M e, 7 The , 7 height of the font & which is usua!!" set to the height of a !owercase ,. p, 7 height given in pi,e!s percentages 7 font4siAe.B8C

CSS

3.

;. 3#solute) length "easure"ent 7 Dnits that do not var" in siAe based on the s"stem. These units ate in inches #in%& centimeters #cm%& mi!!imeters #mm%& points #0pt : 0/<3 in%& and picas #0pc : 03 pt% B. Line E defines the font siAe of sub !isting e!ements

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1 Step *: Creating docu"ent that include style sheet

CSS

1utput:

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1

CSS

4ultiple Style Sheets


'f some properties have been set for the same se!ector in different st"!e sheets& the va!ues wi!! be inherited from the more specific st"!e sheet. For e,amp!e& an e,terna! st"!e sheet has these properties for the h3 se!ector.
+= 8 c&l&r:red; te1t/ali'$:le(t; (&$t/si>e:?pt; 9

-nd an interna! st"!e sheet has these properties for the h3 se!ector.
+= 8 te1t/ali'$:ri'+t; (&$t/si>e:20pt; 9

'f the page with the interna! st"!e sheet a!so !inks to the e,terna! st"!e sheet the properties for h3 wi!! be.
+= 8 c&l&r:red; te1t/ali'$:ri'+t; (&$t/si>e:20pt; 9

The co!or is inherited from the e,terna! st"!e sheet and the te,t4a!ignment and the font4siAe is rep!aced b" the interna! st"!e sheet.

4ultiple Styles Will Cascade into 1ne


$t"!es can be specified. inside an HTML e!ement inside the head section of an HTML page in an e,terna! $$ fi!e
#ip: )ve$ multiple e1ter$al style s+eets ca$ be re(ere$ced i$side a si$'le @#AL d&cume$t3

Cascading order
What st"!e wi!! be used when there is more than one st"!e specified for an HTML e!ementF Genera!!" speaking we can sa" that a!! the st"!es wi!! HcascadeH into a new Hvirtua!H st"!e sheet b" the fo!!owing ru!es& where number four has the highest priorit". 0. Irowser defau!t 3. +,terna! st"!e sheet 3. 'nterna! st"!e sheet #in the head section%
Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1 CSS ;. 'n!ine st"!e #inside an HTML e!ement% $o& an in!ine st"!e #inside an HTML e!ement% has the highest priorit"& which means that it wi!! override a st"!e defined inside the 1head2 tag& or in an e,terna! st"!e sheet& or in a browser #a defau!t va!ue%. 5ote:
I% the lin. to the external style sheet is placed a%ter the internal style sheet in 6T47 8head9/ the external style sheet will override the internal style sheet'

>:ser

Styles Sheets

Dser can define their own user st"!e sheets to format pages based on their performance. Dser $t"!e $heets are e,terna! st"!e sheets. Dser $t"!e $heets are not !inked to a document= rather the" are set in the browser)s option. To add a user styles in Internet !xplorer ; Goto T??L$ 42 'nternet ?ption 42 !ick -ccessibi!it" 42 heck the format document using M" $t"!es $heet heckbo, 42 T"pe Location of Dser $t"!e sheets. Now '+ < app!ies the user st"!e sheet to an" document it !oads. 5ote $ $t"!e defined b" the user take precedence over st"!es defined b" the Dser agent #browser% and st"!es defined b" authors take precedence over st"!e defined b" the user. !xa"ple:) Web document created b" author

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1 ?utput.

CSS

$tep 3. We add a user $t"!e sheet using procedure given.

?utput. -fter adding Dser st"!e sheet

'n this e,amp!e user has defined its own st"!e sheet& but according to ru!e the author st"!e has higher precedence and it overrides the user st"!e. $o 9pt font4siAe specified in the author st"!e sheet overrides the 38 pt font specified in the user st"!e sheet. This sma!! font ma" take the page difficu!t to read& especia!!" for individua!s with visua! impairments. We can avoid this prob!em b" using re!ative 7 measurement #eg. em or e,% instead of abso!ute measurement #eg. pt%. Je!ative measurement does not override the user st"!e sheet. $tep 3. We app!" re!ative measurement #font4siAe. .<Bem%

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1 4utput: 5(ter applyi$' relative measureme$t3

CSS

Con%licting Styles
$t"!es ma" be defined b" a user& an author or a user agent #web browser%. Dser 7 - person viewing "our webpage -uthor 7 - person who writes the web document. Dser agent 7 #Web browser% the program used to render and disp!a" the document. $ometimes st"!es conf!ict to each other. 'n this case $t"!e defined b" the user agent #Lowest @riorit"% $t"!e defined b" the user #Higher priorit"% $t"!e defined b" the author #Highest @riorit"% Most st"!es defined for parent e!ements are a!so inherited b" chi!d #nested% e!ements. This is a user !ike inheriting font4propert". Iut there are certain properties that we don)t want to be inherited. Like if we are setting one background image for some e!ement then we don)t want to set same background image of ever" e!ement. Here we discuss the ru!es for reso!ving conf!icts between st"!es defined for e!ements and st"!es inherited from parent and ancestor e!ements.

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1

CSS

<ositioning !le"ents
Without $$& contro!!ing the positioning of e!ement in an XHTML document was difficu!t. $$ introduced the position propert" and capabi!it" ca!!ed abso!ute positioning& which gives greater contro! over how document e!ements are disp!a"ed.

?utput.

'n a norma! st"!e e!ements are positioned on the page in the order that the" appear in the XHTML documents. -bso!ute positioning removes the norma! f!ow of e!ements on the page. 'n the positioning of e!ements according to the distance from the top& Left& right or bottom margins of its containing b!ock !eve! e!ement #bod"& p%.

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1 CSS = $ Index propert" a!!ows "ou to !a"er over!apping e!ements proper!". +!ements that have higher A 7 inde, va!ues are disp!a"ed in front of e!ements with !ower A 7 inde, va!ues.

2elative <ositioning
'n this e!ements are positioning re!ative to other e!ements. $etting the position propert" to e!ative !a"out the e!ement on the page and offset it b" the specified top& bottom& !eft or right va!ue. Je!ative positioning keeps e!ements in the genera! f!ow of e!ements on the page& so positioning is re!ative to other e!ements in the f!ow.

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1 ?utput.

CSS

+, is the , 7 height of a font& a re!ative4!ength measurement t"pica!!" e5ua! to te height of a !owercase ,. 'n!ine e!ements 7 span& img& a em and strong. -pp!ies formatting to te,t without changing the f!ow of document. >loc. level ele"ent 7 div& p& heading These are disp!a"ed in own !ine and has a virtua! bo, around it.

CSS >ac.ground
We can app!" $$ ru!es for background of b!ock !eve! e!ements or XHTML documents. $$ background properties are used to define the background effects of an e!ement. $$ properties used for background effects. background4co!or background4image background4repeat background4attachment background4position

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1

CSS

>ac.ground Color
The background4co!or propert" specifies the background co!or of an e!ement. The background co!or of a page is defined in the bod" se!ector.
!xa"ple bod" Kbackground4co!or.>b8c;de=L

With $$& a co!or is most often specified b". a H+X va!ue 4 !ike H>ff8888H an JGI va!ue 4 !ike Hrgb#3BB&8&8%H a co!or name 4 !ike HredH 'n the e,amp!e be!ow& the h0& p& and div e!ements have different background co!ors.
!xa"ple h0 Kbackground4co!or.>M;9Bed=L p Kbackground4co!or.>e8ffff=L div Kbackground4co!or.>b8c;de=L

>ac.ground I"age
The background4image propert" specifies an image to use as the background of an e!ement. I" defau!t& the image is repeated so it covers the entire e!ement. The background image for a page can be set !ike this.
!xa"ple bod" Kbackground4image.ur!#Npaper.gifN%=L

Ie!ow is an e,amp!e of a bad combination of te,t and background image. The te,t is a!most not readab!e.
!xa"ple bod" Kbackground4image.ur!#Nbgdesert.*pgN%=L

>ac.ground $ <osition
Iackground 7 propert" p!aces the image on the page at specified position. The ke"words are top& bottom& center& !eft and right are used individua!!" or in combination for vertica! and horiAonta! positioning. -n image can be positioned using !ength b" specif"ing the horiAonta! !ength fo!!owed b" vertica! !ength.

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1 +,amp!e. background 7 position. B8C 38p, means
HoriAonta! distance 7 B8C from the !eft Oertica! distance 7 38 p, from the top =0 p1 (r&m t&p "ma'e3jpe' B0C (r&m le(t

CSS

The position of the image is specified b" the background4position propert".


!xa"ple bod" K background4image.ur!#NimgPtree.pngN%= background4repeat.no4repeat= background4position.right top= L

>ac.ground I"age 2epeat )


Iackground 7 repeat propert" contro!s background image ti!ing& which p!aces mu!tip!e copies of images ne,t to each other to fi!! the background. Oa!ues for this propert" are. no 7 repeat . disp!a" on!" one image in the background repeat #defau!t%. repeat image to fi!! the background repeat 7 , . repeat images on!" in horiAonta! direction repeat 7 " . repeat images on!" in vertica! direction

!xa"ple bod" K background4image.ur!#Ngradient3.pngN%= L

'f the image is repeated on!" horiAonta!!" #repeat4,%& the background wi!! !ook better.
!xa"ple bod" K background4image.ur!#Ngradient3.pngN%= background4repeat.repeat4,=
Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1
L

CSS

>ac.ground $ 3ttach"ent
Oa!ues of this propert" are. %ixed: fi,es the image in the position specified b" background 7 position. $cro!!ing the browser wi!! not move the image from its position. Scroll ,de%ault- : $cro!! moves the image as the user scro!! through the document. !xa"ple:

>ac.ground ) Shorthand property


-s "ou can see from the e,amp!es above& there are man" properties to consider when dea!ing with backgrounds. To shorten the code& it is a!so possib!e to specif" a!! the properties in one sing!e propert". This is ca!!ed a shorthand propert". The shorthand propert" for background is simp!" HbackgroundH.
!xa"ple bod" Kbackground.>ffffff ur!#NimgPtree.pngN% no4repeat right top=L

When using the shorthand property the order o% the property values are: 0. background4co!or 3. background4image 3. background4repeat ;. background4attachment B. background4position 't does not matter if one of the propert" va!ues is missing& as !ong as the ones that are present are in this order.

3ll CSS >ac.ground <roperties


<roperty background background4attachment background4co!or background4image background4position background4repeat &escription $ets a!! the background properties in one dec!aration $ets whether a background image is fi,ed or scro!!s with the rest of the page $ets the background co!or of an e!ement $ets the background image for an e!ement $ets the starting position of a background image $ets how a background image wi!! be repeated
Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1

CSS

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1

CSS

!le"ent di"ension
Here we stud" page e!ement.

$$ ru!es which specif" the actua! dimension of each

1div st"!e : Qwidth.38CR2 Now e!ement occup" 38C of screen width. width : 08em $ets e!ement width to 08 times of the font 7 siAe. height : simi!ar as width te,t 7 a!ign . !eft / right / center overf!ow. scro!! 7 -dds a scro!! bar if the te,t overf!ows the boundar".

!xa"ple:

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1 ?utput.

CSS

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1

CSS

>ox 4odel and Text %low


'n $$& the term Hbo, mode!H is used when ta!king about design and !a"out. -!! the b!ock 7 !eve! XHTML e!ements have a virtua! bo, drawn around them. 't is ca!!ed Io, Mode!. These e!ements surrounded b" margin& border& padding and content.
The i"age #elow illustrates the #ox "odel:

+,p!anation of the different parts. 4argin 4 !ears an area around the border. The margin does not have a background co!or& it is comp!ete!" transparent >order 4 - border that goes around the padding and content. The border is affected b" the background co!or of the bo, <adding 4 !ears an area around the content. The padding is affected b" the background co!or of the bo, Content 4 The content of the bo,& where te,t and images appear 'n order to set the width and height of an e!ement correct!" in a!! browsers& "ou need to know how the bo, mode! works.
The total width o% an ele"ent should always #e calculated li.e this: Tota! e!ement width : width S !eft padding S right padding S !eft border S right border S !eft margin S right margin The total height o% an ele"ent should always #e calculated li.e this: Tota! e!ement height : height S top padding S bottom padding S top border S bottom border S top margin S bottom margin

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1

CSS

CSS >order
- surrounded !ine which separates the e!ement from others is ca!!ed border. $$ contro! the border using these properties. border 7 st"!e . #none / hidden / dotted / dashed / so!id / doub!e / groove / ridge / inset / outset% border 7 width . # !ength in em / e, / p, % or @redefined va!ues #thin / medium / thick% border 7 co!or . The co!or can be set b". o name 4 specif" a co!or name& !ike HredH o JGI 4 specif" a JGI va!ue& !ike Hrgb#3BB&8&8%H o He, 4 specif" a he, va!ue& !ike H>ff8888H 6ou can a!so set the border co!or to HtransparentH.

??5ote:
None of the border properties wi!! have -N6 effect un!ess the border4st"!e propert" is setT

>order Style
The border4st"!e propert" specifies what kind of border to disp!a". border4st"!e va!ues. none. Uefines no border dotted. Uefines a dotted border dashed. Uefines a dashed border so!id. Uefines a so!id border doub!e. Uefines two borders. The width of the two borders are the same as the border4width va!ue groove. Uefines a 3U grooved border. The effect depends on the border4co!or va!ue ridge. Uefines a 3U ridged border. The effect depends on the border4co!or va!ue inset. Uefines a 3U inset border. The effect depends on the border4co!or va!ue

outset. Uefines a 3U outset border. The effect depends on the border4co!or va!ue

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1

CSS

!xa"ple:

1utput:

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1

CSS

<adding <roperty:
@adding propert" determines the distance between the content inside an e!ement and the inside of the e!ements border. @adding va!ues are.
padding 7 top padding 7 bottom& padding 7 !eft& padding 7 right.

%alues speci(ied i$ p1 ! pt ! e1 ! em

4argin <roperty Margin propert" sets the spaces between the outside of the border and the other content on the page. Margin can be specified b" using.
margin 7 top& margin 7 top margin 7 top margin 7 top

%alues speci(ied i$ p1 ! pt ! e1 ! em

>order ) Shorthand property


-s "ou can see from the e,amp!es above& there are man" properties to consider when dea!ing with borders. To shorten the code& it is a!so possib!e to specif" a!! the border properties in one propert". This is ca!!ed a shorthand propert". The shorthand propert" for the border properties is HborderH. !xa"ple
border.Bp, so!id red=

When using the border propert"& the orders of the va!ues are.
border4width border4st"!e border4co!or

't does not matter if one of the va!ues above are missing #a!though& border4st"!e is re5uired%& as !ong as the rest are in the specified order.

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1

CSS

4edia Types
$$ media t"pe a!!ows a programmer to decide what a page shou!d !ook !ike depending on the kind of media being used to disp!a" the page. The most common media t"pe for a web page is the screen media t"pe& which is a standard computer screen. ?ther media t"pes inc!uded in $$ 3 are handhe!d& Irai!!e& aura! and print. 6andheld 7 designed for mobi!e internet devices. >raille 7 't is used for machine that can read or print web pages in Irai!!e. 3ural 7 -!!ows the programmer to give speech 7 s"nthesiAing web browser. This wi!! a!!ow the browser to present a web page in sensib!e manner to a visua!!" impaired person. <rint 7 affects a web page)s appearance when it is printed.

3dding the style %or "edia type @. %or all "edia types A"edia all B C *. %or print "edia A"edia print B C
5ote: The print 7 media t"pe has the higher specificit" than a!! media t"pes. The print st"!e overrides the st"!e for a!! media t"pes when the page is printed.

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1 !xa"ple: "edia types

CSS

1utput: In >rowser

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1 1utput: In print preview

CSS

>uilding a CSS &rop $ &own 4enu


Urop Uown menus are a wa" to provide navigation !ink on a website without using a !ot of $creen $paces. We a!read" know the .hover pseudo c!ass which is used to change a !inks st"!e when the mouse hovers over it. We wi!! use this feature in creating menus. The other important propert" is disp!a" propert". This a!!ows a programmer to decide whether an e!ement is rendered on the page or not. @ossib!e va!ues inc!ude b!ock& in!ine and none.
b!ock 7 Uisp!a" e!ement as b!ock e!ement in!ine 7 Uisp!a" e!ement as in!ine e!ement none 7 $tops the e!ement from being rendered

div.menu 7 disp!a" menu div.menu.hover a 7 This !ine se!ect on!" the anchor 1a2 e!ement that are chi!dren of a menu div that has the mouse over it. div.menu a 7 $e!ects a!! the !inks inside the menu div and sets their disp!a" va!ue to none. div.menu a.hover 7 The st"!e app!ied to an" 1a2 e!ement that is a chi!d of menu div when that chi!d has !ighted menu option.

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di

Internet Programming
Unit 1

CSS

#CSS 3
#+e D=C is curre$tly devel&pi$' C a$d s&me br&6sers are be'i$$i$' t& impleme$t s&me &( t+e $e6 (eatures t+at 6ill be i$ t+e C * peci(icati&$3 C = 6ill all&6 (&r m&re adva$ce c&$tr&l &( b&arders3 Like b&rder/style, b&rder/c&l&r a$d b&rder/6idt+ pr&perties3 7&u 6ill be able t& set multiple b&rder/ c&l&rs, use ima'es (&r b&rders, add s+ad&6s t& b&1es a$d create b&rders 6it+ r&u$ded c&r$ers3 Back'r&u$d "ma'es E C = all&6s aut+&r t& set si>e a$d p&siti&$ &( back'r&u$d ima'es i$ eleme$ts, 6it+ C = aut+&r ca$ use multiple back'r&u$d ima'es i$ &$e eleme$t3 #e1t E C = all&6s user t& set s+ad&6 e((ect &$ te1t a$d m&re &pti&$ (&r te1t &ver(l&6 6+e$ t+e te1t is t&& l&$' t& (it i$ its c&$tai$i$' eleme$t3 5dditi&$al (eatures i$ C = are resi>able b&1es, e$+a$ced select&rs, multic&lum$ lay&uts a$d m&re devel&ped speec+ styles3

Prepared By: Deepak Kumar Prajapat Lecturer: C !"# Departme$t %eda$t C&lle'e &( )$'i$eeri$' * #ec+$&l&'y, Bu$di