Introduction to Cascading Style Sheets (CSS)

Open an online editor with direct preview, e.g. http://htmledit.squarefree.com/.

Agenda

  1. What is CSS?
  2. Where to go next?
  3. Begin with an HTML page
  4. CSS syntax and CSS selectors
  5. External, internal, inline
  6. CSS color
  7. Default HTML tags, TRBL in margins, font styles
  8. The box model
  9. Table style
  10. Navigation lists
  11. Div and centering divs
  12. Floating divs
  1. What is CSS? Says who? The W3C maintains the CSS specification and browsers individually choose to comply to the standard and support each CSS feature.
  2. w3schools.com is a good place to start learning CSS.
  3. Begin with a default HTML page,


  4. That is a web page without any style. It is only the HTML which defines the structure or layout of the page.
  5. CSS syntax, selectors: HTML tags, id, class and grouping; comments
    p { color: black; } /* simple example of HTML tag */
    #myid { color: black; }
    .myclass { color: black; }
    h1, h2, h3, #blackid .blackclass { color: black; }
    /* single-line comment */
    /* multi
    line
    comment */
  6. CSS code: external stylesheet, internal style sheet, inline css,
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <style></style>
    <h1 style="color:blue;margin-left:30px;">
  7. CSS color: black (by name), #000000 (hexadecimal), rgb(26, 0, 0), hsl(0, 100%, 5%) (css3, hue (percentage on the color wheel)/saturation/lightness), others are suggested in CSS4.
  8. Using default HTML tags, using TRBL in margins, setting font styles,

  9. The box model. All HTML elements can be considered as boxes.
  10. Add style to a table: border, collapse, combining references (td, th), hover, nth-child,

  11. Fix the menu list:

  12. Center the footer, margin-left/right: auto,

  13. Floating divs,

Leave a Comment

Your email address will not be published. Required fields are marked *

%d bloggers like this: