Scribd
Upload
18 views

CSS part-1

CSS web technology

Uploaded by

Akansha S
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

CSS part-1

CSS web technology

Uploaded by

Akansha S
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Page :

Date:|

hlhat Css

Css stand: or Ca.sCagling Gtyle Sheett


to deaihn HIML
oith HTML to change
he
gencnally teeer interfaces.
alonga HIML and
tee bcite to Create intenfaces on.
application and DJ or many mebile
apnlicatian

Thece are three major bena flts at


)Selva a biq prahlam.
Like oat calor,b style,
Beane bor der en cise had to
elpment
Thic
be nepeattd page
to Celve thíc preblem
lot
Cave d io xerna!
de finitions
iepossible to change
Cse les just one ile..
the entire cbsite by changing
ateibtes
n) Prauide detail pd atttibudes han
mor
CSS provides look
ITML
defing the
pla in Lwrbsite
the
Paga
Dato : /

CSS Suntox Contain.. Colector and


rule Sel
declaation block block
Declaration
Selector lLpx;3
hl celar 1.4ellaw fant size
preperty ValueaA

indicatos nthe HTML elemon


Sclecter l4
be
want o

Like <hl) (itle) ete

Declanaioo Block: t Cancontain


Semicelon.
declaration.. Separaledby
Propert i.s ype ofaHribute naf HTML
be oor border ete
olomont

Walee Valeer are to

Houoto add
CSS is dded Lo
HTML pager
tonto the ctyle
docement
There coning
thaee ioHIML
docee emon
Inline CsS aloternacsS3. Cxternal Css.

Inline to CSS

cingle Line

-" color :blue ") Hellocs <lp>


Poga:
7

CSS Suntox
4 CSS rule Colector a0do
declaation bloc Deelaration block
Selector

preperty Nalue

Selector : 4 indicatosthe HTML ctemnont


want be

Like <hl) (title), ete

Declanatioo Block: t Cancontain


Semicoon
declaratibn.s. Ceparaledb
pe ofaribute a HTML
Propecty
oloment be aolorg: border

paanectier

Eowtocdl CSS ?
CSS adde d Lo
HIML pager to ormai the
tonto the ctyle chech
docceaent
There
ateoring
thaee to ingent CS ioHTML
docee mond
Inline aoterna!csS3. Cxternal Css

Inline is to

cingl
<p style -" color : blue")Helo CS <lp
Pags :
Data:

Syntnx
<htmlHag style cssprahartuli valLe Cssprnpariy aAvales

Disaduantages.
Cannot aLAtatibns toitbin oléne CsS
5he
qetaticn brotsser usil interprat
Hhis

)The se style olce


m) does Dot prouide brouLer cache aduantagei
Internl 14
cingl doceemont
14
t ayect all eleme nte
b the style tag
head Ceotien. htm
<head)
<style)
bodybackaround- celor 2linen ;

color ned
mangin
<IsAyle>
<Ihoad)
<h) Lotorna! CLS KhI)

<lbady
Page
Date:L

) Externa
apply an meltiple. pager
a) pagee
Here Cade
extenofen be

The
the adyantago
ook +he
Ss hat
entire sebeite
chang
ohanging file
teeshe<liok2 tag
he <link tag choul4 be put
head
<head)
<link rel

</hoad)
href"mysiuyle
CSS Com ments
Page:
Dato:| I

CSS Selector:
to. &ele ct the Contonttue
to style
part Set
There re
Severa dif{eranttypea e Seler tors

Clement Seleetor Seleot the HTML


plement
<head

texi-aliqn center
Celor bluo

<Ihead
<bady? is a paragnanh tag. c/p
<p) id ="paralMe too </p
<lbody
Selector selects he idatibute
HIML plemnt to Select specific elemeat
And id alaye niqjae uoithia the
chosen to Seleet
page
elemen
cingle uniqjue
uori Hpntoithhe hash
hashharac hen (tt)
olloecd theid of the elemont
body
canterp) <nctosS="conter
an Blue
anConter
<hl Blue center clacs <bady <hl
<lhoad
slstyle)
blue color
center textalign
<sAyle)
<hea
clacs the by
rlloued ynbel) tep ul
chagaeton penioclic ith
loss
Spenific
attaibute
elemente
HIML soleets 14Selector Class 3.
<Ibody)
<lp College Hello"paral") id <p
<body
</hcad
color
icenterLextalignrid
Kctyle)
<head
Pago
Date : I

Universa! sclec sildond


character Selecs all the elements Hhe
pages
<style

backgxound calor Drange


clstyle)
CSS Color

This propert to Set the Colo


