An Introduction To Cascading Style Sheets (CSS)
According to its creators, cascading style sheets “is a simple mechanism for adding style to web documents.” The goal of this and future tutorials is to apply the power of CSS to help you understand CSS. So what exactly is CSS anyways?
- CSS is a standard layout language for the web. What that means is it controls colors, fonts, size, and placement of elements and images.
- CSS is meant to replace table-based layouts, frames, and other presentational hacks.
- CSS helps separate style from content, making the web more accessible and usable for everyone.
There are advantages to using CSS instead of tables—or using CSS to replace non-standard hacks, such as extensions to the font or body tag. CSS provides the following benefits:
- CSS reduces the amount of time spent updating and maintaining your website.
- CSS increases the accessibility, and ultimately the usability, by allowing for fewer, or no, tables and invalid markup.
- CSS offers a more professional appearance, giving you access to things like line-height, borders, padding, margins, and letter-spacing.
A basic style sheet starts out with a <body> declaration for the font-family, font-color, and background-color or image for a page. Any “child” of the body declaration, such as <p> or <blockquote>, will use the same fonts and colors unless the style sheet says otherwise. This passing of characteristics from “parent” to “child” is known as inheritance. Here’s an example of a basic stylesheet:
<style type="text/css">
body {
font-size:12px;
font-color:#000000;
font-family:Arial, sans-serif;
background-color:#ffffff;
}
</style>
CSS tends to be a quite obvious with its wording. You can tell that the above code is going to set the style of font for the body of the page, including all the “child” elements. CSS allows for shorthand, and here’s another way of writing the same thing:
<style type="text/css">
body {
color:#000;
font:12px/16px Arial, sans-serif;
background:#fff;
}
</style>
They both mean the same thing, and a lot of properties in CSS have shorter ways of writing things. The first thing you’ll notice is that the color code is shorter. In CSS, any character that repeats itself can be broken down in its simplest form. Let’s say the color code was #ff0000, you could just put #f00 instead. It repeats each character twice before moving on to the next one.
You should also note that there’s no need to type font-color, as color works in the same way. The second thing is the font property itself. I went ahead and added a property that wasn’t in the first example of code. It’s the line-height, or the amount of space between each line. Sometimes this is good to use to make it easier to read a page. The default line-height is usually 14px, but you can experiment to find a spacing that looks good to you.
The last thing I want to point out is the sans-serif after our initial font. It’s good practice to include a fall-back font in case a user doesn’t have that particular font installed. There are eleven core web fonts that are safe to use. Any other “special” font probably won’t be seen, which is why you specify a secondary font in case a user doesn’t have it. To recap, the shorthand version of the code breaks down like so:
[font-size]/[line-height] [font-family]
That about covers today’s tutorial. You should know have a basic understanding of what style sheets are and what they are used for. Stay tuned for the next tutorial, as I’ll work my way through CSS and explain how to do other things.
November 16th, 2006 at 09:51 am
Cool. It’d be nice if you had a tutorial on replacing tables with CSS, as I suck at that.
November 16th, 2006 at 01:20 pm
That’s a good idea, D. I’ll try to come up with a simple tutorial explaining out to do that, and try and finish up the rest of the CSS tutorials.