Scribd
Upload
74 views

Cascading Style Sheets (CSS)

CSS (Cascading Style Sheets) allows separation of document content from document presentation by defining styles. CSS was created to solve the problem of formatting documents solely with HTML tags. CSS styles are defined in rules containing selectors and declarations. Styles can be applied to documents internally, inline, or via external style sheets stored in CSS files. Common CSS properties control text styling, backgrounds, links, tables, and layout. CSS3 is fully backwards compatible and introduces new selectors and properties.

Uploaded by

Sharma Shikha
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
74 views

Cascading Style Sheets (CSS)

CSS (Cascading Style Sheets) allows separation of document content from document presentation by defining styles. CSS was created to solve the problem of formatting documents solely with HTML tags. CSS styles are defined in rules containing selectors and declarations. Styles can be applied to documents internally, inline, or via external style sheets stored in CSS files. Common CSS properties control text styling, backgrounds, links, tables, and layout. CSS3 is fully backwards compatible and introduces new selectors and properties.

Uploaded by

Sharma Shikha
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 19

CASCADING STYLE SHEETS(CSS)

CSSstands
forCascadingStyleSheets
CSSdefineshow HTML elements are
to be displayed
Styles were added to HTML 4.0to
solve a problem
CSSsavesalotofwork
External Style Sheets are stored
inCSS files

StylesSolvedaBigProblem

HTMLwasneverintendedtocontaintagsforformattingadocument.
HTMLwasintendedtodefinethecontentofadocument,like:
<h1>Thisisaheading</h1>
<p>Thisisaparagraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started
a nightmare for web developers. Development of large web sites, where fonts and color
information were added to every single page, became a long and expensive process.

Tosolvethisproblem,theWorldWideWebConsortium(W3C)createdCSS.
InHTML4.0,allformattingcouldberemovedfromtheHTMLdocument,andstoredina
separateCSSfile.
AllbrowserssupportCSStoday.
CSSSavesaLotofWork!
CSSdefinesHOWHTMLelementsaretobedisplayed.

CSSSyntax
ACSSrulehastwomainparts:aselector,andoneormoredeclarations:

TheselectorisnormallytheHTMLelementyouwanttostyle.
Eachdeclarationconsistsofapropertyandavalue.
Thepropertyisthestyleattributeyouwanttochange.Eachpropertyhasa
value.

CSS Example
CSSdeclarationsalwaysendswithasemicolon,anddeclarationgroupsare
surroundedbycurlybrackets:
p{color:red;text-align:center;}

CSSComments
Commentsareusedtoexplainyourcode,andmayhelpyou
whenyoueditthesourcecodeatalaterdate.Commentsare
ignoredbybrowsers.
ACSScommentbeginswith"/*",andendswith"*/",likethis:
/*Thisisacomment*/
p
{
text-align:center;
/*Thisisanothercomment*/
color:black;
font-family:arial;
}

