Even better than integrating CSS into an HTML5 tag, you can define your CSS properties in a CSS file — this is what we recommend the most.
This will make your code much more readable and much more maintainable over time.
The reason is that on one side you will have your CSS files, and on the other side your HTML files. And elsewhere, you will have your JavaScript files. We (strongly) recommend using one or more separate CSS files.
Then, to include them in your HTML document, simply use the <link> tag with the attributes rel="stylesheet", type="text/css", and href which is the link to your CSS file, whether it is hosted on your site or on another website — you provide the URL to your style.css.
Example:
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="myFile.css"/>
…
</head>
…
</html>In the myCssFile.css file, you directly put the CSS code you need. The format is exactly like what we have seen throughout this article series:
body {
font-size: 12px;
font-family: Arial;
}The <link> tag
As we just saw, the <link> tag allows, among other things, to apply formatting to a given document from an external stylesheet. When a number of HTML documents use the same stylesheet, you can simply modify the layout of all documents through a single file.
Let’s take this CSS code as an example and place it in a demo.css file:
/* demo.css */
body {
background:white;
color:blue;
}Every time you need to apply this style to a document, you simply call the demo.css file using the <link> tag:
<!DOCTYPE html>
<html>
<head>
<title>La fameuse page « Hello World »</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<p>Hello world!</p>
</body>
</html>Every page that calls the demo.css file via the <link> tag will then benefit from the styles contained in the CSS file. This not only reduces the size of HTML files, but the caching system (web server, proxy servers, and browser) will be able to read the demo.css file as many times as needed while loading it into memory only once. Performance will be greatly improved.
0 Comments