There are two ways to specify the CSS.
- First, you can specify it in the head section of your pages.
It starts with <style type="text/css">
followed by the CSS coding and closed by:
</style>
but then you have to add that to every page. - Or ....
you can specify all of your CSS coding in a seperate file with the name you want to assign, followed by the extension .css
To use such a style sheet you have to include the .css file in your head section like this:
<link href="style.css" rel="stylesheet" type="text/css" />
If the server discovers that in your head section, it will include all definitions to the web page and your specifications will work like charm.
This is the preferred option.
Each property and its value is closed by a semicolon (;), like this:
selector {property: value;}
The selector actually is the HTML element you want to define, like body, p,
a, ul, etc.
If you use them like this, each selector applies to the corresponding HTML
elements in your page.
So, if you use a <p> in your HTML, the values
of the corresponding p-selector in your CSS applies. This is the normal CSS style.
You can also add a 'class'-style'.
You use a full stop (.) in your CSS to define a class style selector.
This enables you to define different styles for the same type of HTML element.
For instance:
p.right {text-align: right}
p.center {text-align: center}
Now you have to use the class attribute in your HTML document:
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>
Finally, you can also define styles for HTML elements with the id selector. The id selector is defined as a #.
The ID selector applies to all HTML-elements that have an ID:
p#para1
{
text-align: center;
color: red
}
In HTML:
<p id="para1">
</p>
Use your favorite search engine to find CSS tutorials and study them. Here's a great CSS resource that you can start with. If you get the hang of it, study my css file and see how I use it.
