Cascading Style Sheets (CSS), or short Stylesheets, is a language used to describe the presentation (that is, the look and formatting) of a document written in a markup language like HTML.
The stylesheet language as described in CSS level 2 revision 1 helps to separate presentation from structure and thus adds flexibility to the look and feel of a web page. Stylesheets are useful for the following reasons:
- Can be re-used for many documents
- Saves download times by caching by the browser
- Presentational changes are fast and easy and only in one document
- Development can be done independently from content and logic
- Increases ability to program for device independence
- Application of different styles for different output formats (e.g. print)
Basic Rules
- Add Stylesheets whenever possible (minimize number of stylesheets)
- Use them consistently across all pages
- Use linked stylesheets rather than embedded styles; avoid inline stylesheets
- Stylesheets do not substitute correct and meaningful structure
Best Practices
Level 1
Level 1 Checkpoints - Section 508 Compliancy Standards
| Organize documents so they may be read without style sheets |
6.1 |
d |
Ensure that important content appears in the document object and is not generated by style sheets (i.e. through :before and :after pseudo-elements). |
Level 2
Level 2 Checkpoints - Section 508 Compliancy Standards
| Use style sheets to control layout and presentation |
3.3 |
n/a |
<HEAD>
<TITLE>Drop caps</TITLE>
<EM class=”highlight” title=”provide STYLE element”>STYLE</EM> type=”text/css”>
.dropcap { font-size : 120%; font-family : Helvetica }
</EM class=”highlight” title=”provide STYLE element”>STYLE</EM>>
</HEAD>
<BODY>
<P><SPAN class=”dropcap”>O</SPAN>nce upon a time…
</BODY>
|
Level 3
Level 3 Checkpoints - Section 508 Compliancy Standards
| Create a style of presentation that is consistent across pages |
14.3 |
n/a |
A consistent style of presentation on each page allows users to locate navigation mechanisms more easily but also to skip navigation mechanisms more easily to find important content. |
Template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="BaseStyleSheet.css" />
</head>
<body>
Hello World
</body>
</html>
/* Base CSS Document */
/**
Elements
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
font-family: Arial, Helvetica, sans-serif;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/**
Classes
*/
/**
IDs
*/
References
Accessibility
Accessibility, best practices, css, reset stylesheet, stylesheet, techniques
