CSS Syntax Basics
Now lets say you have a page with a bunch of lists. Some are in tables and some aren't. You would like only the ones in tables to have a different colored font so it stands out from the table's background. You could apply a class to each one of those lists but here's an easier way. When you declare the style, just use all the HTML tags that the lists will be nested in. Don't put a comma between them, leave a space instead. Just like this:
| List 1 | List 2 |
|---|---|
|
|
Only items that are inside the last tag, that's nested inside the other tags, in the exact order you've placed them in your style selector will have the style applied to them. None of the other tags listed will be affected. Each tag will however inherit any styles that have been applied to their parent elements (the ones they're nested inside of). Remember inheritance?
So far I've shown you ways of affecting one property but there are a lot of times when you would like to change several things about something. It's simple to do, you just put a semi-colon (;) between each property/value pair (declaration). To create a habit for doing this I put them at the end of every declaration even if I only have one. To enhance readability, it's recommended that you put each declaration on a line by itself. like this:
font-family:Arial,sans-serif;
color:red;
background-color:yellow;
}
Notice also the slight indenting of each of the declarations from its selector and end curly brace. This all enhances readability but isn't necessary. You could have it all on one long line if you wish. Then again, you could write a whole web page as one long line but isn't readability nice?
You'll also see it done with each curly brace on it's own line. this is fine if you want, I just find it detracts from the readability for me. You can choose for yourself, either way works.
One last thing before we move on. At some time you're probably going to want to make a note in your style sheets to remind you what they're for. To comment out single to multiple lines just start the note with a forward slash and an asterisk (/*) and finish it with an asterisk and a forward slash (*/). Everything in between these will be ignored.
Any questions on this or anything else in this page, remember, just view the page source. I use embedded style sheets for the styles that only apply to one page. I also left a comment on this one for demonstration purposes.
Now that you're all enlightened on where your styles goes and the syntax for writing them, lets move on to actualy learning about some of the properties and values you may use. First we'll start with backgrounds.
