Child pages
  • HTML and CSS Background

Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 18 Next »

Unknown macro: {style}

.LinksPanel

Unknown macro: {float}
Unknown macro: {div}
On This Page

Overview

Through summaries of key concepts and CSS examples, this article aims to describe how you can override FSS styles and classes with your own CSS styles.

More technical details and background information regarding the CSS concepts  are provided at the W3C.

Key Concepts

The following are HTML and CSS concepts that you may find helpful to have knowledge of before proceeding to learn how to override FSS styles.

Inheritance

The structure of HTML is hierarchical and can be compared to a tree structure, where one element, or HTML tag (eg. <body>, <p>) has the following characteristics:

  1. It can contain several "child" elements
  2. It belongs to only one "parent" element
  3. It can have several "ancestor" elements (parents of its parent element)
  4. It can have several "descendent" elements (children of its child elements)

CSS can support such a structure by allowing child elements to inherit certain properties of their parents when specified.

Example:

style.css
body { font-family: "Times New Roman"; font-size: 0.9em; }
p { font-family: inherit; font-size: 1.2em; }
div { font-family: "Arial"; font-size: inherit; }

asdf

doc.html
<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Inheritance Example</title>
  </head>
  <body>
    <p>This is a paragraph inside the body tag, so it is a child of the body element.</p>
    <p>This is another child paragraph inside body.</p>
    <div>This is another child inside body, but separate from the paragraphs.
      <p>This is a paragraph inside the div tag, so it is a child of the div element.</p>
      <p>This is another child paragraph inside div.</p>
    </div>
  </body>
</html>

asdf

Style sheet origins

One thing to keep in mind when designing style sheets for your website is that there are

Author

User

User Agent

!importance declaration

Summarize concept and include examples

Specificity

Summarize concept and include examples

Order of overrides

Summarize concept and include examples

How to Override FSS Styles

asdf

Overriding an Entire Class

asdf

Overriding an Instance of a Class

asdf

  • No labels