Scribd Logo
Hochladen

Willkommen bei Scribd!

  • CSS 3

    Hochgeladen von

    Muhammad Nouman Ali
    58 Ansichten14 Seiten
    Cascading Style Sheets (CSS) is used to style and lay out web documents. CSS provides rules that describe how HTML elements should be displayed. CSS rules contain selectors that specify the elements to style and declarations that define properties like font, color, size, and more. There are different ways to add CSS including inline, embedded, and linked external style sheets. CSS3 introduces new modules and selectors to adapt rendering for different devices. Common CSS properties control color, text formatting, layout, and more to design web pages.

    Originalbeschreibung:

    CSS Files

    Originaltitel

    CSS-3

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PPTX, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    Cascading Style Sheets (CSS) is used to style and lay out web documents. CSS provides rules that describe how HTML elements should be displayed. CSS rules contain selectors that specify the elements to style and declarations that define properties like font, color, size, and more. There are different ways to add CSS including inline, embedded, and linked external style sheets. CSS3 introduces new modules and selectors to adapt rendering for different devices. Common CSS properties control color, text formatting, layout, and more to design web pages.

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    58 Ansichten14 Seiten

    CSS 3

    Hochgeladen von

    Muhammad Nouman Ali
    Cascading Style Sheets (CSS) is used to style and lay out web documents. CSS provides rules that describe how HTML elements should be displayed. CSS rules contain selectors that specify the elements to style and declarations that define properties like font, color, size, and more. There are different ways to add CSS including inline, embedded, and linked external style sheets. CSS3 introduces new modules and selectors to adapt rendering for different devices. Common CSS properties control color, text formatting, layout, and more to design web pages.

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 14

    Cascading Style Sheets

    CSS3
    <Arrangement of Style Sheets>
    CSS
     A style is a rule that describes how to format a specific part of an HTML
    document. A style sheet is a set of style rules.
     HTML provides the structure, and JavaScript provides the behavior and
    Cascading Style Sheets (CSS) provide the presentation to HTML document.
     CSS provides the tool to design and create a great-looking web
     CSS is compact, fast and it simplifies site update
     (CSS) has roots in Standardized Generalized Markup Language (SGML) from the
    1980s.
     The World Wide Web Consortium (W3C) published CSS Level 1 in December
    1996.
     CSS Level 2, was published In May 1998.
     CSS3 is modular, the stability of each module differs, and its status differs.
     More than 50 modules are published from the W3C’s CSS Working Group.
    Modules
     The following four modules have reached recommendation status.

     Media Queries Adapts the rendering of HTML documents based on conditions


    such as screen resolution and orientation to accommodate different devices
    such as smart phones and tablets.

     Namespaces XML-based formats that can use namespaces to distinguish


    multiple uses of the same element name from one another within the same
    document.

     Selectors Selectors are used to select elements in an HTML or XML document


    to attach style properties.

     Color Specifies the color-related aspects of CSS, including transparency and


    the various representations of the <color> value type.
     CSS is used to set background and foreground colors,
    margins, borders, fonts, positions, and much more.
     Create a style and apply it to many elements based on a
    selector.
     Selector to locate and select elements based on tag
    name, class name, ID, and more.
     Style, is composed of two parts:
     Selector, which locates the elements in the HTML document that
    will be styled.
     Declaration block, which contains the formatting instructions.
    Multiple declarations are always separated with a semicolon.
    Embedded CSS-Example
    <Html>
    <head>
    <Style type=“text/CSS”>
    H1{ Font-Family:Impact; Font-Size:30pt}
    </style></head>
    <body><h1> Pakistan</h1></body>
    </html>

     H1 is Selector; 30 point size per inch


     { } is declaration of Style

     Inline Style is used by using Style attribute


     <body style='background-color: white; color: gray;‘ >
    Separate File .CSS

    <head>
    <link Rel=“stylesheet” Href="test.css“ type=“text/css”>
    </head>
    <body>

     Link tag tells Relationship bet html doc and css file using Rel and Href
    attributes.
     Media : Tells the type of devices e;g; media=“screen” , media=“print”
     >CSS file contains the style Selector and Declaration block
    @Character Set and import
     Meta is used to describe additional info for browser ;
     @charset ‘UTF-8’ : use to set character set for CSS/HTML or use meta tag in start
     <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' >
     @import is used to access css file using certain URL/location in external css file. It
    can not be used in HTML file
     @charset 'UTF-8';
     @import url('/Content/header.css');
     @import url('/Content/menu.css');
     @font-face : to define the myFont font, which will be loaded from a file on
    the current website, Fancy_Light.ttf or Fancy_Light.eot.
    @font-face {
    font-family: myFont;
    src: url('Fancy_Light.ttf'),
    url('Fancy_Light.eot'); /* IE9 */
    }
    Defining selectors
     you can create element selectors, id selectors, and class selectors.
     Element/Tag Selector:
    button { background-color: white; color: gray; } // Definition
    <Button type=“Submit”> // Selector
     Creating an id selector : use # sign to create ID selector.
     #btnSave { background-color: white; color: gray; }
     Creating a class/named selector
     A class name prefixed with the period (.) symbol. It is used with “class “ word
    in Element selector.
    H1 { font-size:30}
    .myStyle { background-color: white; color: gray; }
    <H1 class=“myStyle”> Pakistan </H1>
    Use of Class and Span
     Class keyword is used to access the certain .class selector
     p{ font-size:20pt}
     .Th{ font-size:30pt}
     .Fr{ font-size:14pt}
     In application
    <p class=“Fr”> My Data</p> will be used
     Span is used to apply the only required class on certain data within same
    selector
     <p> All data is effected by p except <span class=“Th”>my data</span> with in the
    paragraph </p>
    Div
     Div is used to make divisions of contents and applying certain styles on it
    using #DivId selectors

     #Div1 { color:red}
     #Div2 {Color:Green}
     #Div3 {color:Blue}

     <Div ID=Div1> Pakistan is my lovely country.</div>


     <Div ID=Div2> I love my Pakistan.</div>
     <Div id=Div3> Always praise Pakistan </div>
    Example-CSS File (Test.CSS)
     P{ font-size:30pt;font-family:Impact}
    .Col{color:Red}
    .UL{Text-decoration:underline}
    .UC{Text-transform:uppercase}
    .SC{Text-transform:capitalize}

     button{background-color:Black;Color:White;}
    #PYel{ background-color:Pink; color:Yellow;}
    .RBL{ background-color:Red; color:Blue;}

     h6{font-size:40pt;color:Yellow}
    .HS{color:RED}
     marquee{color:red}
    .BAlt{color:Orange}
     div{border: solid; border-color: black;}
    #div1{background-color: yellow; float:right}
    #div2{background-color: cyan;float:left}
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head><title> Sec-Lec-CSS3</title>
    <link rel='stylesheet' type='text/css' href='test.css' /></head>
    <body>
    <H3 align="Center" class="HS">User Profile:</h3>
    <p>
    Enter First Name:</p>
    <input Type=Text required="required" placeHolder="NamePlease"
    class="Col"> <br>
    <p class="UL">Enter Email:</p>
    <input type="email" title="myemail@domainName"><br>
    <span class="UC"> Enter Ur Web site Address: </span>
    <input Type="URL" Title="Http:\\WWW.domain.Com" pattern="https?://.+"
    class="UC" > <br>
    <p class='SC'>enter ur father name
    <input id='txtName'type='text' class='SC'/></p>
    Selectors
     Universal Selector * : applied to all used tags
     * { background-color: white; color: gray; }
     Using descendant selectors: Given example removes the underline from every
    hyperlink that is a descendant of a list item

     li a { text-decoration: none; }
     div ol li a { text-decoration: none; }
     Using Child Selector > Given example removes the underline from hyperlinks that
    are children of a list item
     li > a { text-decoration: none; }
     div > ol > li > a { text-decoration: none; }
     Using Group Selectors:
     button, p { background-color: white; }
     Using Siblings subsequent Selectors: h1 wld have bg color yelow if preceded by Div
     div + h1 { background-color: yellow; }
     Using an attribute selector: If selector has [att] then style it
     Input[title] { background-color:#ABCDEF}

    Das könnte Ihnen auch gefallen