In this post I will go over the basics of CSS. In a nutshell CSS can not be used by itself. It is a markup language that allows you change the characteristics of HTML tags like “p”, “h1”, “h2” etc. You can easily change the color, size and position without making your HTML code look muddy. CSS also allows you to re-use your styles accross multiple pages.

What is CSS?

CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles are normally stored in Style Sheets
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files
Multiple style definitions will cascade into one final definition.

Styles Solved a Big Problem

The original HTML was never intended to contain tags for formatting a document. HTML tags were intended to define the content of a document, like:

<p>This is a paragraph.</p>

<h1>This is a heading</h1>

When tags like <font> and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites where fonts and color information had to be added to every single Web page, became a long, expensive and unduly painful process.

To solve this problem, the World Wide Web Consortium (W3C) – responsible for standardizing HTML – created CSS in addition to HTML 4.0.

With HTML 4.0, all formatting can be removed from the HTML document and stored in a separate CSS file.

All browsers support CSS today.

CSS Saves a Lot of Work

Styles sheets define HOW HTML elements are to be displayed.

Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single CSS document!

Multiple Styles Will Cascade into One

Style sheets allow style information to be specified in many ways.

Styles can be specified:

inside an HTML element
inside the head section of an HTML page
in an external CSS file

Tip: Even multiple external style sheets can be referenced inside a single HTML document.

Cascading order – What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the highest priority:

Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

*NOTE* If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!

My first example is going to rely on 2 files.

index.html
default.css

You can name these files what ever you want but please make sure to update the HTML code to always point to the .css file.

index.html contents

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>This is a test</title>
<link rel=”stylesheet” type=”text/css” href=”default.css” />
</head>
<body>
<div>
<div>
<h1 id=yellow>Header</h1>
</div>

<div>
<h1>Body</h1>
</div>

<div>
<h1 id=yellow>Footer</h1>
</div>

</div>
</body>
</html>

default.css contents

/* CSS Document */

#yellow
{
color:green;
}

h1
{
font-size:50pt
}

.main_header h1, .main_body h1
{
color:red;
text-align:left;
}

.main_header h1
{
color:blue;
}

Can you guess what the output will yield? See below for what the output will closely look like.

Header

Body

Footer

You might be wondering why:

I thought items further down the css file have higher Priority then items higher on the page.
<h1> tag under main_header is not “RED”
<h1> tag under main_header is not “BLUE”
Why are all the <h1> tags all the same size?
Why is “Header” and “Footer” green? Shouldn’t they be yellow?
What’s the difference between “IDs” and “CLASSES”

Why the <h1> tag is not RED or BLUE.

There are two main CSS types. “IDs” and “Classes”. You can tell which items in a css file are id’s by looking for “#”. The ID type is has a higher priority then classes. Even if a CLASS comes after an ID, The ID will always win out on the characteristics that it wants to change.

Why are all the <h1> Tags the same size?

The reason why all the tags are the same size is that I created a “h1” class all by itself. This type of class will effect all <h1> tags in the page the same way unless you change the characteristics of the item with a “id” or a “class” further down the CSS page.

Why is the “header” and “Footer” green?

The reason for this is even though I called the ID “yellow”, I made the text color green. Now you might say “why the heck did you do that?”. I did it to prove a point. The title has no correlation to the properties of the item.

What is the difference between “IDs” and “CLASSES”?

The difference between IDs and CLASSES are “CLASSES” tend to be used to make general changes to specific HTML tags and can be only used once. ID’s have higher priority then CLASSES which make them good at over written the default settings the CSS classes. ID’s can be used several times on a page.

Interested in learning more about CSS? Here is a few good links:

Intro to CSS by w3Schools

How to format CSS files

The basics of CSS explained