Introducción al CSSReferencias CSSÍndice de contenidos
¿Te gustaría saber cómo se define el diseño de una página web? ¿Qué hace que un texto se vea más grande o más pequeño? ¿Cómo se crean sombreados o bordes redondeados? En este curso de CSS aprenderás todo lo que necesitas para controlar el estilo de un documento HTML o una página web.
Este curso cubre todos los niveles de CSS, ofreciendo una comprensión completa que va desde los conceptos básicos hasta los más avanzados.
¿Qué es CSS?
CSS es un lenguaje de hojas de estilos para diseño gráfico que fue creado para definir las características visuales de los documentos estructurados (HTML, XML), permitiendo separar el contenido del diseño. Las siglas CSS son el acrónimo de Cascading Style Sheets (hojas de estilo en cascada).
Junto con HTML y JavaScript, CSS es una tecnología esencial para crear y editar sitios web. Haciendo una analogía con la construcción: si el HTML es la estructura de un edificio, el CSS son los acabados, como sería la pintura o el pavimento. Se trata de un lenguaje imprescindible para estilizar páginas web.
La separación del contenido y el diseño tiene muchas ventajas. Por ejemplo, esto facilita que se aplique el mismo estilo en varios documentos HTML sin tener que repetir el código. También hace posible aplicar diferentes estilos a un documento, dependiendo del tamaño de pantalla, o si es para imprimir, etc.
Los navegadores web como Chrome, Firefox, Edge o Safari entienden el código CSS y son capaces de representarlo de forma casi idéntica. Sin embargo, puede haber diferencias puntuales que conviene conocer para garantizar que el documento se verá de la misma manera en cualquier navegador.
¿Por qué aprender CSS?
Aprender CSS ofrece muchas ventajas en ciertos entornos y es imprescindible en el mundo del desarrollo web, junto con HTML y JavaScript. Es obvio que saber CSS será beneficioso en cualquier trabajo relacionado con el diseño web.
Veamos algunas de las ventajas de aprender CSS:
Modificar la apariencia de un sitio web. CSS permite controlar todos los aspectos visuales de una página web: forma, color, posición… Por tanto, aprender CSS es indispensable si se quiere mejorar la apariencia de una web.
Ser un diseñador web. El diseño web se realiza mezclando como mínimo dos tecnologías: el HTML y el CSS. Por tanto, el lenguaje CSS es un pilar más que imprescindible para ser diseñador web.
Optimización de la web. Aprender CSS puede ser de utilidad cuando se quiere optimizar una página web, ya sea para mejorar su velocidad de carga o para presentar el contenido en mejores condiciones.
Aprender otros lenguajes. En el mundo del desarrollo web coexisten varias tecnologías. JavaScript se utiliza como complemento de HTML y CSS. Por lo tanto, conocer CSS es un requisito para aprender JavaScript.
Ejemplos de estilos CSS
Para entender mejor el funcionamiento del CSS puede ser interesante visualizar la forma de aplicar estilos. En este ejemplo vamos a cambiar el color de un párrafo mediante CSS. Se publican ambos códigos.
Este es el código HTML del párrafo:
<p class="pintar">Esto es un párrafo rojo.</p>
Y este es el código CSS para cambiarle el color:
.pintar {
color: red;
}
Resultado:
Esto es un párrafo rojo.
¿Lo ves? El párrafo apareció de color rojo. ¿Cómo sabe el navegador que este párrafo tiene que salir de color rojo? Mediante el selector .pintar que el párrafo (<p>) tiene configurado a través del atributo class.
Si en lugar de crear un selector específico mediante el atributo class hubiésemos usado p como selector, todos los párrafos de esta página se verían de color rojo. Por esto es muy importante usar correctamente los selectores.
Aplicaciones del CSS
CSS es un lenguaje muy versátil y flexible a la hora de estilizar páginas web. Usarlo tiene algunas ventajas que lo convierten en una bendición para los desarrolladores web. Veamos algunas de sus aplicaciones.
Las hojas de estilos en cascada (CSS) se llaman así porque precisamente permiten aplicar estilos en cascada. Es posible modificar varios elementos HTML a la vez y en múltiples documentos. Por ejemplo, se puede modificar el estilo de 100.000 artículos de golpe modificando una sola línea CSS. Esto implica que el mantenimiento de sitios web es muy simple, por muchas páginas que tengan. Gracias a esto se ahorra mucho tiempo.
Las páginas web se cargan mucho más rápido gracias al uso del CSS. Ya no es necesario estilizar los elementos HTML uno por uno mediante sus atributos, lo que implicaría tener que descargar muchos más bytes cada vez que se accede a una página web desde el navegador. Con una sola norma CSS que aplique a una selección determinada es una buena optimización web.
El hecho de que todos los estilos puedan estar en un único documento CSS facilita mucho el mantenimiento. Es habitual que el diseño de todo un sitio web esté en un único archivo; incluyendo adaptaciones para todo tipo de dispositivos. Esta es una de las grandes ventajas de usar CSS.
La compatibilidad para múltiples dispositivos y formatos es otro de los puntos fuertes del CSS. Esto permite que el diseño del documento HTML se adapte a las características del dispositivo (diseño web responsive); y se puede cambiar el diseño entero dependiendo de si es para pantallas o para impresión.
Durante muchos años se ha hecho uso de atributos HTML para aplicar cambios de diseño de forma individual. Esto se hizo sobretodo en las cuatro primeras versiones. Muchos de aquellos atributos quedaron obsoletos, quedando el CSS como la opción más recomendada a día de hoy para las páginas HTML.
Audiencia
Este curso está pensado para todas aquellas personas que quieran aprender diseño web, que quieran ser diseñadores web o que quieran profundizar en la materia. Los artículos de esta categoría ofrecen todo el conocimiento necesario para desenvolverse con facilidad en la creación y edición de código CSS.
Requisitos previos
El aprendizaje del lenguaje CSS requiere conocer el lenguaje HTML, ya que el CSS se aplica sobre los elementos que componen los documentos HTML. También será de gran ayuda tener conocimientos siguientes:
- Conocimientos básicos de un sistema operativo.
- Crear directorios y trabajar con archivos.
- Conocer las extensiones de archivos y cómo editarlos.
- Conocer algún editor de código o de texto plano.
- Conocimientos sobre formatos multimedia.
