Cascading Style Sheet

Agenda
What is CSS? Syntax Applying CSS Commonly used CSS properties Grouping and Nesting Floats in Page Layouting @ rules !A

CSS What is CSS?

CSS" or#Cascading Styles Sheets" is a $ay to style and present %&'L( Cascading Style Sheets" or#CSS" is the recommended $ay to control the presentation layer in a $e) document( &he main ad*antage o+ CSS o*er presentational %&'L mar,up is that the styling can )e ,ept entirely separate +rom the content(#

Syntax
A style sheet consists o+ a list o+#rules( -ach rule or rule.set consists o+ one or more#selectors" and a#declaration block(
selector [, selector2, ...] [:pseudo-class] { property: value; [property2: value2; ...] } /* comment */

Applying CSS
&here are three $ays to apply CSS to %&'L/# In-line# $ritten directly inside the tag
0p style12color/ red23text04p3

Internal em)edded into an %&'L document(

0style3 p 5color/ red6 7 04style3

External $ritten in separate +iles and then lin,ed to in the

%&'L
0lin, rel12stylesheet2 href12style(css23

Selectors, roperties ! "alues

Selectors are the names gi*en to styles in internal and external style sheets( &he property is the style attri)ute you $ant to change and 8alues are assigned to properties

selector

p { color: red; } value

property

#nits
General 9nits used in *alues/ px#:such as#font-size/ ;<px= is the unit +or pixels( em#:such as#font-size/ <em= is the unit +or the calculated si>e o+ a +ont( So ?<em@" +or example" is t$o times the current +ont si>e( pt#:such as#font-size/ ;<pt= is the unit +or points" typically used in printed media( A#:such as#width/ BCA= Dther units include pc:picas=" cm" mm and in:inches= Note/ When a *alue is#zero" there is no need to state a unit( For e(g( to speci+y no )order" it $ould )e#border/ C(

Colors
Colors in CSS can ta,e the +orm o+/
name .#E.g.: color/red EGF *alue G E.g.: color/ rg):<HH"C"C= EGFA *alue . E.g.: color/ rg)a:<HH"C"C";= %exa *alue . E.g.: color/ I++CCCC or color/I+CC %SL *alue . E.g.: color/ hsl:C";CCA"HCA= %SLA *alue . E.g.: color/ hsla:C";CCA"HCA"C(J=

Colors can )e applied using the color or background-color property

Colors - $radients
Gradients lets you display smooth transitions )et$een t$o or more speci+ied colors Fro$sers support t$o types o+ gradients . linear and radial Linear Gradient background/ linear.gradient:to )ottom right" )lue" $hite=6 background/ linear.gradient:KCdeg" )lac," $hite=6 background/ linear.gradient:to )ottom" )lue" $hite BCA" orange=6 background/ linear.gradient:to right" rg)a:<HH"<HH"<HH"C=" rg)a:<HH"<HH"<HH";==" url:http/44+oo(com4image(Lpg=6

Colors % $radients &Contd'(

Eadial Gradient
background/ radial.gradient:red HA" yello$ <HA" I;-MCFF HCA=6

Eepeating gradients used to automatically repeat the color stops(

background/ repeating.linear.gradient:.NHdeg" red" red Hpx" $hite Hpx" $hite ;Cpx=6 (gradient 5 width/ auto6 height/ HCCpx6 margin/ C HCpx6 background/ .$e),it.repeating.linear.gradient:.MCdeg" I+M+M+M" I+M+M+M <Cpx" Icccccc <;px=6 background/ .mo>.repeating.linear.gradient:.MCdeg" I+M+M+M" I+M+M+M <Cpx" Icccccc <;px=6 background/ .o.repeating.linear.gradient:.MCdeg" I+M+M+M" I+M+M+M <Cpx" Icccccc <;px=6 background/ repeating.linear.gradient:.MCdeg" I+M+M+M" I+M+M+M <Cpx" Icccccc <;px=6 background-size/ ;CCA <;px6 7 (gradient/)e+ore 5

)ext
&ext in CSS can )e manipulated using the +ollo$ing properties/ +amily .#E.g.: font-family/ Arial" %el*etica" sans.seri+ si>e G E.g.: font-size/;Opx style . E.g.: font-style/italic6 (normal, italic, oblique, inherit) $eight . E.g.: font-weight/)old6 (normal, bold, bolder, lighter, !!"
#!!, inherit)

*ariant . E.g.: font-$ariant/small.caps6 (normal, inherit) All in one order G ?0+ont.style30 +ont.*ariant 30+ont.$eight30

+ont.si>e4line.height30 +ont.+amily3@ E.g.: font/ italic )old ;<px4JCpx Georgia" seri+6 Dther &ext properties that can )e re+erred to G %e&t-decoration, te&t-transform, letter-spacing, word-spacing, lineheight, te&t-align, te&t-indent etcP

*ac+ground
Fac,grounds are a core part o+ CSS" that can )e used to add color or images to a page or element( Qt can )e manipulated using the +ollo$ing properties/ )ac,ground.color .#E.g.: background-color /rg)a:C"C"<HH";= )ac,ground.image G E.g.: background-image/ url:image(Lpg=6 )ac,ground.position . E.g.: background-position/ KHpx C6 (left,
center, right, top, center, bottom)

)ac,ground.repeat . E.g.: background-repeat/ repeat6 (repeat-&,

repeat-y, no-repeat, inherit)

)ac,ground.attachment . E.g.: background-attachment/ scroll6

(scroll, fi&ed, inherit)

All in one order G background/ 0color3 0image3 0position3

