Style sheets allow you to manage the overall appearance of an HTML document. They let the author control the presentation attributes for all of the tags in a document. This can be done for a single document or, through use of a master sheet, a collection of documents.
There are three ways to attach a style to a tag:
Any combination of the above may be used in a document. Styles from the various sources are applied to the document, combining and defining style properties that cascade from external style sheets through document-level styles through inline styles. (Thus the name cascading style sheets.)
style attribute.<p style="color: blue; font-weight: bold">
produces:
It's a wonderful day!
<style> and
</style>
tags that appear in the <head> section of a document.<style> tags
are affected throughout the entire document, unless they are overridden by an
inline style.<head>
<title>The Buck Stops Here</title>
<style type="text/css">
<!--
/* Make all blockquotes green */
blockquote {color: green; font-weight: bold}
-->
</style>
type attribute
type attribute of the
<style> tag
is required. Cascading style sheets always have type
set to text/css.bucks.css.<link> tag). The link to an external
style sheet must appear in the head of the document.http://jigsaw.w3.org/css-validator/validator-upload.html.<head>
<title>The Buck Stops Here</title>
<link rel="stylesheet" type="text/css"
href="..." title="Buck">
</link>
</head>
rel defines the relationship of the document in
which the link appears to the document that it links to (here,
stylesheet).href attribute's value is the URL
where the style sheet is.title given so that the style is available for later
reference by the browser.style="prop1: val1; prop2: val2; ... propn: valn"<style type="text/css">
<!--
list of rules
-->
</style><!-- and -->? Browsers that
do not accept styles will see the list of rules as a comment and ignore them.
/* your comment here */ (like
C++).tag-selector {prop1: val1; prop2: val2; ...}.class attribute of the tag.<style>
<!--
p.abstract {font-style: italic; margin-left: 0.5cm; margin-right: 0.5cm}
p.biblio {text-indent: -2em; margin-left: 2em}
h2, p.centered {text-align: center; font-weight: bold}
-->
</style>
Used in HTML document: <p class="abstract">This article
discusses ... </p> .right_just {text-align: right}<p class="right_just"> ....a:link, a:active, a:visited.
p:first-letter,
p:first-line.a:link {color: red}
a:active {color: green}
a:visited {color: green} url(protocol://server/pathname)
url and the parentheses both required, with no
intervening space between them.rgb(red, green, blue), with no
space between rgb and the parentheses.<p style="color: rgb(255,0,0)">see me.
</p> displays as
see me.
body {font-style: italic}<p>
tag with text of a different style, the text in that
paragraph is displayed in that style
until the paragraph ends, then it reverts back to italic text.font-family propertyfont-size propertySpecify one of the following:
xx-small, x-small,
small,
medium, large, x-large,
xx-large). In addition, can specify smaller or
larger. The keywords specify relative values, which may
be rendered in different sizes by different browsers.font-style propertyitalic, oblique.font-weight propertybolder and lighter (relative
values), and bold, orfont propertyp {font: bold 11pt/12pt Times, Courier, serif}:
bold is the weight;11pt is the size;12pt is the
line-height;Times, Courier, serif is the list of choices for the
font family.List properties let you control the appearance and position of the marker associated with an item in an ordered or unordered list.
list-style-type property<ul> - values: disc,
circle, square, none
-- default: disc;
changes depending on the nesting level of the list.<ol> - values: decimal,
lower-roman, upper-roman,
lower-alpha, upper-alpha, none
-- default: usually decimal numbers.list-style-image propertyurl form.Check out First Style Sheet Example
These control how the text is aligned and presented to the user.
text-decoration propertyline-through, overline,
underline, none (the default).none value to eliminate the underlining of
links.The cat <span style="text-decoration: line-through">received</span>
received some catnip by special delivery.
appears as:<span> tag.)line-height propertynormal.p {line-height: 2.0} double spaces the text.font-size
and are inherited by children -- not effected by later changes to
font size.font-size affect line-height
locally.text-align propertyLike the deprecated align attribute, the values are
left, right, center, or
justify
(default: left).
text-transform propertycapitalize -- ensures that the first letter of every
word is capitalized.uppercase -- capitalizes every letter in the text.lowercase -- makes every letter in the text lowercase.none -- the default.float propertyleft (image on the left, text flows around it on the right)right (image on the right, text flows around it on the left)none (the default)An example of an image that is right-justified is obtained by doing
<img src="http://www.math.ucla.edu/~ddeleon/dogruns.gif" alt="(Picture
of a dog running)" style="float: right"/>.
In this case, the
text flows alongside the image. As we add more text, the text will flow
under the image, and then continue as normal. A similar effect
is given if we left-justify the image. In that case, the text
flows on the right side of the image. Left-justification of the image is the
default, and it is not necessary to use the float property.
vertical-align propertyControls the relative position of an element with respect to the line containing the element.
One can use this to align an image vertically with respect to the
surrounding text. This
produces a different effect. For example, <img
src="http://www.math.ucla.edu/~ddeleon/lazycat.gif"
alt="(Picture of a lazy cat)" style="vertical-align: middle"/>
produces an image that is
aligned vertically such that the text appears centered next to the image.
Notice that in this case, only one line of text appears alongside the image.
We can choose to have the text
appear vertically aligned with the top or bottom of the image, as well.
text-indent propertyp {text-indent: 3em} (em scales indent, since font
size is different on different browsers).p {text-indent: -3em; margin-left: 3em}
creates a hanging-indent (the text-indent: -3em), with
margin-left: 3em making sure the first line is still
on the screen.margin-left, margin-right,
margin-top, margin-bottom.auto -- tells browser to revert to normal.body {margin-left: 1in; margin-top: 0.5in; margin-right: 1in}
p {margin-left: -0.5cm}img {margin-left: 10%} -> creates margin to the
left of the img tag equal to 10% of the width of the
image.background-color propertytransparent (the
default).background
property (in older versions of Netscape).h1 {background-color: blue; color: white}.background-image propertynone (default).body.marble {background-image: url(.../marble.gif)}
.background-repeat property.background
property (in older versions of Netscape).background-position propertytable {background-image: url(.../img.gif);
background-position: 10px 15px}
offsets the image 10 pixels to the left, 15 pixels down.background-position: 50% 50% offsets the image
to the center of the display.left, center, right;
top, center, bottom
can be used for 0, 50,100% respectively. table {background-image: url(.../img.gif);
background-position: 50% center}
can be used to offset the background of the table to the center.background
property (in older versions of Netscape).background-repeat propertyrepeat-x: tile horizontally only.repeat-y: tile vertically only.no-repeat: suppress tiling -- used, e.g., to place
a watermark or logo in the background without tiling.background propertycolor propertySee A Second Style Sheet Example.
<span> Tag<span> and </span>.<span> tag, treat it
like any other HTML tag.<span style="color: blue; font-size: larger">.<div> tagid, class attributes (to
label divisions for later reference, e.g., by a hyperlink
or for other purposes, like defining specific styles for a
class of work, e.g., a bibliography, an abstract, etc.).id: label document division for later
reference by a hyperlink, style sheet, applet or other
automated process.
<div id="introduction">.
.
Then, user could jump to that by referencing:article.html#introduction.title: associates a descriptive phrase with the
division. some browsers display the title associated with any
element when the mouse passes over that element.style: create an inline style for the content
enclosed by the tag.class: lets you apply the style of a predefined
class of the <div> tag to contents of the
division. It's value is the name of a style defined in some
style sheet.<div> tags can be nested.
The alignment of the
nested tag has precedence over the containing one.Chuck Musciano and Bill Kennedy, HTML: The Definitive Guide, third edition, O'Reilly, Sebastopol, CA, 1998
Robert W. Sebesta, Programming the World Wide Web, 2d edition, Addison-Wesley, Boston, MA, 2003