Scribd Logo
Upload

Welcome to Scribd!

  • Css

    Uploaded by

    Patrick Matias
    61 views21 pages
    W3C created STYLES in addition to HTML 4 - define how to display elements document may use one, two or more style sheets - applied according to specified priorities (= cascade) can be specified inside a single HTML element (inline) - inside the element of an HTML page (embedded) - or in an external CSS file (linked)

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    W3C created STYLES in addition to HTML 4 - define how to display elements document may use one, two or more style sheets - applied according to specified priorities (= cascade) can be specified inside a single HTML element (inline) - inside the element of an HTML page (embedded) - or in an external CSS file (linked)

    Copyright:

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

    Css

    Uploaded by

    Patrick Matias
    W3C created STYLES in addition to HTML 4 - define how to display elements document may use one, two or more style sheets - applied according to specified priorities (= cascade) can be specified inside a single HTML element (inline) - inside the element of an HTML page (embedded) - or in an external CSS file (linked)

    Copyright:

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

    Cascading Style Sheets

    Alexander Zangerl az@bond.edu.au


    Bond University

    Cascading Style Sheets

    1 / 21

    Cascading Style Sheets, CSS


    associating style elements to documents changes rendering information for document elements for any structured document format (XML, HTML...) tutorial
    http://www.w3schools.com/css/css intro.asp

    introduction
    http://www.w3.org/MarkUp/Guide/Style

    W3C created STYLES in addition to HTML 4.0 dene HOW to display elements document may use one, two or more style sheets applied according to specied priorities (= cascade) can be specied inside a single HTML element (inline) inside the <head> element of an HTML page (embedded) or in an external CSS le (linked) can be mixed

    Cascading Style Sheets

    2 / 21

    Cascading Style Sheets, CSS (cont.)


    consists of rules which denes how element should be displayed has two parts: selector and declaration advantage
    content of HTML documents are clearly separated from the documents presentation layout

    has features
    Associating CSS to Documents [feature] CSS Cascading [feature] CSS Media [feature] CSS Grouping [feature] CSS Inheritance [feature] CSS pseudo elements [feature] CSS positioning and sizing [feature]

    instances
    CSS3 CSS2 CSS1
    Cascading Style Sheets 3 / 21

    CSS document
    can be written in any text editor has .css extension consists of
    CSS Rule

    Cascading Style Sheets

    4 / 21

    CSS Cascading
    multiple sheets can be applied to a document (browser, reader, server, author) conict resolution at clashes denes what style will be used: browser default -> External Style Sheet -> Internal Style Sheet -> Inline Style observation
    inline style has the highest priority

    Cascading Style Sheets

    5 / 21

    Inline CSS
    these modify the behaviour of a single tag, a group of tags, or a block of information on a single page example
    http://css.nu/examples/inline.html http://www.blooberry.com/indexdot/css/examples/ cssembedded.htm

    style can be specied for an individual element using STYLE attribute within the element tag loses many of the advantages of style sheets by mixing content with presentation example

    <p style="color: sienna; margin-left: 20px">This is a paragrap

    Cascading Style Sheets

    6 / 21

    Embedded CSS
    insert a style sheet into a particular page changing a parameter modies the look of the complete page should be used when a single document has a unique style in the head section by using the <style> tag in the <HEAD> section of document example

    <head><style type="text/css"> hr {color: sienna}</style></head

    Cascading Style Sheets

    7 / 21

    Linked CSS, external


    Web pages link to a named sheet (le with a .css extension); change the look of many pages by changing only the style sheet le ideal when the style is applied to many pages can change the look of an entire Web site by changing one le rules stored in separate text document each page must link to the style sheet using the <link> tag in the <HEAD> section of document syntax

    <head><link rel="stylesheet" type="text/css" href="mystyle.css

    Cascading Style Sheets

    8 / 21

    CSS Rule
    style sheet consists of one or more rules denes how to display HTML element has two parts: selector and declaration syntax
    selector { property1: value1; ... }

    example
    ul ul li { font-size: x-large; font-decoration: italic }

    http: //www.htmlhelp.com/reference/css/structure.html

    Cascading Style Sheets

    9 / 21

    CSS Selector
    http://www.w3schools.com/css/css syntax.asp http://www.blooberry.com/indexdot/css/syntax/ selectors/selectors.htm http://www.w3.org/TR/REC-CSS2/selector.html http://www.xml.com/pub/a/2003/06/18/ css3-selectors.html browser table
    http://www.westciv.com/style master/academy/ browser support/selectors.html

    identies the element to which a style applies variety of forms for selector element selector: refers to HTML element can be grouped together, seperated with comma, and applies therefore to all the listed elements -> H1 {color: purple;} H1, H2, P {color: purple;}
    Cascading Style Sheets 10 / 21

    CSS Selector (cont.)


    contextual selector: species style for HTML element based on context in which they appear -> LI B {color: purple;} class selectors: HTML element can be grouped into a class -> .warning { color: red;} pseudo-class and pseudo-element selector: for anchor tag, rst-line, rst-letter ID selectors: assigns a unique identier to a particular HTML element -> #rst-para { font-weight: bold;}

    Cascading Style Sheets

    11 / 21

    CSS Declaration
    reference
    http://www.htmlhelp.com/reference/css/ all-properties.html

    index
    http://www.w3.org/TR/REC-CSS2/propidx.html

    declaration is combination of property and value enclosed in curly braces divided by a colon syntax
    property: value;

    property names are not case-sensitive declaration can contain several property/value pairs pairs divided by semicolon

    Cascading Style Sheets

    12 / 21

    CSS positioning and sizing


    pages employ streaming protocol so page content treated as a single block relative, absolute use DIV, SPAN containers size, overlap with z-index helpful to reduce the number of tables which are still heavily used for formatting

    Cascading Style Sheets

    13 / 21

    CSS pseudo elements


    anchor (visited), paragraphs (rst-letter), ... example
    a:active { color: red }

    Cascading Style Sheets

    14 / 21

    CSS Grouping
    grouping of rules makes many rules more manageable example
    h1, h2, div.class5, blockquote { background: black }

    Cascading Style Sheets

    15 / 21

    CSS Inheritance
    properties propagate to nested elements can be overridden there style information is inherited downwards the document tree

    Cascading Style Sheets

    16 / 21

    CSS Media
    support for various media: screen, print, projection, braille, speech

    Cascading Style Sheets

    17 / 21

    CSS1
    rst and meanwhile deprecated version http://www.w3.org/TR/REC-CSS1 simple style sheet mechanism that allows to attach style to HTML documents history
    dened 1996, 1999

    Cascading Style Sheets

    18 / 21

    CSS2
    builds on CSS1 with very few exceptions, all valid CSS1 style sheets are valid CSS2 style sheets supports media-specic style sheets -> tailor the presentation of document to visual browsers, aural devices, printers, braille devices, handheld devices, .. supports: content positioning downloadable fonts table layout features for internationalization (right-to-left text) automatic counters and numbering table formatting bidirectional text text shadows cursor control printing properties, other media dependies (OS colors, fonts) aural representation (speech synthesizer) history
    dened 1998

    http://www.w3.org/Style/Examples/007/ demo site


    Cascading Style Sheets 19 / 21

    CSS2 (cont.)
    http://www.csszengarden.com/

    tutorial
    http://www.w3schools.com/css/

    reference
    http: //zvon.org/xxl/CSS2Reference/Output/index.html

    specication
    http://www.w3.org/TR/CSS21/

    Cascading Style Sheets

    20 / 21

    CSS3
    under development includes level 2 new selectors vertical text user interaction http://www.w3.org/Style/CSS/current-work

    Cascading Style Sheets

    21 / 21

    You might also like