Revision 55100 of Common CSS questions

  • Revision slug: CSS/Common_CSS_Questions
  • Revision title: Common CSS questions
  • Revision id: 55100
  • Created:
  • Creator: Danielwang
  • Is current revision? No
  • Comment #section and .redtext are poor names. We should encourage people using more descriptive names
Tags: 

Revision Content

My CSS is valid, but not correctly rendered

If you want most browsers to correctly render standards compliant HTML/CSS pages, you have to put a full and valid DOCTYPE at the beginning of the HTML file.

Modern browsers have two main rendering modes:

  • Quirks Mode: also called backwards-compatibility mode, allows legacy webpages to be rendered as their authors intended following the non-standard rendering rules used by older browsers.
  • Standards Mode: the browser attempts to follow the W3C standards strictly.

Gecko-based browsers have a third Almost Standards Mode that has only a few minor quirks.

If you declare an incomplete or outdated DTD, or omit it altogether, your browser will render your page in Quirks Mode.

This is a list of the most commonly used DTDs that will trigger Standards or Almost Standards mode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Difference between id and class

HTML elements can have an id and/or a class attribute. The id attribute allows a name to be given to a certain element, and there must be only one element with that name. The class attribute allows an element to be assigned to a certain class, and in general there could be more than one element with the same class attribute. CSS allows styles to be applied to particular id and/or class.

Use an id-specific style when you want to restrict the style rules to one specific block or element. This style will be used by only one element.

Use a class-specific style when you want to share the style rules across a certain class of blocks and elements.

See CSS selectors

Restore the default property value

CSS2 does not have a way to specify the default value of a CSS property. The only way to restore the default value is to explicitly re-declare that property with the default value (you have to know it, because CSS does not provide any default keyword).

Thus, particular care should be taken when writing style rules using selectors (e.g., selectors by tag name, such as p) that you may want to override with more specific rules (such as those using ID or class selectors), because the original default value cannot be automatically restored.

Because of the cascading nature of CSS, it is good practice to define style rules as specifically as possible, in order to style only what you want to be styled.

Derived styles

CSS does not allow one style to be defined in terms of another. (See Eric Meyer's note about the Working Group's stance). However, assigning multiple classes to a single element can provide the same effect.

Assigning multiple classes

HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to seperate them.

<style type="text/css">
.news { background: black; color: white; }
.today { font-weight: bold; }
</style>

<div class="news today">
... content of today's news ...
</div>

If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the class attribute is not relevant.

Style rules that don't work

Correctly defined style rules can be ignored. Usually, this is the correct behaviour, according to syntax and priority rules.

These are the most frequent causes of style rules being ignored:

  • HTML elements hierarchy
  • Explicitly re-defined style rule
  • Use of a shorthand property
  • Use of the * selector
  • Specificity in CSS

You can use DOM Inspector's CSS Style Rules view to debug problems of this kind.

HTML elements hierarchy

The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendant overrides the style of the parent, in spite of any specificity or priority of CSS rules.

.news { color: black; }
.corpName { font-weight: bold; color: red; }

<!-- news item text is black, but corporate name is red and in bold -->
<div class="news">
   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
</div>

In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.

Explicitly re-defined style rule

In CSS stylesheets, order is important. If you define a rule and then you re-define the same rule, the last definition is used.

#stockTicker { font-weight: bold; }
.stockSymbol { color: red; }
/*  other rules             */
/*  other rules             */
/*  other rules             */
.stockSymbol { font-weight: normal; }

<!-- most text is in bold, except "GE", which is red and not bold -->
<div id="stockTicker">
   NYS: <span class="stockSymbol">GE</span> +1.0 ...
</div>

To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.

Use of a shorthand property

Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.

#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
.stockSymbol { font: 14px Arial; color: red; }

<div id="stockTicker">
   NYS: <span class="stockSymbol">GE</span> +1.0 ...
</div>

In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order is important.

#stockTicker {
   font-weight: bold;
   font: 12px Verdana;  /* font-weight is now normal */
}


Use of the * selector

The * selector referd to any element, and it has to be used with particular care.

