Introduction to CSS Rules: All About Syntax, Selectors and Properties

Cascading Style Sheets, or CSS, is a language used to specify the visual appearance of a Web page in contrast to HTML (HyperText Markup Language), which is a markup language that defines the structure of a document for distribution on the Web. HTML tells a Web browser how the content is organized on the page, whereas CSS tells the browser how it should look.

This tutorial is a base for learning the CSS techniques from basic to advance level. I will explain the introduction to CSS rules, syntax, selectors and properties in this tutorial.

Types of CSS Rules

The best thing about cascading style sheets is that they are amazingly simple to set up. They don’t require plug-ins or fancy software – just text files with rules in them. A CSS rule defines what the HTML should look like and how it should behave in the browser window.

CSS rules come in three types, each with specific uses:

1. HTML Selector

The text portion of an HTML tag is called the selector. For example, h1 is the selector for the <h1> tag. The HTML selector is used in a CSS rule to redefine how the tag displays.

2. Class

A class is a “free agent” rule that can be applied to any HTML tag at your discretion. You can name the class almost anything you want. Because a class can be applied to multiple HTML tags, it is the most versatile type of selector.

3. ID

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

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML CSS Styles Demo</title>

<style>

/*
|-------------------
| HTML Selector
|-------------------
*/

h1 {
	font-family:Verdana, Geneva, sans-serif;
	color: #F00;
}

/*
|-------------------
| Class
|-------------------
*/

.h1green {
	font-family:Verdana, Geneva, sans-serif;
	color: #060;
}

/*
|-------------------
| ID
|-------------------
*/

#h1blue {
	font-family:Verdana, Geneva, sans-serif;
	color: #00F;
}

</style>

</head>

<body>

<!-- Targeted by HTML Selector -->
<small>Targeted by HTML Selector: h1</small>
<h1>TutorialChip.com</h1>

<!-- Targeted by Class -->
<small>Targeted by Class: h1green</small>
<h1 class="h1green">TutorialChip.com</h1>

<!-- Targeted by ID -->
<small>Targeted by ID: h1blue</small>
<h1 id="h1blue">TutorialChip.com</h1>

</body>
</html>

Output

CSS Rules

CSS Rule Anatomy: Parts of Rules

All rules, regardless of their locations or types, have the following structural elements:

Selectors

Selectors are the alphanumeric characters that identify a rule. A selector can be an HTML tag selector, a class selector, an ID selector, a universal selector or a combination of those basic selectors to create context based styles.

Properties

Properties identify what is being defined. Several dozen properties are available; each is responsible for an aspect of the page content’s behavior and appearance.

Values

Values are assigned to a property to define its nature. A value can be a keyword such as “red,” a number, or a percentage. The type of value used depends solely on the property to which it is assigned.

After the selector A, a CSS rule consists of properties and their values, which together are referred to as a declaration. A single CSS rule can have multiple declarations separated by a semicolon (;).