css-130624044139-phpapp01.ppt_0

8/13/2019 css-130624044139-phpapp01.ppt_0

http://slidepdf.com/reader/full/css-130624044139-phpapp01ppt0 1/25

Cascading Style Sheet

8/13/2019 css-130624044139-phpapp01.ppt_0


• What is CSS?

• Syntax• Applying CSS• Commonly used CSS properties• Grouping and Nesting• Floats in Page Layouting• @ rules• !A

Agenda

8/13/2019 css-130624044139-phpapp01.ppt_0


What is CSS?

CSS " or Cascading Styles Sheets " isa $ay to style and present %&'L(

Cascading Style Sheets" or CSS" isthe recommended $ay to controlthe presentation layer in a $e)document(

&he main ad*antage o+ CSS o*erpresentational %&'L mar,up is thatthe styling can )e ,ept entirelyseparate +rom the content(

CSS

8/13/2019 css-130624044139-phpapp01.ppt_0


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 */

Syntax

8/13/2019 css-130624044139-phpapp01.ppt_0


&here are three $ays to apply CSS to %&'L/

In-line – $ritten directly inside the tag

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

External – $ritten in separate +iles and then lin,ed to in the%&'L

0p style 12 color / red2 3 text 04p3

0style3p 5 color / red6 7

04style3

0lin, rel 12stylesheet2 href 12style(css2 3

Applying CSS

8/13/2019 css-130624044139-phpapp01.ppt_0


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

p { color: red;}

selector

property value

Selectors, roperties ! "alues

8/13/2019 css-130624044139-phpapp01.ppt_0


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( :such as width / B =

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 / (

#nits

8/13/2019 css-130624044139-phpapp01.ppt_0


Colors in CSS can ta,e the +orm o+/

name . E.g.: color /redEG *alue E.g.: color / rg):<HH" " =EG A *alue . E.g.: color / rg)a:<HH" " ";=%exa *alue . E.g.: color / I++ or color/I+%SL *alue . E.g.: color / hsl: "; "H =%SLA *alue . E.g.: color / hsla: "; "H " (J=

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

Colors

8/13/2019 css-130624044139-phpapp01.ppt_0


Gradients lets you display smooth transitions )et$een t$o or morespeci+ied colors

ro$sers support t$o types o+ gradients . linear and radial

Linear Gradientbackground / linear.gradient:to )ottom right" )lue" $hite=6background / linear.gradient:K deg" )lac," $hite=6background / linear.gradient:to )ottom" )lue" $hite B " orange=6background / linear.gradient:to right" rg)a:<HH"<HH"<HH" ="rg)a:<HH"<HH"<HH";==" url:http/44+oo(com4image( pg=6

Colors - $radients

8/13/2019 css-130624044139-phpapp01.ppt_0


Eadial Gradientbackground / radial.gradient:red H " yello$ <H " I;-M FF H =6

Eepeating gradients used to automatically repeat the color stops(

background / repeating.linear.gradient:. Hdeg" red" red Hpx" $hite Hpx" $hite ; px=6

(gradient5

width / auto6 height / H px6 margin / H px6 background / .$e),it.repeating.linear.gradient:.M deg" I+M+M+M" I+M+M+M < px"Icccccc <;px=6 background / .mo>.repeating.linear.gradient:.M deg" I+M+M+M" I+M+M+M < px"Icccccc <;px=6

background / .o.repeating.linear.gradient:.M deg" I+M+M+M" I+M+M+M < px" Icccccc<;px=6 background / repeating.linear.gradient:.M deg" I+M+M+M" I+M+M+M < px" Icccccc<;px=6 background-size / ; <;px67

(gradient/)e+ore5

Colors % $radients &Contd'(

8/13/2019 css-130624044139-phpapp01.ppt_0


&ext in CSS can )e manipulated using the +ollo$ing properties/

+amily . E.g.: font-family / Arial" %el*etica" sans.seri+ si>e E.g.: font-size /;Opxstyle . 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 0+ont.style30 +ont.*ariant 30+ont.$eight30+ont.si>e4line.height30 +ont.+amily3 E.g.: font / italic )old ;<px4J px Georgia" seri+6

Dther &ext properties that can )e re+erred to %e&t-decoration, te&t-transform, letter-spacing, word-spacing, line-height, te&t-align, te&t-indent etc

)ext

8/13/2019 css-130624044139-phpapp01.ppt_0


ac,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: " "<HH";=)ac,ground.image E.g.: background-image / url:image( pg=6)ac,ground.position . E.g.: background-position / KHpx 6 (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 background / 0color3 0image3 0position30attachment3 0repeat3 E.g.: background / transparent url:image( pg= H scroll

repeat.y6

*ac+ground

