#CSS Pocket Reference
##CHAPTER 1 Basic Concepts ###Adding Styles to HTML and XHTML ####Inline Styles In HTML and XHTML, style information can be specified for an individual element via the style attribute. The value of a style attribute is a declaration block (see the section “Rule Structure” on page 5) without the curly braces:Look out!This text is alarmingly presented!
XML languages may or may not provide an equivalent capability; always check the language DTD to be certain.
###Embedded Style Sheets A style sheet can be embedded at the top of an HTML or XHTML document using the style element, which must appear within the head element.XML languages may or may not provide an equivalent capability; always check the language DTD to be certain. ###External Style Sheets Another key advantage is that external style sheets are cached, which can help reduce bandwidth usage. An external style sheet can be referenced in one of the following three ways:- @import directive
<head><title>My Document</title> <style type="text/css"> @import url(site.css); @import url(navbar.css); @import url(footer.css); body {background: yellow;} </style> </head>
Note that @import directives can appear at the top (and, according to the specification, only at the top) of any style sheet. Thus, one style sheet could import another, which in turn would import a third.
-
link element
<head> <title>A Document</title> <link rel="stylesheet" type="text/css" href="basic.css" media="all"> <link rel="stylesheet" type="text/css" href="web.css" media="screen"> <link rel="stylesheet" type="text/css" href="paper.css" media="print"> </head>
It is also possible to link to alternate style sheets. If alternate style sheets are supplied, it is up to the user agent (or the author) to provide a means for the user to select one of the alternates:
A Document
*xml-stylesheet processing instruction
In XML documents (such as XHTML documents sent with a mime-type of “text/xml,” “application/xml,” or “application/ xhtml+xml”), an xml-stylesheet processing instruction can be used to associate a style sheet with a document. Any xml-style sheet processing instructions must be placed in the prolog of an XML document. Multiple xml-stylesheet processing instructions are permitted. The media pseudo-attribute can be used to restrict a style sheet to one or more forms of media:<?xml-stylesheet type="text/css" href="basic.css" media="all"?>
<?xml-stylesheet type="text/css" href="web.css" media="screen"?>
<?xml-stylesheet type="text/css" href="paper.css" media="print"?>
It is also possible to link to alternate style sheets with the xmlstylesheet processing instruction:
<?xml-stylesheet type="text/css" href="basic.css"?>
<?xml-stylesheet alternate="yes" title="Classic" type="text/css" href="oldschool.css"?>
<?xml-stylesheet alternate="yes" title="Futuristic" type="text/css" href="3000ad.css"?>