CSS structure

  • CSS structure looks like this:
    Element attribute + : Property
    • Example:
      color:white
  • Two word attributes include a hyphen
    • Example
      font-size:12px
  • Style locations:
    • inline = <h1 style="color:red">This is a red title</h1>
    • document =
      <style type="text/css">
      h1 { color:red }
      </style>
      located in the<head> tag:
      <head>
      <title>style example</title>
      <style type="text/css">h1 { color:white }</style>
      </head>
      <body>
      <h1>This is the header title</h1>
      </body>
    • external style sheet =
      <link href="style.css" rel="stylesheet" type="text/css">
  • Here are some highly used styles:

    Color = font color
    background-color = background color
    font-size = px, em, rem, %
    font-weight = bold
    font-family = typeface
    font-style = italic
    text-decoration = underline
    text-align = align text
    		line-height = leading
    Background-image = background image
    Margin = outside layout element
    Padding = inside layout element
    Float = align layout element
    Display = none, block, inline
  • General syntax of styles is attribute: value;
  • Inline styles are made by including style="..." in tags that support them.
  • Some examples:

<h1 style="font-family: Courier New, Courier, Monospace; size: 14px; font-weight: bold; color: Red;">

THIS IS H1

</h1>

tag edit <img src="/tagEditor.gif" style="margin-right:10px; float:left">

<a href="#" style="text-decoration: none; color: #703839">
Look, Ma, no underline</a>