Accessibility

Table of Contents

  1. Introduction
  2. The laws of specificity
  3. Using specificity to your advantage
  4. Descendant selectors
  5. Inline styles and specificity
  6. The document tree

Understanding Specificity

Inline styles and specificity

Inline styles are the most specific types of CSS rules in CSS 2.1. An inline style lives within your XHTML document. It is attached directly to the element to be styled and uses the following syntax:

<h1 style="color: #ffffff;">I am now white</h1>

The specificity values for any inline style would be 1,0,0,0. As you can see, you now have a value in the left column that, as you have already learned, carries a greater specificity than the columns to its right.

If you add the inline style to your h1 element in the sample file example1.html, then you will no longer be able to change the color of the h1 element from within your style sheet. An inline style carries the greatest specificity and will override your external or embedded CSS rules every time.

Page 5 of 6
Previous Page
Next Page