Type of CSS

1. External CSS
2. Internal CSS and
3. Inline CSS

Example: External CSS

<html>
<head>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
<h2>This header is 16 pt</h2>
<h3>This header is Green</h3>
<span>This paragraph has a left margin of 20 pixels</span>
</body>
</html>

example.css
h2 {font-size: 16pt;}
h3 {color: green;}
p {margin-left: 20px;}

Example: Internal css

<html>
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px}
</style>
</head>
<body>
<p>First Paragraph text</p>
<hr />
<p>Second Paragraph text </p>
</body>
</html>

Example: Inline css class

<p style="color: #F8F8F8; margin-left: 20px">this is a paragraph. </p>

Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:


selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:

Example:

P {font-size: 11px; text-align: center ;}