HTML is a structural language (giving meaning to the content), and has minimal features to control the presentational style. Much of how particular HTML elements look is due to the browser, itself (many of the ways that we're accustomed to seeing certain HTML elements rendered aren't because the specifications describe how to render such elements, but are simply due to custom; one browser did it one way, and others followed suit). Over time some styling features have been added to HTML, but often without due thought. CSS (Cascading Style Sheets) were developed to address this issue by providing a “styling language,” one with more features than HTML ever had, to specify the desired layout of the page. Now, CSS is being used to replace styling features in HTML, rather than as “another” way of doing it (in the future, HTML won't do such styling, itself, it'll have to be done using CSS, or whatever ends up replacing it).
Though, note that this styling information (in CSS or HTML) is merely a “suggestion” to the browser, and can be ignored (as per the rest of the WWW authoring philosophy, of rendering a page to suit the needs of the viewer, more than anything else). For that reason (that it may not actually be used), you should not rely on styling to make your page coherent. The page should work, by itself, without any styling, and only use styling to improve the presentation.
As a simplistic explanation, most of the HTML elements are put onto the page as if they were a box containing their contents (imagine the old “cut and paste” method of designing newspapers, where headlines and articles are arranged as individual boxes of text positioned on the page). In some cases, they're objects which go straight onto the page, with other objects following them, or flowing around them. In other cases, they go into other objects on the page.
This is what's known as the “box model,” and is a major part of how CSS works. Most of the HTML elements modified by CSS have properties suited to adjusting the display of something in a box. They can have a border, margins, and padding, modifying the “box”, as well as properties modifying its contents, such as the line spacing, colours, fonts, etc.
CSS allows you to modify the look of standard HTML elements (either every instance of them, such as every paragraph element; or particular instances of them, such as some paragraphs or even just a single paragraph). It gives you the ability to specify such things as colouring, layout positioning, text styling, and so on. It's applied in addition to HTML; the page “content” is written using HTML (essentially in the same manner as normal), and the HTML page includes extra CSS information, or has a link to a separate CSS file which will be applied to the page, providing the custom styling, if possible.
It should be noted that CSS isn't just for visual effects, it can also be used with non-visual media, like aural or Braille web browsers.
CSS is formed as a set of “statements,” each statement defines a style rule (how “something” will be “rendered”). A style rule has a “selector” (to select which particular HTML element will be affected, e.g. a “paragraph”), and a “declaration block” (which defines what should be done to that element, e.g. make it “bold”).
selector {
property: value;
property: value;
property: value;
}
The “declaration block” is so-called (as a “block”), because it can contain several different “declarations” (e.g. you might make a paragraph, bigger, bold, and black with a blue background). i.e. It's not limited to just one style at a time, you can declare a block of properties to be modified.
Taking that step by step, CSS has a basic syntax of using a selector, to select which element(s) the style will apply to (e.g. the entire page or portions of it, such as; paragraphs, lists, tables, etc.), or to elements that you give a certain “class” to (e.g. you define certain paragraphs as being an “example” class, and set up a style rule specifically for how those “example” paragraphs will look), and pattern matching can be used as well to apply the style rule to a particular element which has certain other attributes (e.g. to paragraphs that are “centred”).
p {text-align:center}
This style rule applies to the “p” (paragraph) element. It'll be applied to all the “p” elements (every paragraph) on the associated page, and will centre the text within them.
p.example {text-align:right}
This style rule applies to any “p” element which has a class="example" attribute set. Any text in them, will be aligned to the right.
a[href] {text-decoration:underline}
This style rule applies to any “a” element which has an href attribute set (whatever it's set to). Any text in them will be underlined.
Following the selector, is a declaration block {enclosed in braces}. Inside that block are properties that will be modified (e.g. something's colour), and the value to be assigned to that property (e.g. the colour “red”), separated by a colon (e.g. color:red). Each property is closed off with a semi-colon at the end of the declaration (this isn't necessary with the last property in a block, as the closing brace takes care of it; but it's still a good idea to use one, in case you decide to add another property and forget to put the semi-colon in).
p
{
color: red;
background-color: white;
}
The selector was “p”, it had two properties “color” and “background-color“ that will be modified, and “red” and “white” were the values being used with those properties.
Some properties can have several values, the semi-colon always goes at the end of all of the values, not after each value.
p
{
border: thin solid red;
color: red;
background-color: white;
}
This rule has three declarations, one for the border properties, one for the foreground (text) colour, and one for the background color. Notice how the first declaration has several values for the property, they're separated by blank spaces and ended with a semi-colon. The absolute last semi-colon isn't essential, but it helps to avoid accidents if you modify the block later on.
CSS can be applied to a page in a few different ways:
You can include style classes within particular elements, to affect just those particular elements.
<p class="example">A bit of
colour!</p>
This paragraph element will be rendered using whatever rules your CSS applies to your custom “example” class; and so will any other element that you use the example “class” with. The actual style rule (that declares how it will look, is declared elsewhere; that could be on the same page, or from a different file).
You can include style rules within particular elements, to affect just those particular elements.
<p style="color:white;
background-color:blue">A bit of colour!</p>
Only this particular element will use the styling you suggest. This is really only suitable for when you only want to make a style change to one particular aspect of a page, and nowhere else. Else, you're in for a lot of typing as you do the same style codes, over and over. And could be a problem if browsers stop assuming that the default style language is CSS (there isn't a good way to specify the default type of styling language for a webpage).
You can include a set of style rules in the HTML head, for affecting that particular page.
<head>
<title>An example page.</title>
<style type="text/css">
body {color:black; background-color:grey}
h1 {color:white; background-color:blue}
p {color:yellow; background-color:green}
</style>
</head>
These rules will only apply to this page. This is really only useful for special situations, where you don't need to duplicate the same look across several pages, or you need to make pages self contained (so they can be downloaded, and used, with just a single file). Else you're in for a lot of typing as you replicate the styles across each different page, and a lot of editing if you change your mind about the look of your site.
You can set up a stand-alone style sheet that can be used over several different pages, giving you the advantage of having a central point to control all the styles throughout your website (giving you a much greater consistency of presentation, across the site; as well as giving you a way to modify the look of the entire site, from just one file). Each page that used it would have a stylesheet link to the CSS file, in their “head” element.
<head>
<title>An example page.</title>
<link rel="stylesheet" type="text/css"
href="/styles/default.css">
</head>
This is useful for sites with many pages. Each page just has a simple link to the style sheet (as per the example, above), and that one style sheet affects the look of every page. If your styling is complex, you've just made life much easier for yourself, by not having to write all of the styling onto each and every page.
You can use combinations of those methods. Such as, using an stand-alone stylesheet for most of the site, with individual styles on individual pages, as needed. The different styles will cascade, adding together as if there was just one large stylesheet containing the lot; and with any duplications, the last encountered style will override whatever was done before it (e.g. if you declared something to be “red”, then re-declared it to be “green”, it would be “green”).
Just as with HTML, you need to author your CSS in a valid manner, else you end up with style sheets that do unpredictable things. Also, according to the rules, CSS parsers have even less tolerance to mistakes than HTML parsers do; they're supposed to ignore broken statements, not second-guess what was really intended, and behave as if the broken statement doesn't exist, at all.
Also, just like with HTML, there are validation tools for CSS, so that you can have your stylesheets assessed by something more critical than your own eyes.
Unfortunately, browser support for CSS still isn't too brilliant. It's a newer thing than HTML, so it's still in its teething stage. Some of the older browsers don't support it very well, or are seriously broken in their support for it; as are some of the newer browsers (such as Microsoft's Internet Explorer; its CSS support is quite dire, amongst all of its other problems). There are still browsers which don't support it at all, and users can control what their browsers do with a site's styling information.
Hence it's well to remember that your stylesheets may be ignored by some browsers. So, as with all things on the WWW, don't “rely” on it to make your page coherent. Regardless of what you're doing, you should always aim to make your pages clearly coherent on the most basic of browsers, ensuring that anything fancy you do is “non-essential” to being able to use the page.