There are two distinct elements to a CSS rule: the selector and the declaration.
- The selector describes the element controlled by the rule, which can be an HTML tag, an ID, a class, or basically anything else that can be controlled using cascading style sheets.
- The declaration tells the browser what should happen to the selected element. The declaration always follows the selector, and is surrounded by brackets: { declaration }
For the following example, the body tag is being selected, and the rule is declaring that the background color be black.
body { background-color: #000000; }
Inside the declaration, there are two elements separated by a colon (:)
- the property, in this case background-color
- and the value, in this case #000000, or black
Although Dreamweaver is going to write our rules for us, it is important to understand how the rule is structured, in case you need to be able to read rules designed by someone else later in the semester.
There are also some rules, wait – let’s call them guidelines, to remember when writing CSS rules.
- Try to only use letters and numbers. Keep numbers to a minimum.
- Use lowercase letters, but mimicking “Object Oriented Code” conventions is common. Often, capital letters are used to denote separate words, as in newsBox or leftNavigation
- No spaces allowed. Spaces mean something, so don’t use them simply to separate words.
- No punctuation allowed. You may use an underscore to simulate a space. As you will soon learn, certain punctuation marks and symbols characters have definite meaning in CSS rules.
- Use classes sparingly. Classes should be used for nitpicky rules, or for tweaking existing rules. Don’t clutter up your style sheet with a ton of classes.
- If something doesn’t work, relax. Stop. Take a deep breath. Look at the CSS and document structure again. CSS rules follow pretty strict logical structures. They will do exactly what they are told, but it’s possible that two rules are giving competing instructions. Use the Firefox Web Developer add-on to troubleshoot your CSS.