Lenguajes
Web/Otros
Extra
Enlaces

Modificar aspecto de la primera letra con CSS

Mediante CSS es posible cambiar el estilo de la primera letra de un párrafo o porción de texto que queramos. Esto nos será muy util al comienzo de un texto para poner por ejemplo la letra inicial más grande. Pongamos por caso que tenemos este párrafo:

<p class="Titular">En Holamundo encontrarás todos los tutoriales que necesites sobre el mundo de la programación</p>

Ahora, entre <head> y </head> escribimos:

<style type="text/css">
.Titular {

font-size: 14px;
font-weight: normal;

}
.Titular:first-letter {

font-size: 16px;
font-weight: bold;
color: red;

}

</style>

Primero hemos definido el estilo para la clase Titular y luego para la primera letra de la clase Titular, utilizando el pseudo elemento first-letter (primera letra). Utilizando este pseudo elemento podemos aplicar cualquier tipo de estilo sobre la primera letra. El estilo del resto del texto lo definiremos mediante la clase Titular a secas.

En este caso la letra 'E' inicial del texto aparecerá en negrita, más grande y roja. Puede ser útil para la letra inicial de un texto o un párrafo, dándole al usuario una visión rápida de dónde empieza el texto.


Redactado por Nenillo

Inicio | JavaScript necesario para este enlace

Noticias en RSS2 XHTML Vlido CSS Vlido