¿Qué es CSS?
CSS (Cascading Style Sheets) es el lenguaje que usamos para dar estilo y diseño a páginas web. Mientras HTML define la estructura, CSS define la presentación visual.
Formas de Agregar CSS
1. CSS Inline (no recomendado)
<p style="color: blue; font-size: 16px;">Texto azul</p>2. CSS Interno (en el head)
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>Texto azul</p>
</body>
</html>3. CSS Externo (recomendado)
<!-- En el HTML -->
<link rel="stylesheet" href="estilos.css">/* En estilos.css */
p {
color: blue;
font-size: 16px;
}Selectores CSS
Selector de Elemento
/* Selecciona todos los párrafos */
p {
color: blue;
}
/* Selecciona todos los h1 */
h1 {
font-size: 32px;
}Selector de Clase
<p class="destacado">Texto destacado</p>.destacado {
background-color: yellow;
font-weight: bold;
}Selector de ID
<div id="encabezado">Contenido</div>#encabezado {
background-color: navy;
color: white;
}Selectores Combinados
/* Descendiente - todos los p dentro de div */
div p {
color: red;
}
/* Hijo directo */
div > p {
color: blue;
}
/* Hermano adyacente */
h1 + p {
font-size: 18px;
}
/* Múltiples selectores */
h1, h2, h3 {
font-family: Arial, sans-serif;
}Pseudo-clases
/* Enlaces no visitados */
a:link {
color: blue;
}
/* Enlaces visitados */
a:visited {
color: purple;
}
/* Hover (al pasar el mouse) */
a:hover {
color: red;
text-decoration: underline;
}
/* Al hacer clic */
a:active {
color: orange;
}
/* Primer hijo */
p:first-child {
font-weight: bold;
}
/* Último hijo */
p:last-child {
color: gray;
}
/* Elemento enésimo */
li:nth-child(2) {
background-color: lightblue;
}Colores en CSS
/* Nombre del color */
color: red;
/* Hexadecimal */
color: #FF0000;
color: #F00; /* forma corta */
/* RGB */
color: rgb(255, 0, 0);
/* RGBA (con transparencia) */
color: rgba(255, 0, 0, 0.5);
/* HSL */
color: hsl(0, 100%, 50%);
/* HSLA */
color: hsla(0, 100%, 50%, 0.5);Tipografía
/* Familia de fuentes */
font-family: Arial, Helvetica, sans-serif;
/* Tamaño */
font-size: 16px;
font-size: 1.2em;
font-size: 1.5rem;
/* Peso */
font-weight: normal; /* 400 */
font-weight: bold; /* 700 */
font-weight: 600;
/* Estilo */
font-style: italic;
/* Transformación */
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
/* Alineación */
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
/* Decoración */
text-decoration: underline;
text-decoration: line-through;
text-decoration: none;
/* Espaciado */
letter-spacing: 2px;
word-spacing: 5px;
line-height: 1.6;
/* Sombra de texto */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);Box Model (Modelo de Caja)
.caja {
/* Ancho y alto */
width: 300px;
height: 200px;
/* Padding (espacio interno) */
padding: 20px; /* todos los lados */
padding: 10px 20px; /* vertical horizontal */
padding: 10px 20px 30px; /* top horizontal bottom */
padding: 10px 20px 30px 40px; /* top right bottom left */
/* Border (borde) */
border: 2px solid black;
border-width: 2px;
border-style: solid; /* solid, dashed, dotted */
border-color: black;
border-radius: 10px; /* bordes redondeados */
/* Margin (margen externo) */
margin: 20px;
margin: 10px auto; /* centrar horizontalmente */
/* Box sizing */
box-sizing: border-box; /* incluye padding y border en width */
}Fondos
.elemento {
/* Color de fondo */
background-color: lightblue;
/* Imagen de fondo */
background-image: url('imagen.jpg');
/* Repetición */
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
/* Posición */
background-position: center;
background-position: top right;
background-position: 50% 50%;
/* Tamaño */
background-size: cover;
background-size: contain;
background-size: 100px 200px;
/* Shorthand */
background: url('imagen.jpg') no-repeat center/cover;
/* Gradientes */
background: linear-gradient(to right, red, blue);
background: radial-gradient(circle, red, blue);
}Display y Posicionamiento
Display
/* Block - ocupa todo el ancho */
display: block;
/* Inline - solo el ancho necesario */
display: inline;
/* Inline-block - inline pero con width/height */
display: inline-block;
/* None - oculta el elemento */
display: none;
/* Flex - contenedor flexible */
display: flex;
/* Grid - rejilla */
display: grid;Position
/* Static - por defecto */
position: static;
/* Relative - relativo a su posición normal */
position: relative;
top: 10px;
left: 20px;
/* Absolute - relativo al contenedor posicionado más cercano */
position: absolute;
top: 0;
right: 0;
/* Fixed - relativo a la ventana del navegador */
position: fixed;
top: 0;
width: 100%;
/* Sticky - híbrido entre relative y fixed */
position: sticky;
top: 0;Flexbox
/* Contenedor flex */
.contenedor {
display: flex;
/* Dirección */
flex-direction: row; /* por defecto */
flex-direction: column;
flex-direction: row-reverse;
/* Justificación (eje principal) */
justify-content: flex-start; /* por defecto */
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
/* Alineación (eje transversal) */
align-items: stretch; /* por defecto */
align-items: center;
align-items: flex-start;
align-items: flex-end;
/* Wrap */
flex-wrap: nowrap; /* por defecto */
flex-wrap: wrap;
/* Gap */
gap: 20px;
}
/* Items flex */
.item {
flex: 1; /* crece y se encoge */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
}CSS Grid
.grid-container {
display: grid;
/* Definir columnas y filas */
grid-template-columns: 200px 200px 200px;
grid-template-columns: 1fr 1fr 1fr; /* fracciones */
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px auto 100px;
/* Gap */
gap: 20px;
column-gap: 10px;
row-gap: 15px;
/* Alineación */
justify-items: center;
align-items: center;
}
/* Items grid */
.item {
/* Posicionamiento */
grid-column: 1 / 3; /* ocupa de columna 1 a 3 */
grid-row: 1 / 2;
/* Shorthand */
grid-area: 1 / 1 / 2 / 3; /* row-start / col-start / row-end / col-end */
}Responsive Design - Media Queries
/* Móviles pequeños */
@media (max-width: 480px) {
body {
font-size: 14px;
}
}
/* Tablets */
@media (min-width: 481px) and (max-width: 768px) {
.contenedor {
flex-direction: column;
}
}
/* Desktop */
@media (min-width: 769px) {
.contenedor {
max-width: 1200px;
margin: 0 auto;
}
}
/* Orientación */
@media (orientation: landscape) {
/* Estilos para horizontal */
}
@media (orientation: portrait) {
/* Estilos para vertical */
}Transiciones y Animaciones
Transiciones
.boton {
background-color: blue;
color: white;
padding: 10px 20px;
transition: all 0.3s ease;
}
.boton:hover {
background-color: darkblue;
transform: scale(1.1);
}Animaciones
@keyframes deslizar {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.elemento {
animation: deslizar 1s ease-in-out;
}
/* Animación más compleja */
@keyframes pulsar {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
.icono {
animation: pulsar 2s infinite;
}Transformaciones
/* Rotar */
transform: rotate(45deg);
/* Escalar */
transform: scale(1.5);
transform: scale(2, 1); /* x, y */
/* Trasladar */
transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);
/* Sesgar */
transform: skew(20deg, 10deg);
/* Múltiples transformaciones */
transform: rotate(45deg) scale(1.5) translate(10px, 20px);Variables CSS
:root {
--color-primario: #3498db;
--color-secundario: #2ecc71;
--espaciado: 20px;
--fuente-principal: 'Arial', sans-serif;
}
.elemento {
color: var(--color-primario);
margin: var(--espaciado);
font-family: var(--fuente-principal);
}
/* Con valor por defecto */
color: var(--color-terciario, #000);Ejemplo Completo: Tarjeta de Perfil
<!-- HTML -->
<div class="card">
<img src="perfil.jpg" alt="Perfil" class="card-img">
<div class="card-body">
<h2 class="card-title">Ana García</h2>
<p class="card-subtitle">Desarrolladora Web</p>
<p class="card-text">Apasionada por crear experiencias web increíbles.</p>
<button class="card-btn">Contactar</button>
</div>
</div>/* CSS */
.card {
max-width: 300px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 12px rgba(0,0,0,0.2);
}
.card-img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-body {
padding: 20px;
background-color: white;
}
.card-title {
margin: 0 0 5px 0;
color: #333;
font-size: 24px;
}
.card-subtitle {
margin: 0 0 15px 0;
color: #666;
font-size: 14px;
}
.card-text {
color: #777;
line-height: 1.6;
}
.card-btn {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.card-btn:hover {
background-color: #2980b9;
}Buenas Prácticas CSS
- Organiza tu código: Agrupa estilos relacionados
- Usa nombres descriptivos: Clases como .btn-primary en vez de .azul
- Evita !important: Usa especificidad correcta
- Mobile first: Diseña primero para móviles
- Reutiliza código: Usa clases utilitarias
- Comenta tu código: Especialmente para secciones complejas
- Usa metodología: BEM, SMACSS, etc.
Conclusión
CSS3 es fundamental para crear sitios web atractivos y modernos. Dominar selectores, layouts (Flexbox y Grid), responsive design y animaciones te permitirá crear interfaces profesionales. Combina CSS con HTML y JavaScript para experiencias web completas.