¿Qué es CSS?

Que-es-CSS-carlosmarca-wordpress-glosario
  • 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.

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;
}

Hay muchísima más información que añadir de los CSS.

La idea de este Post es solamente a manera de definición.

Ya iré haciendo más post referentes al tema.

Igualmente dejo algunos enlaces para ampliar la información.

Lecturas para ampliar la información

Wikipedia

W3Schools.com

Deja un comentario

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

WhatsApp chat