Scribd Logo
Upload

Welcome to Scribd!

  • Introduction To Cascading Style Sheets: Chapter Three Web Application Development

    Uploaded by

    Dayana Kemesky
    18 views24 pages
    This document introduces CSS (Cascading Style Sheets) and provides an overview of key concepts. It explains that CSS is used to define how HTML elements are styled and displayed, and that styles are defined using selectors and properties. The document also outlines different CSS syntax structures like selectors, properties, values and comments. Common positioning schemes like normal flow, floating, and absolute positioning are also introduced.

    Original Description:

    Original Title

    WAD 3_CSS

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document introduces CSS (Cascading Style Sheets) and provides an overview of key concepts. It explains that CSS is used to define how HTML elements are styled and displayed, and that styles are defined using selectors and properties. The document also outlines different CSS syntax structures like selectors, properties, values and comments. Common positioning schemes like normal flow, floating, and absolute positioning are also introduced.

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    18 views24 pages

    Introduction To Cascading Style Sheets: Chapter Three Web Application Development

    Uploaded by

    Dayana Kemesky
    This document introduces CSS (Cascading Style Sheets) and provides an overview of key concepts. It explains that CSS is used to define how HTML elements are styled and displayed, and that styles are defined using selectors and properties. The document also outlines different CSS syntax structures like selectors, properties, values and comments. Common positioning schemes like normal flow, floating, and absolute positioning are also introduced.

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    of 24

    Introduction to Cascading Style

    Sheets

    Chapter Three
    Web Application Development
    Objectives

    By the end of this topic, you will be able to


    ► Grasp the general format of Style Sheets
    ► Apply CSS in Web development
    ► Produce a good, clean and standard CSS
    Agenda
    ► What is Cascading Style Sheets (CSS)?
    ► Why CSS?
    ► How to use CSS?
    ► CSS Syntax
    ► Examples
    ► References
    What is Cascading Style Sheets
    (CSS)?
    ► CSS stands for Cascading Style Sheets
    ► styles define how to display XHTML elements

    – font properties
    – color and background properties
    – text properties
    – box properties
    – classification properties
    – etc.
    ► styles normally stored in Style Sheets
    Why CSS?
    ► tosolve a common problem
    – two most popular browsers – Mozilla &
    Internet Explorer continued to add new tags
    and attributes to the original HTML spec
    – to standardise, W3C created STYLES in
    addition to HTML 4.0
    …Why CSS?
    ► CSS can save a lot of work by using external style
    sheets
    – control the entire appearance of a page by just
    editing a single CSS document
    – allows developers to control the style and
    layout of multiple Web pages all at once
    How to use CSS?
    ► there are three ways in specifying styles
    – inline style sheet (inside a single XHTML
    element)
    • example of inline CSS
    – internal / embedded style sheet (inside the
    <head> element)
    • example of embedded CSS
    – external style sheet (in an external CSS file -
    *preferred)
    • Example of external CSS
    …How to use CSS?
    ► what if there are more than one style?
    – all the styles will "cascade" into a new "virtual"
    style sheet
    – highest priority
    1. inline Highest
    2. internal
    3. external
    4. browser default Lowest
    …CSS Syntax
    general
    ► made of three parts
    selector { property : value }
    ► example
    body { background-color : blue }
    ► if
    there are more than one property, separate them
    with a semicolon (;)
    h2 {
    text-align:center;
    font-family: arial;
    }
    CSS Common Properties
    CSS Property Description Code Example
    background-color Specifies a background background—color: blue
    color for the document
    color Specifies the text color of color: blue
    an element
    font-family Specifies the font name font-family: arial
    font-style Specifies the font style: font-style: italic
    normal, italic or oblique
    margin-left Adjusts the left margin margin-left: 2in
    margin-right Adjusts the right margin margin-right: 2in
    text-align Determines the alignment text-align : center
    of text: center, justify, left
    or right
    CSS Length units
    Unit Name Descriptionn
    cm Centimeters Measures values in centimeters
    em Em space Measures values according to width of the uppercase
    letter M for the font that is being used
    ex X-height Measures values according to the height of the
    lowercase letter x for the font that is being used
    in Inches Measures values in inches
    mm Millimeters Measures values in millimeters
    pc Picas Measures values in picas, which are equal to 1/6 of an
    inch
    pt Points Measures values in points, which are equal to 1/72 of an
    inch
    px Pixels Measures values in pixels
    …CSS Syntax
    grouping
    ► selectorscan be grouped
    ► separate each selector with a comma

    selector1, selector2 {
    Property : value;
    }

    ► example

    h1, h2, h3, h4, h5, h6 {


    color: white;
    background-color: green;
    }
    …CSS Syntax
    class of a selector
    ► to define different styles for the same element
    selector.class1 { property1: value1 }
    selector.class2 { property2: value2 }

    ► examples: to have two types of paragraph


    p.right {text-align: right}
    p.left {text-align: left}

    ► thus, in your html document


    <p class="right"> aha.. it is right aligned </p>
    <p class="left"> opps.. it is left aligned </p>
    …CSS Syntax
    class for many selectors
    ► to use a class in many elements, omit the selector
    .class1 {property: value}
    ► example

    .center {text-align: center}


    ► example: you can apply the format for <h2> and
    <p>
    <h2 class="center">centered h2</h2>
    <p class="center">centered paragraph</p>
    …CSS Syntax
    id
    ► idhas to be unique on the page. There can be
    only one element with a given id in a document
    #id_name {property: value}

    ► example
    #intro {font-weight: bold}
    ► Thus, in an XHTML document
    <p id =“intro"> this introduction paragraph is
    displayed in bold </p>
    …CSS Syntax
    Comments
    ►a CSS comment begins with /* and ends with */
    /* this is a comment */
    p { color:black;
    font-family: arial
    }
    CSS Box Model

    margin

    padding

    content

    border
    Containing & Anonymous
    block boxes
    ► Block boxes can serve as containing blocks for
    child boxes
    – Note: if a block box has another block box
    inside it, then they are forced to have only block
    boxes inside it, by wrapping any inline boxes in
    an anonymous block box
    <div> some text
    <p>paragraph</p> other text
    </div>
    Positioning schemes
    ► Positioningschemes in CSS include:
    – Normal flow (includes relative positioning)
    – Floating
    – Absolute positioning
    Floating
    ► float property allows element boxes to be shifted
    to the right or left on the current line
    – Floated boxes are block boxes
    – Floated boxes are “pulled out” of the normal
    flow and repositioned
    – Must have explicit width
    – May overlap other boxes
    ► clear property specifies which side(s) of an
    element should NOT be adjacent to a floating box
    that is specified earlier in the document
    Relative and Absolute
    Positioning
    ► position property:
    – static – box is positioned according to normal
    flow
    – relative – box is positioned relative to where it
    would have been placed in the normal flow
    – absolute – box is positioned relative to its
    containing block; these boxes are taken out of
    flow
    – fixed – box is fixed in relation to the viewport (a
    browser window or a printed page)
    Page Layout Example
    ► Click here to see an example.
    References
    ► http://jigsaw.w3.org/css-validator/ W3C CSS
    Validator
    ► http://www.w3schools.com/css/css_reference.as
    p CSS 2 References

    You might also like