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

Lesson 1 : What is CSS and What You Need to Succeed

December 9th, 2008

What is CSS
CSS is an acronym for Cascading Style Sheets. These are used to define how HTML elements are displayed on a web page. They are made to control all things that have to do with the style of the web page, but not the content.

HTML should be used to control the content. Certain HTML tags are used to define paragraphs, headers, tables, etc. However, HTML tags were never intended to be used to define the style of the information. Tags that define font, color, background, etc. make it more difficult to separate the content of a web page from the style of a web page. CSS was introduced to solve this problem. CSS and HTML work together to display a web page. HTML contains the content of the web page, and CSS defines how that content should be displayed. Using CSS and HTML instead of using only HTML can save a great deal of time and effort.

Example: You have a website with 50 pages. Originally you develop your website with a particular style/template, but later you decide to change the style of the entire site. If your whole site was written in pure HTML, this would require that you manually edit every single one of your 50 pages. However, if you followed the advice of this tutorial, and many others like it, and wrote a single CSS document that defined the style of your entire website, the change would only require the editing of one document instead of fifty.
Another advantage of learning CSS: I'm not entirely sure about this, but I think that there are certain things that can be done in CSS that cannot be done in plain HTML. I guess we'll see as we go along.

CSS files are plain text files that have the extension ".css". All major web browsers support CSS, and it's development is handled by the World Wide Web Consortium or W3C.

What You Need to Succeed
One of the many nice things about CSS is that you don't need any expensive software to use it. All you really need is a simple text editor and a web browser. Everyone should already have these things. A web browser is what you are using to view this blog. Some popular examples are Internet Explorer or Firefox. Everyone should also already have a text editor. Windows comes with a program called "Notepad" that will serve as a fine text editor. However, it is important to note that word processors such as Microsoft Word should not be used in these lessons. Also, many free text editors are available online if for some reason you are not satisfied with the standard notepad program. My personal favorite is an editor called "Notepad++".

That's all we need to get started. Next we'll be looking at the basic structure of a web page and a sample web page made of HTML and CSS.

Thanks for reading,
Michael

Introduction

December 9th, 2008

This blog is a tool for assisting with the task of learning CSS and how to design a website. However, before we get started with the learning process I'd like to explain a bit about myself and why I'm creating this blog.

My name is Michael Patterson and I am currently working on a degree in computer engineering. I would like to learn how to create a professional looking website, so I decided to try and learn CSS and maybe pick up some more HTML along the way. I've realized over the years that the best way to learn something yourself, is to teach others about it. If you are able to teach other people to the point that they understand a concept, then you must surely understand the concept yourself. To this end I have created this blog. I hope that by teaching you, the reader, about CSS and web design, that I will gain an excellent understanding of this material myself.
Note: I realize that it's possible and even likely that no one will really use these lessons, but I'm very confident that by taking the time to make them I will remember the material that they cover.

Finally, I'd like to point out that at this point I know almost nothing about CSS and very little about HTML. I will be creating these lessons as I learn the material myself, so hopefully these will be good lessons for beginners, since they will be written by one. Also, with that being said, please point out any mistakes or misunderstandings that you find in these articles. I'm going to be learning from many resources I found online through a simple google search.

Alright, without any further ado, let's dive in and start learning.

Thanks for reading,
Michael