Estilos HTML con CSS

Dando estilos al HTML con CSS

CSS significa Cascading Style Sheets (Hojas de Estilos en Cascada). Hay 3 formas de agregar estilos a los elementos HTML:

  1. Estilo en línea - Usando el atributo style en los elementos HTML.
  2. Estilo Interno - Usando el elemento <style> en la sección <head> del documento HTML.
  3. Estilo Externo - Usando uno o más archivos CSS externos.

La forma más común de agregar estilos es usando un archivo externo conteniendo los estilos así separados del contenido, pero en este tutorial usaremos el estilo interno porque es más fácil de demostrar y de que hagas tus propias pruebas más fácilmente.

Aunque en este tutorial mostraremos algo de estilos CSS, puedes aprender mucho más fondo en nuestro Tutorial CSS

Estilos CSS en línea

Los estilos en línea son usados para aplicar un único estilo a un elemento HTML nada más y para esto es necesario utilizar el atributo style.

En el siguiente ejemplo vamos a cambiar el color del texto de un elemento <h1> a uno azul:

<h1 style="color: blue;">Este es un encabezado Azul</h1>

Estilo Interno (CSS Interno)

El estilo interno es usado para el estilo de una solo documento HTML.

Los estilos internos son definidos dentro del elemento <style> y éste dentro de la sección <head> del documento HTML de la siguiente forma como se muestra a continuación:

<!doctype html>
<html>
<head>
  <style>
    body {background: lightgrey;}
    h1 {color: blue;}
    p {color: green;}
  </style>
</head>
<body>
  <h1>Este es un encabezado</h1>
  <p>Este es un párrafo</p>
</body>
</html>

Estilos Externos (CSS Externo)

Las hojas de estilos externas, son utilizadas para definir el estilo en varias páginas con el mismo archivo externo CSS, así es posible realizar cambios en este archivo y afectando su presentación incluso para todo el sitio web.

Para usar una hoja de estilos externa (archivo CSS), se utiliza la etiqueta <link> en la sección <head> del documento HTML como a continuación lo mostramos:

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="/estilos.css">
</head>
<body>
  <h1>Este es un encabezado</h2>
  <p>Este es un párrafo</p>
</body>
</html>

Una hoja de estilos CSS puede escribirse con cualquier editor de texto. El archivo no debe contener ninguna etiqueta HTML. El archivo de hoja de estilos debe ser guardada con la extensión .css.

Aquí una muestra de como luce una hoja de estilos "estilos.css" de ejemplo:

body {
  background-color: lightgrey;
}
h1 {
  color: blue;
}
p {
  color: green;
}

Fuentes CSS

La propiedad color en CSS define el color del texto a usar para un elemento HTML.

La propiedad font-family en CSS define el tipo de fuente a usar para un elemento HTML.

La propiedad font-size en CSS define el tamaño de la fuete a usar para un elemento HTML.

<!doctype html>
<html>
<head>
  <style>
    h1 {
      color: blue;
      font-family: verdana;
      font-size: 300%;
    }
    p {
      color: red;
      font-family: courier;
      font-size: 160%;
    }
  </style>
</head>
<body>
  <h1>Este es un encabezado</h1>
  <p>Este es un párrafo</p>
</body>

El modelo de Caja CSS

Cada elemento HTML tiene una caja que lo redondea, incluso si no es visible. La propiedad border del CSS define un borde visible alrededor del elemento HTML:

p {
  border: 1px solid black;
}

La propiedad padding del CSS define un espaciado dentro del borde del elemento:

p {
  border: 1px solid black;
  padding: 10px;
}

La propiedad margin del CSS define un margen de espaciado fuera del borde del elemento:

p {
  border: 1px solid black;
  padding: 10px;
  margin: 30px;
}

Nota: En los ejemplos anteriores usamos px para definir los tamaños en pixeles.

El atributo ID

En los ejemplos anteriores que usamos CSS para darle estilos a los elemento HTML son de forma general.

Para definir un estilo especial para un elemento en especial, primero debemos agregar un atributo id a el elemento al cual queremos que se aplique solamente el estilo especial:

<p id="p01">Soy diferente</p>

y ahora definimos un estilo diferente para el elemento con el id que agregamos:

p#p01 {
  color:blue;
}

El atributo Class

Para definir un estilo para un grupo de elementos, es decir, una clase para un grupo de elementos, de igual manera primero debemos agregar el atributo class los elementos que queramos que se les aplique los estilos de clase:

<p class="error">Soy diferente</p>

y ahora definimos un estilo de clase para los elementos con la clase especificada:

p.error {
  color: red;
}

Nota: Usar id para definir estilos a un elemento único y usar class para definir estilos para un grupo de elementos.

Resumen del Capitulo

  • Use el atributo style del HTML para estilos en línea.
  • Use el elemento <style> del HTML para definir estilos CSS Internos.
  • Use el elemento <link> del HTML para referenciar a un archivo CSS Externo.
  • Use el elemento <head> del HTML para contener los elementos <style> y <link>.
  • Use la propiedad color del CSS para el color del texto.
  • Use la propiedad font-family del CSS para las fuentes del texto.
  • Use la propiedad font-size del CSS para el tamaño del texto.
  • Use la propiedad border del CSS para visualizar los bordes de un elemento.
  • Use la propiedad padding del CSS para definir el espacio interno del borde de un elemento.
  • Use la propiedad margin del CSS para definir el espacio externo del borde de un elemento.