University of Cincinnati logo and link  
CSS Intro
 
  UC ingot 


CSS separates presentation and logical content.

There are three places to put CSS styles

  • Linked: a separate file, linked to multiple XHTML pages.
    • This maximizes re-usability.  Write CSS styles in one place, use them on multiple pages.  A change to this one file will change all pages that are linked to this file.
  • Embedded: in the <head> section of an XHTML page.
    • Re-use styles within page.
    • Not as re-usable as linked sheets.
    • If a CSS selector in an embedded section is identical to a CSS selector in a linked stylesheet, the embedded section takes precedence.  Thus, this is ideal for overriding styles on a page-specific basis.
  • Inline: within a tag itself.
    • Not re-usable at all.
    • If a CSS selector in an inline section is identical to a CSS selector in an embedded or linked stylesheet, the inline style takes precedence.  Thus, this is ideal for overriding styles on an item-specific basis.

 

Examples

  • Linked <link>
    • <link rel="stylesheet" href="menu/ThemeOffice/theme.css" type="text/css" />
    • <link> element components:
      • rel = style resource
      • href = URL to file
      • type MIME type for style sheets
    • In this case., the page theme.css will hold the style information for this page.
  • Embedded <head>

<head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <style type="text/css">
        a:link {text-decoration: none; font-family:arial, helvetica; font-size:14px; color:white}
        a:visited {text-decoration: none; font-family:arial, helvetica; font-size:14px; color:white}
        a:active {text-decoration: none; font-family:arial, helvetica; font-size:14px; color:white}
        a:hover {text-decoration: none; font-family:arial, helvetica; font-size:14px; color:#B69243}

        .class2 a:link {text-decoration: none; font-family:arial, helvetica; font-size:8px; color:blue}
        .class2 a:visited {text-decoration: none; font-family:arial, helvetica; font-size:8px; color:blue}
        .class2 a:active {text-decoration: none; font-family:arial, helvetica; font-size:8px; color:blue}
        .class2 a:hover {text-decoration: none; font-family:arial, helvetica; font-size:8px; color:blue}
        td {font-family:arial, helvetica; font-size:14px; color:white}
    </style>
</head>

  • Inline
 <span style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; ">I like Fuji apples.</style>