Slide 7.2: CSS syntax

CSS Syntax

CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.

CSS Example
CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets. To make the CSS more readable, you can put one declaration on each line, like this:


<html> <head> <style type="text/css"> p { color:#3366CC; text-align:center; } </style> </head> <body bgcolor="#EDF3FE"> <p>Hello World!</p> <p>This paragraph is styled with CSS.</p> </div> </body> </html>

CSS Comments
Comments are used to explain your code, and they are ignored by browsers. A CSS comment begins with “/*”, and ends with “*/”, like this:

 /* This is a comment. */
 p {
  text-align:center;
  /* This is another comment. */
  color:black;
  font-family:arial;
 }

Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web:


<html> <head> <title>HTML Working Area</title> <style type="text/css"> p { text-align: center; color: #3366CC; font-family: Helvetica } </style> </head> <body bgcolor="#EDF3FE"> <p> This is a text. This is a text. </p> This is a text. This is a text. </body> </html>

Review: CSS Comments

% one-line CSS comment

// one-line CSS comment

/* one-line CSS comment */

Result: