Scribd Logo
Upload

Welcome to Scribd!

  • Lecture 08 - Making It Styling

    Uploaded by

    Mark Lu
    12 views23 pages
    - Come to lecture, review notes, keep up with readings, use forums, start assignments early, and use office hours to take advantage of the whole course. - CSS allows specifying rules to tell browsers how to render HTML elements. Rules consist of selectors, declaration blocks, and declarations with properties and values. - Styles can be attached to HTML in the head, linked via URL, or inline within tags. General guidelines are to avoid inline styles, use one site-wide CSS file, and place page-specific rules in the head.

    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
    - Come to lecture, review notes, keep up with readings, use forums, start assignments early, and use office hours to take advantage of the whole course. - CSS allows specifying rules to tell browsers how to render HTML elements. Rules consist of selectors, declaration blocks, and declarations with properties and values. - Styles can be attached to HTML in the head, linked via URL, or inline within tags. General guidelines are to avoid inline styles, use one site-wide CSS file, and place page-specific rules in the head.

    Copyright:

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

    Lecture 08 - Making It Styling

    Uploaded by

    Mark Lu
    - Come to lecture, review notes, keep up with readings, use forums, start assignments early, and use office hours to take advantage of the whole course. - CSS allows specifying rules to tell browsers how to render HTML elements. Rules consist of selectors, declaration blocks, and declarations with properties and values. - Styles can be attached to HTML in the head, linked via URL, or inline within tags. General guidelines are to avoid inline styles, use one site-wide CSS file, and place page-specific rules in the head.

    Copyright:

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

    Take advantage the Whole Course

    Come to lecture Review the lecture notes Keep up with the assigned readings Use the forums Practice and start assignments early Use office hours

    CSS: Controlling presentation


    INFO 1300 September 23, 2009

    Jen

    Jen's Blog

    What this looks like

    Making Jen's Blog Stylish


    Style = A rule to tell browser how to render a kind of HTML element
    h1 { color : orange; } p { font-size: 12px; font-family: Verdana, sans-serif; } body { background-color: gray; }

    CSS consists of a set of rules


    H1 {color: red; background: yellow}

    Selector (one or more) Declaration Block Declaration (one or more) Property Value (in quotes if multiple words)

    Attaching styles to XHTML

    In head Linked to URL

    In tag

    General guidelines on where to put styles


    Never in tag One site wide css file, used in all pages Multiple specific css files that apply to sub-groups of pages Page-specific rules can be put in <head> All css files in separate /styles or /css directory

    A stylesheet for Jen


    body { background-color: white; color: black; font-family: Arial, sans-serif; } p { font-size: large; } /* screen */ h1 { color: orange; } h2 { color: blue; }

    What this looks like

    CSS properties exist for lots of XHTML elements


    p { text-align: center; } li { list-style-type: square; } h1 { font-size: 200%; } em { color: #0044F6; } Go to resources/css on the course web page for helpful css documents.

    Font Families
    Sans-serif: Verdana, Arial, Geneva! Serif: Times, Georgia Monospace: Courier! Cursive: Comic Fantasy: Impact

    Specifying font family

    Order of preference Always end with generic font family

    Just say no to fixed font-sizes


    p {font-size: 12pt;} Instead:
    body {font-size: large; } h1 {font-size: 175%; } h2 {font-size: 125%; }

    Help Jen style her page

    Solution
    Lets see!

    styling links
    a:link { color: #7A0039; } /* normal link */ a:visited { color: #7A5B6A; } /* visited link */ a:active { font-weight: bold; } /* link being followed */ a:hover { color: #511B34; } /* link while person has mouse over it */

    a { text-decoration: none; } ?

    Lets try it

    Do not style away links! Do not over style link! Make sure there is some way for people to know where to click!

    Some details on values

    Specifying dimension
    h1 { height: 17px; } h1 { width: 17em; } h1 { width: 1in; }

    Specifying color
    Colors are specified in "RGB" format
    3 numbers: red, green, blue light Specified using hexadecimals

    http://www.w3schools.com/css/css_colornames.asp

    You might also like