Las hojas de estilo en cascada o CSS (Cascading Style Sheet) describen como se mostraran los elementos HTML en pantalla. Se trata de codigo definido en la propia etiqueta, internamente en el archivo HTML o en un archivo externo. En cualquiera de los 3 casos el codigo de los estilos modifica el aspecto que dan las etiquetas a nuestras paginas en HTML.

Vamos a ver algunos ejemplos de como agregar CSS a nuestro documento HTML.

Dentro de la etiqueta (INLINE)

El CSS agregado en la etiqueta modifica únicamente el aspecto de una etiqueta a la vez y se utiliza algún atributo de la etiqueta. Ejemplo:

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


Dentro del documento (INTERNAL)

El CSS dentro de un documento modifica el aspecto de una pagina en HTML completa. Para definir CSS dentro del documento se hace en la seccion de la etiqueta <head> y ocupando una etiqueta <style>. Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>Esto es un encabezado</h1>
<p>Esto es un párrafo.</p>

</body>
</html>


En un documento externo (EXTERNAL)

Un documento externo de CSS puede modificar varias paginas HTML a la vez, es muy útil para ahorrar tiempo y tener una congruencia en todos los aspectos de la vista de un sitio web completo. Para añadir un archivo externo de CSS es necesario crear un enlace (link) a el desde la sección de la etiqueta <head>. Ejemplo:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Esto es un encabezado</h1>
<p>Esto es un parrafo</p>

</body>
</html>

El archivo externo se crea con cualquier programa editor de texto y no debe contener código HTML, mas bien en el se especifica el valor de los atributos de etiquetas propias de HTML. El archivo se debe guardar con la extensión .css. Ejemplo:

body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}


Propiedades de CSS

Para especificar las propiedades dentro de una hoja de estilos se debe de colocar el nombre del estilo, si es una etiqueta HTML únicamente se ocupa el nombre de la misma y si es un nombre inventado se precede por un punto; entre llaves se agrega la lista de propiedades que corresponderían a dicho estilo. Cada propiedad que se agregue debe tener un valor después del signo de dos puntos (:) y las propiedades se separan entre ellas por un punto y coma (;)
Sintaxis:

nombre {propiedad_1: valor1; propiedad_2: valor2; propiedad_3: valor3; propiedad_4: valor4; }



A continuación se enlistan una serie de propiedades que pueden modificarse con CSS.

Propiedades
  • Familia de la fuente:
  • La propiedad es font-family.

    Puede tomar como valor varios nombres de fuentes, separados por comas, como pueden ser arial, helvetica, etc. La ventana de definir una familia de fuentes es que si el ordenador del visitante no tiene instalada la primera fuente, entonces se aplicará la segunda, así sucesivamente hasta encontrar una de las fuentes.

    En el siguiente botón puedes encontrar una lista de nombres de fuentes disponibles.
    Fuentes

  • Grosor del texto:
  • La propiedad es font-weight.

    Sus valores pueden ser: bold (negrita), bolder (mas negrita), lighter (ligera) o
    un número del 100 al 900.

  • Tamaño de la fuente:
  • La propiedad es font-size.

    Puede tomar como valor un número.

  • Espacio entre líneas:
  • La propiedad es line-height.

    Puede tomar como valor un número.

  • Espacio entre caracteres:
  • La propiedad es letter-spacing.

    Puede tomar como valor un número.

  • Estilo de la fuente:
  • La propiedad es font-style.

    Puede tomar como valor italic, cuando se desee que el texto aparezca en cursiva.

  • Decoración de la fuente:
  • La propiedad es text-decoration.

    Puede tomar como valor none (ninguno), underline (subrayado), line-through (una línea encima), overline (tachado) o blink (parpadeo).

    Si se aplica none a los hiperenlaces, puede evitarse que aparezcan subrayados.

  • Transformar el texto:
  • La propiedad es text-transform.

    Puede tomar como valor capitalize (la inicial de cada palabra aparecerá en mayúsculas), uppercase (todo en mayúsculas) o lowercase (todo en minúsculas).

  • Alineación del texto:
  • La propiedad es text-align.

    Puede tomar como valor center (centrado), left (izquierda), right (derecha) o justify (justificado).

  • Sangrado del texto:
  • La propiedad es text-indent.

    Puede tomar como valor un número.

  • Color:
  • La propiedad es color.

    Puede tomar como valor un número en hexadecimal.

    Si se aplica esta propiedad a los hiperenlaces, serán de este color, en lugar de los indicados por los atributos link (vínculo), vlink (vínculo activo), y alink (vínculo visitado) de la etiqueta <body>.

    En el siguiente botón encontraras una lista de nombres de colores aceptados por HTML con su respectivo código en hexadecimal.
    Colores

  • Color de fondo:
  • La propiedad es background-color.

    Puede tomar como valor un número en hexadecimal.

  • Imagen de fondo:
  • La propiedad es background-image.

    La ruta y el nombre de la imagen han de aparecer entre paréntesis, después de la palabra url.

  • Márgenes:
  • Las propiedades son margin-top (margen superior), margin-right (margen derecho), margin-bottom (margen inferior), margin-left (margen izquierdo), o margin (los valores de los márgenes superior, derecho, inferior e izquierdo, separados por espacios).

    Pueden tomar como valor un número (cuatro números separados por espacios en el caso de margin).

  • Ancho de bordes:
  • La propiedad es border-width.

    Puede tomar como valor un número.

  • Color del borde:

  • La propiedad es border-color.

    Puede tomar como valor un número en hexadecimal.

    En el caso de los valores numéricos, especificar la unidad de medida a utilizar: cm (centímetros), pt (puntos), px (píxeles), o % (porcentaje).

    Practica
    Crear una hoja de estilos llamada “estilosdelibro.css” que defina 5 clases personalizadas con las siguientes características:
    – Clase titulo: Fuente Merriweather, tamaño de fuente 36, negrita, alineada al centro, color verde.
    – Clase subtitulo: Fuente Roboto o Roboto Mono o Calibri, tamaño 24, color de fondo Beige y letra color café.
    – Clase cuerpo: Fuente Arvo o Karla o Abel, tamaño 18, italica, ligera, margen de 10px en todas direcciones, color gris.
    – Clase cita: Utilizar cualquier fuente con serifas, tamaño 12, alineada a la derecha, italica, lo mas ligera posible, subrayada, con un fondo color pastel.
    – Clase pie: Utilizar cualquier fuente sans, tamaño 12, centrada, margen superior de 30px, color de borde amarillo, espaciado entre caracteres de 8 y resaltada con una linea grosor 2.


    Descargar Archivo HTML


    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *