Para poner un texto en negrita con CSS, usa font-weight: bold;. Para mostrarlo en cursiva con CSS, utiliza font-style: italic;.
.negrita {
font-weight: bold;
}
.cursiva {
font-style: italic;
}En HTML puedes usar <strong> para texto importante y <em> para dar énfasis. Normalmente se muestran en negrita y cursiva, respectivamente.
<strong>Texto importante en negrita</strong>
<em>Texto con énfasis en cursiva</em>Cómo poner negrita en CSS
La propiedad para aplicar negrita en CSS es font-weight:
.texto-negrita {
font-weight: bold;
}Después, añade la clase al elemento HTML:
<p class="texto-negrita">Este párrafo aparece en negrita.</p>También puedes usar un valor numérico. 700 equivale a bold, mientras que 400 corresponde al peso normal:
.texto-negrita {
font-weight: 700;
}Si solo quieres destacar una palabra o parte de una frase, envuélvela en un <span>:
<p>Este texto contiene una <span class="texto-negrita">palabra en negrita</span>.</p>Cómo poner negrita en HTML
Para marcar una parte realmente importante del contenido, usa la etiqueta <strong>:
<p><strong>Importante:</strong> guarda los cambios antes de salir.</p>La etiqueta <b> también suele mostrar el texto en negrita, pero no indica que ese contenido tenga especial importancia:
<p>Disponible en color <b>negro</b>.</p>La elección correcta es sencilla:
- Usa
<strong>cuando el texto sea importante. - Usa
<b>para llamar la atención sin añadir importancia. - Usa
font-weightcuando solo quieras controlar el aspecto visual.
Cómo poner cursiva en CSS
La propiedad para aplicar cursiva en CSS es font-style:
.texto-cursiva {
font-style: italic;
}Ejemplo en HTML:
<p class="texto-cursiva">Este párrafo aparece en cursiva.</p>Para aplicar cursiva solamente a una palabra:
<p>Esta palabra está en <span class="texto-cursiva">cursiva</span>.</p>Si necesitas quitar una cursiva heredada de otro estilo, usa normal:
.sin-cursiva {
font-style: normal;
}Cómo poner cursiva en HTML
La etiqueta <em> se utiliza para dar énfasis a una palabra o frase. Los navegadores suelen mostrarla en cursiva:
<p>Debes guardar el archivo <em>antes</em> de cerrar.</p>La etiqueta <i> se reserva para texto diferenciado por otro motivo, como un término técnico, una expresión en otro idioma o un nombre científico:
<p>La expresión <i lang="en">responsive design</i> significa diseño adaptable.</p>Si la cursiva es únicamente decorativa, utiliza una clase CSS con font-style: italic;.
Cómo combinar negrita y cursiva
Puedes aplicar las dos propiedades en una misma clase:
.negrita-cursiva {
font-weight: 700;
font-style: italic;
}<p class="negrita-cursiva">Texto en negrita y cursiva.</p>Si ambas características tienen sentido semántico, también puedes combinar las etiquetas HTML:
<p><strong><em>Este mensaje requiere especial atención.</em></strong></p>Ejemplo completo de negrita y cursiva
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Negrita y cursiva</title>
<style>
.negrita {
font-weight: 700;
}
.cursiva {
font-style: italic;
}
.negrita-cursiva {
font-weight: 700;
font-style: italic;
}
</style>
</head>
<body>
<p class="negrita">Texto en negrita.</p>
<p class="cursiva">Texto en cursiva.</p>
<p class="negrita-cursiva">Texto en negrita y cursiva.</p>
</body>
</html>¿Qué hacer si la negrita o la cursiva no funciona?
Comprueba estos puntos:
- Que la clase escrita en HTML coincida exactamente con la clase de CSS.
- Que otra regla más específica no esté sobrescribiendo
font-weightofont-style. - Que la fuente utilizada incluya el peso o la variante cursiva que necesitas. Si no existe, el navegador puede usar la variante disponible más cercana o simular el estilo.
Un truco CSS que se ocupa mucho, es forzar la propiedad usando la regla !important, por ejemplo:
.clase { font-weight: bold !important; }
Con esto puedes darle prioridad a tu clase por sobre el resto.
Preguntas frecuentes
¿Qué propiedad CSS pone el texto en negrita?
La propiedad font-weight. Puedes usar font-weight: bold; o font-weight: 700;.
¿Qué propiedad CSS pone el texto en cursiva?
La propiedad font-style con el valor italic: font-style: italic;.
¿Cuál es la diferencia entre strong y b?
<strong> indica que el contenido es importante. <b> llama la atención sobre el texto, pero no le añade esa importancia semántica.
¿Cuál es la diferencia entre em e i?
<em> añade énfasis al contenido. <i> identifica texto diferenciado, como una expresión en otro idioma o un término técnico.
Artículos relacionados
