CoderZone Sandbox: Basic CSS Concepts
Back to Sandbox

CSS stands for Cascading Style Sheets, a modern method for doing HTML markup and presentation. CSS has completely replaced old-style markup tags such as <font> and parameters such as <bgcolor>, and instead uses sets of rules to define how HTML elements will appear in the browser.

One of the most important and useful features of CSS is that rules are applied globally to the HTML in a page and do not have to be applied to each element individually. This allows you to create a single definition or "style" for how a particular element should appear (such as the H1 tag). When that style is applied to the page, all H1 tags will use those properties (font size, color, spacing, etc) automatically.

For example, imagine you have a site with 1,000 pages, each containing a title that you've defined with a color and font size using old-style HTML tags like this:

<font color="blue" size="4" face="Arial">My Page Title</font>

If at some point you decide that you want the font to be be red instead of blue, you'll have to manually change every single one of those 1,000 page titles. Using CSS, however, you would define the way the page title should look in a style sheet that's included in the page. When you want change how the title looks, you only have to change it once in one place (the style sheet) and all of the page titles immediately change across the entire site.

Better Control Over HTML
CSS also provides extremely fine-grained control of every HTML element, allowing you much more control over appearance than was previously available. Many extended properties such as letter spacing, line height, and borders (just to name a few) are made available with CSS. In addition, Javascript can be used to alter CSS properties "on-the-fly", providing dynamic and useful page effects in response to user actions.

CSS Rule Structure
There are two parts to a CSS rule: the selector and the definition(s). (The terms "definition" and "rule" are often used interchangably, although technically a CSS definition is made up of one or more rules.)

The selector tells the browser what page element is being targeted for the rule(s) to be applied to. For example, this CSS rule tells the browser that the <H1> element should be displayed using the "Arial" font and that the font should be 20 pixels in height:

H1 {
font-family: arial; 
font-size: 20px;

All CSS rules must start with some type of selector, and must be followed by one or more style rules, separated by semi-colons. The number of rules used in a single CSS definition is limited only by the number of valid style properties that apply to it. For example, the font-size rule cannot be used with an image element because images don't have a font-size property.

CSS Classes
A class is general definition that can be applied to any HTML tag. Because a CSS class can be applied to multiple HTML tags or elements simultaneously, it is the most versatile type of selector. For example, the H1 definition shown above would automatically apply to all H1 elements on a particular page where that definition was in effect; you don't need to create a separate definition for each instance of the H1 tag.

A CSS class name is defined with a period followed by the name of the class. This example class definition creates a class named "big_blue":

.big_blue {
font-family: courier,times new roman; 
font-size: 20px;
color: blue;
font-weight: bold;

Any element that has the "big_red" class applied to it will appear in a Courier or Times New Roman font, and will be 20 pixels tall, bold, and colored blue.

Much like class selectors, ID selectors can be applied to any HTML tag. ID selectors, however, should be applied only once to a particular HTML tag on a given page. CSS IDs are often used to create an object for use with a JavaScript function.

A CSS ID name is defined with a hash mark (#) followed by the name of the ID. This example creates an ID named "alert_box":

#alert_box {
font-family: arial,helvetica; 
font-size: 25px;
color: red;
background-color: #ffffaa;
font-weight: bold;
border-style: solid;
border-color: #000000;
border-width: 1px;

The page element that has the "alert_box" ID will appear in an Arial or Helvtica font, and will be 25 pixels tall, bold, and colored red with a yellow background. It will also have a black, 1-pixel border around it.

Class and ID names
A CSS class or ID can be given almost any name, subject to the following restrictions:
  • Class and ID names used with CSS can contain alphanumeric characters only.
  • Class and ID names (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_);
  • Class and ID cannot start with a digit, or a hyphen followed by a digit.
  • For HTML5/CSS3 classes and IDs can start with numbers.
  • Element names (H1, P, etc) are case-insensitive.
The W3C says that the use of a leading '-' (hyphen) or '_' (underscore) should be reserved for vendor-specific CSS extensions (e.g., -moz* classes implemented by Mozilla browsers).

Class and ID names are supposed to be case-sensitive (as opposed to element names), so the class names "redbox", "RedBox", and "REDBOX" will all be "seen" as different names by the browser. Creating identifer names that differ only in character case is generally considered to be bad practice. A Mozilla technical note states that, "authors should not rely on case-sensitivity as a way of creating distinct identifiers.".

There are some technical exceptions to these rules, but in general you should use only alphanumeric characters in class and ID names.

© | users online: 10