Scribd Logo
Upload

Welcome to Scribd!

  • 2 views

    Lecture-3

    Uploaded by

    sdsouravdebnath26

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Lecture-3

    Uploaded by

    sdsouravdebnath26
    2 views24 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    2 views24 pages

    Lecture-3

    Uploaded by

    sdsouravdebnath26

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 24

    CSE 301

    LECTURE 3: MORE CSS


    Cascading Style Sheets (CSS): <link>
    <head>
    ...
    <link href="filename" type="text/css" rel="stylesheet" />
    ...
    </head> HTML

    • CSS describes the appearance and layout of information on a web page (as
    opposed to HTML, which describes the content of the page)
    • can be embedded in HTML or placed into separate .css file (preferred)
    Basic CSS rule syntax
    selector { p {
    property: value; font-family: sans-serif;
    property: value; color: red;
    ... }
    property: value;
    }
    • a CSS file consists of one or more rules
    • a rule's selector specifies HTML element(s) and applies
    style properties
    • a selector of * selects all elements
    Inline styles: the style attribute (BAD!)
    <p style="font-family: sans-serif; color: red;">
    This is a paragraph</p>
    HTML
    This is a paragraph
    output

    • higher precedence than embedded or linked styles


    • used for one-time overrides and styling a particular element
    • this is bad style; DO NOT DO THIS (why?)
    Embedding style sheets: <style> (BAD!)
    <head>
    <style type="text/css">
    p { font-family: sans-serif; color: red; }
    h2 { background-color: yellow; }
    </style>
    </head>
    HTML

    • CSS code can be embedded within the head of an HTML page


    • this is bad style; DO NOT DO THIS (why?)
    Content vs. presentation
    • HTML is for content; what is on the page (heading; list; code; etc.)
    • CSS is for presentation; how to display the page (bold; centered;
    20px margin; etc.)
    • keeping content separate from presentation is a very important web
    design principle
    • If the HTML contains no styles, its entire appearance can be changed
    by swapping .css files
    • see also: CSS Zen Garden
    CSS comments: /* ... */
    /* This is a comment.
    It can span many lines in the CSS file. */
    p {
    color: red;
    background-color: aqua;
    } CSS

    • CSS (like HTML) is usually not commented as much as code such as Java
    • the // single-line comment style is NOT supported in CSS
    • the <!-- ... --> HTML comment style is also NOT supported in CSS
    W3C CSS Validator
    <p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
    <img src="http://jigsaw.w3.org/css-validator/images/vcss"
    alt="Valid CSS!" /></a>
    </p> HTML
    output

    • jigsaw.w3.org/css-validator/
    • checks your CSS to make sure it meets the official CSS specifications
    • more picky than the web browser, which may render malformed CSS correctly
    Grouping styles
    p, h1, h2 {
    color: green;
    }
    h2 {
    background-color: yellow;
    } CSS
    This paragraph uses the above style.
    This h2 uses the above styles.
    output

    • A style can select multiple elements separated by commas


    • The individual elements can also have their own styles
    CSS properties for text
    property description
    text-align alignment of text within its element
    text-decoration decorations such as underlining
    line-height,
    word-spacing, gaps between the various portions of the text
    letter-spacing
    text-indent indents the first letter of each paragraph

    Complete list of text properties (http://www.w3schools.com/css/css_reference.asp#text)


    text-align
    blockquote { text-align: justify; }
    h2 { text-align: center; } CSS

    The Emperor's Quote

    [TO LUKE SKYWALKER] The alliance... will die. As will your friends. Good, I can feel your anger. I
    am unarmed. Take your weapon. Strike me down with all of your hatred and your journey
    towards the dark side will be complete. output

    • can be left, right, center, or justify (which widens all full lines of the element so that
    they occupy its entire width)
    Text-decoration
    p {
    text-decoration: underline;
    } CSS
    This paragraph uses the style above.
    output

    • can also be overline, line-through, blink, or none


    • effects can be combined:
    text-decoration: overline underline;
    text-shadow
    p {
    font-weight: bold;
    text-shadow: 2px 2px gray;
    } CSS

    • shadow is specified as an X-offset, a Y-offset, and an optional color


    The list-style-type property
    ol { list-style-type: lower-roman; }
    CSS
    Possible values:
    i. none : No marker
    ii. disc (default), circle, square
    iii. Decimal: 1, 2, 3, etc.
    iv. decimal-leading-zero: 01, 02, 03, etc.
    v. lower-roman: i, ii, iii, iv, v, etc.
    vi. upper-roman: I, II, III, IV, V, etc.
    vii. lower-alpha: a, b, c, d, e, etc.
    viii. upper-alpha: A, B, C, D, E, etc.
    x. lower-greek: alpha, beta, gamma, etc.
    others: hebrew, armenian, georgian, cjk-ideographic, hiragana…
    CSS properties for backgrounds
    property description
    background-color color to fill background
    background-image image to place in background
    background-position placement of bg image within element
    background-repeat whether/how bg image should be repeated
    background-attachment whether bg image scrolls with page
    background shorthand to set all background properties
    background-image
    body {
    background-image: url("images/draft.jpg");
    }
    CSS

    • background image/color fills the element's content area


    background-repeat
    body {
    background-image: url("images/draft.jpg");
    background-repeat: repeat-x;
    } CSS

    • can be repeat (default), repeat-x, repeat-y, or no-repeat


    background-position
    body {
    background-image: url("images/draft.jpg");
    background-repeat: no-repeat;
    background-position: 370px 20px;
    } CSS

    • value consists of two tokens, each of which can be top, left, right, bottom,
    center, a percentage, or a length value in px, pt, etc.
    • value can be negative to shift left/up by a given amount
    The visibility property
    p.secret {
    visibility: hidden;
    } CSS
    output

    property description
    visibility sets whether an element should be shown onscreen;
    can be visible (default) or hidden

    • hidden elements will still take up space onscreen, but will not be shown
    • to make it not take up any space, set display to none instead
    • can be used to show/hide dynamic HTML content on the page in response to events
    The opacity property
    body { background-image: url("images/marty-mcfly.jpg");
    background-repeat: repeat; }
    p { background-color: yellow;}
    p.mcfly1 { opacity: 0.75; }
    p.mcfly2 { opacity: 0.50; }
    p.mcfly3 { opacity: 0.25; } CSS

    property description
    opacity how not-transparent the element is; value ranges from 1.0 (opaque) to 0.0 (transparent)
    box-shadow
    box-shadow: h-shadow v-shadow blur; CSS
    box-shadow: 10px 10px 5px; CSS
    Styles that conflict
    p, h1, h2 { color: blue; font-style: italic; }
    h2 { color: red; background-color: yellow; }
    CSS
    This paragraph uses the first style above.

    This heading uses both styles above.


    output

    • when two styles set conflicting values for the same property, the latter style
    takes precedence
    Cascading style sheets
    • It's called Cascading Style Sheets because the properties of an
    element cascade together in this order:
    • browser's default styles (reference)
    • external style sheet files (in a <link> tag)
    • internal style sheets (in a <style> tag in the page header)
    • inline style (the style attribute of an HTML element)
    Inheriting styles (explanation)
    body { font-family: sans-serif; background-color: yellow; }
    p { color: red; background-color: aqua; }
    a { text-decoration: underline; }
    h2 { font-weight: bold; text-align: center; } CSS
    This is a heading
    A styled paragraph. Previous slides are available on the website.
    • A bulleted list output
    • when multiple styles apply to an element, they are inherited
    • a more tightly matching rule can override a more general inherited rule
    • not all properties are inherited (notice link's color above)

    You might also like