WebDevelopmentTutorials.com

Introduction to CSS (Cascading Style Sheets)

• 1. What is CSS (Cascading Style Sheets)?
• 2. What You Should Already Know Before Learning CSS
• 3. CSS Syntax
• 4. CSS Comments

What is CSS (Cascading Style Sheets)?

CSS (Cascading Style Sheets) is a style sheet language that is used to add styles (e.g. fonts, colors, spacing) and the layout of web pages that written in HTML/XHTML and XML, among other markup languages.

The CSS specifications are maintained by the World Wide Web Consortium (W3C). The W3C specification is at w3.org/TR/CSS21/.

What You Should Already Know Before Learning CSS

Before learning CSS, you should at least be familiar with HTML/XHTML.

CSS Syntax

The syntax of CSS is made up of CSS rules and each CSS rule is made up of 3 parts: a selector, a property and a value (or multiple values).

The syntax of CSS is shown below.

selector { property:value; }

The selector is the HTML element or tag that you want to apply CSS styles to. In other words, it tells the web browser what to apply styles to.

The selector is followed by a set of openning and closing curly brackets ({ and }) and everything within the curly brackets is called a declaration block.

Within a declaration block there are property and value(s) pairs. These property and value(s) pairs are called declarations. There can be as many declarations that can apply for that particular selector(s) within a declaration block.

The property tells the web browser what attribute of the selector to style and the value specifies how the attribute will be formatted. The property and value are separated by a colon, and surrounded by curly braces: If the value is multiple words, place the value is quotes.

An example of a CSS is shown below.

p { font-family:"sans serif" }

If you want to specify more than one property, place a semicolon is used to each property. For example:

p { color:red; font-size:20px; }

It is good practice to place a semicolon behind each value, wether or not there are multiple properties specified.

CSS Comments

CSS comment tags allow you the insert text that will not be read by the CSS interpreter.

CSS comments begin with a forward slash followed by an asterisk (/*) and end with an asterisk followed by a forward slash (*/).

An example of CSS comments within a stylesheet is below.

p
{
/* this text will not be read by the CSS interpreter */
color:red;
font-size:20px;
}