body * { font-weight: normal; }
#stockTicker { font: 12px Verdana; }
.corpName { font-weight: bold; }
.stockUp { color: red; }

<div id="section">
   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
</div>

In this example the body * selector applys the rule to all elements inside body, at any hierarchy level, including redtext. So font-weight: bold; applied to boldtext class is overridden by font-weight: normal; applied to redtext.

Specificity in CSS

When multiples rules apply to a certain element, the rule chosen depends on its style specificity . Inline styles (in HTML style attributes) come first, followed by id styles, then class styles and eventually element-name styles.

div { color: black; }
#orange { color: orange; }
.green { color: green; }

<div id="orange" class="green" style="color: red;">This is red</div>

The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the CSS 2.1 Specification chapter 6.4.3

What do the -moz-* properties do?

Please see the Mozilla CSS Extensions page.

Revision Source

<h4 name="My_CSS_is_valid.2C_but_not_correctly_rendered"> My CSS is valid, but not correctly rendered </h4>
<p>If you want most browsers to correctly render standards compliant HTML/CSS pages, you have to put a full and valid DOCTYPE at the beginning of the HTML file.
</p><p>Modern browsers have two main rendering modes:
</p>
<ul><li> <i>Quirks Mode</i>: also called backwards-compatibility mode, allows legacy webpages to be rendered as their authors intended following the non-standard rendering rules used by older browsers.
</li><li> <i>Standards Mode</i>: the browser attempts to follow the W3C standards strictly.
</li></ul>
<p>Gecko-based browsers have a third <i><a href="en/Gecko's_%22Almost_Standards%22_Mode">Almost Standards Mode</a></i> that has only a few minor quirks.
</p><p>If you declare an incomplete or outdated DTD, or omit it altogether, your browser will render your page in Quirks Mode.
</p><p>This is a list of the most commonly used DTDs that will trigger Standards or Almost Standards mode:
</p>
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
</pre>
<h4 name="Difference_between_id_and_class"> Difference between <code>id</code> and <code>class</code> </h4>
<p>HTML elements can have an <code>id</code> and/or a <code>class</code> attribute. The <code>id</code> attribute allows a name to be given to a certain element, and there must be only one element with that name. The <code>class</code> attribute allows an element to be assigned to a certain class, and in general there could be more than one element with the same <code>class</code> attribute. CSS allows styles to be applied to particular <code>id</code> and/or <code>class</code>.
</p><p>Use an <code>id</code>-specific style when you want to restrict the style rules  to one specific block or element. This style will be used by <b>only one</b> element.
</p><p>Use a <code>class</code>-specific style when you want to share the style rules  across a certain class of blocks and elements.
</p><p>See <a href="en/CSS/Getting_Started/Selectors"> CSS selectors</a>
</p>
<h4 name="Restore_the_default_property_value"> Restore the default property value </h4>
<p>CSS2 does not have a way to specify the default value of a CSS property. The only way to restore the default value is to explicitly re-declare that property with the default value (you have to know it, because CSS does not provide any <i>default</i> keyword).
</p><p>Thus, particular care should be taken when writing style rules using selectors (e.g., selectors by tag name, such as <code>p</code>) that you may want to override with more specific rules (such as those using ID or class selectors), because the original default value cannot be automatically restored.
</p><p>Because of the <i>cascading</i> nature of CSS, it is good practice to define style rules as specifically as possible, in order to style only what you want to be styled.
</p>
<h4 name="Derived_styles"> Derived styles </h4>
<p>CSS does not allow one style to be defined in terms of another. (See <a class="external" href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer's note about the Working Group's stance)</a>. However, assigning multiple classes to a single element can provide the same effect.
</p>
<h4 name="Assigning_multiple_classes"> Assigning multiple classes </h4>
<p>HTML elements can be assigned multiple classes by listing the classes in the <code>class</code> attribute, with a blank space to seperate them.
</p>
<pre>&lt;style type="text/css"&gt;
.news { background: black; color: white; }
.today { font-weight: bold; }
&lt;/style&gt;

