Cascading Style Sheets (CSS) provide a declarative language for specifying styles to apply to HTML elements. Each style is a list
of key-value pairs. Styles are applied based on selectors that identify particular HTML elements
or classes of elements.
Style Sheets are collections of styles of the form:
selectors { style-property : value; ... }
example: body { padding:5%; background-color: #ddd; }
where selectors are combinations of:
htmltags: body, div, span, img, ...
custom-tags: nav-keys, spacer-10, ...
.classnames: .indent, .undent, .photo, ...
#idnames: #placeHolder, #mastheadPhoto, ...
psuedo-classes: a:link, a:hover, ...
psuedo-elements: p::first-letter, p::first-line, ...
attributes: [attr], [attr=value], ...
Selectors can be combined:
s1, s2, ... applied to s1 and s2 and ...
s1 s2 applied to s2 if it has s1 ancestor
s1 > s2 applied to s2 if it has s1 parent
s1 + s2 applied to s2 if it has adjacent sibling s1
s1 ~ s2 applied to s2 if it has sibling s1
Examples:
ol, ul { margin-top:10px; margin-bottom: 10px; } // all ordered and unordered lists
div li { background-color: #dddddd; } // all list items with div ancestor
div.indent > p { color: #333333; } // all paragraphs that are children
// of div with class indent
Note: If any part of a style specification is invalid, the whole specification is invalid
and will not be applied to it's selectors. So styles can silently fail.