External CSS: Definition of style sheets in an external file.

So far we have seen the definition of styles at the HTML element level (in-line css) and the definition of styles at the page level (internal css).

We said that the first way is not very recommended, and the second is used when we want to define styles that will be used only by that page.

Now we will see that the most used methodology is the definition of a style sheet in a separate file that must have the .css extension.

This file will contain the style rules (same as we have seen so far) but they will be separate from the HTML file.

The fundamental advantage is that with this, we can apply the same style rules to part or all the pages of the website.

We will see that this will be very useful when we need to make style changes (by changing the style rules of this file we will be changing the appearance of multiple pages of the site).

It also has the advantage that it is more orderly for the programmer to have the HTML in one file and the style rules in a separate file.

Another advantage is that when a browser requests a page, the HTML file and the CSS file are sent to it, the latter file being saved in the cache of the computer, with which, in the successive pages that require the same style file, that same file is retrieved from the cache and does not require the web server to resend it to it (saving transfer time).

Let's look at the first HTML page that has an associated style sheet in an external file. The HTML file is (page.html):

<!DOCTYPE html>
<html>

<head>
    <title>Problem</title>
    <meta charset="UTF-8">
    <link rel="StyleSheet" href="style.css" type="text/css">
</head>

<body>
    <h1>Style sheet definition in an external file.</h1>
    <p>
        So far we have seen the definition of styles at the HTML element level
        and the definition of styles at the page level. We said that the first
        form is very little recommended and the second is used when we want to define
        styles that will be used only by that page.
        Now we will see that the most used methodology is the definition
        of a style sheet in a separate file that must have the extension
        css.
    </p>
</body>

</html>

The file that has the style rules is (styles.css):

body {
  background-color:#eafadd;
}
h1 {
  color:#0000cc;
  font-family:Poppiins;
  font-size:25px;
  text-align:center;
  text-decoration:underline;
}
p {
  color:#555555;
  font-family:verdana;
  text-align:justify;
}

As we can see, to indicate the external style file, we must add the following tag in the <head> of the HTML file:

<link rel="StyleSheet" href="estilos.css" type="text/css">

The href attribute references the external file that will affect the rendering of this page. In the type property, it tells the browser what the file format is.

The rel attribute is used to define the relationship between the linked file and the HTML document.
It only remains to test this page working.

Output:

From now on, we will get used to working with style sheets defined in an external file, which is definitely the most common way to develop a website applying CSS.

Robort Gabriel

Lagos, Nigeria

Skills