Introducción al uso de CSS en HTML
CSS, u hojas de estilo en cascada, nos permite dar estilo y mejorar visualmente nuestros sitios web HTML. HTML proporciona la estructura, mientras que CSS define la apariencia. Estos dos lenguajes van de la mano en cada sitio web.
¿Qué es CSS?
CSS es un lenguaje de estilo usado para dar formato a los elementos HTML. Permite definir el color del texto, tamaño, márgenes, fondos, posicionamiento y mucho más. Ayuda a separar el contenido del diseño, facilitando el mantenimiento de los sitios web.
CSS en línea
El CSS en línea se escribe directamente dentro del elemento HTML usando el atributo style. Es rápido y fácil, pero no se recomienda para proyectos grandes.
html
<p style="color: blue;">This text is blue.</p>CSS interno
El CSS interno se coloca dentro de una etiqueta <style> en la sección <head> del archivo HTML. Es útil cuando una página específica necesita estilos personalizados.
html
<style>
p {
font-size: 18px;
color: green;
}
</style>CSS externo
Este es el método más común. El CSS se coloca en un archivo separado y se enlaza en la sección <head> del HTML. Permite gestionar los estilos de todo el sitio desde un solo lugar.
html
<link rel="stylesheet" href="styles.css">Uso de clases e IDs
El atributo class puede usarse en múltiples elementos. Los IDs son únicos y solo deben usarse una vez. En CSS, las clases se escriben con un punto (.) y los IDs con un numeral (#).
html
<p class="note">This is a note</p>
<p id="unique">This is a unique paragraph</p>css
.note {
color: orange;
}
#unique {
font-weight: bold;
}Sintaxis básica de CSS
Cada regla CSS comienza con un selector (por ejemplo, h1), seguido de llaves que contienen pares de propiedad y valor. Cada línea termina con un punto y coma.
css
selector {
property: value;
}Resumen
Sin CSS, un sitio web sería solo texto plano y estructura. CSS proporciona la capa visual que ven los usuarios. Los tres métodos principales —en línea, interno y externo— te dan flexibilidad para aplicar estilos. Aprender CSS desde el principio es esencial, ya que es la base de todo desarrollo web.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
Seleccionar idioma
Establecer tema
© 2025 ReadyTools. Todos los derechos reservados.