Using CSS rules we can create rules for how text and images should be presented. We can change the size, color, font, placement and spacing of text. We can underline and create backgrounds. We can do lots of other tricks. This is all useful, but in order to be really useful, we have to be able to control which objects on the screen are controlled by which CSS rule. In this page I'm going to show you tricks to target CSS rules on objects in your web page.
In our first CSS rules we redefined basic tags like <h1> or <p>. If you set <h1> to be red, then every <h1> in your page would be red.
We also looked at a menu system that was built from a list object. We redefined that <a href> tag so that the <a> item would display as a rectangle instead of blue underline. That makes a nice menu, but it messes up every hyperlink in your page if you do it that way.
Who is the target?
When you create a CSS rule you have to decide what the target is. Then you can choose which is going to be the right way to target the rule.
Here's a table of situations, and the CSS scheme that will work best:
| Does the rule affect every object of a certain type, such as <h1>? | Redefine the target object using a new CSS rule | Does the rule affect one obect only? | Use "ID" to name the object and create a rule that applies to this ID only. |
| Does the rule affect objects in one area of the page, such as, the "content" area of your page? | Use a nested rule that applies only in a certain div. Create a div for the area that you want the rule to apply. Within that div, create a rule in the normal way. |
| Does the rule affect some objects in the page, which we will tag, and igrnore others? | Create a "class" rule and then tag the objects it applies to by using "class=" as a tag. |
This is the simplest form of CSS rule.
You simply tag the object in your page in the usual way, using for example <h1>, and then redefine that tag in your CSS file.
For example, let's say you want to redefine <h1> to be centered and orange. Here's a CSS rule that would do it:
h1
{
color:orange;
text-align:center;
}
Have a look at http://www.w3schools.com/css/default.asp to see this example.
In your page, tag the object by inserting the tag "id=" in the object.
For example, I want to make a header that is blue and centered. I only want this rule to apply to one object which I will name "myblueheader". Here's what the HTML part should look like:
<h1 id="myblueheader">My Header will be Blue and Centered</h1>
Then, in your CSS file, create a rule that applies to this ID. The css rule should look like this:
#myblueheader
{
text-align:center;
color:blue;
}
Notice that the definition starts with a pound sign (#). That's how the system knows that this is a rule that applies to an ID.
Here's what it will look like in the page
If you set things up this way your rule will only apply to the one named object, and will be ignored elsewhere in the page.
You can find a good example of this here: http://www.w3schools.com/css/css_id_class.asp
In your page, create a Div that surrounds the area that you want your rule to apply to. Then create a rule in the normal way, but with nesting.
I think this will be most clear if I give an example.
Let's suppose we have an H1 rule that makes H1 objects in our website big and black (which is normal).
Now let's say we have a sidebar with several H1 objects and we want those objects to be blue.
Create a div called "sidebar" and then a nested rule that applies only in that div. Note that we will make "sidebar" a "class" but you could also make it an ID. Either way works.
Our html will look like this:
<div class="sidebar>
<h1>This is my sample text</h1>
</div>
The CSS rule will look like this
.sidebar h1
{
color:green;
}
The result will look like this:
The result is pretty similar to other ways of applying CSS rules by ID or Class but if you look at the HTML you can see that we haven't used either. The rule only applies to the DIV called "sidebar" and is ignored elsewhere.
There is a pretty good example here: http://www.w3schools.com/css/css_grouping_nesting.asp
This works pretty much the same as the ID rule, except, it's designed to apply the rule to ANY object that has this class.
For example, let's say we want to have a variety of headers of types h1, h2, h3; and we want them in most situations to be black, but in the sidebar area we want them to be green. So we could create a class rule called "colormegreen" and then tag the objects that the rule should apply to.
The css rule should start with a period and looks like this:
.colormegreen
{
color:green;
}
The html will look like this
<h1 class="colormegreen">My Big Title</h1>
<h2 class="colormegreen">My Smaller Title</h2>
And the result will look like this
It's pretty easy to use and basically works the same as the ID tag, except that it is intended to be used in multiple places in your page.
Note that the period at the beginning of the definition is REQUIRED because that's how the CSS sheet knows that this is a class defnition.