Home > BlogTech, Computers and the Internet > Introduction to CSS ( CSS Tutorial )

Introduction to CSS ( CSS Tutorial )

June 8th, 2008

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">

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;



There are three kinds of selectors:

  • element
  • class
  • id

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;



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%;



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!

Categories: BlogTech, Computers and the Internet Tags: by
  1. charles
    June 8th, 2008 at 19:33 | #1

    Sensei, Thanks for the incisive and accessible tutorial. It gives me some confidence that even I might be able to make some of that stuff happen. I hope you’ll post more on CSS.

  2. Alex Kane
    June 8th, 2008 at 23:49 | #2

    Good tutorial. W3Schools is a great resource for this kind of thing as well.

  3. ykw
    June 9th, 2008 at 01:10 | #3

    microsoft css reference

    This fellow tested lots of font size code w/ many computers
    and browsers and has some info on that:



  4. Terry
    June 9th, 2008 at 17:12 | #4

    You do have a talent for condensing hard-to-understand technical jargon into a few paragraphs that us heathens can decipher. BTW, I like the birthday suit, Sachi has good tastes.

  5. Leszek Cyfer
    June 9th, 2008 at 19:27 | #5

    “Finally, we have id selectors. They begin with a pound sign (#)”

    Isn’t it a hash sign?

  6. Luis
    June 9th, 2008 at 23:38 | #6

    Charles: thanks, I will… as soon as I learn some more. But for the time being, I want to play around with what I’ve got and get used to it.

    Alex: looks OK, but I think the W3Schools site is a good example of one that doesn’t take into account a lack of knowledge. Their intro page gives a good overview of some basic concepts and reasons to use CSS, but the very next page, on syntax, jumps into specific stuff without the foundation of explaining what it is. Now that I know the foundation points of inline/internal/external, about defining selectors in the head or in style sheets, and about element/class/id, I can read that second page and understand what they are talking about. But without that foundation, I would have been stopped cold on that page, not knowing what they were really talking about. Maybe for some people it works, but I think the foundation is crucial for creating a context in which to understand the specifics they explain.

    YKW: unsurprisingly, the Microsoft page loses the beginner immediately. I think that’s a page to assist people who know the basics already. Either that or it is incredibly badly written. The other links are very specific to a problem which may be unresolvable… I may return to those pages later when I have gotten more CSS practice in.

    Terry: Thanks!

    Leszek: the generic name is “number sign”; in North America, it’s often called the “pound sign”; in Japan, it’s usually called “sharp” (as in musical notation); in most non-N.A. English-speaking countries, it’s called a hash sign. Interesting–thanks for cluing me in on that! Accordingly, I have changed the reference to “number sign,” which may be the most commonly accepted.

  7. Kitty
    June 10th, 2008 at 05:40 | #7

    As you learn more about CSS this site may help. I took a CSS class from Eric Meyer who has written many articles and books about CSS and knows everything about it.


Comments are closed.