- 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.