What can I do with CSS?

CSS(Cascading Style Sheets) is a style language that defines layout of HTML documents. For example, CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions and many other things. HTML can be (mis-)used to add layout to websites. But CSS offers more options and is more accurate and sophisticated. CSS is supported by all browsers today.

What is the difference between CSS and HTML?

HTML is used to structure content. CSS is used for formatting structured content.

Back in the good old days when Madonna was a virgin and a guy called Tim Berners Lee invented the World Wide Web, the language HTML was only used to add structure to text. An author could mark his text by stating "this is a headline" or "this is a paragraph" using HTML tags such as <h1> and <p>.

As the Web gained popularity, designers started looking for possibilities to add layout to online documents. To meet this demand, the browser producers (at that time Netscape and Microsoft) invented new HTML tags such as for example <font> which differed from the original HTML tags by defining layout - and not structure.

This also led to a situation where original structure tags such as <table> were increasingly being misused to layout pages instead of adding structure to text. Many new layout tags such as <blink> were only supported by one type of browser. "You need browser X to view this page" became a common disclaimer on web sites.

CSS was invented to remedy this situation by providing web designers with sophisticated layout opportunities supported by all browsers. At the same time, separation of the presentation style of documents from the content of documents, makes site maintenance a lot easier.

Which benefits will CSS give me?

CSS was a revolution in the world of web design. The concrete benefits of CSS include:

• more precise control of layout;
• apply different layout to different media-types (screen, print, etc.);
• control layout of many documents from one single style sheets
• numerous advanced and sophisticated techniques.

CSS Classes

The class selector allows you to style items within the same (X)HTML element differently. Similiar to what I mentioned in the introduction about inline styles. Except with classes the style can be overwritten by changing out stylesheets. You can use the same class selector again and again within an (X)HTML file.

To put it more simply, this sentence you are reading is defined in my CSS file with the following.

p { 
  font-size: small; 
  color: #333333
}

CSS Margins

As you may have guessed, the margin property declares the margin between an (X)HTML element and the elements around it. The margin property can be set for the top, left, right and bottom of an element. (see example below)

  margin-top: length percentage or auto; 
  margin-left: length percentage or auto;
  margin-right: length percentage or auto;
  margin-bottom: length percentage or auto;

CSS Padding

Padding is the distance between the border of an (X)HTML element and the content within it.

Most of the rules for margins also apply to padding, except there is no “auto” value, and negative values cannot be declared for padding.

  padding-top: length percentage; 
  padding-left: length percentage;
  padding-right: length percentage;
  padding-bottom: length percentage;

CSS Backgrounds

You can style the background of an element in one declaration with the background property.

background: #ffffff url(path_to_image) top left no-repeat fixed;