mozilla

Revision 55089 of Common CSS questions

  • Revision slug: CSS/Common_CSS_Questions
  • Revision title: Common CSS questions
  • Revision id: 55089
  • Created:
  • Creator: Stephen1
  • Is current revision? No
  • Comment
Tags: 

Revision Content

Common Questions

My CSS is valid, but not correctly rendered

If you want your browser to correctly render standard compliant HTML/CSS pages, you have to declare a full and valid DTD (Document Type Decalaration) at the beginning of the HTML file.

Modern browsers have two main rendering modes:

  • Quirks Mode : also called backward-compatibility mode, allows to correctly render legacy pages, based on the non-standard rendering rules followed by user-agents before W3C recommendation have been adopted.
  • Standard Mode : when this mode is triggered, the user-agent knows that it has to strictly follows W3C rendering standards.

If you declare incomplete, outdated or no DTD, your browser will render your page(s) following the old, non-standard rendering rules.

This is a list of the most commonly used DTD:

<!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

In HTML blocks and elements can have id and/or class attribute. The id attribute allows to give a specific name to a certain element, and there must be only one element with that name. The class attribute allows to group together elements in a certain class, so in general there could be more than one element with the same class attribute. CSS allows to define styles to be applied to particular id and/or class.

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

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

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 more specific as possible, in order to style just only what you want to be styled.

Derived styles

CSS does not allow to define a style in terms of another, mainly because of user agents performance issues (Eric Meyer words about it).

In any case, a well organized HTML, does not need derived styles, thanks to the cascading nature of styles itself. In fact, if you need a slight modification to a certain rule, create a separated rule containing only the changes. In the HTML apply the general rule and then the rule with the changes (see next section about assigning multiple classes).

Assigning multiple classes

HTML elements can be assigned multiple classes by listing the classes in the class attribute, with blank space as separator.

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

<div class="firstclass secondclass">
... content ...
... content ...
... content ...
</div>

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

Style rules that don't work

Often it happens that correctly defined style rules are ignored. It is not a browser error, nor a CSS syntax error. Usually it is the correct behaviour, according to syntax and priority rules.

These are the most frequent cases:

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


HTML elements hierarchy

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

#section { font-weight: bold; }
.redtext { font-weight: normal; color: red; }

<div id="section">
   This is bold, 
   <span class="redtext"> this is normal and red,</span>
   and bold again
</div>

It seems obvious, because it is simply how stylesheets work, but in case of complex HTML hierarchies, if a rule seems to be ignored, first check if the HTML element is inside another element with a different style.


Explicitly re-defined style rule

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

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

<div id="section">
   This is bold, 
   <span class="redtext"> this is normal and red,</span>
   and bold again
</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 not declared attributes are automatically reset to default. It means that a previous rule for a single attribute could be implicitly overridden.

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

<div id="section">
   This is bold 12px Verdana, 
   <span class="redtext">this is normal 14px Arial and red,</span>
   and bold 12px Verdana again
</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.

#section {
   font-weight: bold;
   font: 12px Verdana;  /* shorthand overrides bold that return normal */
}


Use of the * selector

The * selector allows to refer to any element, and it has to be used with particular care, since it could be difficult to control elements a certain rule is applied to.

body * { font-weight: normal; }
#section { font: 12px Verdana; }
.boldtext { font-weight: bold; }
.redtext { color: red; }

<div id="section">
   This is normal,
   <span class="boldtext">
      <span class="redtext"> this is normal and red,</span>
   </span>
   and normal again
</div>

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


Priority in CSS

When multiples rules apply to a certain element, the applied rule depends on its style priority. Inline styles comes first, followed by id styles, then class styles and eventually tag elements styles.

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

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

More detailed informations 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?

-moz-appearance
-moz-background
-moz-binding
-moz-border
-moz-box
-moz-column
-moz-float-edge
-moz-image-region
-moz-outline
-moz-user

Revision Source

