CSS
CSS significa Cascading Style Sheets (Hojas de Estilo en Cascada).
Sirve para darle estilo y diseño a una página HTML: colores, tipografía, tamaños, márgenes, animaciones, etc.
HTML = estructura (qué hay en la página)
CSS = apariencia (cómo se ve)
Sintaxis de CSS
selector {
propiedad: valor;
}
Ejemplo:
h1 {
color: blue; /* Cambia el color del texto */
font-size: 24px; /* Cambia el tamaño de la fuente */
}
selector: a qué elemento HTML se aplica (ej. p, h1, .clase, #id)
propiedad: qué aspecto modificar (ej. color, background, margin)
valor: cómo quieres que sea (ej. red, 20px, center)
Selectores comunes
- Elemento p {} Todos los <p>
- Clase .rojo {} Todos los que tengan class="rojo"
- ID #titulo {} El elemento con id="titulo"
- Universal * {} Todos los elementos
Ejemplo completo
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mi primera página con CSS</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1 id="principal">Hola Mundo</h1>
<p class="rojo">Este es un párrafo rojo</p>
</body>
</html>
CSS (estilos.css):
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
#principal {
color: blue;
text-align: center;
}
.rojo {
color: red;
}
Agregar CSS a un HTML
a CSS en línea (inline): en el atributo style del elemento
<p style="color: red;">Texto rojo</p>
b CSS interno (en la etiqueta <style> dentro del <head>):
<head>
<style>
p {
color: red;
}
</style>
</head>
c CSS externo (archivo .css aparte):
HTML:
<link rel="stylesheet" href="estilos.css">
estilos.css:
p {
color: red;
}
