CSS BASICS - OBJECTS, THEIR PROPERTIES AND STYLE

First, everything on a web page is treated as an object, e.g. graphics, text, tables, and even the entire web page that you see on the screen. It is exactly like looking around you in the room you are in. Objects are everywhere, the floor, ceiling, books, table, chair, floor, everything is an object.

All objects have properties. Color, height, width, depth, edges, background (the underlying color), etc. Almost all objects you see can have their properties modified. You can change the color of a wall, ceiling, floor, or change the shape, which might cause you to destroy the object. You can change one, two, three or more properties at a time. Just like painting a wall, you can change just the object's color but not the material it is made out of, e.g. from plaster board to wood.

The objects on this page right now, the text, the background color, the graphics, etc., have properties! And these properties can be controlled by you as you construct your web page. All you have to learn is how to control the object's properties. This is what this tutorial will teach you to do.

An object's properties are denoted in the following way:

property1:style1; property2:style2; property3:style3; .......

An example would be color:black; height:25; font-family:arial;. When referring to and specifying an object's properties it is not necessary to name to them all, only the ones you wish to use. For example, to change the color of this text from black to blue I need only use the text property, color. I changed the text color using the HTML tag, <span>, which you will learn about shortly along with another HTML tag, <div>.

You probably know that you can also change to color of text by using the HTML tag,

<font color="blue">My text here.</font>.

Many HTML tags can have their properties defined with CSS within the tag, properties such as color, height, font type, etc. The properties are denoted by using the style=".." format, e.g.

<HTMLtag style="property1:style1;property2:style2;....">

<p style="margin-left:50;margin-right:50;text-indent:50;color:blue"> is the code that I used in this paragraph. The left and right margins, properties of the Paragraph tag, were modified along with indenting the first line of the text.</p>

In the above use of the paragraph's style (properties) I used the </p>, the HTML tag for the end of the paragraph. This was not necessary as another, normal paragarph tag, <p>, will have caused the margins and text color to return to normal.

There is one interesting aspect of CSS. The object, Paragraph, is part of the page and, thus, it inherits any properties of the page, i.e. the page margins! The page margins are already set for the left side with 80 pixels on the left side and 15 pixels on the right side. So when the <p style="margin-left:50;margin-right:50"> is used, the margins it sets within this page margins will be, i.e. 80+50=130 and 15+50=65.

A web page is an object and since it is the "top object" it is called the parent and all objects within the web page are called the child. When working with objects, unless otherwise noted, a child inherits the properties of the parent, much like you inherit genes from your parents. And a child can also be a parent! For example, the <P> tag is a child of the page but it can have a child itself, perhaps colored text.

This will be the only time you will see the words, parent and child as understanding object oriented program, which is where these terms come from, is a very complex subject which I don't discuss anyplace on my site.

THE KEY POINT TO REMEMBER!
To set the properties of certain HTML tag we use the:

<htmltag style="property1:style1;property2:style2;property3:style3;.....">

Example: <p style="margin-left:50">