unit 1.2 css final

8/13/2019 Unit 1.2 Css Final

1/27

Internet Programming

Unit 1 CSSCSS Introduction

We have introduced the XHTML for marking up information to berepresenting in a browser. Now we focus on formatting and presentinginformation. For this we use a W3 techno!og" ca!!ed cascading st"!e

sheet #$$% that a!!ows document author to specif" the presentation ofe!ement on a web page #e.g. Font& spacing& co!or etc.% separate!" from thestructure of the document. 't wi!! simp!if" maintaing ( modif"ing the webpage.

'f a website)s presentation is determined entire!" b" a st"!e sheet& aweb designer can simp!" swap in a new st"!e sheet to comp!ete!" changethe appearance of the site. $$ provides a wa" to app!" st"!e outside ofXHTML document bod".

$o XHTML now dictate the content whi!e the $$ dictate how it ispresented. 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 indeve!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" hasa 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
http://jigsaw.w3.org/css.validatorhttp://jigsaw.w3.org/css.validator


2/27


Unit 1 CSSThree Ways to Insert CSS

There are three wa"s for using cascading st"!e sheet #$$% withXHTML 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)sformat. -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 showshow to change the co!or and the !eft margin of a paragraph

-p style=.c&l&r:sie$$a;mar'i$/le(t:20p.#+is is a para'rap+3-!p

Code Showing Inline style

Note

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





3/27


Unit 1 CSSInternal / !"#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 anXHTML 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 thisseparation between the $$ code ( the XHTML that it st"!es& wewi!! 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:





4/27


