CSS and Categories

[Mazigh]

Hoi,
I'm a newbie to the css and the markup languages generallay, i learnt some basic skills of the html, and i now want to learn some basic skills of the css.
I learnt that the css codes can be involved in three manners: linked stylesheet, embedded stylesheet, and inline styleheets.
People can also use their style on this manner:
you post this following code(s) in the document in one of the previous manners
.(the name of the style){
property= value;
}

and when you want to use it, you use it on this following manner:
<p class="(the name you chosed for your style, but without any dot)">here is the text you want to edit/make up with the css

and so you can use many styles through giving them various names.
(i don't claim it is fully correct, since i'm in the beginnig steps).

I also know that the css is useful, since you don't have to type all the html-tags in all you documents and at every link/alinea/head/background..., for this reason your page will take less time to load itself.

but i knew that those properties have several selector(what i call categories), like as this:

"BODY
{
background-color:#94739C;
font-family: Verdana,arial;
font-size: 12px;
color: #ffffff;
}

P
{
text-align: center
}

A
{
text-decoration: none;
font-weight: bold;
color:#ffffff;
font-size: 12px;
}"

and those are not the only categories, here there are no instructions about the situation of the links (a:link, visited link..) and much other instructions that are useful for the make up of any page;,
So, my question is: where i can find a page about all those categories (or at least the important categories/selectors) ?

I hope i'm not boring
Best regards,

[Mazigh]

Hi i found this:
http://www.w3schools.com/css/default.asp

But i do appreciate the summarizations

[mwinter]

.(the name of the style){
property= value;
}

Almost. Properties are separated from their values by colons:

property: value;

I also know that the css is useful, since you don't have to type all the html-tags in all you documents and at every link/alinea/head/background..., for this reason your page will take less time to load itself.

True. It also makes presentational changes to a well-written document very easy as only the style sheet needs to be altered and will be propagated through the entire site automatically.

but i knew that those properties have several selector(what i call categories)

If you prefer to think of them as categories, that's you're perogative, but I would advise you to always use the correct terms. If you asked a question about 'CSS categories' I wouldn't have a clue what you meant.

font-family: Verdana,arial;
font-size: 12px;

A couple of comments.

• Don't use pixels (or points; pt) to size text. IE has a bug which makes it difficult for users to resize text using the 'Text Size' menu item. This is potentially very bad for usability. Instead, use percentages. Body text should be left at 100% of the default, with legalese (and the like) smaller but no lower than 85% of that default.
• On a related note, don't use Verdana, at least if you feel that you need to reduce it's size. Verdana is not a universally available font and it has different characteristics to most others. Though it may be readable (for many, not all) at 12px, a replacement font may be far too small.

A
{
text-decoration: none;

Removing the underline from links...

color:#ffffff;

...and making them appear the same colour as other text is usually a very bad idea. Links should be easily recognisable within text. You might understand the rendered result of this rule to indicate a link, but your visitors may just see them as bold text.

A further note: when specifying a foreground colour, the background colour should also be included as well (and visa versa). The default colours in your browser might be black-on-white, but not everyone's will be and clashes can make a site unreadable. The only exception to this guideline is when another rule already specifies both. For example:

p {
  background: #000000;
  color: #ffffff;
}
p.warning {
  color: #ff0000;
}

The first rule will render all paragraph text as black-on-white. Paragraphs that contain a warning should be displayed as red-on-white. As the first rule already specifies that background colour, there's no (current) need to it in the second rule, too.

So, my question is: where i can find a page about all those categories (or at least the important categories/selectors) ?

The CSS specification devotes an entire section to selectors. I think it's very readable, but ask if you have problems. What I will say, though, is that only decent browsers support all of the types listed there. IE is not a decent browser, and fails to support many including the adjacent, child, attribute, lang(), and first-child selectors. It will also only support the interactive pseudo-classes with links (a elements). That just leaves the universal, element, descendant, link pseudo-class, class, and id selectors. Other older browsers will have similar limitations.

Mike

[Mazigh]

Thanks Mike winter, I seem to underestimate that CSS
there is a long way to learn it, but yes, there maybe is no language to learn in one day.
Thanks again,

[Mazigh]

Nevertheless, i got a good score in the exame of the w3c:
____________________________
W3Schools CSS Quiz
Result:
18 of 20

90%

You can be proud of yourself!

Time Spent
6:00
___________________________

I can almost recognize the correct codes, but i cannot recall them

that is the same for the html, but in less time:

_____________________________
W3Schools HTML Quiz
Result:
18 of 20

90%

You can be proud of yourself!

Time Spent
4:05
______________________________

[mwinter]

Nevertheless, i got a good score in the exame of the w3c:
____________________________
W3Schools CSS Quiz

I'd like to point out that, despite the similarity of their names, W3Schools and the W3C are not related. Though there are tutorial sites that are much worse than W3Schools, it's certainly not perfect and the W3C are the only normative reference for both HTML and CSS (though one could argue ISO/IEC 15445 for the former).

Mike