1.1 Color
CSS (Cascading Style Sheets) ofrece muchas propiedades para estilizar texto. Entre ellas, las claves son
color, font-size y font-weight. Estas propiedades permiten controlar el color
del texto, su tamaño y el grosor de la fuente respectivamente. Veamos cada una de estas propiedades en detalle.
La propiedad color define el color del texto. Puede establecerse mediante diferentes formatos de color, incluyendo nombres de colores, valores hexadecimales, RGB, RGBA, HSL y HSLA.
Ejemplos de uso
1. Nombres de colores:
p {
color: red;
}
2. Valores hexadecimales:
p {
color: #ff0000;
}
3. RGB y RGBA:
p {
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); /* Rojo transparente */
}
4. HSL y HSLA:
p {
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5); /* Rojo transparente */
}
Ejemplo de uso en HTML:
p {
color: #3498db; /* Color azul */
}
<body>
<p>Este texto será azul.</p>
</body>
1.2 Propiedad font-size
La propiedad font-size define el tamaño del texto. El valor puede especificarse en diferentes unidades, tales como
píxeles (px), relativas (em, rem, %), derivadas de píxeles (mm, cm, pt, pc), vw y vh
(ancho y alto del viewport), entre otras.
Ejemplos de uso
1. Píxeles:
p {
font-size: 16px;
}
2. Relativas:
%, em, rem
p {
font-size: 150%; /* 150% del tamaño base de la fuente */
font-size: 1.5em; /* 1.5 veces el tamaño base de la fuente */
font-size: 1.5rem; /* tamaño relativo al tamaño de fuente del elemento <html> */
}
3. Unidades del viewport:
p {
font-size: 2vw; /* 2% del ancho del viewport */
font-size: 2vh; /* 2% del alto del viewport */
}
Ejemplo de uso en HTML:
p {
font-size: 18px; /* Tamaño del texto 18 píxeles */
}
<body>
<p>Este texto tendrá un tamaño de 18 píxeles.</p>
</body>
1.3 Propiedad font-weight
La propiedad font-weight define el grosor del texto. Los valores pueden ser palabras clave
(normal, bold, bolder, lighter) o valores numéricos desde
100 hasta 900, donde 400 corresponde a normal y
700 corresponde a bold.
Ejemplos de uso
1. Palabras clave:
p {
font-weight: bold;
}
2. Valores numéricos:
p {
font-weight: 300; /* Texto ligero */
font-weight: 700; /* Equivalente a bold */
}
Ejemplo de uso en HTML:
p {
font-weight: 700; /* Texto en negrita */
}
<body>
<p>Este texto será en negrita.</p>
</body>
GO TO FULL VERSION