Introduction to CSS
Creating CSS styles
To create CSS styles you can either add styles to the head of your document or create a separate file.
Adding styles to the head of your document
To add styles to the head of your document, firstly add the style tag.
<head>
<style type="text/css">
<!--
-->
</style>
…
Now that the style tag is ready you can add styles.
Creating a style sheet document
Firstly, create a file and give it the .css file type. We now need to link the CSS file to the HTML file, add the following code to the head of your document.
<head>
<link href="myStyle.css" rel="stylesheet" type="text/css" /> …
Making styles
There are many ways to link styles to elements in CSS and are covered in this tutorial. The rest of this tutorial will focus on applying styles directly to elements.
The class attribute
Most elements in HTML have a class attribute that will apply a style to that element. The class attribute contains the name of the style to apply, within your CSS you need to define that style and prefix the name with a period.
<head>
<style type="text/css">
<!--
.myStyle
{
background-color: #000033;
}
-->
</style>
…
<body>
<div>My style</div>
<p>Text</p>
…
The code above changes the background colour of both elements. The same can be done with the style saved in a CSS file.
<!-- (myStyle.css)
.myStyle
{
background-color: #000033;
}
<head>
<link href="myStyle.css" rel="stylesheet" type="text/css" />
…
<body>
<div>My style</div>
<p>Text</p>
…