
Basics of CSS: Syntax
May
04
CSS consists of a selector, property and value. Here is the basic
construction.
selector {property: value}
The selector usually is the HTML property you want to define, such as
body (the "body" tag); the property is the attribute you want to change,
such as the color of the body; and value is the specific style of the
attribute, such as "white" for the color of the body. Thus you end up
with this statement:
body {color: white}
The class selector allows you to define different styles for an HTML
property such as paragraph (the "p" tag) when you want to use it
multiple ways on a site or within a document.
There are three ways of implementing CSS tags:
Link to an external stylesheet:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Link to an internal stylesheet by placing the CSS between the <head> and </head> HTML tags:
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
Use an inline style when you want a style specific to a particular
situation on a document:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>