Empezamos nuevo curso de CSS completamente desde cero. El curso está dirigido a quienes manejáis medianamente html, de modo que si quieres aprender de forma profesional para hacer estilos increíbles en tus sitios web, quédate conmigo.
¿Qué es CSS?
CSS, o Cascading Style Sheets (hojas de estilo en cascada en español), es un lenguaje de diseño utilizado para dar estilo a las páginas web.
Gracias a CSS, conseguiremos sitios web con aspectos increíbles y adaptables a todo tipo de pantallas.
Estilos estáticos en HTML
Para que puedas apreciar bien la diferencia, te pongo el ejemplo de una página html simple que tiene aplicado un fondo de un color en el body.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Página HTML básica</title>
</head>
<body style="background-color: darkseagreen;">
</body>
</html>Ahora, a esta página, le añades más contenido a la página. Todo con atributos "style" sobre las etiquetas.
Con esto, vas cambiando los colores de los títulos, el fondo, dando tamaño a las imágenes, etc.
Al terminar con la plantilla básica de la web, empiezas a crear nuevas páginas con dicha plantilla. Hasta que llegas a tener 1000 páginas.
Ahora, ¿qué ocurre si quieres hacer algo tan simple como cambiar el color de fondo? La respuesta es que tendrás que editar el color en el atributo "style" del body, en las 1000 páginas.
Pues bien, con estilos CSS, podrás evitar esto. Declararás las cosas en una hoja externa, y la podrás modificar para todo el sitio web.
¿Dónde se utiliza CSS?
CSS se usa en tres zonas, las cuales, detallaré en el siguiente capítulo.
Los estilos CSS se pueden colocar directamente sobre las etiquetas html con el atributo "style", tal y como he hecho en este capítulo.
También, podemos declarar en la misma hoja .html una sección con varios estilos para utilizar solo en una página html o bien, la mejor forma, que es la de añadirlos en una hoja externa y aplicarlos a cualquier página html que queramos.
