{style}
.LinksPanel {
float:right;
clear:right;
width:400px;

}
{style}
{div:class=LinksPanel}
{panel:title= On This Page| borderStyle=solid| borderColor=#566b30| titleBGColor=#D3E3C4| bgColor=#fff}
{toc:minLevel=2|maxLevel=5}
{panel}
{div}
{include:FSS Links Panel}

h2. 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|http://www.w3.org/TR/CSS2/cascade.html].

h2. 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.

h3. 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:
# It can contain several "child" elements
# It belongs to only one "parent" element
# It can have several "ancestor" elements (parents of its parent element)
# 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: You can try this out yourself.
{code:title=style.css|borderStyle=solid}
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; }
{code}
This style sheet specifies the font and text size for {{body}}, {{p}}, and {{div}} tags. The {{inherit}} value indicates that the child element inherits the same property style as its parent element. In this case, any {{p}} tag will inherit the font of its parent element, while any {{div}} tag will inherit the text size of its parent element.

{code:title=doc.html|borderStyle=solid}
<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Inheritance Example</title>
  </head>
  <body>
    <p>P1 - This is a child paragraph inside the body tag.</p>
    <p>P2 - This is another child paragraph inside body.</p>
    <div>DIV1 - This is another child element inside body.
      <p>P3 - This is a child paragraph inside the div (DIV1) tag.</p>
    </div>
  </body>
</html>
{code}
This HTML document uses the sample style sheet above. It has two {{p}} tags (P1 & P2) and a {{div}} tag (DIV1) with its own {{p}} tag (P3). According to {{style.css}}, P1 and P2 inherits its font from {{body}}, which is _Times New Roman_, while the size of its text is 1.2em. DIV1, however, uses the _Arial_ font, but inherits its text size of 0.9em from {{body}}.

h3. Style sheet origins

One thing to keep in mind when creating style sheets for your website is that visitors (users) can load their own style sheets to change the display of your design (not permanently though--this is just for _their_ viewing). The reason may be that these users have certain needs, and so would use a personal style sheet specifying their preferences. For instance, users who are colourblind may want to specify their own colour scheme for differentiating headings and links.

In other words, a site's design can have more than one style sheet applied to it. There are three types:


*Author:* asdf


*User:* asdf


*User Agent:* asdf


h3. \!importance declaration

Summarize concept and include examples

h3. Specificity

Summarize concept and include examples

h3. Order of overrides

Summarize concept and include examples

h2. How to Override FSS Styles

asdf

h3. Overriding an Entire Class

asdf

h3. Overriding an Instance of a Class

asdf