We want to apply the CSS look, as defined in the example.css file, to the content from the example.htm file. In the example.htm file we add, in the header section, the following:
While there are others way to apply CSS instructions to a particular element from the HTML file, the purpose of CSS is to isolate the look from the content. That's why we'll use an external CSS file.
It’s very important to know how to test if the CSS file is applied to the HTML file. For this, we’ll make a HTML file, called example.htm
The example.css file will set to blue the color of all the text from the body section.
At first, we’ll not put the example.css in the same folder as example.htm. If we open example.htm, using a browser, the color of the text will be black (or whatever color you set by default for your browser). We’ll not receive an error message, saying that example.css is missing, but we’ll not see the blue color.
When we copy the example.css file in the same folder as example.htm, and we’ll open again example.htm, the color of the text “This is a blue text†will be blue, indicating the effect of the CSS file over the content of the HTML file.
You can download below a zip file containing both files.
Code:
<head>
[B] <link
rel = "stylesheet"
type = "text/css"
href = "example.css"
/>[/B]
<head>While there are others way to apply CSS instructions to a particular element from the HTML file, the purpose of CSS is to isolate the look from the content. That's why we'll use an external CSS file.
It’s very important to know how to test if the CSS file is applied to the HTML file. For this, we’ll make a HTML file, called example.htm
Code:
<html>
<head>
<link
Rel = "stylesheet"
Type = "text/css"
Href = "example.css"
/>
<head>
<body>
This is a blue text.
</body>
</html>The example.css file will set to blue the color of all the text from the body section.
Code:
body
{
color : blue;
}At first, we’ll not put the example.css in the same folder as example.htm. If we open example.htm, using a browser, the color of the text will be black (or whatever color you set by default for your browser). We’ll not receive an error message, saying that example.css is missing, but we’ll not see the blue color.
When we copy the example.css file in the same folder as example.htm, and we’ll open again example.htm, the color of the text “This is a blue text†will be blue, indicating the effect of the CSS file over the content of the HTML file.
You can download below a zip file containing both files.
