Scribd Logo
Upload

Welcome to Scribd!

  • Cascading Style Sheets Orientation

    Uploaded by

    Mebiratu Beyene
    20 views19 pages

    Original Title

    CASCADING STYLE SHEETS ORIENTATION.pptx

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    20 views19 pages

    Cascading Style Sheets Orientation

    Uploaded by

    Mebiratu Beyene

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 19

    CASCADING STYLE SHEETS

    ORIENTATION
    The Benefits of CSS
     Better type and layout controls
     Less work
     Potentially smaller documents and faster downloads.
     More accessible sites
     Reliable browser support
    How Style Sheets Work
    1. Start with a document that has been marked up in HTML or
    XHTML.
    2. Write style rules for how you’d like certain elements to look.
    3. Attach the style rules to the document
    Writing the rules
     A style sheet is made up of one or more style instructions
    (called rules) that describe how an element or group of
    elements should be displayed.
     Each rule selects an element and declares how it should look
    • In CSS terminology, the two main sections of a rule are the
    selector that identifies the element or elements to be affected,
    and the declaration that provides the rendering instructions
    • The declaration, in turn, is made up of a property and its value
    Example
    h1 {color: green; }
    • Selectors
     most basic type of selector is called an element type selector.
    Declarations
     The declaration is made up of a property/value pair.
     There can be more than one declaration in a single rule
     Each declaration must end with a semicolon

    • for example, the rule for p element above has both the font-size
    and font-family properties
    p{
    font-size: small;
    font-family: sans-serif;
    }
    • Values are dependent on the property. Some properties take length
    measurements, some take color values, others have a predefined list of
    keywords.
    • When using a property, it is important to know which values it accepts;
    however, in many cases, simple common sense will serve you well
    Attaching the styles to the document

    There are three ways that style information can be applied to an


    (X)HTML document
    1. External style sheets
    2. Embedded style sheets
    3. Inline styles
    External style sheets
    • An external style sheet is a separate, text-only
    document that contains a number of style
    rules. It must be named with the .css suffix.
    Embedded style sheets
    • exercise. It is placed in a document using the
    style element and its rules apply only to that
    document.
    • The style element must be placed in the head
    of the document and it must contain a type
    • attribute that identifies the content of the
    style element as “text/css” (currently the
    only available value)
    Inline styles

     You can apply properties and values to a single element using


    the style attribute in the element itself, as shown here:
     Example <h1 style="color: red">Introduction</h1>
    • <html>
    • <head>
    • <title>Required document title here</title>
    • <style type="text/css">
    • /* style rules go here */
    • </style>
    • </head>
    • </html>
    Inheritance
    Document structure
    • When you write a font-related style rule using the p element as a selector,
    the rule applies to all of the paragraphs in the document as well as the
    inline text elements they contain
    • Img element is excluded because font-related properties do not apply to
    images.
    • properties related to the styling of text—font size, color, style, etc.—are
    passed down
    • Properties such as borders,margins, backgrounds, and so on that affect
    the boxed area around the element tend not to be passed down
    Conflicting styles: the cascade

    • what should the browser do if a document’s imported style


    sheet says that h1 elements should be red, but its embedded
    style sheet has a rule that makes h1s purple?
    • style information is passed down until it is overridden by a
    style command with more weight.
    • browser’s internal style sheet, external ,embedded , Inline
    • the closer the style sheet is to the content, the more weight it is
    given
    • To prevent a specific rule from being overridden, you can
    assign it “importance” with the !important indicator
    • When two rules in a single style sheet conflict, the
    type of selector is used to determine the winner. The
    more specific the selector, the more weight it is given
    to override conflicting declarations.
    Assigning Importance
    • If you want a rule not to be overridden by a
    subsequent conflicting rule, include the !important
    indicator just after the property value and before
    the semicolon for that rule.
    • For example, to make paragraph text blue always,
    use the following rule:
    p {color: blue !important;}
    • The only way an !important rule may be overridden is by a
    conflicting rule in a reader (user) style sheet that has also
    been marked !important
    • Rule order
    • Finally, if there are conflicts within style rules of identical
    weight, whichever one comes last in the list “wins.” Take these
    three rules,
    for example:
    <style type="text/css">
    p { color: red; }
    p { color: blue; }
    p { color: green; }
    </style>

    You might also like