lecture 5 advance css.pptx

7/25/2019 Lecture 5 Advance CSS.pptx

1/16

Hands on

Asma Sajid ; College of Computer Science &Information Studies, GCUF 1

ADA!C"DCASCADI!G

S#$%"SH""#S

CSS'


2/16

Asma Sajid ; College of Computer Science & Information Studies,GCUF (

ID & C%ASS S"%"C#)*S ID Selector+ #e id selector is used to specif- a st-le for a single, uni.ue element/

#e id selector uses te id attri0ute of te H#% element, and is

de2ned 3it a 454/ #e st-le rule 0elo3 3ill 0e applied to te element 3it id64para14+

Class Selector+ #e class selector is used to specif- a st-le for a group of elements/

Unli7e te id selector, te class selector is most often used on

se8eral elements/ #is allo3s -ou to set a particular st-le for man- H#% elements

3it te same class/

#e class selector uses te H#% class attri0ute, and is de2ned 3ita dot 4/4

/center 9te:talign+center;tml

>ead

>st-le t-pe64te:tBcss4

5para1

9

te:talign+center;

color+red;

Bst-le

>Bead

>0od-

>p id64para14Hello orld?>Bp

>p#is paragrap is not aected 0- te st-le/>Bp

>B0od-

>Btml


4/16

Asma Sajid ; College of Computer Science & Information Studies,GCUF E

G*)U@I!G S"%"C#)*S In st-le seets tere are often elements 3it te same st-le/

#o a8oid te code repeating, 3e can group tem/

Here is an e:ample to cange te sie of an image using CSS/

CSS DI"!SI)!S

img/normal

9 eigt+auto; 0od->img class64normal4 src64logocss/gif4 3idt64J4eigt64KE4 B>0r B>img class640ig4 src64logocss/gif4 3idt64J4

eigt64KE4 B>0r B>img class64small4 src64logocss/gif4 3idt64J4eigt64KE4 B

CSScodeusingclasses


5/16

Asma Sajid ; College of Computer Science & Information Studies,GCUF

J

CSS DIS@%A$ A!D ISILI%I#$ #e displa- propert- speci2es ifBo3 an element is displa-ed/

none, 0loc7, inline'

Hiding an element can 0e done 0- setting te displa- propert- to4none4

#e 8isi0ilit- propert- speci2es if an element sould 0e8isi0le or idden/

Hiding of an element can also 0e done 0- setting 8isi0ilit- propert-to 4idden4

S-nta:+

visible Default value. The element is visible

hidden The element is invisible (but still takes up space)

collapse Only for table elements. collapse removes a row or column, but it does not affect the tablelayout. The space taken up by the row or column will be available for other content. If

collapse is used on other elements, it renders as "hidden"

initial ets this property to its default value.

inherit Inherits this property from its parent element.


6/16

Asma Sajid ; College of Computer Science & Information Studies,GCUF M

CSS F%)A# it CSS Noat, an element can 0e pused to te left or rigt,

allo3ing oter elements to 3rap around it/

Float is 8er- often used for images, 0ut it is also useful 3en3or7ing 3it la-outs/

"lements are Noated oriontall-, tis means tat an elementcan onl- 0e Noated left or rigt, not up or do3n/

If an image is Noated to te rigt, a follo3ing te:t No3s

around it, to te left

Here is e:ample code to Noat multiple images on a 3e0 page/

>st-let-pe64te:tBcss4

/tum0nail9Noat+left;3idt+11p:;eigt+p:;margin+Jp:;

Bst-le

>0od->=Image Galler->B=