8/13/2019 css-130624044139-phpapp01.ppt_0


ox.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.radius30spread.radius3 0color3

(shado$5

bo&-shadow / px px px Hpx I+ 67

S ado s

8/13/2019 css-130624044139-phpapp01.ppt_0


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

argin and adding

8/13/2019 css-130624044139-phpapp01.ppt_0


p5

margin / < auto6 padding / ; px < px px Hpx6

7

-xample +or margin and padding in shorthand

di*5 margin-top /; px6 margin-right /; px6 margin-bottom / Hpx6 margin-left / Jpx6 padding-left / J px67

Another example $ith expanded +orms/

argin and adding&Contd'(

8/13/2019 css-130624044139-phpapp01.ppt_0


9sed to set )orders around an element( &he properties that can )e

set areWidth . E.g.: border-width / ;<px6Style . E.g.: border-style : solid; (none, hidden, dotted, dashed, solid, doublegroove,

ridge, inset, outset, inherit)

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

Dr shorthanddi*5 border /;<px dashed I++ 6 border-radius /Hpx <px Jpx 67

*orders

8/13/2019 css-130624044139-phpapp01.ppt_0


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 dependingon its class or 34.

A class selector is a na6e preceded 5y a 0ull stop & . (and an 34 selector isa na6e preceded 5y a as c aracter & / ( .

) e di00erence 5et een an 34 and a class is t at an 34 can 5e used toidenti0y one ele6ent , ereas a class can 5e used to identi0y 6ore t an one .

Itop 5

background-color: Iccc6 padding: < px

7(intro5

color: red6font-weight: )old6

7

Class and 34 Selectors

8/13/2019 css-130624044139-phpapp01.ppt_0


$rouping is giving t e sa6e properties to a nu65er o0 selectors it outaving 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(secondClass5 color: red67 (thirdClass5

color: red67

h<" (secondClass" (thirdClass5

color: red67

Can =ust 5e ritten as

$rouping

8/13/2019 css-130624044139-phpapp01.ppt_0


>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 appliedto 8) 9 t at loo+s so6et ing li+e t is:

Itop 5background-color: Iccc6 padding:

;em67

Itop h; 5color: I++ 6

7

Itop p 5color: red6 font-weight: )old6

7

0di* id 12top2 3 0h;3 Sport 04h;30p3 Sport re+ers to a competiti*e physical acti*ity (04p3 0p3 2Sport2 comes +rom the Dld French desport meaning 2leisure ( 04p3

04di*3

Sport

Sport re+ers to a competiti*e physicalacti*ity(

Sport comes +rom the DldFrench desport meaning leisure (

CSS

@utput:

>esting

8/13/2019 css-130624044139-phpapp01.ppt_0


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 theselector and the pseudo class(

E.g. Qn case o+ Lin,s .a/lin, 5 color: I++ 6 te&t-decoration: none67a/ho*er 5 color: I+ 6 te&t-decoration: underline67a/*isited 5 color: I +6 te&t-decoration: none67a/acti*e 5 color: 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"

seudo Classes

8/13/2019 css-130624044139-phpapp01.ppt_0


Float is a CSS positioning property and can )e used to create entireweb layouts

Clearing loatsloats 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

age 9ayouts - loats

8/13/2019 css-130624044139-phpapp01.ppt_0


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 aparticular media " or em)ed uncommon fonts (

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

At- Bules

l d (

8/13/2019 css-130624044139-phpapp01.ppt_0


&argeting media types'media can )e used to apply styles to a speci+ic media" such asprint(-(g(/ 'media screen and : ma&-width / ; px=

5Icontent 5 width / ; 7

7'media screen and : ma&-width / B px=5

Ina* 5 float / none 77'media screen and : ma&-width / O px=5

Icontent aside 5 float / none6 display / )loc,6 77

Note that i+" +or example" a layout area $as O pixels $ide or less" allthree o+ these $ould )e applied :)ecause it $ould )e less than or e ual to

At- Bules&Contd'(

A B l &C d'(

8/13/2019 css-130624044139-phpapp01.ppt_0


-m)edding +onts

@+ont.+ace is used +or em)edding +onts in a $e) page so that atype+ace can )e used e*en i+ it isnTt sitting on the userTs computer(E.g.: @+ont.+ace

5font-family / Futura 6

src / url:Futura($o++=67DE@+ont.+ace5

font-family / Futura 6src / local: Futura =" local: Futura L& =" url: Futura($o++ =6font-weight / 6font-style / normal6

7

At- Bules&Contd'(

d

8/13/2019 css-130624044139-phpapp01.ppt_0


nd

&han, Uou V

css-130624044139-phpapp01.ppt_0

Documents

Transcript of css-130624044139-phpapp01.ppt_0