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.

Advertisements

Actions

Information

One response

25 01 2011
Tweets that mention CSS: A Brief Introduction « fredlikenscodeblog -- Topsy.com

[…] This post was mentioned on Twitter by Fred Liken, Fred Liken. Fred Liken said: My Blog CSS: A Brief Introduction – What, exactly, is CSS? In a nutshell, CSS or Cascading Style Sheets define, in… http://ow.ly/1b0LRP […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: