Now your html and head elements are ok, it is time to understand the basics of Cascading Style Sheets before we can continue. CSS is developed for the styling of markup languages, HTML and XML to be more specific. CSS can do (almost) everything. It can position elements exactly were you want them to be, it has a really powerful background property, you can easily create flexible layout with it. It is supported in more than 95% of the browsers that are currently in use, and those browsers that don't support it, get a nice text-only version of your site.
Those were all the good things about CSS, so how do we use it? CSS is completely different from the HTML and XML syntax, though it is really easy to learn and to understand. Because it is completely different, you should never use any kind of markup language inside you CSS, it will give you layout issues. CSS is really easy, this is how it looks like:
body{
background-color:#fff;
color:#3c3c3c;
}
In this easy example we set the background color of the page to white and the color to a 'soft black'. As you can see, you can shorten web-save-colors. So #ffffff becomes #fff. #cccfff does not become #cf. It does only counts for three equal pairs in a row. In the example you can see we first 'select' the element body and apply different properties to it, as background-color and color. We give this properties values like this: property:value;. Quite easy. The properties for a selector (body is the selector for the body element) are contained with { and }.
Let's continue and find out how we can apply this wonderful thing to our (X)HTML document. The best method is using the link element as a child of the head element:
<link rel="stylesheet" type="text/css" href="style.css" />
Within the style sheet you can import other style sheets using @import, which also hides all your styles from browser who can't handle it, like Netscape 4.x. For example that browser would crash if I hadn't used @import. Other people like to use it within the style element, which is used for embedding CSS within a (X)HTML file. That could look like this:
<style type="text/css"> @import url(style.css); </style>
You should know that @import is CSS and defenitely not any kind of markup language. You set all your style definitions within the style element, though I not recommend you to do this. The main reason is that you add a lot rules within you document that don't belong there. They should be kept separate. The best reason of course not to embed it but link to it is that it is cacheable. So when the user revisits your site, the browser has to (re)download the markup only. This can save you a lot of traffic, apart from the fact that using CSS will save you a lot of traffic. And traffic is money.
The last method (er is also a specific XML method, see the resources for that one) is embedding it directly into the element itself, like this:
<p style="margin-left:40px;margin-right:40px;">A lovely paragraph which will look like you have used the blockquote element around it.</p>
As you can see this method doesn't use selectors at all, it applies the styles directly to the element itself. Before I'll give you some resource I'll try to explain selectors. The explanation can be found within the CSS comments next to the examples:
div#main p{
/*
Selects all 'p' elements which are within a 'div' element, which has an
'id' attribute with the value of 'main'. The HTML could look like this:
<div id="main">
<p>A paragraph with a padding of 20px and a margin of 0.</p>
<p>A paragraph with a padding of 20px and a margin of 0.</p>
</div>
<p>A paragraph with the default padding and margin.</p>
*/
margin:0;
padding:20px;
}
h1,h2,h3{
/*
Selects all 'h1','h2' and 'h3' elements within the document. Every
element get the Arial font. If that font can't be found by the user of
the website, the user gets the Helvicate font and otherwise he/she gets a
sans-serif font. That is a generic font family.
Those three elements will also be rendered in small caps.
*/
font-family:Arial,Helvetica,sans-serif;
font-variant:small-caps;
}
Off course there are much more selectors and properties, but I will only describe them in my tutorials when these are necassery to replace certain unwanted X(HTML). If you want to learn more about CSS already, check the resources:
I can update this list, if you have one that is important; mail it to me using the contact form. Don't comment about such things please. More resources for the previous post are also welcome.
I hope those were deliberate mistakes: you're talking about XHTML and you select body and div with capital letters. CSS selectors in XML are case-sensitive...but you know that.
Sean, view source. It is a damn browser bug. Not visible in my copy of Mozilla though. I will remove the following from my style sheets (it should apply on the generated content, but apparently it doesn't):
code[class]:first-letter{
text-transform:uppercase;
}
Let's link up Chris Poole here.. :-)
OK, I see the problem--although I have to question the 'correctness' of it in this instance. Neither 'Css' or 'css' is really correct.
That was also a problem I was having with it. ::first-word{} anyone?
::first-word{}, anyone?
Yeah, this has been proposed some times at www-style.