CSS syntax

CSS syntax rules consist of two main parts: selectors, and one or more declarations (declaration groups). The selector is usually the HTML element you need to change the style of. Each declaration consists of a property and a value, where the property is the style attribute you wish to set; there is one for each property, and the property and value are separated by a colon. CSS declarations always end with a semicolon (;), and groups of declarations are enclosed in braces ({}).

Example Demonstration

Example

<html>
<head>
<style>
body {background-color:yellow;}
h1   {font-size:36pt;}
h2   {color:blue;}
p    {margin-left:50px;}
</style>
</head>

<body>

<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>

<p>This paragraph has a left margin of 50 pixels</p> 

</body>
</html>

Run Example»

Click "Run instance" button to view the online instance

Instance

<html>
<head>
<style>
body {background-color:tan;}
h1   {color:maroon;font-size:20pt;}
hr   {color:navy;}
p    {font-size:11pt;margin-left:15px;}
a:link    {color:green;}
a:visited {color:yellow;}
a:hover   {color:black;}
a:active  {color:blue;}
</style>
</head>

<body>

<h1>This is a header 1</h1>
<hr>

<p>You can see that the style 
sheet formats the text</p>

<p><a href="http://www.w3cschool.cc" 
target="_blank">This is a link</a></p>

</body>
</html>

Run instance»

Click "Run instance" " button to view online examples

CSS examples

CSS rules consist of two main parts: the selector, and one or more declarations:

The selector is usually the HTML element you need to change the style of.

Each statement consists of an attribute and a value.

The property is the style attribute you wish to set. Each attribute has a value. Properties and values are separated by colons.

CSS Example

CSS declarations always end with a semicolon (;), and declaration groups are enclosed in braces ({}):

p {color:red;text-align:center;

To make CSS more readable, you can describe only one attribute per line:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p
{
	color:red;
	text-align:center;
} 
</style>
</head>

<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>

Run Example»

Click the "Run Example" button to view the online example

CSS Comments

Comments are used to explain your code , and feel free to edit it, the browser will ignore it.

CSS comments start with "/*" and end with "*/". Examples are as follows:

/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}