CSS Style Sheets Syntax Reference
Answers to common questions: http://www.hwg.org/resources/faqs/cssFAQ.html#atrule
Details: http://www.w3.org/TR/REC-CSS2/syndata.html#uri
External stylesheet reference: <LINK REL=STYLESHEET HREF="style.css" TYPE="text/css">
Embedded style specifications:
<style type=”text/css”> body : { color:red; } </style>
Basic stylesheet content syntax:
<selector> { <property>:<value>;… [! important]}
<selector> : * | [<element-name>][.<class-name>][:<pseudo-class>|<pseudo-element>] | #<id-name> | @<name>
“*” defines style properties for all elements.
If the class-name is absent, style applies to all element-name elements.
If element-name is absent, style can be applied to any element by specifying class=class-name as an attribute.
“#”<id-name> defines style properties for a unique element with id=id-name.
If multiple selectors are separated by spaces they apply to elements with the corresponding nesting structure.
If multiple selectors are separated by commas they define the same style for each selector independently.
If multiple selectors are separated by “~” the style is applied only if the nesting structure exactly matches.
Elements nested inside elements will inherit the logical style properties.
background: url("http://www.bg.com/pinkish.gif")
The “! important” syntax controls the style which controls when there are multiple styles affecting an element.
“@”<name> defines a rule that applies to the whole stylesheet. (@import “file-name”; | @page | @media)
@page:first
@page:left
@page:right
@media:screen
@media:print
@media:all
@font-face {
font-family:comic;
src:url(http://valid_url/some_font_file.eot);
}
<element-name>[<attribute-name>] defines a selector that applies only to elements with the given attribute.
<element-name>[<attribute-name>=”value”] exact match for attribute value.
<element-name>[<attribute-name>~=”value”] attribute contains value.
More specific selectors will win over less specific ones (ID, class, element).
Pseudo-classes:
a:link
a:active
a:visited
a:hover
<any-block-level-element>:first-line
<any-block-level-element>:first-letter
Bugs: http://css.nu/pointers/bugs-ie.html#IE5