Scribd Logo
Upload

Welcome to Scribd!

  • CSS Introduction: An Overview of Cascading Style Sheets

    Uploaded by

    Farzan Mohan
    6 views17 pages
    Cascading Style Sheets (CSS) allow users to define styles and formatting for HTML elements. CSS separates presentation from structure and behavior, and can be defined internally, externally, or inline. Styles cascade from broad to specific based on priority. Selectors target elements using tags, classes, IDs, and other attributes to style them. This allows flexible and global styling across documents.

    Original Description:

    Original Title

    stylesheet

    Copyright

    © © All Rights Reserved

    Available Formats

    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 users to define styles and formatting for HTML elements. CSS separates presentation from structure and behavior, and can be defined internally, externally, or inline. Styles cascade from broad to specific based on priority. Selectors target elements using tags, classes, IDs, and other attributes to style them. This allows flexible and global styling across documents.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views17 pages

    CSS Introduction: An Overview of Cascading Style Sheets

    Uploaded by

    Farzan Mohan
    Cascading Style Sheets (CSS) allow users to define styles and formatting for HTML elements. CSS separates presentation from structure and behavior, and can be defined internally, externally, or inline. Styles cascade from broad to specific based on priority. Selectors target elements using tags, classes, IDs, and other attributes to style them. This allows flexible and global styling across documents.

    Copyright:

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

    Cascading Style Sheets (CSS)

    An Introduction
    •Cascading Style Sheets (CSS) form the presentation layer of
    the user interface.

    Structure (XHTML)
    Behavior (Client-Side Scripting)
    Presentation (CSS)

    •Tells the browser agent how the element is to be


    presented to the user.
    •CSS allows us to make global and instantaneous changes
    easily.
    •The power of CSS is found in the “cascade” which is the
    combination of different styles.
    •Allows elements to “inherit” styles from parent elements.
    •Helpful in reducing the amount of CSS to set styles for child
    elements.
    •Unless a more specific style is set on a child element, the
    element looks to the parent element for its styles.
    Style sheets can be specified in a number of ways:
    External style sheet
    Internal style sheet
    Inline style
    Cascading Priority

    • Multiple styles can be declared for a single element


    • Have to have a priority
    • From lowest to highest:
    1. Browser default
    2. External Style Sheet
    3. Internal Style Sheet
    4. Inline style
    Inline Styles

    • style information is directly attached to the HTML


    elements they affect
    • higher cascade precedence than the other
    specification methods
    • declaring an individual element’s format:
    – Attribute style
    – CSS (style) property
    • Followed by a colon and a value
    Style= “property_1:value1; property_2:value2;……….
    property_n:valuen;”
    Inline Styles

    • To use inline styles, add the style attribute to the relevant


    element. The style attribute can contain any CSS property.
    • The example below shows how to change the color and the
    left margin of a <h1> element:

    <html>
    <body>
    <h1 style="color:blue;margin-left:30px;">This is a
    heading.</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>
    Embedded Style Sheets(internal)

    • this method can only specify style information for the current
    document
    • embedded style sheet rule will have higher precedence than
    external style sheet rule, if there is a conflict between styles
    • embedded style sheet rule will have lower precedence than
    an inline style sheet rule.
    • Embed an entire CSS document in an XHTML document’s
    head section inside a style element
    – Attribute type
    • Multipurpose Internet Mail Extensions (MIME) type
    – describes the type of the document’s content
    – text/css is the type for CSS document
    Parts of a Rule

    • Selector:
    – “selects” what will be modified
    – Simplest selector would be a tag
    • <p>, <h1>, etc.
    • Property:
    – What is going to be changed
    – You already know things like color, font-size, etc.
    – Can have any number of properties
    • Value:
    – Specifies what the value of the property should be changed to
    – For instance changing the color to “red”
    The general form of style element

    <style type=“text/css”>
    Rule_list
    </style>

    Style Rule

    Each rule has three parts:


    Selector
    Properties
    Values

    selector {property_1:value1; property_2:value2;………. property_n:valuen}


    <html><head>
    <style>
    body {
    background-color: linen;
    }
    h1 {
    color: maroon;
    margin-left: 40px;
    }
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>
    External Style Sheets
    • External style sheets
    – Applicable to more than document
    – Documents can have more than one source for style
    specification
    • Can provide uniform look and feel to entire site
    • Same CSS syntax rules for assigning and invoking style
    properties apply.
    • Location (href) and type (type) of the external style sheet are
    specified as attributes of a link element in the head portion.
    • In addition, the rel attribute specifies the nature of the
    relationship between the stylesheet and the document that is
    referencing it.
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css"
    />
    </head>

    Mystyle.css
    body {
    background-color: lightblue;
    }
    h1 {
    color: navy;
    margin-left: 20px;
    }
    <html><head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    <body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

    </body></html>
    SELECTOR FORMS
    1.Simple selectors
    • Single element name.
    • Rule apply to all occurrences' of named element.
    - h1{font-size:24pt;}

    – Group selectors are possible for a group of HTML


    elements.
    – For example:
    – h1,h2,h3,h4,h5,h6 {color: green} will make all
    header elements text green.
    – Contextual /descendant selectors
    Body b em{font-size:14pt;}
    2.Class selectors
    -allow different occurrences of the same tag to use different
    styles.
    - A style class is defined in the element and gives a name.
    - To select elements with a specific class, write a period (.)
    character, followed by the name of the class.

    <p class=“intro”>This is my introduction text</p>


    <p class=“normal”>This is my introduction text</p>

    p.intro {property value list}


    p.normal {property value list}
    3.Generic Selectors

    - Class style specification to more than one kind of tag.


    .class {property value list}

    <h3 class=“class name”….


    <p class=“class name”….
    4 id Selector
    The #id selector styles the element with the specified id.
    #id {
    property value list
    }
    <h2 id= “section4”>…..</h2>
    #section4{font -size:20}
    5.Universal selectors
    The * selector selects all elements.
    The * selector can also select all elements inside another element
    {
    property value list
    }

    *{color:red;}
    6.Pseudo classes
    • A pseudo-class is used to define a special state of an element.
    • Begin with colons.
    For example, it can be used to:
    Style an element when a user mouses over it
    Style visited and unvisited links differently
    Style an element when it gets focus
    syntax
    selector:pseudo-class {
    property:value;
    }
    Ex:
    a:hover {
    color: #FF00FF;
    }
    a:visited {
    color: #00FF00;
    }

    Input:hover{color:red}
    Input:focus{color:green;}

    You might also like