CSS3 Examples

css User override of styles

In order to ensure that users can control styles, CSS2 changes the semantics of the "!important" operator defined in CSS1. In CSS1, authors always had final say over styles. In CSS2, if a user's style sheet contains "!important", it takes precedence over any applicable rule in an author's style sheet. This is an important feature to users who require or must avoid certain color combinations or contrasts, users who require large fonts, etc. For instance, the following rule specifies a large font size for paragraph text and would override an author rule of equal weight:

P { font-size: 24pt ! important }

The CSS2 'inherit' value - available for every property - leads to compact "!important" style rules that govern most or all of a document. For instance, the following style rules force all backgrounds to white and all foreground colors to black:

 /*
Sets the text color to black
and the background color to
white for the document body.
*/

BODY {
  color: black ! important ; 
  background: white ! important
}

/*
Causes the values of 'color' and 'background'
to be inherited by all other elements,
strengthened by !important. Note that this
may be overridden by other, more specific,
user styles.
*/

* {
color: inherit ! important ;
background: inherit ! important
}

CSS2 also includes these user control features:

• System colors (for 'color', 'background-color', 'border-color', and 'outline-color') and system fonts (for 'font') mean that users may apply their system color and font preferences to Web documents.
• Dynamic outlines (the 'outline' property) allow users (e.g., with low vision) to create outlines around content that don't affect layout but do provide highlight information.

For example, to draw a thick black line around an element when it has the focus, and a thick red line when it is active, the following rules can be used:

 :focus  { outline: thick solid black }
:active { outline: thick solid red }

No Comment | Posted in » Advance CSS3, W3C CSS3