&lt;div class="news today"&gt;
... content of today's news ...
&lt;/div&gt;
</pre>
<p>If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the <code>class</code> attribute is not relevant.
</p>
<h4 name="Style_rules_that_don.27t_work"> Style rules that don't work </h4>
<p>Correctly defined style rules can be ignored. Usually, this is the correct behaviour, according to syntax and priority rules.
</p><p>These are the most frequent causes of style rules being ignored:
</p>
<ul><li> HTML elements hierarchy
</li><li> Explicitly re-defined style rule
</li><li> Use of a shorthand property
</li><li> Use of the <code>*</code> selector
</li><li> Specificity in CSS
</li></ul>
<p>You can use <a href="en/DOM_Inspector">DOM Inspector</a>'s <i>CSS Style Rules</i> view to debug problems of this kind.
</p><p><b>HTML elements hierarchy</b>
</p><p>The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendant overrides the style of the parent, in spite of any specificity or priority of CSS rules.
</p>
<pre>.news { color: black; }
.corpName { font-weight: bold; color: red; }

&lt;!-- news item text is black, but corporate name is red and in bold --&gt;
&lt;div class="news"&gt;
   (Reuters) &lt;span class="corpName"&gt;General Electric&lt;/span&gt; (GE.NYS) announced on Thursday...
&lt;/div&gt;
</pre>
<p>In case of complex HTML hierarchies, if a rule seems to be ignored, check if the  element is inside another element with a different style. 
</p><p><b>Explicitly re-defined style rule</b>
</p><p>In CSS stylesheets, order <b>is</b> important. If you define a rule and then you re-define the same rule, the last definition is used.
</p>
<pre>#stockTicker { font-weight: bold; }
.stockSymbol { color: red; }
/*  other rules             */
/*  other rules             */
/*  other rules             */
.stockSymbol { font-weight: normal; }

&lt;!-- most text is in bold, except "GE", which is red and not bold --&gt;
&lt;div id="stockTicker"&gt;
   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
&lt;/div&gt;
</pre>
<p>To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.
</p><p><b>Use of a shorthand property</b>
</p><p>Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.
</p>
<pre>#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
.stockSymbol { font: 14px Arial; color: red; }

&lt;div id="stockTicker"&gt;
   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
&lt;/div&gt;
</pre>
<p>In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order <b>is</b> important.
</p>
<pre>#stockTicker {
   font-weight: bold;
   font: 12px Verdana;  /* font-weight is now normal */
}
</pre>
<p><br>
<b>Use of the <code>*</code> selector</b>
</p><p>The <code>*</code> selector referd to any element, and it has to be used with particular care.
</p>
<pre>body * { font-weight: normal; }
#stockTicker { font: 12px Verdana; }
.corpName { font-weight: bold; }
.stockUp { color: red; }

&lt;div id="section"&gt;
   NYS: &lt;span class="corpName"&gt;&lt;span class="stockUp"&gt;GE&lt;/span&gt;&lt;/span&gt; +1.0 ...
&lt;/div&gt;
</pre>
<p>In this example the <code>body *</code> selector applys the rule to all elements inside body, at any hierarchy level, including <i>redtext</i>. So <code>font-weight: bold;</code> applied to <i>boldtext</i> class is overridden by <code>font-weight: normal;</code> applied to <i>redtext</i>.
</p><p><b>Specificity in CSS</b>
</p><p>When multiples rules apply to a certain element, the rule chosen depends on its style specificity . Inline styles (in HTML <code>style</code> attributes) come first, followed by <code>id</code> styles, then <code>class</code> styles and eventually element-name styles.
</p>
<pre>div { color: black; }
#orange { color: orange; }
.green { color: green; }

&lt;div id="orange" class="green" style="color: red;"&gt;This is red&lt;/div&gt;
</pre>
<p>The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a>
</p>
<h4 name="What_do_the_-moz-.2A_properties_do.3F"> What do the -moz-* properties do? </h4>
<p>Please see the <a href="en/Mozilla_CSS_Extensions">Mozilla CSS Extensions</a> page.
</p>
Revert to this revision