|
|
|
Chapter 2 Another way to set styles is using an internal style sheet. This is created using the <style> and </style> tags. The code inside these tags is only slightly different from a style attribute inside an element. However, it has a much different format, and it can affect the whole page, rather than just one element. Also, you can make classes that can be used multiple times, without writing the code over and over again. For instance, my stylesheet includes the class indent, which is being used on this paragraph. I use it on almost every page, so it is quite useful to have it be a class. Now, onto the lesson. Here is what an internal stylesheet looks like. <html>
<head>
<style type="text/css">
.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}
</style>
</head>
<!-- rest of the page -->
</html>
This is a pretty advanced stylesheet, so I will go over all the things. First, there is the <html> and <head> tags. Note that internal stylesheets have to be inside the head attribute. Then, there is the <style> tag, with the type attribute set to text/css, which denotes that the code until the </style> tag will be CSS code. Then comes the actual code, here I will go one line at a time.The first line is .classRed {color:#ff0000}
and this is a class declaration. The period is what shows that it is a class. In the body of the HTML document, you could have the following code and it would appear like what follows it.
<span class="classRed">Hey There</span>Hey There The class name doesn't need to have the period in it. The second line is much like the first, so I don't really need to go over it. The 3rd line is a pretty easy one to understand, but why is more complex. It looks like the following: body {color:#000000; background:#ffffff}
This is like setting the text and bgcolor attributes in the body element. This is made possible due to there being some previously set "classes", which are known as psuedo-classes. These include body, h1-h6, p, and a[:link][:visited][:active][:hover]. The last one is for links, visited, active, and when the mouse is over the link. So the last 4 lines in the code are made obvious through this.If you need help with the meaning of the different attributes, check out Appendix A.
|
