In the following tutorial we will show you how to make your first style sheet. First you will know the basic CSS model and the codes that are necessary to use CSS in a HTML document.
Basic the properties used in a CSS are similar with those used in HTML. So if you are a ‘legend’ in using HTML then for sure you will recognize the codes.
CSS syntax
A basic great color for a background web page;
With HTML we will do it like this :
And for CSS, looks like this :
So, the codes are like the same , though the example shows you the fundamental of CSS. But where you put the CSS code?
Well, we are going to teach you that, fast .
Applying CSS to an HTML document
So far there are three ways that you can apply CSS to an HTML doc. The methods are presented bellow. The final method is more important to focus, the external mode. ( Tutorial)
-
In – line
This is one way that you can apply CSS to HTML doc, by using the HTML attribute style :
-
Internal
-
External
So, the ‘trick’ is to link to a external style sheet. But we will use this method in our example. The external style sheet is simply an “extension.css”. You can place it on your style sheet or hard disk.
So, make a link from the HTML doc. to the style sheet (style.css). The link can be made with one line like this :
The path to the style sheet is being indicated by using the href attribute. The code must be added in the header section of the HTML code.between <head> and </head> tags.
So, the link authomatically tells the browser that it should use the layout from the CSS file when displaying the HTML file. You can also add several HTML documents that can be linked to the same style sheet. To sum up, CSS is able to control the layout of many HTML files.
