Lunchtime Consultation: How Do I Get Started With CSS?
A friend of mine just IMed me asking how to get started with CSS. Now there’s a loaded question if there ever was one.
Sometimes when you become so immersed with something, you just have no idea how to begin to explain it to someone. Luckily, my friend (we’ll call him John, because his name is John) did have a specific example to start with. He wanted to get all the fonts on his site to be 12pt. He’s using the default font sizes, but on modern browsers (to John, a modern browser is anything beyond 1.0) the text was looking too big (like, 16pt).
After a “but 16pt font sizes are soooo Web 2.0″ joke, I figured his example would be a good place to start. I told him the quickest way to get his fonts at 12px would be to put this in his document’s <head>:
<style type="text/css">
<!--
p {
font-size: 12px;
}
-->
</style>What that would do is take everything on the page that’s in a <p> tag and make it 12 pixels tall. Mission accomplished, no? Well, John has <font> tags everywhere. And nothing is in a paragraph tag. And this needs to span across multiple files.
Okay, that’s a few things. So, first things first: let’s get this style in an external style sheet.
Within the <head> of each page, John will need to place:
<link href="css.css" rel="stylesheet" type="text/css" />
What that does is link to an external style sheet that all pages can share called css.css.
Unfortunately for John, I’m gonna make him change his <font> tags to header tags (remember them? <h1> to <h6>?)
John’s web site title is currently an image. We’ll work on changing that in the future, but let’s reserve the <h1> for that. He has a nice green header that is a perfect <h2>. I see some bold text that is just saying <h3> to me. Beyond that, we have paragraphs. Oh, and a sidebar. We’ll get to that in a bit, though.
So, for John’s external stylesheet, I’m seeing this:
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #338866;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
}The paragraphs are 12pt Verdana with the <h3> being just a bold version of the paragraph. The <h2> is a bit bigger and… greener.
Now, this will also make his code much cleaner and easier to understand. I understand some consolidation can be done with the styles here. But this is just for example’s sake. This isn’t bad for a lunchbreak consultation.
John has a sidebar with some smaller gray text. He can handle this a couple of different ways. He could set these as paragraphs that have a “class” style associated with them. So, this would override our default 12px black Verdana paragraphs.
Or, we could make it a bit more semantic by adding a <div> tag for the sidebar and then putting the text in another <h3> (for the bold header) and <p> for the remainder of the text. I like this because it will allow us to visually differentiate the sidebar content (you’ll see) but it makes the markup structure consistent.
So, around the sidebar content, let’s put:
<div id="sidebar">
(sidebar content goes here)
</div>Now, if we set the code in <h3> and <p> tags, we’ll be all set. Well, actually what will happen is we’ll inherit the styles that we already set for those tags. What we can do is set new styles for <h3> and <p> that only appear in the “sidebar” div. This is how:
#sidebar h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #666666;
}
#sidebar p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #666666;
}And there it is.
So, John’s site still needs updating in other areas to make it more standards compliant. First of all, the table layout has to go in place of floats. That, and the image-based navigation can be easily recreated with an unordered list and some styling. But this is a good first step.
Everybody should be using CSS for text formatting. CSS layout is a little trickier (especially if you are a table whiz), so I’ll cut him some slack there.
For now.