The example that you saw at the beginning of the chapter placed the CSS rules in a separate file known as an external style sheet . CSS rules can also appear in two places inside the XHTML document:
- Inside a < style > element, which sits inside the < head > element of a document
- As a value of a style attribute on any element that can carry the style attribute
When the style sheet rules are held inside a <style> element in the head of the document, they are referred to as an internal style sheet.
<title> Internal Style sheet </title>
font-family:arial, verdana, sans-serif; }
Here you can see that the properties are added as the value of the style attribute. You still need to separate each property from its value with a colon and each of the property - value pairs from each other with a semicolon. However, there is no need for a selector here (because the style is automatically applied to the element that carries the style attribute), and there are no curly braces.
The style attribute was deprecated in Transitional XHTML and is not allowed in Strict XHTML 1.0 because it introduces stylistic markup to the web page, when it should only contain markup that explains semantics and structure of the document.
The <link> Element
The <link> element is used in web pages to describe the relationship between two documents; for example, it can be used in an XHTML page to specify a style sheet that should be used to style a page. You may also see the <link> element used in XHTML pages for other purposes, for example to specify an RSS feed that corresponds with a page.
It is a very different kind of link than the < a > element because the two documents are automatically associated — the user does not have to click anything to activate the link.
The <link> element is always an empty element, and when used with style sheets it must carry three attributes: type , rel , and href . Here is an example of the <link> element used in an XHTML page indicating that it should be styled by a CSS file called interface.css , which lives in a subdirectory called CSS :
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
In addition to the core attributes, the <link> element can also take the following attributes:
charset dir href hreflang media rel rev style target type
The rel Attribute
The rel attribute is required and specifies the relationship between the document containing the link and the document being linked to. The key value for working with style sheets is stylesheet .
The type Attribute
The type attribute specifies the MIME type of the document being linked to; in this case, we are dealing with a CSS style sheet, so the MIME type is text/css :
The href Attribute
The href attribute specifies the URL for the document being linked to.
The hreflang Attribute
The hreflang attribute specifies the language that the resource specified is written in. When used, its value should be one of the language codes specified in Appendix G.
The media Attribute
The media attribute specifies the output device that is intended for use with the document:
While this attribute is not always used, it is becoming increasingly important as people access the Internet in different ways using different devices
||Non - paged computer screens (such as desktop computers and laptops)
||Media with a fixed - pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities
||TV devices with low - resolution, color screens, and limited ability to scroll down pages
||Printed documents, which are sometimes referred to as paged media (and documents shown onscreen in print preview mode)
||Handheld devices, which often have small screens, rely upon bitmapped graphics, and have limited bandwidth
||Braille tactile feedback devices
||Braille paged printers
||Suitable for all devices