Scribd Logo
Upload

Welcome to Scribd!

  • 33 views

    Cascading Style Sheets (CSS)

    Uploaded by

    Sharma Shikha
    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.

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd

    Cascading Style Sheets (CSS)

    Uploaded by

    Sharma Shikha
    33 views19 pages
    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.

    Original Description:

    CSS_PPT

    Original Title

    css_ppt

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    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.

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    33 views19 pages

    Cascading Style Sheets (CSS)

    Uploaded by

    Sharma Shikha
    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.

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    of 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