Spans
What do I do if I have certain areas I don't want my general CSS codes affecting?
Don't forget the start tags and end tags. All the codes on this page go in between these two tags!
|
<style type="text/css"> |
</style> |
There are all kinds of individual properties you can add to most, if not all, codes. See the codes below for some of the frills and additions you can add to make your pages unique.
Span Class
On previous pages you learned how to define what your text will look like, what your links will look like, etc. But, what if you have one section that you want to appear differently. Let's look at an example. Say you have a website, and you've defined your links to be red, with a yellow hover effect, so that all the links in your sidebar menu appear red and yellow on hover. But, what if you have a red background for your content area, and you want those links to appear differently?
One way you could do this is by using span classes. This involves two steps. First, in your stylesheet you'd define the class itself. In this first code, we're defining how text color would appear when this class is called up:
.content {
font-family: Verdana;
font-size: 10px;
color: #000000;
}
See the very top line, the one that says .content? This can be named anything original to your page. So, you can do this as many times as you like for different areas on your site. With this above portion, we've created a content class, with basic text properties. But now, with this code, we've continued the content class by defining how links will appear when it's used.
.content a{
font-family: Verdana;
font-size: 10px;
color: #FFCCFF;
text-decoration: underline;
}
With this code, we've defined how links will appear in this class, by adding that 'a' to the top line. See that the font color is different, and we've added a text decoration for links? We can continue customizing the content class, by adding a hover effect for links.
.content a:hover{
font-family: Verdana;
font-size: 10px;
color: #FFFFFF;
text-decoration: underline overline;
}
Again, notice the top line now has an a:hover addition to it, and that the font color and text decoration have changed.
Now, we have to define where the class will be on your page. This is step 2. Wherever you want that class to take effect, you would add the following code, with the affected content in between.
<span class="content">
CONTENT GOES HERE.
PUT AS MUCH AS YOU WANT.
A FEW LINES OR HUNDREDS.
</span>
Span Without Class
You can also use a span style without having to define a whole class in your stylesheet, for one particular section, by using the following code.
<span style="color:#51515D;
background-color: #F0D4B6;
border:#51515D;
border-style:solid;
border-top-width:2px;
border-bottom-width:2px;
border-left-width:2px;
border-right-width:2px;">
CONTENT GOES HERE
</span>
You can add almost any property you like inside that style tag, following the same rules you would with normal CSS stylesheets.