¿Cómo funciona CSS?

Clase 10 de 41 • Curso de HTML y CSS 2019

Clase anteriorSiguiente clase

Resumen

El CSS son las hojas de estilo en cascada que definen la apariencia de nuestros documentos en HTML.

Para que nuestros estilos CSS se apliquen correctamente a nuestras páginas web, debemos utilizar la etiqueta link con el atributo href y la ruta a nuestro archivo .css:

<html>
        <head>
                <link rel=""stylesheet"" href=""estilos.css"">
        </head>
        <body>
                ... etc ... etc....
        </body>
</html>

Los Selectores nos permiten conectar las etiquetas de HTML con sus respectivos estilos en CSS.

Existen muchos tipos de selectores, por ejemplo, los selectores de clase buscan el contenido que tenga un cierto valor en su atributo class:

CSS (con punto antes del nombre de la clase):
.caja { color: red; }

HTML:
<div class=""caja"">Contenido</div>

También tenemos selectores de tipo ID (estos selectores solo pueden aplicar a un elemento, no va a funcionar si escribimos dos o más etiquetas con el mismo ID):

CSS (con `#` antes del nombre del ID):
#caja { color: red; }

HTML:
<div id=""caja"">Contenido</div>

En CSS utilizamos atributos para definir los estilos de nuestros elementos, podemos modificar el color de la letra, tamaño, color de fondo, espaciado, entre otras:

.caja {
        color: red;
        background: yellow;
        font-size: 10px;
        padding: 20px;
}