Mainpage
The syntax for the style definitions is easy: First you define what you're talking about, which tags you want to affect, like so:
pp.redonwhite.yellowonblackdiv.chapter+h2 (we will see much later what the plus sign is about)then come the definitions put in curly brackets. Each definition has to be separated from the next one with a semicolon, like so:
In general, you could drop the last semicolon, since the rule says between and not after, but I strongly advice against that. Always put a semicolon after each definition, even the last one, even if it's only one. It's so easy (when you did not put one) to later on add some more definitions, and forget about that pesky semicolon. You can spend hours trying to figure out why it's not working as intended.
Okay so far we have learned (in the subchapter above, about classes and styles) that one has to give the
tag and then the name of the id, like so: div.moo{color:red;}.
But now in the example above, did you see there was a definition that had no HTML tag name before the ID?
.yellowonblack{color:yellow;}.
What's this all about??? Let's pick up my old example with the four divs and work a bit on it:
It should look like this (assuming the page is in general black whith white text):
Compare the result with the commands. First we find two definitions as expected:
You can see that the divs with the class moo, are red on white background as before,
and you can see that the h1 headline, which has the same classname, does not have the red-on-white feature, but huge letters.
What happened? Simply put: the classname may be the same, but in the definition of the class
(up in the HEAD section) we were not just talking about moo{red on white}, we were saying
div.moo{red-on-white} and h1.moo{big-font}, right?
What else can you see? All three elements (with the 'moo' class) have a blue border around them. And when you look
in the definitions (the head section again), then you see the class definition without a tag name.
This simply results into any element, that has that class name (class="moo")
will grab the defintions and act accordingly.
It does not matter, if there are more than one definitions for a class. The styles will just
add up (or kick each other out if they are about the same styles).
Here's another example:
It should look like this (assuming the page is in general black with white text):
What has changed now? I added a second class
div.oink{purple-on-yellow} and attached it to two of the divs.
The thing is, one of those divs already has the class 'moo'! So we have now two classes screaming at that poor div:
hey YOU, you have to be red, bold on white
, and NO NO!!! You have to be purple on yellow
.
(when you were watchful, then you also learned now, that one can apply more than one class, separated by a space!!!)
So what to do now? Well first the order was, red text, bold text, white background, and then the second class kicked in
(it was second in the list: class="moo oink"). So it changed the
text from red to purple, and it changed the background from white to yellow. That's it. Basta. Period. That was all of
the second class' commands, so that means the command 'be bold' survived. That's why
that purple-on-yellow text in that div with the two classes is still in bold, but the text in the div with only the class
oink isn't bold. Also, since there's no class 'moo' assigned to it, it did not get the blue border.