|
|
|
Chapter 3 The last way to include a CSS in an HTML document is to use an external style sheet. The code is exactly the same as an internal stylesheet, except it expands even more. Internal stylesheets are availible to an entire HTML document, but external stylesheets are availible to any file. An example is I have a .css (stylesheet) file on my server, and all my pages use it. Here I will explain how to implement a .css file. The .css file's content is exactly like the code inside <style></style> tags, so I will use the previous chapter's example. Here is what exampleStyle.css would look like: .classRed {color:#ff0000}
.classBigBlue {color:#0000ff; font-size:50pt}
body {color:#000000; background:#ffffff}
a:link {color:#16A5DA; text-decoration:underline}
a:visited {color:#16A5DA; text-decoration:underline}
a:hover {color:#018CBF; text-decoration:none}
a:active {color:#018CBF; text-decoration:none}
If you need clarification of the code, read the previous chapter.Then, we need to include a little code in our HTML document and the stylesheet can be used. All you need to include is the <link> tag, with a few attributes set. You have to include the href attribute and should include type and rel attributes. href sets the location of the file (which would be exampleStyle.css), rel tells the browser what kind of file the href attribute sets is (stylesheet in the example), and type sets the MIME type the file is (text/css). So to implement the file exampleStyle.css, you would have the following code in the HTML document. <html> <head> <link href="exampleStyle.css" rel="stylesheet" type="text/css"> </head> <!-- rest of the document --> </html>And that's it, now the HTML document will have all the style characteristics that are set in the exampleStyle.css file.
|
