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>
…

Categories

Tags

Social