0attachment3 0repeat3 E.g.: background/ transparent url:image(Lpg= HCA C scroll repeat.y6

S,ado-s
Fox.shado$ allo$s casting a drop shado$ +rom the +rame o+ almost any element( Qt ta,es the +orm as )elo$/ bo&-shadow/ none R inset 0o++set.x3 0o++set.y3 0)lur.radius3 0spread.radius3 0color3
(shado$ 5 bo&-shadow/ Npx Npx Npx Hpx I+CC6 7

.argin and adding

'argin and#Padding#are the t$o most commonly used properties +or spacing.out elements( 'argin is the space#outside#something" $hereas padding is the space#inside something(

.argin and adding&Contd'(

-xample +or margin and padding in shorthand
p 5 margin/ <CA auto6 padding/ ;Cpx <Cpx NCpx Hpx6 7

Another example $ith expanded +orms/

di* 5 margin-top/;Cpx6 margin-right/;Cpx6 margin-bottom/ Hpx6 margin-left/ Jpx6 padding-left/ JCpx6 7

*orders
9sed to set )orders around an element( &he properties that can )e set are Width . E.g.: border-width/ ;<px6 Style . E.g.: border-style: solid; (none, hidden, dotted, dashed, solid, double
groove, ridge, inset, outset, inherit)

Color - E.g.: border-color: /001111; Eadius . E.g.: border-radius:2px;

di* Dr shorthand 5 7 border /;<px dashed I++CCCC6 border-radius/Hpx <px Jpx C6

Class and 34 Selectors

class and 34 selectors can 5e de0ined in order to custo6i7e t,e selectors i.e. you can ,ave t,e sa6e 8).9 ele6ent, 5ut present it di00erently depending on its class or 34. A class selector is a na6e preceded 5y a 0ull stop &:.;( and an 34 selector is a na6e preceded 5y a ,as, c,aracter &:/;(. ),e di00erence 5et-een an 34 and a class is t,at an 34 can 5e used to identi0y one ele6ent, -,ereas a class can 5e used to identi0y 6ore t,an one.
Itop 5 background-color: Iccc6 padding: <Cpx 7 (intro 5 color: red6 font-weight: )old6 7

$rouping
$rouping is giving t,e sa6e properties to a nu65er o0 selectors -it,out ,aving to repeat t,e6. <ou can si6ply separate selectors -it, co66as in one line and apply t,e sa6e properties to all o0 t,e6.
h< 5 color: red6 7 (secondClass 5 color: red6 7 (thirdClass 5 color: red6 7 h<" (secondClass" (thirdClass 5 color: red6 7

Can =ust 5e -ritten as

>esting
>esting is speci0ying properties to selectors -it,in ot,er selectors. ),is re6oves t,e need 0or classes or 34s on t,e p and ,? tags i0 it is applied to 8).9 t,at loo+s so6et,ing li+e t,is:
0di* id12top23 0h;3Sport04h;3 0p3Sport#re+ers to a#competiti*e#physical acti*ity(04p3 0p32Sport2 comes +rom the#Dld French#desport#meaning 2leisure?(04p3 04di*3

CSS
Itop 5 background-color: Iccc6 padding: ;em6 7 Itop h; 5 color: I++C6 7 Itop p 5 color: red6 font-weight: )old6 7

@utput:
Sport Sport#re+ers to a#competiti*e#physical acti*ity( ?Sport@ comes +rom the#Dld French#desport#meaning ?leisure@(

seudo Classes
Pseudo classes#are added to selectors to speci+y a state or relation to the selector( &hey are $ritten simply $ith a colon in )et$een the selector and the pseudo class( #

E.g. Qn case o+ Lin,s .#

a/lin, 5color:I++C6 te&t-decoration:none67 a/ho*er 5color:I+CC6 te&t-decoration:underline67 a/*isited 5color:ICC+6 te&t-decoration:none67 a/acti*e 5color:Iccc6 te&t-decoration:underline67

Dther pseudo classes that can )e re+erred to are first-child, last-child, focus, first-letter, before, after etc"

age 9ayouts - Aloats

Float#is a CSS positioning property and can )e used to create entire web layouts

Clearing Aloats
Aloats -,en used need to 5e cleared and t,at is done using t,e clear property E.g.: clear:5ot,;

Float not cleared

Float cleared

At- Bules
At.rules are cle*er" po$er+ul little huggers that encapsulate a )unch o+ CSS rules and apply them to something speci+ic( &hey can )e used to import other CSS +iles" apply CSS to a particular#media" or em)ed uncommon fonts(

Qmporting
'import#rule is used to )olt another stylesheet onto your existing one( &his#must#)e placed at the top o+ a stylesheet" )e+ore any other rules( -(g(/ 'import url:morestyles(css=6

At- Bules&Contd'( &argeting media types

'media#can )e used to apply styles to a speci+ic media" such as print( -(g(/ 'media screen and :ma&-width/ ;CCCpx=
5 Icontent 5 width/ ;CCA 7 7 'media screen and :ma&-width/ BCCpx= 5 Ina* 5 float/ none 7 7 'media screen and :ma&-width/ OCCpx= 5 Icontent aside 5 float/ none6 display/ )loc,6 7 7 Note that i+" +or example" a layout area $as OCC pixels $ide or less" all three o+ these $ould )e applied :)ecause it $ould )e less than or eSual to

At- Bules&Contd'( -m)edding +onts

@+ont.+ace#is used +or em)edding +onts in a $e) page so that a type+ace can )e used e*en i+ it isnTt sitting on the userTs computer(
E.g.: @+ont.+ace 5 font-family/ ?Futura@6 src/ url:Futura($o++=6 7 DE @+ont.+ace 5 font-family/ ?Futura@6 src/ local:?Futura@=" local:?Futura L&@=" url:?Futura($o++@=6 font-weight/ NCC6 font-style/ normal6 7

Cnd

&han, Uou V