>img class64tum0nail4 src647lematisOsmall/jpg43idt641P4 eigt644>img class64tum0nail4 src647lematis(Osmall/jpg43idt641P4 eigt64K4>img class64tum0nail4 src647lematis=Osmall/jpg43idt6411M4 eigt644>img class64tum0nail4 src647lematisEOsmall/jpg43idt641(4 eigt644

>img class64tum0nail4 src647lematisOsmall/jpg43idt641P4 eigt644


7/16

Asma Sajid ; College of Computer Science & Information Studies,GCUF P

@)SI#I)!I!G "%""!#S #e CSS positioning properties allo3 -ou to position an element/

It can also place an element 0eind anoter, and specif- 3at

sould appen 3en an elementQs content is too 0ig/ "lements can 0e positioned using te top, 0ottom, left, and rigt

properties/

Ho3e8er, tese properties 3ill not 3or7 unless te positionpropert- is set 2rst/

#e- also 3or7 dierentl- depending on te positioning metod/ #ere are four dierent positioning metods/

Static @ositioning+

H#% elements are positioned static 0- default/

A static positioned element is al3a-s positioned according to te

normal No3 of te page/Static positioned elements are not aected 0- te top, 0ottom, left,

and rigt properties/

Fi:ed @ositioning

An element 3it 2:ed position is positioned relati8e to te 0ro3ser3indo3/

It 3ill not mo8e e8en if te 3indo3 is scrolled/


8/16

Asma Sajid ; College of Computer Science & Information Studies,GCUF K

*elati8e @ositioning

A relati8e positioned element is positioned relati8e to its normalposition/

#e content of relati8el- positioned elements can 0e mo8ed ando8erlap oter elements,

0ut te reser8ed space for te element is still preser8ed in tenormal No3/

*elati8el- positioned elements are often used as container 0loc7sfor a0solutel- positioned elements/

A0solute @ositioning

An a0solute position element is positioned relati8e to te 2rstparent element tat as a position oter tan static/ If no sucelement is found, te containing 0loc7 is >tml+

A0solutel- positioned elements are remo8ed from te normal No3/#e document and oter elements 0ea8e li7e te a0solutel-positioned element does not e:ist/


9/16

Asma Sajid ; College of Computer Science & Information Studies,GCUF

All CSS Positioning Properties!alue Description

static Default value. lements render in order, as they appear in the

document flowabsolute The element is positioned relative to its first positioned (not

static) ancestor element

fi#ed The element is positioned relative to the browser window

relative The element is positioned relative to its normal position, so

"left$%&" adds %& pi#els to the element's T position

initial ets this property to its default value.

inherit Inherits this property from its parent element.


10/16

Asma Sajid ; College of Computer Science & Information Studies,GCUF 1

>st-le(/posOleft9

position+ relati8e; left+ (p:;Bead

>0od-

This is a heading with no position

This heading ismoved left according to its normalposition

This heading ismoved right according to its normalposition

Relative positioning moves an elementRE!T#E to its original position$

The st%le "left:-2&p'" s(btracts 2& pi'elsfrom the element)s original left position$

The st%le "left:2&p'" adds 2& pi'els tothe element)s original left position$


11/16

Asma Sajid ; College of Computer Science & Information Studies,GCUF 11

ADDI!G "FF"C#S #) IAG"S 1' #ransparent Image "ect #e CSS= propert- for transparenc- is opacit-/

e can set 8alue for opacit-/

#e opacit- propert- can ta7e a 8alue from / 1// A lo3er8alue ma7es te element more transparent/

I", Firefo:, Crome, )pera, and Safari use te propert- opacit- for

transparenc-/ I"K and earlier use 2lter+alpaopacit-6:'/

#e : can ta7e a 8alue from 1/ A lo3er 8alue ma7es teelement more transparent/


12/16

Asma Sajid ; College of Computer Science & Information Studies,GCUF 1(

ADDI!G "FF"C#S #) IAG"S (' Ho8er Image "ect #e 2rst CSS 0loc7 3ill 0e similar to te code in transparenc-

e:ample/

In addition, 3e need to added 3at sould appen 3en auser o8er o8er one of te images/

In tis case 3e 3ant te image to !)# 0e transparent 3ente user o8er o8er it/

#e CSS for tis is+ opacit-61/ And I"K and earlier+2lter+alpaopacit-61'/

en te mouse pointer mo8es a3a- from te image, te image3ill 0e transparent again/

S-nta:+


13/16

Asma Sajid ; College of Computer Science & Information Studies,GCUF 1=

C*"A#I!G IAG" S@*I#"S Image Sprites An image sprite is a collection of images put into a single image/

A 3e0 page 3it man- images can ta7e a long time to loadand generatesmultiple ser8er re.uests/

Using image sprites 3ill reduce te num0er of ser8er re.uests and sa8e0and3idt/

Instead of using tree separate images, 3e use single image/ a/jpg'

follo3ing e:ample te CSS speci2es 3ic part of te Ra/jpg4 image to so3+

S$!#A+

>img class64ome4 src64imgOtrans/gif4 B )nl- de2nes a small transparent image0ecause te src attri0ute cannot 0e empt-/ #e displa-ed image 3ill 0e te 0ac7groundimage 3e specif- in CSS/

3idt+EMp:;eigt+EEp:; De2nes te portion of te image 3e 3ant to use

0ac7ground+urlimgOna8sprites/gif' ; De2nes te 0ac7ground image and its

position left p:, top p:'


14/16

Asma Sajid ; College of Computer Science & Information Studies,GCUF 1E

"A@%" S@*I#"S !a8igation %ist e 3ill use an H#% list, 0ecause it can 0e a lin7 and also

supports a 0ac7ground image/

":planation;

5na8list9position+relati8e;< position is set to relati8e to allo3 a0solutepositioning inside it5na8list li9margin+;padding+;listst-le+none;position+a0solute;top+;


15/16

Asma Sajid ; College of Computer Science & Information Studies,GCUF 1J

@ositioning

!o3 start to position and st-le for eac speci2c part+5ome9left+p:;3idt+EMp:;< @ositioned all te 3a- tote left, and te 3idt of te image is EMp: 5ome90ac7ground+urlimgOna8sprites/gif' ;


16/16

Asma Sajid ; College of Computer Science & Information Studies,GCUF 1M

Adding Ho8er "ect// e onl- add tree lines of code to add te o8er eect+

":planation

Since te list item contains a lin7, 3e can use te +o8erpseudoclass

5ome a+o8er90ac7ground+ transparenturlimgOna8spritesOo8er/gif' EJp:;

lecture 5 advance css.pptx

Documents