 |
|
 |
|
 |
||||||||||||||||||
|
Style Sheet : Making a Class Making your own class can be something that can really make your page dynamic and different. If you'll notice above the header almost appears to be an image completely. It is using a %lt;p class="head"> and </p> tag surrounding the desired text in order to give this impression.So we're going to act as if we are creating this class for ourselves. The class is defined as "head" as that is what we named it. In your CSS document type .head{ This will open our class tag, then we type } at the end to close the tag, as we do with all HTML and CSS code we open and close our tags. Now what we need to do is add in our properties. Adding in Properties Quite like the body tag of CSS we can add a different variety of properties to change the look of our class tag. Still using the example of the class named head, we can add a variety of different properties to the tag to change not only the font, but the background color, scrollbars if they apply, and the text transformations. As you can see our headers use a background and a bit of a text transformation. Now the class head will only be the size that it NEEDS to be. We can however define the sizes by adding in height: 10px; and width: 100%; Note that I used both the percentage number and the px number, you can use either, or you can use both. Sometimes you want it to be a specified height but the width you want it to be as big as it can be, this is a method of creating that desired effect. So let's look at my .head class in css. (The .head clas is what appears as the title on these pages) body { color:#000000; letter-spacing:2px; background: url('/images/mainheader.jpg') #000000 no-repeat; height: 23px; width: 540px; font-weight: bold; text-align:right;; } As you may notice in mine I do not define the background in individual steps. As I do not have a background-img: url(' '); tag and a background: #000000; tag nor do I have a background-repeat: no-repeat; tag. Instead I can combine all these functions under one tag, placing spaces between each property. Creating the tag that is shown above.
Where you can Use Classes Making More than one As long as your class is named something new you can make as many as you need to make. In my document I used .head and .navihead as my class tags. In some areas I used a .outline and a .cell as well. This is all so I Can create different CSS style effects. |
