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 */
Search WWH ::

Custom Search