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 26 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: You can try this out yourself.

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; }

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, while any div tag will inherit the _text size_ of its parent.

doc.html
<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>

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. P3, being a child of DIV1, will inherit its Arial font from DIV1, but have the text size of 1.2em.

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: Author style sheets are those created by the person/people designing the site. These can be directly embedded within the HTML document, or access from an external CSS document.

User: User style sheets are those created by the user viewing the site. These can be applied through special features of a web browser, or other plug-in software.

User Agent (UA): User agents, such as web browsers, can have default styles that come into play when web authors or users don't specify the styles for certain elements in their style sheets.

!importance declarations

The distinction between origins of style sheets come into play with !importance declarations. Basically, !importance declarations specify which properties can-absolutely-not be overrided, depending on the type of style sheet it's in. The order is as follows:

  1. UA styles are always the bottom losers.
  2. When there are no !importance declarations, Author styles always trump User styles.
  3. When there are Author !importance declarations, the declared Author style trumps the undeclared User style.
  4. When there are User !importance declarations, the declared User style trumps the Author style, declared or undeclared.

Example:

Author CSS
p {
  font-family: "Times New Roman" !important;
  font-size: 0.9em !important;
  color: green;
  text-indent: 2em;
}
User CSS
p {
  font-family: "Arial";
  font-size: 1.2em !important;
  color: blue !important;
  text-indent: 1.5em;
}

In this example

Specificity of selectors

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