In this lesson you will learn how to make your first style sheet. You will get to know about the basic CSS model and which codes are necessary to use CSS in an HTML document.
Many of the properties used in Cascading Style Sheets (CSS) are similar to those of HTML. Thus, if you are used to use HTML for layout, you will most likely recognize many of the codes. Let us look at a concrete example.
The basic CSS syntax
Let’s say we want a nice red color as the background of a webpage:
Using HTML we could have done it like this: <body bgcolor=”#FF0000″>
With CSS the same result can be achieved like this: body {background-color: #FF0000;}
Applying CSS to an HTML document
There are three ways you can apply CSS to an HTML document. These methods are all outlined below. We recommend that you focus on the third method i.e. external.
In-line (the attribute style)
One way to apply CSS to HTML is by using the HTML attribute style. Building on the above example with the red background color, it can be applied like this: <html>
<head>
<title>Example</title>
</head> <body style=”background-color: #FF0000;”>
<p>This is a red page</p>
</body>
</html>
Internal (the tag style)
Another way is to include the CSS codes using the HTML tag <style>. For example like this: <html>
<head>
<title>Example</title>
<style type=”text/css”> body {background-color: #FF0000;} </style>
</head> <body>
<p>This is a red page</p>
</body>
</html>
Try it yourself
Open Notepad (or whatever text editor you use) and create two files - an HTML file and a CSS file - with the following contents:
Tutorial of Web design
Tutorial of Web design 
Linear Mode
