HTML and CSS Reference
In-Depth Information
.
In iles referenced by
link
elements in HTML documents
.
In
style
elements in the head of an HTML document
.
In
style
attributes in individual markup elements
Putting CSS statements in separate CSS iles allows those statements to be
used throughout the website. A CSS ile is a text ile containing only CSS state-
ments. (No HTML is allowed.) A link element in an HTML document's head
section connects the CSS ile to the HTML document when the relationship
attribute,
rel
, is set to
stylesheet
. For example:
<link rel="stylesheet" href="styles.css" media="screen"/>
he media attribute provides context to the browser so that it can have diferent
CSS instructions depending on the kind of device reading the web page. he
value
"screen"
means a general-purpose web browser running on a PC display.
he HTML4 values for the
media
attribute are
tty
,
tv
,
projection
,
handheld
,
print
,
screen
,
Braille
,
aural
, and the default value
all
. he media attribute is
optional and could have been omitted from the
link
element just shown.
HTML5 extends the versatility of the
media
attribute by permitting “query
expressions” that can test for speciic device characteristics to determine
whether the CSS rules should apply. his is a very powerful feature with syn-
tax that is a bit too complicated to go into in detail. Here is a simple example of
a media query in a link to a style sheet:
<link rel="stylesheet" media="screen and not(color)" href="bw.css"/>
CSS style sheets for complex websites can be quite long. Oten, several hun-
dred rules may be required for an entire site. Many web developers separate
the CSS styles into two iles—one for the layout and positioning rules, and one
for typography and colors. Looking at the HTML source of a page on such a
site, you might see something like this:
<link rel="stylesheet" href="styles.css"/>
<link rel="stylesheet" href="layout.css"/>
As an alternative, CSS in a style element or CSS ile can import other CSS
iles using the import directive. An import directive begins with the “at” sign
followed by the word “import” and a URL expression. For example:
<style type="text/css">
@import url(reset.css);
/* Reset CSS */
