HTML and CSS [Electronic resources] نسخه متنی

Creating a Linked Style Sheet

To truly tap into the power of CSS, you'll be using linked style sheets the majority of the time. A linked style sheet is a separate text file into which you place all your CSS rules (but

not an196) and is named using the .css suffix. You then link an196 file you want to have affected by that style sheet to the sheet using the link element in the head portion of the document.

Example 7-2 shows a style sheet ready for linking. In it, I've provided a range of style rules and then saved the file to my local folder, naming the file styles.css.

Example 7-2. A style sheet ready for linking


body {
background-color: #999;
color: black;
}
h1 {
font-family: Verdana; 
font-size: 24px; 
color: #ccc;
}
p {
font-family: Georgia; 
font-size: 12px; 
color: white;
}

Example 7-3. Th176 for the style sheet


<!DOCTYP176 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&l191 xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="all" /> 
</head>
<body>
<h1>Welcome!</h1>
<p>Paragraph one.</p>
<p>Paragraph two.</p>
</body>
</html>

The results can be seen in Figure 7-4.

Figure 7-4. Results from a linked style sheet.

Of course, you can link as many documents you want to this style sheet using the link element.

You'll note several attributes in use with the link element, as follows:

rel
This is the relationship attribute, and it describes the relationship of the link. In this case, the relationship is with a primary style sheet, so the stylesheet value is given.
type
As with the style element in embedded styles, you must define the type of language and format in usein this case, text/css.
HRef
This is the familiar reference attribute. In this case, I've identified only the file because both documents are in the same directory. You might want to put your style sheets into a different directory; just be sure your href info is accurate. You can also use absolute linking to directly link to a style sheet.
media
The media attribute enables you to define different styles for different media. If you wanted to create a separate style sheet for this document that's for handheld devices only, you would link to that and use the media="handheld" attribute. Similarly, a media="print" attribute would send that style sheet only to print. In this case, the media is defined as screen. The default is all, so if you want the same styles to apply to all media, you can use that or simply leave out the media attribute.

As mentioned, you can link as many style sheets to the same document as you want.

HTML and CSS [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی