What Is CSS?
Many people just getting to know CSS think of it as a fancy way of handling HTML properties such as text formatting and background images--and for small-scale examples on simple pages, that's largely true. You can manipulate many of the properties that CSS affects through pure HTML instead (though not as well), and if you're just looking to change the font size on your page, CSS is actually more difficult to use than HTML.
What makes CSS worthwhile is the number of design options it opens up for you that are difficult--or impossible--to accomplish with HTML alone. HTML gives you just a handful of text properties to manipulate; CSS gives you properties such as color, direction, letter-spacing, line-height, text-align, text-decoration, text-indent, text-shadow, text-transform, vertical-align, white-space, and word-spacing. And I haven't even gotten to the nontext options.
For a full list of CSS properties, you can check out a handy glossary on Dochub, but for now let's look at just two of the more interesting ones. Since we couldn't actually write HTML and CSS code in a Web page without causing trouble for the PCWorld CMS, we've taken the liberty of providing images of some example code and what it looks like on a live page.
For starters, CSS allows you to add and modify a border for any element on a page. The following code produces a solid, 5-pixel-wide red border around the whole paragraph.
CSS experts will note that there is a much shorter way to write this code (they'll also frown on writing the code inline at all), but it provides a good example of CSS formatting.
You write inline CSS in the tag itself, using the style attribute. Basically you write your HTML tags as usual, and then add CSS in the format "css-property: property-value;" right inside. Any arbitrary CSS can go inside the style attribute. For instance, if we wanted to add a drop shadow to that paragraph in addition to the border, we'd change the code to the following line.