¿Qué es CSS?

CSS significa Hojas de Estilo en Cascada. Viene de las siglas en Inglés: Cascading Style Sheets.
CSS describe cómo los elementos HTML se mostrarán en la pantalla, papel o en otros medios. Ayuda a ajustarlos a la forma y colores y estilos en general que se desee.
CSS ahorra mucho trabajo. Puede controlar el diseño de múltiples páginas web a la vez. Las hojas de estilo externas se almacenan en archivos CSS. Al modificar una hoja de estilo, modifica todas las páginas que lo contengan. Aunque se puede hacer cambios CSS a una página en específico , sabiendo el id de la misma.

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.

Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados «documentos semánticos»). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.

Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.

INDICE DE CONTENIDO

Algunos ejemplos

Cambiar el color de los links:

a:link {
  color: #c5342b;
}

a:visited {
  color: #0000;
}

a:hover {
  color: #c3c3c3;
}

a:active {
  color: #9a9a9a;
}

Alinear elementos al centro:

.center {
  display: block;
  margin: auto;
}

Quitar el subrayado de los links:

a {
  text-decoration: none;
}

Ajustar los padding (espacios) de una imagen:

img {
  padding-top: 30px;
  padding-right: 15px;
  padding-bottom: 60px;
  padding-left: 15px;
}

Hacer un botón con un link:

a:link, a:visited, a:hover, a:active {
  background-color: #000;
  color: #fff;
  padding: 20px 35px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}