CSS es uno de los lenguajes fundamentales del desarrollo web. Si HTML se encarga de crear la estructura de una página, CSS se encarga de definir su apariencia visual.
En este capítulo del curso vamos a dar el siguiente paso después de aprender las bases de HTML. Hasta ahora hemos creado páginas con títulos, párrafos, enlaces, imágenes, listas, formularios y contenedores. El problema es que, sin CSS, esas páginas se ven muy simples.
Con CSS podemos mejorar el diseño de una página web añadiendo colores, márgenes, tamaños de letra, fondos, bordes, botones personalizados, formularios más atractivos y una mejor distribución de los elementos.
En el vídeo trabajamos con dos archivos HTML:
- Una página de pruebas llamada
curso_html.html, donde podemos practicar diferentes propiedades CSS. - Una pantalla de login llamada
login.html, que más adelante formará parte del proyecto final del curso.
Qué es CSS
CSS significa Cascading Style Sheets, que en español se traduce como hojas de estilo en cascada.
CSS es el lenguaje que utilizamos para cambiar el aspecto visual de una página web. Gracias a CSS podemos decidir cómo se ven los elementos HTML en pantalla.
Por ejemplo, con HTML podemos crear un título:
<h1>Pantalla de Login</h1>
Pero con CSS podemos decidir que ese título esté centrado, sea de color azul y tenga un tamaño más grande:
h1 { color: blue; text-align: center; font-size: 36px;}HTML define qué elementos hay en la página.
CSS define cómo se ven esos elementos.
Diferencia entre HTML y CSS
Una forma sencilla de entenderlo es esta:
| Lenguaje | Función |
|---|---|
| HTML | Crea la estructura de la página |
| CSS | Da estilo y diseño a la página |
HTML sería como el esqueleto de una web.
CSS sería la ropa, los colores y la presentación visual.
Por eso es importante separar ambos lenguajes. Una página web bien organizada tendrá el contenido en HTML y los estilos en CSS.
Formas de añadir CSS a una página HTML
Existen tres formas principales de aplicar CSS.
CSS en línea
Se escribe directamente dentro de una etiqueta HTML:
<h1 style="color: blue;">Título principal</h1>
Esta forma funciona, pero no es la más recomendable porque mezcla estructura y diseño dentro del mismo código.
CSS interno
Se escribe dentro del propio archivo HTML usando la etiqueta style:
<style> h1 { color: blue; }</style>Puede servir para pruebas rápidas, pero en proyectos reales es mejor separar los estilos en otro archivo.
CSS externo
Es la forma más recomendable. Creamos un archivo CSS independiente y lo enlazamos desde el HTML:
<link rel="stylesheet" href="styles.css">
De esta manera tenemos el HTML por un lado y el CSS por otro. Esto hace que el proyecto sea más limpio, más fácil de mantener y más profesional.
Sintaxis básica de CSS
CSS funciona con una estructura muy sencilla:
selector { propiedad: valor;}Ejemplo:
p { color: #333; font-size: 16px;}En este ejemplo:
pes el selector.coloryfont-sizeson propiedades.#333y16pxson valores.
El selector indica qué elemento queremos modificar.
La propiedad indica qué aspecto queremos cambiar.
El valor indica cómo queremos cambiarlo.
Primeros estilos para una página HTML
En una página de pruebas podemos empezar aplicando estilos generales al body:
body { font-family: Arial, sans-serif; background-color: #f4f6f8; color: #222; margin: 0; padding: 20px;}Con este código estamos cambiando la fuente, el color de fondo, el color del texto y los espacios generales de la página.
Estas son algunas de las propiedades más importantes:
| Propiedad | Para qué sirve |
|---|---|
font-family | Cambia el tipo de letra |
background-color | Cambia el color de fondo |
color | Cambia el color del texto |
margin | Controla el espacio exterior |
padding | Controla el espacio interior |
Dar estilo a títulos y textos
Los títulos ayudan a organizar el contenido de una página. Con CSS podemos hacer que destaquen visualmente:
h1 { color: #0f3057; font-size: 36px; text-align: center;}h2 { color: #00587a; border-bottom: 2px solid #00587a; padding-bottom: 5px;}Aquí usamos propiedades como:
colorfont-sizetext-alignborder-bottompadding-bottom
También podemos mejorar la lectura de los párrafos:
p { line-height: 1.6; font-size: 16px;}La propiedad line-height es muy importante porque mejora la separación entre líneas y hace que el texto sea más cómodo de leer.
Estilos para enlaces
Los enlaces se pueden personalizar fácilmente con CSS:
a { color: #0077cc; text-decoration: none;}a:hover { color: #ff6600; text-decoration: underline;}La pseudoclase :hover permite cambiar el estilo de un elemento cuando el usuario pasa el ratón por encima.
Esto es muy útil para crear páginas más interactivas.
Estilos para listas
También podemos mejorar el diseño de listas ordenadas y no ordenadas:
ul,ol { background-color: white; padding: 15px 30px; border-radius: 8px;}En este caso estamos aplicando el mismo estilo a ul y ol.
Esto nos permite ver cómo CSS puede seleccionar varios elementos al mismo tiempo.
Estilos para imágenes
Una regla muy habitual en CSS es hacer que las imágenes sean adaptables:
img { max-width: 100%; height: auto; border-radius: 8px;}Con max-width: 100% evitamos que la imagen se salga de su contenedor.
Con height: auto mantenemos la proporción original de la imagen.
Con border-radius podemos redondear las esquinas.
Estilos para formularios
Los formularios son una parte fundamental de muchas páginas web. Sin CSS suelen verse muy básicos, pero con unas pocas propiedades pueden mejorar mucho.
form { background-color: white; padding: 20px; border-radius: 10px; margin-top: 15px;}También podemos mejorar los campos de entrada:
input { display: block; width: 100%; max-width: 400px; padding: 10px; margin: 8px 0 15px; border: 1px solid #ccc; border-radius: 5px;}Aquí usamos propiedades como:
displaywidthmax-widthpaddingmarginborderborder-radius
Estas propiedades permiten que el formulario sea más ordenado, más claro y más agradable para el usuario.
Estilos para botones
Los botones también se pueden personalizar:
button { background-color: #0f3057; color: white; padding: 10px 18px; border: none; border-radius: 5px; cursor: pointer;}button:hover { background-color: #00587a;}Con CSS podemos cambiar el color de fondo, el color del texto, el tamaño, los bordes y el cursor.
La propiedad cursor: pointer hace que el cursor cambie al pasar por encima del botón, indicando que es un elemento clicable.
Selectores por ID y clases
CSS permite seleccionar elementos de diferentes maneras.
Un selector por etiqueta afecta a todas las etiquetas de ese tipo:
article { background-color: white;}Un selector por ID afecta a un elemento concreto:
#alerta { background-color: #fff3cd;}Un selector por clase permite reutilizar estilos en varios elementos:
.login-container { background-color: white; padding: 30px;}En proyectos reales, las clases son muy utilizadas porque nos permiten organizar mejor los estilos.
Cómo diseñar una pantalla de login con CSS
Una pantalla de login es un ejemplo perfecto para empezar con CSS porque contiene elementos muy comunes:
- Un título.
- Campos de usuario y contraseña.
- Un botón.
- Un checkbox.
- Un enlace de recuperación de contraseña.
Podemos centrar el login usando Flexbox:
body { font-family: Arial, sans-serif; background-color: #0f172a; min-height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center;}Flexbox nos permite centrar elementos de forma sencilla.
Las propiedades principales son:
| Propiedad | Función |
|---|---|
display: flex | Activa Flexbox |
justify-content: center | Centra horizontalmente |
align-items: center | Centra verticalmente |
min-height: 100vh | Hace que el body ocupe toda la altura de la pantalla |
Crear una tarjeta para el login
Para que el login se vea mejor, podemos crear una caja o tarjeta:
.login-container { background-color: white; padding: 30px; border-radius: 12px; width: 100%; max-width: 400px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);}Con esto conseguimos una pantalla de login más moderna y profesional.
La propiedad box-shadow añade una sombra al contenedor, mientras que border-radius redondea las esquinas.
Conclusión
CSS es el lenguaje que nos permite transformar una página HTML básica en una página visualmente atractiva.
En este capítulo hemos visto cómo empezar a aplicar estilos a títulos, textos, enlaces, listas, imágenes, formularios, botones y contenedores.
También hemos visto cómo mejorar una pantalla de login usando propiedades como background-color, padding, margin, border-radius, box-shadow y Flexbox.
A partir de este punto, nuestras páginas ya no solo tendrán estructura, sino también diseño.
CSS es un lenguaje utilizado para dar estilo a las páginas web. Permite cambiar colores, fuentes, tamaños, márgenes, fondos, bordes y la distribución visual de los elementos HTML.
CSS sirve para controlar la apariencia de una página web. Con CSS podemos hacer que una web sea más atractiva, legible, ordenada y adaptable a diferentes pantallas.
HTML crea la estructura de la página web, mientras que CSS se encarga del diseño visual. HTML define los elementos y CSS define cómo se ven.
La forma más recomendable es usar un archivo CSS externo y enlazarlo desde el HTML con la etiqueta link.
Un selector en CSS indica qué elemento HTML queremos modificar. Por ejemplo, h1 selecciona los títulos principales, .clase selecciona elementos con una clase y #id selecciona un elemento con un identificador concreto.
Flexbox es un sistema de CSS que permite distribuir y alinear elementos de forma sencilla. Es muy útil para centrar elementos o crear diseños flexibles.
