CSS Syntax Basics

Let's start with the basic syntax of writing the style code:

This is the way your CSS will be written for linked and imported styles. The property and value portion is called the "definition". This whole declaration is called a "rule". Inline styles are written slightly different as you'll see shortly.

The selector part of this can be the HTML tag you want to re-define, a class you want to declare or an ID you want to use with a scripting language. The property is simply the thing you want to define about the tag you apply it to. Things like the font, the background color or picture, the color of the text your using, the border around that pretty picture your showing off or a whole myriad of things you may want to change. We'll get into each one later in these tutorials. And finally, the value is how you want the property changed. For example, maybe that picture border needs to be 5 pixels wide, blue colored and dotted. These are all values of the border property.

Now we'll put it to use. Let's do that picture with the border around it. To put a picture on a web page you need to use the HTML <img> image tag, so this will be our selector. The property we want to modify is the images border and the value we want to set for it is 5 pixels wide, blue and dotted. This is what the style rule would look like:

And this is what the picture will look like:

Notice that the selector "img" isn't inside angle brackets with CSS like it is in HTML. Also note that both the properties and values are inside curly braces. The property is separated from its values with a colon and the different values are separated with a space. The semi-colon isn't necessary unless you want to declare more than one property/value definition for a rule then it's necessary to separate them. No equal signs or quote marks here like HTML uses. This method of declaring a style requires it to be located in the head portion of the page (embedded) or in a separate document (external or imported).

Declaring a style this way is just great if you want every image on your page or your whole web site for that matter, to all have the same look. It's a great way to maintain continuity through-out your page(s). But what if you want to use a style in only one spot or just want to temporarily change the style in one instance. Then we can define the style right with the HTML tag (inline). Say we have one picture we want to have a double border 10 pixels wide in a red color. Then we'll declare it right in the <img> image tag for that picture. It would look something like this:

And the picture like this:

Notice that since the style is declared inside the HTML tag we don't need to declare a selector since the tag is it. We do have to declare the style with the conventional HTML way of using an equals sign and quote marks. But what's inside those quote marks looks just like our CSS way of declaring the property and value (definition).