Categorías
CSS y HTML

¿Cómo aplicamos el CSS?

Existen tres formas de aplicar los estilos a nuestro código HTML:

  1. Directamente sobre un elemento: podemos aplicar el estilo a un bloque concreto de HTML, utilizando el atributo style. Es decir, dentro de una etiqueta definir cómo será su aspecto. Obviamente no es la mejor manera de proceder porque tendríamos que definir bloque por bloque.

    Ejemplo: <p style="font-size: 12pt; color: #000000">. Aquí estamos definiendo sobre este párrafo en concreto que la letra sea de tamaño 12 y de color negro. Esto no se aplicará sobre ningún párrafo más.

  2. En el propio documento: se pueden declarar los estilos en la cabecera del documento para poder utilizarlo en cualquier parte del HTML. Para ello se colocan entre las etiquetas <style>..atributos..</style>
  3. Ejemplo:

    <head>
    ...
    <style type="text/css">
    h1
    {
      border-width: 1;
      text-align: center
    }
    </style>
    </head>

    Aquí hemos definido todas las cabeceras que se encuentre entre la etiqueta <h1>. Como vemos, la etiqueta <style> tiene un atributo denominado type donde se define el tipo de la hoja de estilo. Puede tomar los valores: «text/css» y «text/javascript».

  4. En un documento externo: creando una hoja de estilos ubicada en un fichero externo con extensión .css. En mi opinión es la forma más elegante puesto que hace que nuestra página HTML quede más simple al no incluir todas las líneas de estilo (sólo sería necesaria la declaración del lugar en el que se encuentra el .css). Además, con esta forma queda aún más clara la separación entre contenido y presentación.

    Para hacer referencia a una hoja de estilos externa desde un documento HTML se pueden utilizar también dos métodos:

    • El elemento <link>. Una vez hecho link, se pueden utilizar los estilos de la misma manera que si estuviesen definidos en el propio documento.
    • Ejemplo:
      <head>
      ...
      <link href="hoja_de_estilos.css" rel="stylesheet" type="text/css">
      </head>

    • El elemento @import. Por ejemplo:

      @import «estilos.css»;
      @import url(«/estilos/estilos.css»);

10 respuestas a «¿Cómo aplicamos el CSS?»

me parece muy interesante todo lo que nos estas explicando. ¿Nos pondrás también ejercicios prácticos? 😀 Muchísimas grácias, no hay nada mejor que aprender mientras miramos tus blogs. El BOFH me encanta, trabajo de Help Desk, así que entiendo muy bién todo lo que explicais 😀

Bueno, que me voy que estamos en el curro 😉

Grácias de nuevo!!!

Como ya han dicho (corsaria), para enlazar a hojas de estilo externas, está @import. Es preferible el uso de @import antes que link en lograr una web semántica. En el caso que uses estilos alternativos, puedes utilizar link como enlazador.

Muchas gracias por el aporte corsaria y eyko. Ya he actualizado la entrada (así da gusto aprender de forma colectiva)

Deja una respuesta

Tu dirección de correo electrónico no será publicada.