CSS: Cascading Style Sheets

CSS Properties

Now that you’re using HTML to define the content and structure of your documents, you’re probably itching to control how your documents look in a browser. This can be done with CSS,or Cascading Style Sheets. Using CSS you can specify CSS properties for the elements in your
document. Typical CSS properties include:

CSS Property

Effects

color

Using the "color" property, you can make changes the font color of the text appearing in the element.

font

Change the font and appearance of the text in an element using the "font" property.

background

The "background" property can be used to change the background of an element. The "background" property can be specify a uniform single-color background, or a background image.

border

The "border" property can affect the color, width and style of border of an element.

position

The "position" property allows you to control where an element is rendered on the page.

margin

The distance between the edge of an element and the elements around it is modified by the "margin" property.

padding

The distance between the edge of an element and the elements inside it is modified by the "padding" property.

height

Using CSS you can specify the height of a block level element, or some inline elements like <img>.

width

Using CSS you can specify the width of a block level element, or some inline elements like <img>.

overflow

If the content of an element is greater than its height/width, the "overflow" property can be used to determine if it should be visible of hidden, or if a scroll bar should appear etc.

You can find a more complete list of CSS properties at the w3schools page. The purpose of this tutorial is not to list and explain every CSS property, but to convey how to use CSS properly in conjunction with HTML.

The first way we’ll see of doing this is the wrong way to do it: using the "style" attribute.

You see that the format for CSS properties and their values is always the name of the property, followed by a colon ":", the property’s value, and finally a semicolon used to delimit the properties.

Instead of the "style" Attribute: the <style> Element

So why not use the "style" attribute? The "style" attribute results in the HTML document containing more than just content and structure. As a consequence, when you want to change the appearance, you have to comb through the entire document, changing "style" attributes. Let’s look at a better example: