CSS: A Brief Introduction

24 01 2011

What, exactly, is CSS? In a nutshell, CSS — or Cascading Style Sheets — define, in the language of HTML, how to display certain elements.

When HTML was originally designed, it was meant to define content within a document. However, with the addition of such tags as <font> and various color attributes, HTML became a nightmare for web developers. In response to this nightmare, CSS was developed by the W3C.

CSS files are often external files — and it’s this external file development that allows you to edit the entire appearance and layout of a website…all at once! CSS eliminates the need for repeated changes throughout various pages, and — unlike many other languages — is cross-browser compatible!

Let’s begin by discussing some basic elements of CSS — the syntax of the language, for lack of a better word.

You will note that — much like the English language sentence structure has a subject & predicate — the CSS syntax consists of a selector and a declaration.

As seen in the above photo, the selector — like the subject of the English language sentence — defines what HTML element you wish to edit. In the example above, the selector is “h1,” or HEADER 1.

Like the predicate of the English language sentence, the declaration consists of a property and a value, and “tells” the HTML element what, precisely to “do” in each of the webpages. In the example given above, the declaration is “telling” the HEADER 1 to be blue, and to be 12px in size. This value will remain consistent throughout the entire website unless and until the CSS file is edited.

In the next blog, we will give further examples of CSS syntax, and discuss additional elements within the CSS sheet.