Understanding CSS Tutorial Part 1 — Introduction and the Basics
This tutorial was written originally for a friend of mine, but can equally be used by anyone who wants to learn CSS. For some inspiration and a demonstration of what can be achieved using CSS, visit CSS Zen Garden.
First of all, before learning any CSS, let us to take a step back to understand the real basics and the background to what we are doing. Here is a top line view of what CSS is and what it is used for, without too much technical jargon.
A basic, static web page consists of, generally speaking, 2 parts:
- The bit that describes what content the page contains (the HTML)
- The bit that describes how this content is styled and presented (the CSS)
We are only concerned here with the second part, and we assume basic knowledge of HTML. CSS is just plain text so can be written in Notepad or similar. However, it is easier to use a (free) tool such as Visual Web Developer Express to write and edit CSS because they offer hints, and error checking amongst other things. At a basic level, CSS consists of 3 basic principles:
- Selecting an HTML element to style
- Apply style properties to that element
- Comments
Now that we understand the basic principles, let’s see a simple example. Take a div with an id of ‘styleMe’, the following CSS gives the div a background colour of orange and a 1px grey border around the top, right and left.
<div id=”styleMe”>This is the content of the div</div>
<style type=”text/css”>
/* This is a selector (gets the HTML element with an id of ‘styleMe’) */
#styleMe
{
/* These are the style applied to an HTML element with an id of ‘styleMe’ */
background-color: Orange;
border: 1px solid #333333;
border-bottom: 0px;
}
</style>
This bit of basic CSS is used to style a HTML element, but without the context of a complete example, it is difficult to really see how to apply this CSS we have written. This example (download it here) shows the 3 ways of adding CSS declarations to an HTML page:
- Writing the CSS in an external .css file to be imported. This is the most common method.
- Writing the CSS within a style element directly in the HTML page
- Writing the CSS within a style attribute on an HTML element
Now that you have a working example, you can experiment by applying different style to different elements, as long as you follow the same pattern used above. In part 2, we will look at comments, the difference between id’s and classes, and more advanced selectors.
And finally, if you don’t know what CSS stands for, then I won’t tell you here unlike most tutorials as it won’t make sense until the last part…
