Programando la Net: Colocar Estilos

Colocar Estilos con CSS

Temario

Estilos en linea o Locales
Estilos embebidos
Enlace Externo

En este capítulo veremos las diferentes maneras para aplicar estilos CSS a los elementos de nuestra página.

Estilos en linea o Locales

Los estilos locales se aplican directamente al elemento que deseamos modificar, mediante la siguiente sintaxis.

<etiqueta style = "atributo1: valor; atributo2: valor;">...</etiqueta>

Esta forma de aplicar estilos es poco recomendable, ya que en un código muy elaborado seria imposible actualizar el contenido y el estilo de nuestro sitio.

Por lo tanto, esta forma de implementar CSS, la dejaremos en la teoría y muy pocas veces en la práctica.

Estilos embebidos

Esta forma de aplicar estilos, fue la empleada en el ejemplo de la lección 1, donde colocamos los estilos en la cabecera del documento, dentro de las etiquetas <head y </head>.

Si bien, esta forma es mas práctica que en el caso de los Estilos en línea, ya que nos permite una mejor distribución entre el contenido y los estilos, cuando nosotros tenemos un sitio con muchas páginas que emplean los mismos CSS, tendríamos que modificar el código para cada página, por o tanto las tareas de mantenimiento se harían muy complicadas.

<!DOCTYPE HTML>

<html lang = "es">

      <head>

           <title>Estilos con CSS</title>

           <meta charset = "UTF-8" />

           

           <style type = "text/css">

                 p {

                       background-color: lightblue;

                       color: blue

                 }

                 #identificador {

                       background-color: black;

                       color: white;

                 }

                 .clase {

                       background-color: blue;

                       color: lightblue;

                 }

           </style>

      </head>

      <body>

           <h2>Estilos con CSS</h2>

           <p id = "identificador">

                 Esto es un párrafo con el identificador

           </p>

           <p>

                 Esto es un párrafo regular

           </p>

           <p class = "clase">

                 ESto es un párrafo con clase

           </p>

           <p>

                 Esto es un párrafo regular

           </p>

           <p class = "alternate">

                 Esto es otro párrafo con otra clase

           </p>

      </body>

</html>

Por lo tanto, no es recomendable el empleo de esta técnica, si nuestro sito va a ser de muchas páginas y tenemos que darle mantenimiento.

Enlace Externo

Esta es la forma mas recomendable de aplicar estilos a nuestro documento.

Y lo que tenemos que hacer es muy facil.

Dentro de nuestra Directorio (lugar donde guardamos los documentos html del sitio), crear una carpeta llamada css
Dentro de dicha carpeta, que en mi caso se llama css, crearemos un documento con nuestro editor de texto llamado estilos.css (NO olviden colocarle la extensión CSS).
El siguiente paso, consiste en vincular nuestro documento html, el cual tiene el contenido, con nuestro documento css, que contiene los estilos; mediante el uso de la etiqueta <link>

La etiqueta link tiene en este caso dos atributos:

rel: ESpecifica la relacion del comumento que se va a enlazar
href: que especifica la dirección del documento css que se va a enlazar. Como recordaran en la Lección 3 del curso de HTML5, nos referimos a una dirección relativa.

Esta etiqueta se coloca en la cabecera de nuestro documento html entre las etiquetas <head> y </head>

Una vez hechos todos estos pasos solo basta especificar las reglas CSS a los respectivos elementos del documento HTML, mediante la relación de etiquetas, identificadores, clases y subclases que veremos en las siguientes lecciones.

En la siguiente lección veremos el uso de los identificadores y las clases.

Recuerden Compartir y Darle

Hasta la Próxima