ptg 14.6 The External Type with a Link 555 14.6 The External Type with a Link 14.6.1 The <link> Tag In Chapter 1, we talked about the three layers of a Web page: HTML/XHTML, CSS, and JavaScript. The CSS layer can be separated from the HTML document by placing style sheets in external files. In fact, external style sheets are the most powerful type if you want the style to affect more than one page; in fact, you can use the same style for hun- dreds, thousands, or millions of pages. The file name for the external style sheet has a .css extension, just as the HTML file has an .html or .htm extension, and a JavaScript external file has a .js extension. To link the external file to the existing HTML file, a link is created as shown here: <link rel=stylesheet href="style_file.css" type="text/css"> The following examples demonstrate the use of external style sheets. Example 14.11 is the HTML file containing a link to the external file and Example 14.12 is the .css file. It contains the style sheet, but notice it does not contain <style></style> tags. EXAMPLE 14.11 <html> <head><title>External Style Sheets</title> 1 <link rel=stylesheet type="text/css" href="extern.css" media="all"> <! Name of external file is extern.css. See Example 14.12 > 2 </head> 3 <body> <h1><u>External Stylin'</u></h1> <h2>Paragraph Style Below</h2> <p>The style defined for this paragraph is found in an external CSS document. The filename ends with <em>.css</em>. Now we can apply this style to as many pages as we want to.</p> <h2>An H2 Element</h2> <h3>An H3 Element</h3> <p>This is not a <em>designer's dream style</em>, but it illustrates the power. Don't you think so?</p> </body> </html> EXPLANATION 1 The link tag is opened within the <head> tags of your HTML document. The link tag has a rel attribute that is assigned stylesheet. This tells the browser that the link is going to a style sheet type document. The href attribute tells the browser the name of the CSS file containing the style sheet. This is a local file called extern.css. If necessary, use a complete path to the file. Continues From the Library of WoweBook.Com ptg 556 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 2 The <head> tag ends here. 3 In the body of the document, each of the HTML tags will be affected by the style defined in the external CSS file. See Figure 14.13 for output. EXAMPLE 14.12 (The external extern.css file) 1 body { background-color: pink; } 2p { margin-left:20%; margin-right:20%; font-family: sans-serif; font-size: 14 3} h1, h2, h3 { text-align: center; font-family: sans-serif; color: darkblue } 4 em { color: green; font-weight: bold } EXPLANATION 1 This is the external CSS file that will be linked to the file in Example 14.12. Using an external CSS file keeps the main file size smaller and allows the style sheet to be shared by multiple files. First use the <link> tag, then the rel attribute tells the browser that this is a link to a style sheet, the href specifies the location of the CSS file, and type specifies the type of information that will be linked (i.e., text in this example). You may also specify a media type. If you add media=”all” then all me- dia types will be included. 2 The paragraph <p> style is set to have a margin in 20% from the left and right, the text in size 14, and font family sans serif. 3 The heading levels 1, 2, and 3 styles are set to be centered with a dark blue font, from the sans serif family. 4 The <em> style will be a bold, green font. EXPLANATION ( CONTINUED) From the Library of WoweBook.Com ptg 14.6 The External Type with a Link 557 14.6.2 Importing with @import You can also import CSS files with the @import rule. This rule allows you to import one external CSS file into another by adding the @import rule in other external CSS files. The format for doing this is: Figure 14.13 External style sheets. FORMAT @import url(externalfile.css); EXAMPLE <style type="text/css"> @import url(http://www.mystyles.com/style.css); @import url(/stylesheets/.css); h1 { color: blue } </style> From the Library of WoweBook.Com ptg 558 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript Cascading Order. You can import as many files as you want, but keep in mind that when multiple style sheets are used, the style sheets may conflict over which selector has control. There must be rules that determine what style sheet’s rule has precedence. The order that determines the outcome of the type of conflict is called the cascading order. A full discussion can be found at http://www.w3.org/TR/CSS2/cascade.html#cascad- ing-order. 14.7 Creating a Style Class Rather than globally defining a style for an element, you can customize the style by defining a class. The class style can be applied to individual tags when needed. The class name, called the class selector, is preceded by a period and followed by the declaration enclosed in curly braces. Once you have defined a class, it can be used on any of the HTML elements in the body of the document as long as that element understands the style you have applied to it. To apply the class, you use the class attribute. The class attribute is assigned the name of the class; for example, for the <p> tag, you would stipulate <p class=name> where name is the name of the class. FORMAT .classname { style rules; } EXAMPLE .header { font-family: verdana, helvetica ; } EXAMPLE 14.13 <html> 1 <head><title>CSS Class Name</title> 2 <style> 3 p { margin-right: 30%;font-family: arial; font-size: 16pt; color:forestgreen; } 4 .bigfont { font-size: x-large; color:darkblue; font-style:bold;} 5 .teenyfont { font-size:small; font-style: italic;color:black;} </style> </head> From the Library of WoweBook.Com ptg 14.7 Creating a Style Class 559 <body> 6 <p>The text in this paragraph is green and the point size is 16. The font family is <em>arial</em>.</p> 7 <p class="bigfont"> This paragraph has a bigger font and is dark blue in color.</p> 8 <p>The font style is specified as a class called <em>.bigfont</em>.</p> 9 <h1 class="bigfont">Testing the Class on an H1 Element</h1> 10 <p class="teenyfont">Is this a small font?"</p> <p>Let's start a new paragraph. This is green with a font size of 16. What style is in effect here?</p> </body> </html> EXPLANATION 1 The style is defined in the <head> of the document. 2 The CSS starts here. 3 A rule is defined for the paragraph (p selector). All paragraphs will have a right margin, 30% in from both left and right. The Arial font will be 12 point and forest green. 4 A class selector called .bigfont is defined. Class names start with a period. When used on an HTML element, the font will be extra large, dark blue, and bold. 5 The class selector called .teenyfont is defined. All HTML elements that use this class will have a small, italic, black font. 6 The paragraph is styled according to the rule on line 3. 7 This paragraph is assigned the bigfont class. The text will be in the style defined for this class on line 4. 8 This paragraph reverts to the style rule on line 3. 9 The <h1> tag is using the bigfont class defined on line 4. 10 The <p> tag is using the teenyfont class defined on line 5. See Figure 14.14. EXAMPLE 14.13 (CONTINUED) From the Library of WoweBook.Com ptg 560 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.7.1 Styling a Simple Table with Class A class can be applied to tables as with any other element. By default the browser deter- mines the size of the table cells based on the elements and text they contain and expands the cells accordingly. With images, the edge of the image will be the edge of the cell. The browser will not shrink the image to fit the text, but will stretch the text to fit the image. Text is stretched out until the first line break or until a paragraph ends. You can specify table width with the CSS width property. Example 14.14 uses both a table and an image width class. Figure 14.14 Testing the CSS classes. EXAMPLE 14.14 <html> <head><title>Bengaluru, India</title> 1 <style type="text/css"> 2 table, td{ border:groove darkgreen; } 3 .size{ width:200px; } /* class */ 4 .caption { font-size: .8em;font-style:italic; } </style> </head> From the Library of WoweBook.Com ptg 14.7 Creating a Style Class 561 <body> 5 <table border=0 class="size"> 6 <tr><td><img src="indiacows.jpg" width="200" height="150" alt="Cows Rule"></td></tr> 7 <tr><td class="caption">Some cows take a leisurly stroll down the Jayanagar Block after a morning rain in Bengaluru, India.</td></tr> </table> </body> </html> EXPLANATION 1 The CSS style sheet starts here. 2 The table and the td elements are given a grooved dark green border. 3 This is a class to define the width of an HTML element. 4 This style defines a class called .caption defining font size and style of an HTML element. 5 The class attribute of the HTML table defines the width of the table. 6 The first row and cell of the table is the image. Its border was defined as grooved and dark green in the CSS on line 2. 7 The second row of the table contains a class called “caption” to style the text font in the cell. This cell also uses the style for a grooved, green border. The output is shown in Figure 14.15. Figure 14.15 A table with an image and text from Example 14.14. EXAMPLE 14.14 (CONTINUED) From the Library of WoweBook.Com ptg 562 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.7.2 Using a Specific Class Selector In previous examples we have defined a class style that can be used by all HTML ele- ments. The following class can be applied to all HTML elements: .center {text-align: center;} With a class selector you can define different styles for a specific HTML element. For example, if you want different styles for just the <p> tag, you can specify a class descrip- tion by appending a dot to the element followed by the class name: p.right {text-align: right} p.center {text-align: center} /* These classes apply only to the paragraph element */ When the class selector is applied to a style, then you use the class attribute in your HTML document as follows: <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p> Note: To apply more than one class per given element, the syntax is: <p class="center bold"> This is a paragraph. </p> This paragraph will be styled by a class called “center” and a class “bold”. EXAMPLE 14.15 <html> <head> <style type="text/css"> 1 p.normal-cursive { font-variant: normal; font-family: cursive } 2 p.small { font-variant: small-caps } </style> </head> <body bgcolor=tan> 3 <p class="normal-cursive">This is a paragraph</p> 4 <p class="small">This is a paragraph</p> </body> </html> From the Library of WoweBook.Com ptg 14.7 Creating a Style Class 563 EXPLANATION 1 A specific class selector is defined to describe the style of a paragraph’s font, and only a paragraph. 2 Another class selector is defined for a paragraph’s font. 3 Now to use the class with the <p> tag, the class name is specified and the text will be printed in cursive. 4 The class for this paragraph will style the text in small capital letters. Output is shown in Figure 14.16. Figure 14.16 Using the class selector to style a paragraph. EXAMPLE 14.16 <html> <head> <style type="text/css"> 1 ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.none {list-style-type: none} </style> </head> <body bgcolor="aquamarine"> 2 <ul class="disc"> <li>Coffee</li> <li>Tea</li> <li>Beer</li> </ul> <ul class="circle"> <li>red</li> <li>blue</li> <li>yellow</li> </ul> Continues From the Library of WoweBook.Com ptg 564 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.8 The ID Selector and the ID Attribute The ID Selector. The ID selector is another way to create a style that is independent of a specific HTML tag. By using the ID selector, you can choose the style for the element by assigning it a unique ID. The name of the ID selector is always preceded by a hash mark (also called a pound sign, #). The declaration block, consisting of properties and values, follows the ID selector and is enclosed in curly braces. <ul class="square"> <li>circle</li> <li>square</li> <li>triangle</li> </ul> <ul class="none"> <li>Thanks</li> <li>Tack</li> <li>Gracias</li> </ul> </body> </html> EXPLANATION 1 A CSS class is defined for a list with different styles. 2 This is an HTML list item using the “disc” class. The output shown in Figure 14.17. Figure 14.17 Using a CSS class to create different styles for lists. EXAMPLE 14.16 (CONTINUED) From the Library of WoweBook.Com . disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.none {list-style-type: none} </style> </head> <body bgcolor="aquamarine"> 2 <ul class="disc"> <li>Coffee</li>. the ID selector and is enclosed in curly braces. <ul class="square"> <li>circle</li> <li>square</li> <li>triangle</li> </ul> <ul. Library of WoweBook.Com ptg 556 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 2 The <head> tag ends here. 3 In the body of the document, each of the HTML tags