(Note: If you have not already downloaded the html template files please do so by clicking here.)
Overview of using linked style sheets:
<LINK HREF= "file path" TYPE="text/css" REL="stylesheet">Use the same conventions you do for an <A HREF> tag when you specify the "file path" attribute. Although there are other options for the "type" and "rel" attributes, there is no real advantage to using them (in fact there are some disadvantages), so all you really need to worry about is the file path.
ExampleFirst, open the file cxlinkedcss1.html in Internet Explorer. Pay special attention to the font (which should be Times).Now, open the same file cxlinkedcss1.html in your HTML text editor (for example, notepad). After the </TITLE> tag add the following line (make sure firststylesheet.css is in the same directory as cslinkedcss1.html): <LINK HREF= "firststylesheet.css" TYPE="text/css" REL="stylesheet">Now reload the file cxlinkedcss1.html in Internet Explorer , most of the characters should now be Sans-Serif. The only exception should be the list items. Now open the same file in Netscape Navigator. Notice that in Netscape, the list items and the text within the table are still in Times font. This is a little sample of how style sheets are implemented differently on various browsers due to the clash of open standards with companies trying to get market share. It is important that you look at your web pages not only with different browsers but on different computing platforms (Mac and Windows) to make sure you are getting the effect you want. Next, we'll fix this problem with our stylesheet. |
(Note: If you have not already downloaded the html template files please do so by clicking here.)
Overview of stylesheet rules:
P { font- family : sans-serif; } H2 { font- family : sans-serif; }Both of them apply to existing html elements (the paragraph and header 2 tags). Each of them has a single argument (font-family) set to the same value (sans-serif).
ExampleNow we'll add some rules so that our cxlinkedcss1.html page has a uniform font type.Open the firststylesheet.css file in your editor and add the following text: TD { font- family : sans-serif; } UL { font- family : sans-serif; } OL { font- family : sans-serif; }Open the cxlinkedcss1.html file in Internet Explorer (or reload it if it is already there). Notice that all of the fonts on the page are now sans-serif. (Of course, all the fonts were already sans- serif in Netscape) |
ExampleNow lets add a little bit of color to our page using the stylesheet.Open the firststylesheet.css file in your editor and add the following line to the H2 rule: color : #660000;Now reload the cxlinkedcss1.html file in your browser, and notice that the first line of the page has changed colors. Keep in mind that these changes would happen on all .html pages that link to your stylesheet. If you set up your web site the right way, it can be easy to make uniform and dramatic changes to the layout and color scheme of your entire site with very little work! |
(Note: If you have not already downloaded the html template files please do so by clicking here.)
P.warning { font- family : serif; color : #ff0000; font- weight : bold; }This rule won't make any changes in our html document until we specify an html element that uses this specific selector.
Open cxlinkedcss1.html in your editor and add the following text:
<p class=warning>This is a warning, repeat this is a warning.Open (or reload) cxlinkedcss1.html in your browser. Notice that the warning text is red, bold and serif just like you specified in the style sheet. These settings will be applied only to paragraph tags that use the custom attribute "class=warning".
Class selectors don't need to be applied to just one html element. You can leave them open ended so that they can be used anywhere.
ExampleOpen firststylesheet.css in your editor. Remove the "P" from "P.warning" so that the entire rule reads:.warning { font- family : serif; color : #ff0000; font- weight : bold; }Now open cxlinkedcss1.html in your editor. Modify one of the <TD> tags so that it now uses the warning class modifier as follows: <TD CLASS= warning>Open (or reload) cslinkedcss1.html in your browser. Notice that the paragraph warning works in the same way, and that the .warning argument was also applied to one of the table cells. Now try incorporating a stylesheet with the final project you are working
on. (Don't forget that you will have to link the stylesheet to each page
you want to use it in by using the <LINK>
tag). |