CSS (Cascading Style Sheets) es el lenguaje utilizado para definir el estilo y el diseño
de los documentos HTML. Aquí te explico los conceptos básicos para empezar a
trabajar con CSS:
¿Qué es CSS?
CSS es un lenguaje de estilo que describe cómo se va a presentar un documento HTML.
Permite definir el aspecto visual de elementos HTML, como el color, tamaño, posición,
márgenes, bordes, etc.
¿Cómo se usa CSS?
Métodos de Inclusión de CSS en HTML
1. CSS Interno: Utilizando la etiqueta <style> dentro del documento HTML,
entre las etiquetas <head> y </head>:
html
Copiar código
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Ejemplo de CSS Interno</title>
<style>
/* Estilos CSS aquí */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Este es un encabezado</h1>
<p>Este es un párrafo con estilos definidos
internamente.</p>
</body>
</html>
2. CSS Externo: Utilizando un archivo CSS separado, que luego se enlaza con el
documento HTML utilizando la etiqueta <link> dentro de <head>:
o Ejemplo de archivo CSS ([Link]):
css
Copiar código
/* [Link] */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
o Enlazando el archivo CSS externo al HTML:
html
Copiar código
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Ejemplo de CSS Externo</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Este es un encabezado</h1>
<p>Este es un párrafo con estilos definidos en un
archivo CSS externo.</p>
</body>
</html>
3. CSS Inline: Aplicando estilos directamente en un elemento HTML utilizando el
atributo style:
html
Copiar código
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Ejemplo de CSS Inline</title>
</head>
<body>
<h1 style="color: blue;">Este es un encabezado</h1>
<p style="font-family: Arial, sans-serif;">Este es un
párrafo con estilos aplicados inline.</p>
</body>
</html>
Conceptos Clave de CSS
Selectores: Permiten aplicar estilos a elementos específicos del HTML. Por
ejemplo, body, h1, .clase, #id, etc.
Propiedades: Definen cómo se verán los elementos seleccionados. Por ejemplo,
color, font-size, margin, padding, background-color, etc.
Valores: Especifican el valor de una propiedad CSS. Por ejemplo, blue, 14px,
1em, #f0f0f0, etc.
Cascada y Especificidad: CSS sigue reglas de cascada para determinar qué
estilos se aplican a un elemento, y la especificidad determina cuál estilo tiene
prioridad si se aplican varios estilos a un mismo elemento.
Recursos para Aprender CSS
MDN Web Docs: La documentación oficial de CSS en Mozilla Developer
Network (MDN) es una excelente referencia y guía de aprendizaje.
Cursos en línea: Plataformas como Coursera, edX, Udemy, y Codecademy
ofrecen cursos gratuitos y de pago sobre CSS y diseño web.
Libros: "CSS: The Definitive Guide" de Eric Meyer y "CSS Secrets" de Lea
Verou son libros altamente recomendados para aprender CSS de manera
profunda.
Práctica: La mejor manera de aprender CSS es practicando. Experimenta con
diferentes estilos, diseños y efectos para entender cómo afectan al aspecto visual
de tus páginas web.
Con estos recursos y práctica constante, podrás dominar los fundamentos de CSS y
comenzar a crear diseños atractivos y bien estructurados para tus páginas web.