Child pages
  • HTML and CSS Background

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
{style}
Wiki Markup
CSS Stylesheet
.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}
Section
Column
Include Page
FSS Links Panel
FSS Links Panel
Column

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.

Code Block
titlestyle.css
borderStylesolid

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,

while

any

{{

<div>

}}

tag

will

inherit

the

_

text

size

_

of

its

parent.

{

Code Block
:
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>

}}

.

P3,

being

a

child

of

DIV1,

will

inherit

its

_

Arial

_

font

from

DIV1,

but

have

the

text

size

of

_

1.2em

_. 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:* 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. h3. \!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 rules are as follows: # UA styles are always the bottom losers. # When there are no {{\!importance}} declarations, Author styles always trump User styles. # When there are Author {{\!importance}} declarations, the declared Author style trumps the undeclared User style. # When there are User {{\!importance}} declarations, the declared User style trumps the Author style, declared or undeclared. Example: {code:title=Author CSS|borderStyle=solid}

.

Note
titleCaveat when using INHERIT

Not all CSS attributes can use inherit, and those that should use inherit dont do so properly in all browsers.

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 color-blind 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 rules are 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:

Code Block
titleAuthor CSS
borderStylesolid

p {
  font-family: "Times New Roman" !important;
  font-size: 0.9em !important;
  color: green;
  text-indent: 2em;
}
{code} {code:title=User CSS|borderStyle=solid}
Code Block
titleUser CSS
borderStylesolid

p {
  font-family: "Arial";
  font-size: 1.2em !important;
  color: blue !important;
  text-indent: 1.5em;
}
{code}

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

h3.

Specificity

of

selectors In CSS, a selector identifies an element that a style is applied to. Elements can range from HTML tags (eg. {{body}}, {{p}}), classes of those tags (eg. {{p.left}}, {{p.right}}), or IDs (eg. {{\#logo}}). The example below shows where selectors can be found in a CSS document: {code}

selectors

First, a small refresher on CSS terminology:

Include Page
CSS Terminology
CSS Terminology

In CSS, a selector identifies an where a give set of CSS rules is applied to. Elements can range from HTML tags (eg. body, p), classes of those tags (eg. p.left, p.right), or IDs (eg. #logo). The example below shows where selectors can be found in a CSS document:

Code Block

selector { /* style goes here */ }
selector { /* style goes here */ }
{code}

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:

{

Code Block
}

* { /* style goes here */ }
ul { /* style goes here */ }
ul li { /* style goes here */ }
p.left { /* style goes here */ }
#logo { /* style goes here */ }
{code}

To

understand

specificity

in

more

depth

and

detail,

refer

to

[

the

W3C's

documentation

|http://www.w3.org/TR/CSS2/cascade.html#specificity]. h3. Order of overrides Once you have understood all the previous concepts, you can follow the sorting order to understand how and which styles are overridden. # Check to see which HTML element matches which selector in the style sheet - If there's a match, styles specified in the style sheet override the element's default styles. # Check for {{\!important}} declarations 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. {note}This is why [ordering the code for importing CSS files|FSS Quick Guide#Order of CSS files] is critical.{note} Example for _\#4_: {code:title=style.css|borderStyle=solid}

.

Order of overrides

Once you have understood all the previous concepts, you can follow the sorting order to understand how and which styles are overridden.

  1. Check to see which HTML element matches which selector in the style sheet - If there's a match, styles specified in the style sheet override the element's default styles.
  2. Check for !important declarations amongst Author and User style sheets - Winners override losers.
  3. Check for the specificity of selectors - The more specific overrides the less specific.
  4. 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.
    Info

    This is why ordering the code for importing CSS files is critical.

Example for #4:

Code Block
titlestyle.css
borderStylesolid

p.left { font-family: "Times New Roman"; text-align: left; }
div.footer { font-family: "Arial"; }
{code} {code:title=
Code Block
titledoc.html
|
borderStyle
=
solid
}

<html>
  <head>
    <title>Order of Overrides - Example for #4</title>

    <!-- Embedded style sheet -->
    <style>
    div.footer { font-family: "Verdana"; }
    </style>

    <!-- Imported style sheet -->
    <link rel="stylesheet" href="style.css" type="text/css">

  </head>
  <body>
    <p class="left" style="text-align: right;">PARA - This is a paragraph.</p>
    <div class="footer">DIV - This is a section separate from the paragraph.</div>
  </body>
</html>
{code}

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

_

).

h2. How to Override FSS Styles There are generally two ways of overriding predefined styles. Usually, you would want to override entire classes (eg. {{fl-col-justified}} in {{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: {code:title=fluid.sample.css|borderStyle=solid} .fl-para { font-family: "Times New Roman"; font-size: 1.2em; text-align: left; } .fl-footer { font-family: "Arial"; font-size: 0.9em; } {code} h3. Overriding an entire class 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: {code} .fl-para { font-family: "Arial"; font-size: 1.4em; } {code} This "re-styles" {{fl-para}} by overriding the {{font-family}} and {{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 FSS#Order of overrides]). h3. Overriding an instance of a class Overriding an instance of a class only overrides one instance of the element that the class is applied to. {code} <div class="footer" style="font-family: Verdana; font-size: 1.2em;">blahblah</div> {code} The added {{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-family}} and {{font-size}}, then the contents of that child-element would also be changed.