¿Qué es CSS?
CSS (Cascading Style Sheets) es un lenguaje de diseño utilizado para describir la presentación de un documento HTML o XML.
Cristian Escalante
Última actualización: 5 de abril de 2025
¿Qué es CSS?
CSS (Cascading Style Sheets) es un lenguaje que usamos para darle estilo y diseño a las páginas web. Permite separar el contenido de un documento de su presentación visual, lo que facilita la creación y mantenimiento de sitios web.
A forma de analogía podemos decir que HTML es el esqueleto de un sitio, CSS es la ropa, los colores y hasta los accesorios que le dan vida a ese esqueleto.
Sin CSS, todas las páginas web serían solo texto negro sobre fondo blanco y con enlaces azules.
¿Cómo funciona CSS?
CSS trabaja junto con HTML para aplicar estilos a los elementos de una página web. Funciona mediante "reglas" que definen cómo se verán las etiquetas HTML.
Ejemplo de regla en css
/* selector {
propiedad: valor;
} */
h1 {
color: red;
font-size: 24px;
}
Lo anterior indica que los elementos <h1> aparecerán en rojo y con un tamaño de 24 píxeles.
Formas dee agregar CSS a un documento HTML
CSS interno (dentro del documento HTML)
Se escribe utilizando el elemento style dentro del elemento head.
<head>
<style>
p {
font-family: Arial;
}
</style>
</head>
CSS externo (archivo separado)
Es el método recomentado y consiste en crear un archivo .css y este se enlaza al documento HTML con el elemento link dentro del elemento head.
<head>
<link rel="stylesheet" type="text/css" href="caeher.css">
</head>
CSS en línea (dentro de una etiqueta HTML)
Se aplica directamente a un elemento HTML utilizando el atributo style.
<p style="color: blue; font-size: 20px;">Hola mundo</p>
Ejemplos practicos
body {
background-color: #f0f0f0; /* Fondo gris claro */
font-family: "Roboto", sans-serif; /* Fuente moderna */
}
.boton {
background-color: #4caf50; /* Verde */
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}