• Choose a category
• All
• Classic-Fiction

Understanding the link tag

The tag is the key to adding a CSS reference to an HTML document. The tag has the following characteristics:

♦ The tag is part of the HTML page. Use a tag in your HTML document to specify which CSS document will be used by the HTML page.

♦ The tag only occurs in the header. Unlike the tag, the tag can occur only in the header.

♦ The tag has no visual presence. The user can’t see the tag, only its effects.

♦ The link tag is used to relate the document with another document. You use the tag to describe the relationship between documents.

♦ The tag has a rel attribute, which defines the type of relationship. For now, the only relationship you’ll use is the stylesheet attribute.

♦ The tag also has an href attribute, which describes the location of the other document.

Link tags are often used to connect a page to an externally defined style document (more on them in the next section).

Most people refer to the hyperlinks created by the anchor () tag as hyperlinks or links. This can lead to some confusion because, in this sense, the link tag doesn’t create that type of link. If it were up to me, the tag would have been called the tag, and the tag now called link would have been called rel or something. Maybe Tim Berners-Lee meant to call me the day he named these elements, and he just forgot. That’s what I’m thinking.

Specifying an external link

To use the tag to specify an external style sheet, follow these steps:

1. Define the style sheet.

External style sheets are very similar to the ones you already know. Just put all the styles in a separate text document without the tags. In my example, I created a new text file called myStyle.css.

2. Create a link element in the HTML page’s head area to define the link between the HTML and CSS pages.

My link element looks like this:

type = “text/css”

href = “myStyle.css” />

3. Set the link’s relationship by setting the rel = “stylesheet“ attribute.

Honestly, stylesheet is almost the only relationship you’ll ever use, so this should become automatic.

4. Specify the type of style by setting type = “text/css“ (just like you do with page-level styles).

5. Determine the location of the style sheet with the href attribute.

Understanding the Cascading Part of Cascading Style Sheets

The C in CSS stands for cascading, which is an elegant term for an equally elegant and important idea. Styles cascade or flow among levels. An element’s visual display may be affected by rules in another element or even another document.

Inheriting styles

When you apply a style to an element, you change the appearance of that element. If the element contains other elements, the style is often passed on to those containers. Take a look at Figure 5-4 for an illustration.

Figure 5-4: The last paragraph inherits several style rules.

Figure 5-4 shows several paragraphs, all with different font styles. Each paragraph is white with a black background. All the paragraphs use a fantasy font. Two of the paragraphs are italicized, and one is also bold. Look at the code to see how the CSS is defined.

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Cascading Styles

This is an ordinary paragraph

This paragraph is part of a special class