▷ Introducción a CSS 【 TEORÍA 】
Introducción a CSS
CSS (Cascading Style Sheets) es un lenguaje utilizado para describir la presentación de un documento HTML. Con CSS, puedes controlar la apariencia visual de tus páginas web, como colores, fuentes, tamaños y diseño, separando el contenido (HTML) de la presentación.
¿Qué es CSS?
CSS permite estilizar elementos HTML para crear sitios web más atractivos y funcionales. Utilizando reglas de estilo, puedes modificar aspectos visuales como:
- Colores de texto y fondo.
- Tamaños y estilos de fuente.
- Espaciados y márgenes.
- Diseño de elementos (alineación, distribución, etc.).
Cómo se Codifica CSS
Existen tres formas principales de incluir CSS en tus páginas:
- CSS en línea: Se escribe directamente en la etiqueta HTML mediante el atributo
style. - CSS interno: Se incluye dentro de la etiqueta
<style>en la sección<head>del documento. - CSS externo: Se utiliza un archivo separado vinculado al documento HTML mediante la etiqueta
<link>.
Uso de CSS en Línea
El CSS en línea se escribe directamente dentro de las etiquetas HTML utilizando el atributo style. Este método es útil para aplicar estilos rápidos a elementos específicos, aunque no es recomendado para proyectos grandes.
Ejemplo:
<p style="color: blue; font-size: 14px;">Este es un texto con estilo en línea.</p>
Uso de la Etiqueta <style>
La etiqueta <style> permite definir estilos directamente dentro del documento HTML. Se utiliza dentro de <head> y tiene esta estructura:
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
font-size: 2em;
}
</style>
</head>
Uso de la Etiqueta <link>
La etiqueta <link> conecta tu documento HTML con un archivo CSS externo. Esto facilita la reutilización de estilos en múltiples páginas y mantiene el código HTML más limpio:
<head>
<link rel="stylesheet" href="styles.css">
</head>
En el archivo styles.css:
body {
background-color: lightblue;
}
h1 {
color: navy;
font-size: 2em;
}
Ventajas de Cada Método
-
CSS en línea:
- Ideal para pruebas rápidas o aplicar estilos a elementos individuales.
- No es reutilizable ni escalable.
-
<style>(CSS interno):- Ideal para pruebas rápidas o proyectos pequeños.
- No es reutilizable ni recomendado para proyectos grandes.
-
<link>(CSS externo):- Reutilizable para múltiples páginas.
- Facilita el mantenimiento y separación del diseño y el contenido.
Medidas en CSS
En CSS, puedes utilizar diferentes unidades de medida para definir tamaños, márgenes, fuentes y más. Aquí están las más comunes:
1. Porcentajes (%)
Definen tamaños relativos al contenedor padre.
div {
width: 50%;
}
2. Píxeles (px)
Unidad fija basada en la resolución de pantalla.
p {
font-size: 16px;
}
3. Puntos (pt)
Unidad utilizada principalmente en documentos impresos.
h1 {
font-size: 12pt;
}
4. em
Unidad relativa al tamaño de fuente del elemento padre. Por ejemplo:
body {
font-size: 16px;
}
h1 {
font-size: 2em; /* 32px (16px x 2) */
}
5. rem
Unidad relativa al tamaño de fuente del elemento raíz (html). Por ejemplo:
html {
font-size: 16px;
}
p {
font-size: 1.5rem; /* 24px (16px x 1.5) */
}
Comentarios
Publicar un comentario
Cuéntame que opinas acerca del artículo. Recuerda ser respetuoso si quieres que se publique tu comentario 😊