Академический Документы
Профессиональный Документы
Культура Документы
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
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
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.
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
-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.
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
'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
'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:
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.
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.
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
+,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
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
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