Scribd Logo
Upload

Welcome to Scribd!

  • Cascading Style Sheets (Final)

    Uploaded by

    sal_munna
    27 views18 pages
    Style sheets define how to display HTML elements style web pages written in a markup language like HTML, XHTML etc. Specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.

    Original Description:

    Original Title

    Cascading Style Sheets(final)

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Style sheets define how to display HTML elements style web pages written in a markup language like HTML, XHTML etc. Specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    27 views18 pages

    Cascading Style Sheets (Final)

    Uploaded by

    sal_munna
    Style sheets define how to display HTML elements style web pages written in a markup language like HTML, XHTML etc. Specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 18

    Cascading Style Sheets

    CSS Characteristics
     Allow you to control the layout and look of your page
    easily
     Styles define how to display HTML elements
     Style web pages written in a markup language like
    HTML, XHTML etc.
     Allows the same markup page to be presented in
    different styles for different rendering methods(on-
    screen, in print etc.)
     Specifies a priority scheme to determine which style
    rules apply if more than one rule matches against a
    particular element
    CSS Syntax

     The basic CSS syntax is made up of following


    three parts:
    ▪ Selector
    ▪ Property
    ▪ Value
    For ex:
    Ways of inserting a style sheet

     Three ways of inserting a style sheet:


     Inline Style Sheet
    (inside the HTML document, style on a single
    element, specified using the “style” attribute)
     Embedded Style Sheet(Internal Style Sheet)
    (blocks of CSS information inside the HTML itself)
     External Style Sheet
    (separate CSS file referenced from the document)
    CSS Levels

     Page Level CSS


    » this requires the style sheet code to be embedded in a web page
     Site Level CSS
    » somewhere in the website a single page is stored, usually with the
    extension .css, containing style definitions: for example <LINK
    REL=“stylesheet HREF="style.css">
     Web Level CSS
    » an extension of Site Level CSS in which the web page is stored
    somewhere else on the Web and the link includes a complete URL:
    for instance
    <LINK REL=“stylesheet” HREF="http://www.acmeco.com/masters/style.css">
    Cascading Order

    What style will be used when there is more than one


    style specified for an HTML element?
     All style will cascade into a new virtual style sheet by
    the following rules, where no. 4 has highest priority:
    1. Browser default (lowest priority)
    2. External Style Sheet
    3. Internal Style Sheet
    4. Inline Style Sheet (highest priority)
    Multiple Style Sheets

     If some properties have been set for the same


    selector in different style sheets, the values will be
    inherited from the more specific style sheet.
     For ex:, an external style sheet has these properties
    for the h3 selector:
    H3
    {
    Color:red;
    Text-align:left;
    Font-size:8pt;
    }
    Multiple Style Sheets(continued…)

     And an internal style sheet has these properties for


    h3 selector:
    H3
    {
    Text-align:right;
    Font-size:20pt;
    }

     If the page with the internal style sheet also links to


    the external style sheet the properties for h3
    selector will be:
    Multiple Style Sheets(continued…)

    Color:red;
    Text-align:right;
    Font-size:20pt;

     The color is inherited from the external style


    sheet and the text-alignment and the font-
    size is replaced by the internal style sheet.
    Float
     The CSS float property enables you to determine where to position an
    element relative to the other element on the page.
     When you use the float property, other elements will simply wrap around
    the element you applied the float to.
     For example:

    <div style="width:300px;"> <h1 style="float:left;margin-right:10px;">CSS


    float</h1> <p>If your browser supports the CSS float Property, this text will be
    flowing around the heading. If this does not seem to work, it could be a browser
    compatibility thing...</p> </div>
    Positioning

    • It is directly responsible for the layout of the website.


    • It determines how a particular element is positioned on the
    site.
    • If the positioning property is not used properly, the website’s
    layout can become rather messy and crippled.

    » Relative Positioning
    » Absolute Positioning
    » Fixed Positioning
    » Static Positioning
    Relative Positioning
    • defined by the top, bottom, left and right CSS properties
    • determine how much an element will shift in relation to its “natural” position
    • these four additional properties have default value of 0.
    • they can accept both positive and negative values.
    <body>
    <p>this is a paragraph having no style</p>
    <p style="position: relative; left: 35px;">this is a paragraph having relative
    positioning</p>
    <p style="position: relative; right:20px;">This is a paragraph having relative
    positioning</p>
    </body>
    Absolute Positioning
    • element will be positioned absolutely
    • it will not affect other elements, and it will be positioned according to its
    containing block
    • if absolute positioning is used, top or bottom, left or right, and width and height
    should be used as well.
    <body>
    <p>This is a paragraph having no style</p>
    <p style="position: absolute; left: 35px; top: 50px; width: 150px; height: 250px;">This
    is a paragraph having absolute positioning</p>
    xyzabc
    </body>
    Fixed Positioning
    • a subcategory of Absolute Positioning
    • if an element has this type of position assigned, its viewport is the same as its
    containing block.
    • on the computer screen, an element using a fixed CSS positioning will not move
    if a website is scrolled.
    Media Types
    Media Type Description
    all For all media type device.
    aural For speech synthesizers.
    braille For Braille tactile feedback devices.
    embossed For paged Braille printers.
    handheld For handheld devices.
    print For printed versions and print preview on
    the screen.
    projection For projected presentations such as
    projectors and transparencies.
    screen Computer screens.
    tty Media using a fixed-pitch character grid,
    such as teletypes, terminals, or portable
    devices with limited display capabilities.
    Tv Television-type devices.
    Media Type(continued…)

    There are two methods for creating separate styles


    depending on the media type:
    • Use the @media rule. For example:

    @media print
    {
    p{font-family: Georgia, times, serif}
    }
    • Use the media attribute when linking to an external style
    sheet. For example:

    <LINK rel=“stylesheet” type=“text/css” media=“screen”


    href=“/css/screen_version.css”>
    Advantages and Disadvantages

    Advantages:
    ▪ CSS saves times
    (CSS automatically apply the specified styles whenever that element occurs)
    ▪ Pages load faster
    (less code means faster download times)
    ▪ Easy maintenance
    (to change the style of an element, you only have to make an edit in one place)
    ▪ Superior styles to HTML
    (CSS has a much wider array of attributes than HTML)

    Disadvantages:
    ▪ Browser compatibility
    Conditional Constructs
    (The if-else conditional statement)

     The if statement in CSS is placed within an HTML comment construct.


     It is used to identify the browser version for Internet Explorer, and load
    various parts of the style sheet based on that parameter.
     The constructs only works with IE because the browser IE is the only
    one that interprets HTML comments instead of ignoring them entirely.
    Other browsers, on the other hand, do not interpret comments at all.
     The notation is similar to standard “if” statement, as demonstrated in
    the following example:
    <!—[if It IE7]>
    This is Internet Explorer
    <![endif]-->

    You might also like