Lesson 2 : First Look at some CSS code

December 13, 2008

Basic Structure of a CSS Web page
Before we dive in and start writing some HTML and CSS files, let's first quickly look at the basic structure of a website. We are all familiar with the look of websites as we surf around the internet, but it's not entirely obvious how our favorite web browser displays a website. Most people probably know that the web page files that are stored on a server don't actually look like the web pages that our browser displays. How does the browser know what to display? and what are the actual files that represent web pages?

We'll answer these questions in a moment, but first a disclaimer: Many types of websites exist, but this tutorial is only going to deal with HTML and CSS style websites. Things such as Flash, Java, PHP, and countless other technologies can be used to develop content on the internet, but these are not within the scope of this blog. From here on out we are going to assume that all websites on the internet are developed using HTML and possibly CSS.

With that being said, we can get on to answering the questions. Each and every web page is the product of an HTML file that has a file type extension of ".html" or ".htm". (For an explanation of why there are two different extensions try googling "html vs htm"). HTML stands for Hyper Text Mark-up Language...which doesn't really matter at this point. What matters is that an HTML document has a very specific syntax that defines the content of a web page. When a web browser comes along and reads an HTML file, it then knows what to display to the user. This tutorial assumes a small amount of prior knowledge of HTML, but most likely we will just learn as we go along.

So, we know that each web page is really an HTML file sitting on a server somewhere, so what is this whole "CSS" thing all about? Well, like we talked about in the introduction, HTML defines the content that goes on a web page, and CSS defines the look and presentation of that web page. How does CSS do this? Well, it can be done multiple ways, but in this tutorial we will focus on external CSS files that are linked into HTML files. This allows us to define a style in one CSS file and have many different HTML files link to it.
Note: If you are unclear on this point don't worry, we'll have plenty of examples and as you work through them the structure of websites will become clear.

CSS Syntax
Alright, now that we know a little general knowledge, let's look at some CSS syntax.
First an example:

body {color-background: black;}

So it probably doesn't take much CSS knowledge to know that this would make the background color of the body black, but a simple example is good for illustrating the three parts of CSS syntax.

selector {property: value}

selector - the HTML element/tag that you wish to define.
property - the attribute that you wish to define.
value - the value given to the property.

A few notes about this basic syntax. If the value is more than one word you should put quotation marks around it. Also, you can define multiple property:value pairs for each selector. You must put a semi-colon between every pair. To make this more readable, each property:value pair is usually placed on it's own line.

p
{
text-align: right;
color: yellow;
font-family: arial
}

Now all the text within the tags in the HTML file will be right-aligned, yellow, and of the arial font type when displayed by a web-browser. This syntax is not very difficult, it's just a matter of remembering which tags/attributes/values to use.

Well, that wraps it up for this lesson. Next time we'll look at where this CSS code actually goes, and we'll make our very own first CSS web page.

Thanks for reading,
Michael