<h3 name="Common_Questions"> Common Questions </h3>
<h4 name="My_CSS_is_valid.2C_but_not_correctly_rendered"> My CSS is valid, but not correctly rendered </h4>
<p>If you want your browser to correctly render standard compliant HTML/CSS pages, you have to declare a full and valid DTD (Document Type Decalaration) 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 backward-compatibility mode, allows to correctly render legacy pages, based on the non-standard rendering rules followed by user-agents before W3C recommendation have been adopted.
</li><li> <i>Standard Mode</i> : when this mode is triggered, the user-agent knows that it has to strictly follows W3C rendering standards.
</li></ul>
<p>If you declare incomplete, outdated or no DTD, your browser will render your page(s) following the old, non-standard rendering rules.
</p><p>This is a list of the most commonly used DTD:
</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 ID and CLASS </h4>
<p>In HTML blocks and elements can have <code>id</code> and/or <code>class</code> attribute. The <code>id</code> attribute allows to give a specific name to a certain element, and there must be only one element with that name. The <code>class</code> attribute allows to group together elements in a certain class, so in general there could be more than one element with the same <code>class</code> attribute. CSS allows to define styles to be applied to particular <code>id</code> and/or <code>class</code>.
</p><p>Use the <code>id</code>-specific style when you want to restrict the style rules  to a specific block or element. This style will be used by <b>only one</b> element.
</p><p>Use the <code>class</code>-specific style when you want to share the style rules  across a certain class of blocks and elements.
</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 more specific as possible, in order to style just only what you want to be styled.
</p>
<h4 name="Derived_styles"> Derived styles </h4>
<p>CSS does not allow to define a style in terms of another, mainly because of user agents performance issues (<a class="external" href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer words about it</a>).
</p><p>In any case, a well organized HTML, does not need <i>derived styles</i>, thanks to the <i>cascading</i> nature of styles itself. In fact, if you need a slight modification to a certain rule, create a separated rule containing only the changes. In the HTML apply the general rule and then the rule with the changes (see next section about assigning multiple classes).
</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 blank space as separator.
</p>
<pre>&lt;style type="text/css"&gt;
.firstclass { background: black; color: white; }
.secondclass { font-weight: bold; }
&lt;/style&gt;

&lt;div class="firstclass secondclass"&gt;
... content ...
... content ...
... content ...
&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 in CSS. 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>Often it happens that correctly defined style rules are ignored. It is not a browser error, nor a CSS syntax error. Usually it is the correct behaviour, according to syntax and priority rules.
</p><p>These are the most frequent cases:
</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> Priority in CSS
</li></ul>
<p><br>
<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, despite any specificity and priority of CSS rules, a rule applied to a descendant always overrides the style of the parent. 
</p>
<pre>#section { font-weight: bold; }
.redtext { font-weight: normal; color: red; }

&lt;div id="section"&gt;
   This is bold, 
   &lt;span class="redtext"&gt; this is normal and red,&lt;/span&gt;
   and bold again
&lt;/div&gt;
</pre>
<p>It seems obvious, because it is simply how stylesheets work, but in case of complex HTML hierarchies, if a rule seems to be ignored, first check if the HTML element is inside another element with a different style. 
</p><p><br>
<b>Explicitly re-defined style rule</b>
</p><p>In stylesheets order <b>is</b> important, in fact if you define a rule and then you re-define the same rule, the last definition is used.
</p>
<pre>#section { font-weight: bold; }
.redtext { color: red; }
/* other rules                         */
/*             other rules             */
/*                         other rules */
.redtext { font-weight: normal; }

&lt;div id="section"&gt;
   This is bold, 
   &lt;span class="redtext"&gt; this is normal and red,&lt;/span&gt;
   and bold again
&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><br>
<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 not declared attributes are automatically reset to default. It means that a previous rule for a single attribute could be implicitly overridden.
</p>
<pre>#section { font-size: 12px; font-family: Verdana; font-weight: bold; }
.redtext { font: 14px Arial; color: red; }

&lt;div id="section"&gt;
   This is bold 12px Verdana, 
   &lt;span class="redtext"&gt;this is normal 14px Arial and red,&lt;/span&gt;
   and bold 12px Verdana again
&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>#section {
   font-weight: bold;
   font: 12px Verdana;  /* shorthand overrides bold that return normal */
}
</pre>
<p><br>
<b>Use of the <code>*</code> selector</b>
</p><p>The <code>*</code> selector allows to refer to any element, and it has to be used with particular care, since it could be difficult to control elements a certain rule is applied to.
</p>
<pre>body * { font-weight: normal; }
#section { font: 12px Verdana; }
.boldtext { font-weight: bold; }
.redtext { color: red; }

&lt;div id="section"&gt;
   This is normal,
   &lt;span class="boldtext"&gt;
      &lt;span class="redtext"&gt; this is normal and red,&lt;/span&gt;
   &lt;/span&gt;
   and normal again
&lt;/div&gt;
</pre>
<p>In this example the <code>body *</code> selector allows to apply the rule to all elements inside body, at any hierarchy level, also to <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><br>
<b>Priority in CSS</b>
</p><p>When multiples rules apply to a certain element, the applied rule depends on its style priority. Inline styles comes first, followed by <code>id</code> styles, then <code>class</code> styles and eventually tag elements 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>More detailed informations 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>
<pre class="eval">-moz-appearance
-moz-background
-moz-binding
-moz-border
-moz-box
-moz-column
-moz-float-edge
-moz-image-region
-moz-outline
-moz-user
</pre>
Revert to this revision