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.
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.
The structure of HTML is hierarchical and can be compared to a tree structure, where one element, or HTML tag (eg.
<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.
This style sheet specifies the font and text size for
<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.
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.
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.
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 rules are as follows:
- UA styles are always the bottom losers.
- When there are no
!importancedeclarations, Author styles always trump User styles.
- When there are Author
!importancedeclarations, the declared Author style trumps the undeclared User style.
- When there are User
!importancedeclarations, the declared User style trumps the Author style, declared or undeclared.
In this example, the Author's
font-family (Times New Roman) wins (Rule #3), while the User's
font-size (1.2em) and
color (green text colour) wins over the Author's, all because of the
!important declarations (Rule #4). Finally, in the case that neither has an
!important declaration, the Author's
text-indent (2em) wins (Rule #2).
In CSS, a selector identifies an element that a style is applied to. Elements can range from HTML tags (eg.
p), classes of those tags (eg.
p.right), or IDs (eg.
#logo). The example below shows where selectors can be found in a CSS document:
The specificity of a selector is essentially how specific that selector is. For instance, the * selector that applies to any element is the least specific, while ID selectors are the most specific. The order from least to most specific can be seen in this example:
To understand specificity in more depth and detail, refer to the W3C's documentation.
Once you have understood all the previous concepts, you can follow the sorting order to understand how and which styles are overridden.
- Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question.
- Check for
!importantdeclarations amongst Author and User style sheets - Winners override losers.
- Check for the specificity of selectors - The more specific overrides the less specific.
- In the case that overriding cannot be resolved by the first three steps, compare the order in which the specifications are made - The latest stated specification overrides previously stated specifications. However, regardless of the order, embedded style sheets are always considered to be "later" than (and therefore override) imported style sheets.
Example for #4:
In this example, PARA is displayed in Times New Roman, but instead of aligning to the left, as it was specified in
style.css, it is aligned to the right because the
<p> tag specification (
style="text-align: right;") occurs much later than the imported style sheet. However, DIV is displayed in Verdana, rather than Arial, even though
style.css is imported after the embedded style sheet. This is because embedded style sheets are always considered to be "later" than imported style sheets (#4).
There are generally two ways of overriding predefined styles. Usually, you would want to override entire classes (eg.
fluid.layout.css), which can be done by importing or embedding your own style sheet. However, there may be cases where you would like to override just one instance of an element.
The next two sections will use the following sample FSS style sheet to illustrate both ways of overriding:
Overriding an entire class doesn't mean that you have to change all of the properties specified. To override
fl-para, you can copy and paste the code into your imported or embedded style sheet and modify it however you like. Here's an example:
fl-para by overriding the
font-size. Whatever is left out (
text-align in this example) is inherited from the original
fl-para; so the text remains aligned to the left.
If this pasted into an imported style sheet, please note that the code for importing that style sheet would have to come after the code for importing
fluid.sample.css ([Order of overrides #4]).
Overriding an instance of a class only overrides one instance of the element that the class is applied to.
style code acts like an embedded style sheet for that
<div> tag, changing the content within it. If a child element is found inside that
<div> tag and inherits its
font-size, then the contents of that child-element would also be changed.