bembry.org
Home / Technology / Web_development / Css

CSS: Cascading Styles

  1. Styles may be set for an entire web site, or page, by pointing to an external style sheet. Use the <link rel="stylesheet" type="text/css" href="stylesheet.css"> to point to a style sheet to be used on an entire page or website.
  2. To add styles for a specific page, use the <style> element in the head section, and set the styles there.
    <head>
    <style>
    .blue{color:#000099; background-color: #ccccff}
    </style>
    <link rel="stylesheet" href="stylesheet.css">
    <title>
    Bunch of Styles in Head Section
    </title>
    </head>
  3. To set the style for a single item on a page, add "style=" to the element's opening tag.

    <a href="link.html" style="text-decoration:none; color:#000000">
    A black link with no underlines
    </a>
    <p style="background-color:#ffffcc; text-align: center">
    A centered paragraph with pale yellow background.
    </p>
  4. If more than one style definition applies to an element, all the different definitions will be added together. If there is a conflict, the most local definition will win.
    <head>
    <style>
    H1 {color: #cc0000; font-size: x-small;font-family: sans-serif}
    </style>
    </head>
    <body>
    <h1 style="font-size: large">
    This headline will be red, in sans-serif font, and be large. Though the style tag in the head sections says it should be small, our call to make it large is applied because it is the most local definition.
    </h1>
    </body>
    Restricted access