Just like XHTML, CSS have their own type of language and syntax,
which is defined by the W3C, the same organization that defines
Xhtml standards. To review the guide of current w3c css specifi-
cations, go to the CSS home page at http://www.w3.org/Style/CSS/.
Formatting the Document Display
A style is a collection of design rules (declarations) that defines how
the XHTML content will be displayed in a browser. Styles may be
used to define the display of fonts, text, colors, backgrounds, lists,
boxes, and layers. You can define a style for an XHTML tag in three
ways:
• Inline
• Internal (also referred to as Embedded or Global)
• External (also referred to as Linked)
APPENDIX
A
The
Inline Style
To
apply an inline style to an XHTML tag, such as the <body>,
<h1>,
<p>,
or <hr
/> tag,
you define the style
using
the style attribute of
the
XHTML tag. To define a style, you append CSS attributes and val-
ues
as the value of the style
attribute.
632
<h1
style="text-align: center;">Content</h1>
Each
CSS attribute is separated from its value by a colon (:).
You can
include
multiple style declarations in an inline style by separating each
declaration
with a semicolon (;).
The following code illustrates the
syntax
to apply multiple style declarations to an <h1>
XHTML
tag:
<h1
style="text-align: center; color: green; font-weight:
bold">Content</h1>
To
apply an inline style to XHTML content that is not marked up by
an
XHTML tag, use opening and closing <span>
tags
around the con-
tent,
and use the style
attribute
of the <span>
tag
to define the CSS
attributes
and values. For example, to display the word “awesome” in
bold
in the sentence “CSS is an awesome
formatting
tool!” to distin-
guish
the word from the rest of the text, you would use the following
XHTML
syntax:
<p>CSS
is an <span style = "font-weight:
bold;">awesome</span>
formatting tool.</p>
Internal Style
You can use an internal style sheet to create styles that apply to an
entire Web page. You create an internal style sheet within opening
and closing <style> tags in the <head> section of the XHTML docu-
ment, usually below the ending </title> tag. Any style definitions
are applied to all instances of the element contained in the body of the
XHTML document. Note the term selector in the following code;
CSS uses this term to refer to an XHTML tag, such as h1 or p. Note
that CSS does not enclose the tag name in angle brackets (< and >).
...
</title>
<style>
selector
{
attribute: value;
attribute: value;
}
</style>
</head>
If you type each style definition on a separate line with proper indent-
ing, it is easier to read the code, and syntax errors are easier to locate
APPENDIX
A
and
correct. You can, however, type the entire style definition on a
single
line:
selector
{ attribute: value; attribute: value; }
You
can also group selectors so they share the same style declarations
by
separating each selector with a comma, as shown in the following
code:
...
</title>
<style>
h1, h4, p
{
text-decoration: underline;
font-style: italic;
}
</style>
</title>
633
If you need to apply the same style to an entire section of your docu-
ment (such as a sidebar), you can enclose the section in an opening
and closing div (for “division”) tag. An id attribute must be inserted
in the div tag to uniquely identify the division. When defining a style
for the id attribute, you place the (#) flag character before the unique
id you assign to the div tag.
For example, if you wanted to apply the sidebar style to a section of a
document, you would use the following syntax:
<div id = "sidebar">
...
</div>
To define the styles for the sidebar division, you would include the fol-
lowing CSS code within the opening and closing <style> tags:
#sidebar { background-color: lightblue; }
If you want to define a style that can be applied to multiple selec-
tors, you should define a class. Classes are used to style elements that
occur many times in a document (such as the <p> element). When
defining a style for the class attribute, you place the (.) flag character
before the name you assign to the class attribute in the paragraph tag.
To define a class called title, you would place the following CSS
code within the opening and closing <style> tags:
.title { font-variant: small-caps; color: navy; }
To apply the title style class to a <p> tag within the body of the
XHTML document, you would use the following syntax:
<p class = "title">
APPENDIX
A
You
can apply the class
= "title" attribute/value
pair to any other
XHTML
tags whose content needs to be formatted in small caps with
navy
text.
External
or Linked Style Sheet
634
You
can also
use CSS
comments
with internal
styles, within
the <style> and
</style> tags. Outside
these tags, you still need
to use the HTML
comment tag
<!-- ... -->.
If a value in
your style
definition con-
tains a space,
you must
enclose the value in
either single or double
quotation marks, as
shown above with
'Arial Rounded MT
Bold'.
An external style sheet, sometimes called a linked style sheet, is
used to define a style definition for like tags (such as all <h1> ele-
ments) in multiple pages in one or more Web sites. You create an
external style sheet as a separate text document that contains only
text—no XHTML tags. The external style sheet is saved with an
extension of .css to identify it as a Cascading Style Sheet.