Unit 1 CSSe" $ %ont weight property7 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! fontst"!e em : ;88 ( for bo!d te,t em :


5/27


Unit 1 CSSNote $t"!es0. text $ decoration none/under!ine/?ver!ine/!ine4through/b!ink.

a.nodec 4 H"per!ink te,t wi!! not be under!ined

. hover7 't is a pseudo c!ass& which is activated d"namica!!" when

the user moves cursor over the e!ement. @seudo c!ass is separatedfrom the e!ement b" a co!on #% from the name of the e!ement to whichthe" are app!ied.

3. 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 font4siAeB8C

;. #solute) length "easure"ent7 Dnits that do not var" in siAe basedon the s"stem. These units ate in inches #in%& centimeters #cm%&mi!!imeters #mm%& points #0pt : 0/


6/27


Unit 1 CSSStep *: Creating docu"ent that include style sheet

1utput:





7/27


Unit 1 CSS4ultiple Style Sheets

'f some properties have been set for the same se!ector in different st"!esheets& 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;

tet/ali'$:le(t;

(&$t/si>e:?pt;

9

-nd an interna! st"!e sheet has these properties for the h3 se!ector

+

8 tet/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"!esheet the properties for h3 wi!! be

+

8 c&l&r:red;

tet/ali'$:ri'+t;

(&$t/si>e:20pt;

9

The co!or is inherited from the e,terna! st"!e sheet and the te,t4a!ignmentand 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 eter$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 anHTML e!ement

Genera!!" speaking we can sa" that a!! the st"!es wi!! cascade into anew virtua! st"!e sheet b" the fo!!owing ru!es& where number four has thehighest priorit"

0. Irowser defau!t

. +,terna! st"!e sheet3. 'nterna! st"!e sheet #in the head section%





8/27


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& orin 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 in6T47 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 basedon 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 formatdocument 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"!edefined b" the user.

!xa"ple:) Web document created b" author





9/27


Unit 1 CSS?utput

$tep 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!ethe author st"!e has higher precedence and it overrides the user st"!e. $o9pt font4siAe specified in the author st"!e sheet overrides the 8 pt fontspecified in the user st"!e sheet.

This sma!! font ma" take the page difficu!t to read& especia!!" forindividua!s with visua! impairments.

We can avoid this prob!em b" using re!ative 7 measurement #eg. em ore,% 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 .


10/27


Unit 1 CSS4utput: 5(ter applyi$' relative measureme$t3

Con%licting Styles

$t"!es ma" be defined b" a user& an author or a user agent #webbrowser%.

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 thereare certain properties that we don)t want to be inherited. Like if we aresetting one background image for some e!ement then we don)t want to setsame background image of ever" e!ement.

Here we discuss the ru!es for reso!ving conf!icts between st"!esdefined for e!ements and st"!es inherited from parent and ancestore!ements.





11/27


Unit 1 CSS


12/27


Unit 1 CSS= $ Indexpropert" 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 ofe!ements with !ower A 7 inde, va!ues.

2elative


13/27


Unit 1 CSS?utput

+, 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"ent7 div& p& heading

These are disp!a"ed in own !ine and has a virtua! bo, around it.

CSS >acground

We can app!" $$ ru!es for background of b!ock !eve! e!ements orXHTML 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





14/27


Unit 1 CSS>acground Color

The background4co!or propert" specifies the background co!or of ane!ement.

The background co!or of a page is defined in the bod" se!ector

!xa"plebod" Kbackground4co!or>b8c;de=

With $$& a co!or is most often specified b"

a H+X va!ue 4 !ike >ff8888

an JGI va!ue 4 !ike rgb#BB&8&8%

a co!or name 4 !ike red

'n the e,amp!e be!ow& the h0& p& and div e!ements have differentbackground co!ors

!xa"pleh0 Kbackground4co!or>;9Bed=p Kbackground4co!or>e8ffff=div Kbackground4co!or>b8c;de=

>acground I"age

The background4image propert" specifies an image to use as thebackground 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"plebod" Kbackground4imageur!#paper.gif%=

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"plebod" Kbackground4imageur!#bgdesert.*pg%=

>acground $


15/27


Unit 1 CSS+,amp!e background 7 position B8C 38p, meansHoriAonta! distance 7 B8C from the !eftOertica! distance 7 38 p, from the top

The position of the image is specified b" the background4position

propert"

!xa"plebod"Kbackground4imageur!#imgPtree.png%=background4repeatno4repeat=background4positionright top=

>acground I"age 2epeat )

Iackground 7 repeat propert" contro!s background image ti!ing& whichp!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"plebod"Kbackground4imageur!#gradient.png%=

'f the image is repeated on!" horiAonta!!" #repeat4,%& the background wi!!!ook better

!xa"plebod"K

background4imageur!#gradient.png%=background4repeatrepeat4,=




0 p (r&m t&p

0 (r&m le(t"ma'e3jpe'


16/27


Unit 1 CSS

>acground $ ttach"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 thedocument.!xa"ple:

>acground ) Shorthand property

-s "ou can see from the e,amp!es above& there are man" properties toconsider when dea!ing with backgrounds.

To shorten the code& it is a!so possib!e to specif" a!! the properties in onesing!e propert". This is ca!!ed a shorthand propert".

The shorthand propert" for background is simp!" background

!xa"plebod" Kbackground>ffffff ur!#imgPtree.png% no4repeat right top=

When using the shorthand property the order o% the property valuesare:

0. background4co!or. background4image3. background4repeat;. background4attachmentB. background4position

't does not matter if one of the propert" va!ues is missing& as !ong as theones that are present are in this order.

ll CSS >acground


17/27


Unit 1 CSS





18/27


Unit 1 CSS!le"ent di"ension

Here we stud" $$ ru!es which specif" the actua! dimension of eachpage e!ement.

1div st"!e : Qwidth8CR2 Now e!ement occup" 8C 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:





19/27


Unit 1 CSS?utput





20/27


Unit 1 CSS>ox 4odel and Text %low

'n $$& the term bo, mode! is used when ta!king about designand !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 >order4 - border that goes around the padding and content. The

border is affected b" the background co!or of the bo,


21/27


Unit 1 CSSCSS >order

- surrounded !ine which separates the e!ement from others is ca!!edborder. $$ 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 red

o JGI 4 specif" a JGI va!ue& !ike rgb#BB&8&8%

o He, 4 specif" a he, va!ue& !ike >ff8888

6ou can a!so set the border co!or to transparent.

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

>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 theborder4width 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





22/27


Unit 1 CSS

!xa"ple:

1utput:





23/27


Unit 1 CSS


24/27


Unit 1 CSS4edia Types

$$ media t"pe a!!ows a programmer to decide what a page shou!d !ook !ikedepending on the kind of media being used to disp!a" the page. The most commonmedia t"pe for a web page is the screen media t"pe& which is a standard computerscreen. ?ther media t"pes inc!uded in $$ are handhe!d& Irai!!e& aura! and print.

6andheld7 designed for mobi!e internet devices.

>raille7 't is used for machine that can read or print web pages in Irai!!e.

ural7 -!!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!!" impairedperson.


25/27


Unit 1 CSS!xa"ple: "edia types

1utput: In >rowser





26/27


Unit 1 CSS1utput: In print preview

>uilding a CSS &rop $ &own 4enu

Urop Uown menus are a wa" to provide navigation !ink on a websitewithout using a !ot of $creen $paces. We a!read" know the hover pseudoc!ass which is used to change a !inks st"!e when the mouse hovers overit. We wi!! use this feature in creating menus. The other important propert"is disp!a" propert". This a!!ows a programmer to decide whether ane!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.menuhover 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 ahover 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.





27/27


Unit 1 CSS#CSS 3

#+e 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&es 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

#et E C all&6s user t& set s+ad&6 e((ect &$ tet a$d m&re &pti&$ (&r tet

&ver(l&6 6+e$ t+e tet is t&& l&$' t& (it i$ its c&$tai$i$' eleme$t3

5dditi&$al (eatures i$ C are resi>able b&es, e$+a$ced select&rs, multic&lum$

lay&uts a$d m&re devel&ped speec+ styles3

unit 1.2 css final

Documents