Scribd Logo
Upload

Welcome to Scribd!

  • Cascading Style Sheets Orientation

    Uploaded by

    Mebiratu Beyene
    39 views19 pages
    Cascading Style Sheets (CSS) allow for controlling the layout, formatting, and styling of web pages. CSS provides benefits like better type and layout controls, less work creating accessible sites, and potentially smaller file sizes and faster loading pages. CSS works by separating HTML markup and page presentation, defining styles that are applied to elements via style rules. Style rules use selectors to identify elements and declarations to set properties like font colors. Styles can be defined within HTML using <style> tags, in external .css files, or inline within elements using the style attribute. Inheritance and the cascade determine which styles take precedence when multiple rules apply.

    Original Description:

    web site

    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
    Cascading Style Sheets (CSS) allow for controlling the layout, formatting, and styling of web pages. CSS provides benefits like better type and layout controls, less work creating accessible sites, and potentially smaller file sizes and faster loading pages. CSS works by separating HTML markup and page presentation, defining styles that are applied to elements via style rules. Style rules use selectors to identify elements and declarations to set properties like font colors. Styles can be defined within HTML using <style> tags, in external .css files, or inline within elements using the style attribute. Inheritance and the cascade determine which styles take precedence when multiple rules apply.

    Copyright:

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

    Cascading Style Sheets Orientation

    Uploaded by

    Mebiratu Beyene
    Cascading Style Sheets (CSS) allow for controlling the layout, formatting, and styling of web pages. CSS provides benefits like better type and layout controls, less work creating accessible sites, and potentially smaller file sizes and faster loading pages. CSS works by separating HTML markup and page presentation, defining styles that are applied to elements via style rules. Style rules use selectors to identify elements and declarations to set properties like font colors. Styles can be defined within HTML using <style> tags, in external .css files, or inline within elements using the style attribute. Inheritance and the cascade determine which styles take precedence when multiple rules apply.

    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 youd 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 textfont 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 documents 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.
    browsers 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