Teoria

PASO 1: CREAR EL ARCHIVO HTML

El archivo HTML es la base de la página web.

Ejemplo

<!DOCTYPE html>
<html>
<head>
    <title>Mi página</title>
</head>
<body>

    <h1>Bienvenidos</h1>

    <p>Este es un ejemplo de vinculación CSS.</p>

</body>
</html>

<!DOCTYPE html>

Indica que el documento utiliza HTML5.

<html>

Etiqueta principal de la página.

<head>

Contiene información importante del documento.

Dentro de esta sección se conecta el CSS.

<body>

Contiene todo lo visible en la página.

PASO 2: CREAR EL ARCHIVO CSS

Después se crea un archivo nuevo llamado:

estilos.css

Dentro de este archivo se escriben las reglas de diseño.

Ejemplo del archivo CSS

body {
    background-color: lightblue;
}

h1 {
    color: darkblue;
}

p {
    font-size: 20px;
}

VINCULAR EL CSS AL HTML

La vinculación se realiza con la etiqueta:

<link rel="stylesheet" href="estilos.css">

Esta línea debe colocarse dentro de la sección <head>.

Ejemplo completo

<!DOCTYPE html>
<html>
<head>

    <title>Mi página</title>

    <link rel="stylesheet" href="estilos.css">

</head>

<body>

    <h1>Bienvenidos</h1>

    <p>Este es un ejemplo de vinculación CSS.</p>

</body>
</html>
Explicación

link

Se utiliza para conectar archivos externos.

rel=”stylesheet”

Indica que el archivo conectado es una hoja de estilos CSS.

href=”estilos.css”

Especifica el nombre y ubicación del archivo CSS.