CSS Basics
Once the .html file is created with proper structure, it's time to create the cascading style sheet (CSS). While it is possible for individual users to create their own accessible style sheets, it is always important to consider accessibility issues when creating the CSS for a web site.
When linking to a style sheet from the .html file, it is best to use the @import method rather than the link element. See examples below.
<!-- import method --> <style type="text/css"> @import url(style.css); </style> <!-- link method --> <link rel="stylesheet" href="style.css" type="text/css" />
The link element is supported by all browsers that support style sheets, while the @import method is not supported by some older browsers. The @import method is the better way of including style sheets, because older browsers will display the HTML content alone and be useable as long as the HTML content has been set up correctly. Linked CSS in older browsers can make the presentation unreadable, depending on how poorly the browser handles the CSS.
User Style Sheets
User style sheets are files created by users and saved on their computers. The browser is then configured to apply the user’s style sheet to all web sites the user visits.
body {
color: yellow;
background: black;
}
The above example will make the main body background black and the text yellow, and will override the rules of an equivalent specificity set by the designer. However, if the designer sets a more specific rule, it will override the user's style sheet.
In order to ensure that users can control the styles as they wish, CSS2 provides the "!important" operator. If a user’s style sheet contains "!important", that overrides any applicable rule set by the designer. The inherent value is also provided by CSS2 and is available for most properties and enables "!important" style rules that govern most or all of a document.
body {
color: black !important;
background: yellow !important;
}