2. CSS files

Most web pages use a separate file for styles. This allows multiple HTML documents to have the same CSS style sheet. In this way the different pages will have a similar presentation. Also, when you want to change a style, it will only be necessary to do so in a CSS file and all the HTML documents that depend on this file will change at the same time.

In this exercise you will separate the CSS style sheet from the HTML file. The <link> tag is used to link the two sheets.

Labels used

Link to css style sheet:

<link rel="stylesheet" type="text/css"
      href="file.css" >

You have to replace file.css with the style sheet you want to use.

Exercise

File css-file.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
   <title> Fichero CSS </title>

   <link rel="stylesheet" type="text/css"
         href="css-file.css" >

</head>

<body>

   <!-- Todo el texto siguiente es igual que
        el ejercicio anterior. -->

   <h1> Estilos </h1>
   
   <p>
   Los estilos cambian la presentación del 
   contenido en la pantalla.
   Los estilos pueden cambiar por ejemplo:
   </p>
    
   <ul>
   <li>El color del texto y del fondo.</li>
   <li>Los tipos y tamaños de letra.</li>
   <li>La posición y distancia de las frases.</li>
   <li>Los márgenes y bordes.</li>
   </ul>
    
</body>
</html>

File css-file.css

Código del fichero css-file.css

Result

Resultado de visualizar los ficheros css-file.html y css-file.css en un navegador