Segunda parte del curso de CSS

Introducción a CSS: Parte 2

Cómo crear una hoja de estilo externa vinculada

Para crear una hoja de estilo externa, y anexarlo a nuestras páginas web, todo lo que necesita hacer es crear un documento de texto simple (en las ventanas, simplemente haga clic con el botón derecho y seleccione nuevo -> documento de texto) y luego cambie el archivo de tipo .txt a .css.

Puede cambiar el tipo de archivo simplemente cambiando la extensión del archivo. La extensión del archivo en Windows le dice a la computadora qué tipo de archivo es y le permite a la computadora determinar cómo manejar el archivo cuando, por ejemplo, intenta abrirlo. Probablemente lo has adivinado; Los archivos CSS son solo archivos de texto con formato especial, y de la misma manera que las páginas HTML. No hay nada especial o diferente en el propio archivo, más bien, es el contenido del archivo lo que hace que un documento HTML y una página CSS sean lo que son.

Al trabajar con un documento CSS externo, hay un par de puntos para recordar:

1. No agregue estas etiquetas en la página CSS como lo haría si incrustara el código CSS en su HTML:

<style type = "text / css"> </style>

Dado que el enlace de CSS en su página web dice que está enlazando a una página de CSS, no necesita declarar (en el archivo CSS externo) que el código de la página de CSS es CSS. Eso es lo que hacen las etiquetas de arriba. En su lugar, simplemente agregaría su código CSS directamente a la página de la siguiente manera:

.minuevositioweb {

    font-family: Verdana, Arial, Helvetica, sans-serif;

   font-weight: bold;

   color: #FF0000;

}

.my2ndNewStyle {

   font-family: Verdana, Arial, Helvetica, sans-serif;

   font-weight: bold;

   color: #FF0000;

}

.my3rdNewStyle {

   font-family: Verdana, Arial, Helvetica, sans-serif;

   font-weight: bold;

   font-size: 12pt;

   color: #FF0000;

}

En el ejemplo anterior, he creado una serie de clases CSS que se pueden aplicar a cualquier etiqueta HTML de la siguiente manera:

<p> Mi texto con estilo CSS </p>

o

<h2 class = "my3rdNewStyle”> Mi texto con estilo CSS </h2>

Asi logramos que el resultado sea el mismo en el navegador. En la siguiente nota hablaremos mas sobre el diseño de páginas web con CSS.