How to Use Selectors in CSS

As the designing world recognizes Cascading Style Sheets, or CSS, as a style standard, it is good to get an idea of the basics involved. A simple CSS indicator consists of three parts: a selector, a property, and a value. The selector is what identifies what part of a site or page you are trying to style. It is the index for the command. Read on to learn more.

Difficulty: Moderate

Instructions

1. Find the place in your code to enter your CSS command. CSS is a language that can be added to your page in modules and even kept in a separate file from your HTML code. Many designers recommend that most of your CSS code be kept separate in a specific file ending in ".css" that all of your web pages will reference for style patterns. But, you can also add css code into the headings of your pages. Either way, be sure you know where your CSS code will be stored.

2. Add your selector, and then a bracket to separate the selector from the rest of the command. The bracket should be the same kind featured in Visual Basic code, "{." The selector is the item you are defining style for. For example: h1 for a headline.

3. Enter your property, and then a colon.

4. Enter your value.

5. Close the command with a matching bracket. Your code should look like this: selector "{property: value}" for example: "h1 {color: red}".

Tips & Warnings

• If the value is multiple words, you'll want to put quotes around it so as not to confuse the parser. A multi-word font value like Courier New would be added to a headline like this: "h1 {font: "Courier New"}".
• With CSS, the common way to represent colors is by name and not by the old bulky hex system (#333333). unless the color isn't primary or secondary. A selector can be changed to red like this: "h1 {color: red}".
• Sometimes, you can add more than one value in the same command by putting the two values together in quotes much like the example above. A "center bold" value input can make text both centered and bold. This is just one more way that CSS can save lines and lines of code, which is a main reason it has emerged as a new industry standard.

Resources

• W3 CSS tutorial.
• Includes tutorials.