Naming things in CSS

To use CSS properly, the first things you need to understand are these:

+ In CSS the order in which you post the instructions influences the order in which they are carried out; and,
+ In CSS you can be very specific in very simple ways, using Id's and Classes

How to write it

To use CSS, the first thing you need to do is to select which XHTML tag you are going to affect with the instructions. How? Naming it:

body {}

Now, if you want to affect a piece of code that is inside another, then you need to specify both:

tr td {}

Lastly, if you want to make instructions that will affect more than one XHTML element, then you list them with commas:

i, em {}

Thus, in the first example, the CSS instructions are going to affect the body element; in the second example, the CSS instructions are going to affect every table cell (td) that is inside a table row (tr) that is inside a table; and in the last one, the CSS instructions are going to affect both the <i /> and <em /> tags it finds. In every case, you are going to write the instructions inside the brackets.

Being more specific

There are many cases in which you will want to be more specific. For example, you want to affect a paragraph, but not every other paragraph on the web page? You have both id's and classes to solve it:

If you establish a class, you establish a set of instructions that are going to affect every tag that has the name of the class on the web page. Thus, if you want to affect a few paragraphs, you can give them a same class name, like 'other', and specify the instructions on the CSS file:

On the web page, include the class:

<p class="other">sample paragraph</p>

...and in the CSS, establish the class with a dot:

p.other {}

That will affect every paragraph that has a class named 'other' on the web page. Other paragraphs won't be affected.

Likewise, if you only need to specify one element of the web page, you can give it a specific name, or ID, and establish its CSS instructions on the CSS file. To name an ID, you only need to add its name, like this:

<p id="other">sample paragraph</p>

...and in the CSS, establish the instructions with a hatch:

p#other {}

What is the difference? The difference is that you can have many paragraphs of the same class in a given document; however, you can only have one element of each ID on the same file.


Knowledge + Computers