I’m teaching an evening class this semester on web page design, and I hope to get around to CSS this time. Of course, it helps to actually know CSS–which I didn’t–so I dove in recently. Now, I’ve known about CSS for years, and got slightly familiar with it five years ago when I started this blog–it was necessary to customize the blog’s appearance. But back then, it was mostly just taking a pre-made CSS style sheet and altering numbers and image URLs until I got what I wanted. I didn’t learn how to actually write CSS myself.
So I started looking around for an acceptable tutorial on CSS–and that’s not easy to do. Most tutorials for stuff like this which you find on the web are terrible. Either they’re written in so disorganized or unclear a fashion that you can’t understand it, or the writer assumes you know a lot already without even mentioning what you need to know before reading the tutorial. It’s incredibly helpful to find a tutorial somewhere that is understandable, and where you don’t quickly run into something leaves you completely befuddled. I found a few sites that seemed fairly good, but none that explained everything to my satisfaction. I had to go to several sites to find enough explanations that told me what I needed to know.
So here’s my own try. For this, I will assume that you know basic HTML–which you have to in order to get started with CSS, frankly. (If you don’t know HTML but want to, here’s what I use to teach it in my college course.) If you know about tags (commands) and attributes, basic rules, and have an HTML vocabulary that allows you to make a basic web page, then this tutorial on CSS will be understandable–I hope. Let me know what areas might trip you up.
If you already know or are not interested in CSS, just skip over to the next post. Sorry about the length of this post, but I didn’t want to hide the lesson under the fold.
CSS is a kind of coding related to HTML. It allows for much greater control of the formatting of a web page. Regular HTML allows for some format control, but it is very limited, like using a really basic, bare-bones text-editing program. CSS allows for much finer control, like a more advanced word processing program.
There are three ways to add CSS to a document:
- in-line
- internal (embedded)
- external (as in a style sheet)
In-line CSS is CSS coding which is independently inserted into an HTML tag. For example:
<p style="color: red;">This text will be red.</p>
will result in the text turning red. As you can see here:
This text will be red.
The CSS is in the tag attribute "style." There is no need for other CSS code to be placed anywhere; the code is independent.
Internal CSS is where you define certain styles within the head of a web page, and then refer back to those styles within HTML tags throughout the page. The value here is if you want to apply the same style in many different points in your document, but don’t want to insert the CSS code again and again at every point you need it.
External CSS is where you define your styles in a separate document called a style sheet. This allows you to define the styles for many web pages, all at once. Instead of defining the styles again and again in each page’s header, you define the styles once in the style sheet. Every web page links to the style sheet once in the head. After that, references to these style definitions in the web page code will draw from the style sheet’s definitions. This way is best for maintaining a single style over an entire web site (such as in this blog).
In this tutorial, we will begin by using internal CSS. This will allow us to later take this knowledge and apply it to in-line or external CSS.
Next, we need to understand selectors. In internal CSS, you put them in the head of your document; in external CSS, you put them in your style sheet. They define a style which can be applied in an HTML tag in the body of a web page.
Since we are doing internal CSS, then within the head command, you will add the command:
<style type="text/css">
</style>
And then within that command, you will place the selectors. Each selector begins with a name followed by properties inside curved brackets; the properties include declarations, each which take up a line and end with a semicolon; each declaration has a property followed by a colon, and then the value. Here’s what it could look like:
<style type="text/css">
selector {
property: value;
property: value;
property: value;
}
selector {
property: value;
property: value;
}
</style>
There are three kinds of selectors:
Following is an explanation of each type of selector. (Note that there are more than three types; we’re just looking at the main three.)
An element will change the effect of an HTML tag. For example, a <blockquote> command in HTML will have the effect of indenting text by a half inch in a paragraph separate from the preceding and following text. If, however, you define an element style for the <blockquote> command in CSS, then every use of that command will result in different effects. For example:
blockquote {
background-color: lightblue;
}
If you add this style, then every <blockquote> you add to the web page will have a light blue background, no exceptions. For example:
Here’s what that example might look like in practice.
A nice feature of elements is that they allow you to create your own HTML commands. If the element you create already exists (for example, "blockquote") then the style you define will be added to the command’s existing properties. However, if you create an element which is not already an HTML command, then it becomes a new command with the properties that you define. For example:
blah {
background-color: lightblue;
color=darkblue
}
This will create the command <blah> which you can then use to apply the styles you defined. However, it should be noted that some CSS styles will not work with all tags; for example, text-indent CSS properties will only work with existing block HTML tags like <p> or <blockquote>. I don’t know (at present, at least) of any way to create new block-level tags.
Next, a class allows you to add styling to a variety of HTML tags, or to some tags but not all instances of them. For example, what if you want some of your blockquotes to have light blue backgrounds, but some not? In such a case, you would introduce this selector:
.blueback {
background-color: lightblue;
}
Note that the class selector begins with a period.
Here, you have introduced a new class called "blueback." You can call the class anything you want within the naming rules (to be safe, keep it one word, lowercase, avoid punctuation or symbols). You then activate the class by adding the attribute class="classname" (no initial period) to any command that can use it. For example, you could add this to the <blockquote> command, the <em> command, the <b> command, and so forth.
At this point, however, you might wonder if it’s almost as much work to add the selectors and the tag attribute than it is to just add the CSS directly within the tag. But this example only has one declaration, which is "background-color." You can add as many as can apply, for example:
.blueback {
background-color: lightblue;
color: red;
font-weight: bold;
font-size: 16pt;
}
With that many declarations, it is much more economical to simply add the "class" attribute to any particular command.
Finally, we have id selectors. They begin with a number sign (#) whereas classes begin with a period (.). They are almost exactly the same as class selectors, except that they are supposed to be used with only one tag per page, instead of with many tags. This is for special cases where the position of an object on a page, as defined in CSS, is unique and does not exist elsewhere. However, since the class selector can do the same thing, id selectors are in a way redundant–but are still widely used anyway.
Now, for those of you who enjoy learning a few quick tricks now and then, here’s a fun one. Have you seen web pages where stuff changes when you pass the mouse over it? Text changes color, size, etc.?
This can be accomplished by duplicating a selector, adding ":hover" to the name of the second version of the selector, and changing the declarations in the hover version to be what you want. For example:
<style type="text/css">
.blueback {
background-color: lightblue;
color: red;
}
.blueback:hover {
background-color: lightgreen;
color: blue;
font-size: 120%;
}
</style>
The above will take whatever commands it is applied to, add a blue background and red text–except when you hover the mouse over the text, whereupon it will take on a green background, and the text will turn blue and slightly larger. You will notice that this effect is used in this blog when hovering over links. It changes post titles from black to red, and in-post links from plain to underlined.
However, you can use the alternate :hover effect almost anywhere you can imagine, to whatever effect is possible. Try hovering the mouse over this paragraph, for example.
Naturally, there is a lot more to CSS, but what we have covered up to this point will get you a fairly long way. Of course, one of the most important points in learning a new language is vocabulary. Above, I have covered grammar and syntax–but to really use CSS, you must be familiar with–or at lest possess a cheat sheet–showing a lot of the possible properties and values. So I have created an independent cheat-sheet page which you can print out and use whenever you are coding CSS. It doesn’t have all properties that are out there, but it’s a long list with most of what a beginner would want or need.
In a later post, I will wrap up by explaining how to take what we’ve learned here and apply it to in-line or external CSS formats.
I hope that this tutorial serves to introduce you to CSS in as simple, clear, and useful way as possible. If you’re in my target audience–HTML coder who doesn’t know CSS very well yet–and you tried out this tutorial, please leave a comment to let me know how it achieved its goal. If you had a problem somewhere, please let me know where it was and what the problem was. Thanks!
Stumble it!
Windows Vista just took another hit: 