CSS Tutorial

Introduction to CSS

Before beginning with CSS, you should be comfortable with either HTML or XHTML. These languages are usually interwoven with CSS.

Originally, HTML was designed to define elements in a document or web page. For example, a paragraph would be known as <p>, a link would be <a>, and so forth.

As internet browsers kept adding more formatting tags (such as the <font> tag), it became difficult and cumbersome to style a web page due to the lack of a single coherent standard. CSS (Cascading Style Sheets) were introduced by the World Wide Web Consortium (W3C) to remedy this problem.

CSS is supported by all major browsers.

What Are Style Sheets?

Style sheets are separate documents that define how our HTML elements should appear. For example, should all text in tables be presented as a blue font color?

Style sheets allow us to centralize the styling elements of our entire website into one document. This can save a lot of work when you want to change your layouts, fonts, and more.

External style sheets are usually saved in .css format.

CSS Tutorial

The “Style” Attribute in CSS

The “style” attribute is an HTML attribute often used in conjunction with CSS syntax.

The “style” attribute can be applied to almost HTML element from the <table> to the <body> tag.

The basic syntax for the style attribute is:

<div style="">

In our example, we used the “div” HTML element. Once again, the “style” attribute can be applied to any HTML element — not just the “div” element.

Inside the quotation marks for the style attribute, we place any CSS code.

Here’s another example:

<div style="font-size:12pt;">

This time, we used a little bit of CSS code (which we will explain later in the tutorial). Notice we ended with a semi-colon. This is used to separate CSS statements. We can apply multiple CSS statements in one “style” attribute by separating them with semi-colons as follows:

<div style="font-size:12pt;font-weight:bold;">

The individual CSS code will be explained later in the tutorial.

The “style” attribute can be used on nearly every HTML element. However, the “style” attribute is not recommended. It’s better to use an external style sheet to store and centralize all of your CSS code. A single style sheet can reduce page load times and make it easier to manage your website.

CSS Syntax

We will now begin to use external style sheets. To start with CSS, just create a file with the extension “.css” to begin.

CSS syntax is composed of the selector, the property, and the value.

It’s usually written in this form:

selector {property: value}

The “selector” is the HTML element you want to modify. This can be the <body> tag, the <font> tag, and more. The “property” is the attribute to modify and the “value” is the modification applied to the property.

Let’s use a real world CSS example:

font {color:#000000}

#000000 is the hexidecimal (hex) code for the color “black.” Please refer to our HTML text formatting tutorial for a more in-depth explanation on hex codes.

The above CSS code will turn all text enclosed in the <font> tag to be colored black.

We can also modify multiple attributes at once by separating each modification with a semi-colon. Here’s an example:

font {

The above code will not only apply the color “black” to all text enclosed in the <font> tag, but it will also apply the “Tahoma” font.


Using CSS, we can apply styles across multiple HTML elements all at once. For example, you may want the h1, h2, and h3 tags to all carry the same modifications. Here’s how we can accomplish this:

h1,h2,h3 {

We simply have to separate the HTML elements with a comma in the selector.

Comments in CSS

Sometimes we may have a large amount of CSS code and would like to add reminders for ourselves when we come back to edit the CSS code later. Comments are handy for this. In CSS, comments begin with /* and end with */.

/*This is a comment*/
font {color:#000000}

CSS comments can span multiple lines as long as they are between the /* and */ characters.

Classes in CSS

In the previous chapter, we discussed how we can apply modifications to a HTML elements by using CSS. However, what if you apply sitewide attribute modifications to a tag such as the <p> tag, but on certain <p> tags, you don’t want those CSS modifications applied?

CSS classes allow us to apply CSS modifications to only the elements we choose.

To utilize classes, we simply have to type out the element we want to modify followed by a period and the name of the class. This might be confusing so let’s give you some code to look at:

p.red {color:#ff0000}

The class name is “red.” You can use any name you want for the class name. This class can only be used with the <p> element. It will apply a red text color to any text inside a <p> element using the “red” class.

So how do we declare a <p> element to use the “red” class? This needs to be done in your HTML code:

<p class="red">This text will be colored red.</p>

You can even create classes that are not restricted to a single HTML element. If we use our example above, we may want to simply add the class=”red” attribute to an HTML tag every time we want our text colored red. However, it will not work unless it’s for a <p> tag. If we want it to work for any tag, we simply remove the HTML element from our CSS code:

.red {color:#ff0000}

Now we can only the “red” class to any HTML tag such as the <font> tag, the <body> tag, and so on.

It’s important to distinguish between a CSS class and a CSS ID. A CSS class can be used multiple times throughout a document. A CSS ID is similar to a CSS class, but it’s only to be used once in a document. We will explore CSS IDs in our next chapter.


View more posts from this author