CSS STYLING
BackgroundColor
Thebackground-colorpropertyspecifiesthebackgroundcolorofanelement.
Thebackgroundcolorofapageisdefinedinthebodyselector:
Example
body{background-color:#b0c4de;}
Thebackgroundcolorcanbespecifiedby:
*name-acolorname,like"red"
*RGB-anRGBvalue,like"rgb(255,0,0)"
*Hex-ahexvalue,like"#ff0000"
Intheexamplebelow,theh1,p,anddivelementshavedifferentbackgroundcolors:
Example
h1{background-color:#6495ed;}
p{background-color:#e0ffff;}
div{background-color:#b0c4de;}

TextColor
Thecolorpropertyisusedtosetthecolorofthetext.Thecolorcanbespecifiedby:
*name-acolorname,like"red"

*RGB-anRGBvalue,like"rgb(255,0,0)"
*Hex-ahexvalue,like"#ff0000
Example
body{color:blue;}
h1{color:#00ff00;}
h2{color:rgb(255,0,0);}
TextAlignment
Thetext-alignpropertyisusedtosetthehorizontalalignmentofatext.

Example
h1{text-align:center;}
p.date{text-align:right;}
p.main{text-align:justify;}

TextDecoration
Thetext-decorationpropertyisusedtosetorremovedecorations
fromtext.
Example
a{text-decoration:none;}
Itcanalsobeusedtodecoratetext:
Example
h1{text-decoration:overline;}
h2{text-decoration:line-through;}
h3{text-decoration:underline;}
h4{text-decoration:blink;}

CSSFontFamilies
InCSS,therearetwotypesoffontfamilynames:
genericfamily-agroupoffontfamilieswithasimilarlook(like"Serif"or
"Monospace")
fontfamily-aspecificfontfamily(like"TimesNewRoman"or"Arial")
Font Family
Thefontfamilyofatextissetwiththefont-familyproperty.
Note:Ifthenameofafontfamilyismorethanoneword,itmustbeinquotation
marks,likefont-family:"TimesNewRoman".
Morethanonefontfamilyisspecifiedinacomma-separatedlist:
Example
p{font-family:"TimesNewRoman",Times,serif;}

FontStyle
Thefont-stylepropertyismostlyusedtospecifyitalictext.
Thispropertyhasthreevalues:
*normal-Thetextisshownnormally
*italic-Thetextisshowninitalics
*oblique-Thetextis"leaning"(obliqueisverysimilartoitalic,butlesssupported)
Example
p.normal{font-style:normal;}
p.italic{font-style:italic;}
p.oblique{font-style:oblique;}
FontSize
Thefont-sizepropertysetsthesizeofthetext.
Beingabletomanagethetextsizeisimportantinwebdesign.However,youshouldnot
usefontsizeadjustmentstomakeparagraphslooklikeheadings,orheadingslooklike
paragraphs.
AlwaysusetheproperHTMLtags,like<h1>-<h6>forheadingsand<p>for
paragraphs.
Thefont-sizevaluecanbeanabsolute,orrelativesize.

SetFontSizeWithPixels
Settingthetextsizewithpixels,givesyoufullcontroloverthetextsize:
Example
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
SetFontSizeWithEm
ToavoidtheresizingproblemwithInternetExplorer,manydevelopersuseeminstead
ofpixels.
TheemsizeunitisrecommendedbytheW3C.
1emisequaltothecurrentfontsize.Thedefaulttextsizeinbrowsersis16px.So,the
defaultsizeof1emis16px.
Thesizecanbecalculatedfrompixelstoemusingthisformula:pixels/16=em
Example
h1 {font-size:2.5em;} /* 40px/16=2.5em */

StylingLinks
LinkscanbestylewithanyCSSproperty(e.g.color,font-family,background-color).
Specialforlinksarethattheycanbestyleddifferentlydependingonwhatstatetheyarein.
Thefourlinksstatesare:
*a:link-anormal,unvisitedlink
*a:visited-alinktheuserhasvisited
*a:hover-alinkwhentheusermousesoverit
*a:active-alinkthemomentitisclicked
Example
a:link{color:#FF0000;}/*unvisitedlink*/
a:visited{color:#00FF00;}/*visitedlink*/
a:hover{color:#FF00FF;}/*mouseoverlink*/
a:active{color:#0000FF;}/*selectedlink*/

CSSTables
TableBorders
TospecifytablebordersinCSS,usetheborderproperty.
Theexamplebelowspecifiesablackborderfortable,th,andtdelements:
Example
table,th,td
{
border:1pxsolidblack;
}
TableBorders
TospecifytablebordersinCSS,usetheborderproperty.
Theexamplebelowspecifiesablackborderfortable,th,andtdelements:
Example
table,th,td
{
border:1pxsolidblack;
}

CSSSelectors
CSSselectorsallowyoutoselectandmanipulateHTMLelements.
CSSselectorsareusedto"find"(orselect)HTMLelementsbasedontheirid,class,
type,attribute,andmore.
The id Selector
TheidselectorusestheidattributeofanHTMLelementtoselectaspecificelement.
#para1{
text-align:center;
color:red;
}
The class Selector
Theclassselectorselectselementswithaspecificclassattribute.
.center{
text-align:center;
color:red;
}

Three Ways to Insert CSS


External CSS
<head>
<linkrel="stylesheet"type="text/css"href="mystyle.css">
</head>
Inline CSS
<h1style="color:blue;margin-left:30px;">Thisisaheading.</h1>
Internal CSS
<style>
body{
background-color:linen;
}
h1{
color:maroon;
margin-left:40px;
}
</style>

CSS 3

CSS3 is the latest standard for


CSS.
CSS3 is completely backwardscompatible with earlier versions of
CSS.

CSS3 is the latest standard for


CSS.
CSS3 is completely backwardscompatible with earlier versions of
CSS.

Thank you

You might also like