What is a Style?

Document Level Styles

• Document Level Styles are either saved in a separate file (and then loaded with a link or import) or are placed in the head of a document. They are enclosed between style tags <style type="text/css"></style> and are also typically enclosed in comments to avoid problems with non-style browsers

<selector> { <property> :   <value>; }

Set styles for an element on the page:

• h1 {color: red;}
  • This defines all h1 headings on the page to be red,
• p {font-family: Helvetica, sans-serif; font-size: 20px; color: gray;}
  • This defines that all paragraph contents to be gray with a Helvetica font if available, otherwise use the default sans-serif font at 20 pixels.

Define a Style with an Id or Class:

• .small {font-size: 10px;}
  • This defines a class called small with a size of 10 pixels.
• h1.bigRedTTY {font-family:Courier, "Courier New", monospace; font-size: 36px; color: red;)
  • This defines a class called bigRedTTY for h1 headers that uses the Courier font if available, or then the Courier New font if available or otherwise the default fixed width font with a size of 36 pixels and is red.
• #x9834 {font-size:8px; font-decoration:underline; background:blue;}
  • This defines a style called x9834 for a single application on this page which an 8 pixel font, is underlined and has blue background.
• Use a class or id attribute in the tag to apply the style:
  • <h1 class="bigRedTTY">The Title Heading</h1>
  • <span id="x9834">some special text</span>
  • The difference between class and id is the id attribute names are supposed to be unique on a given page, class can be used multiple times. (There is also a selectivity difference, id has a higher selectivity when styles conflict.