HIMLelents
Typieally Color
thisprapentt to

backgraind
eloment
vales for Specitying
the CAlor
he de ine the Color elemnt
waing the 4olausing ngs
RGB ormat
RGBA
Hexa decima! Dotation
HSL
HSA
Builtin color
Page
Date : /

RAB Aormat
short form of RCD GREEN) BL0e
that for de fining the color
HIML eloment cimply by speciying th
value
255
R,GB that
inthe ang
Syntox gb CR,G. B):
exadecimal notatien:
Can be de ined as Color
eprcsen la tion
This notation. tarts with the
ymha!
follauaed bl six chanacterg
tanger
this two digits red (RR)

blue Ba)
Blact 0d0000
whiteolo
Syntax
Color i# (O- )C0-E)Co-p)to-F) (0-) (0-)
3. RGBA Pormat
ic almos cimi lar
hat RGBA Containe A Lalnha) that specitiep
opacity (means the elemenls
The \iale daanspare acy)
Nange00 to
ich
uehich o.o is fon ly
Page
Date :

CSS text - align


Thìs propenty c sed to set the. horizontal
alignmeat table Cellbo% tho block
element

Syniax
ioxt align Center| lafttnight

(bady
<hl) eXT-AGN <hi)
Cente" CeNTER K?hs
<Ibady
LCSS text -decorakion.
4 CSS that decazatec he
Content the toxt
ndde Lende bove and thaagl the
text
Thege 3 to de corate
text decogalioo -ine
text deconation Celor
text cecoration ctyle

textco Coration : text co coration Line textdecora tioo-color


text-decoralion- Style
text docoratien -Line 3
Sets the kind text-ecoration Like
Underlioe or ine- through
Page:
Date: |

Can be add Com binaion


to the Gelpcted te xt
Khead)
<style)
text-decoration :tendarline
#pal
text-dec oration : Line through

#p3
tortdecoration 3 overine

4ex4-decoraion Overlipe tungle rline Line-thraugh'

Klhead
<bady'
<div)
<p id"pl") Dderline <Lp
ine - thre
p2" line
<n td="p2") through rp

<p id "pCombina tion 64 ines K/p2


<tdiv)
Page
Date :

Lextdecaratian sclyle ao tho ine.


to cet the style
wale Selid , dotedywavydouble
and dache

textdecoration - Color
to pravide Calor to the decosatioo
Value
ant Colo valid foxmat
<style)
toxt-de coratioo tunderlinedoublered
3
#pas
tertdeeora tion : OVerinedo ted blue i

text -deaon a.tion : qrecn wavy overline tnderline


3 Line-thraugh,
<Ihead
<bady' Dotuble indenline p)
Dotted
Com bination lines cip>
</bady)
Page:

CSS fant-elght
This
and
preperty is escd for ceing the 4hickoecs
beldnegS.
de-fine the tocight ef the
text
Syntaxt
fant-tueight : non0rmalalightenl bold balder
fent weight i 100- Q00

CSS fent omily


This prepan praviclea omma

Separated font amilies


the font - facefor the toxt ConteAt
elemat

Thicpreperty can
canhald multiple fant
falbackyte
Ien.spperled in he then thec

be
Yon making ataac hia

Sont famil
Generic font familg Gpecitle fant famiyiez
Caurier Arial,
Serif (Iimes Neo Roman) Timer ete
Sans-serit Calibri)
Cucsive (Carsive)
(Crackd)
Fantas
Monospace (Manaco)
Page:
Date :

font-family i familynamel generic.family

CSS oot siz0 i


This
progarty in CSS
specity
he height and the
4he text of an

de faut Velee mediO) and Can be


applied element
Can be relativo 0rabeelute
Absplute siz Setthe

the
e thetex4 ralative to
plemente
relatiVe poscible to
Dsing
the +he
chang
paragraph def{ault
Page:
Date:/

CSS Line- Hleight :


1t de ine the minima height o
Line boxes eoithi he element
Hhe differonce
Contont
bove anc
define the epace bettocn
be lou inline elementta

Line - height i 2p
Line heigkt A-OF) norma

CSStext -transform
This prapert loues to
change the Case of
the t0xt
14 (eeed to Contrel the text eapitaliz atinn
Thic be to make the
Appeaance
propertytext Ca
all- lOtereale ar all

ppercase Can onvert +he Cirstcharac tor


to ppercase

Synta
Heyt-tran.sform capitalizelupperca se] lowercasel

CSS Box Model i taehen


In CSS the box model icccced
about
talkingCampanents ht
layot
denicleda the
The be
+han
tectanqua box

You might also like