Acerca del diseño de páginas con CSS

Un diseño de página CSS utiliza el formato de hojas de estilos en cascada, en lugar de las tablas o
marcos HTML tradicionales, para organizar el contenido de un sitio web. El elemento básico del
diseño CSS es la etiqueta div, una etiqueta HTML que, en la mayoría de los casos, actúa como
contenedor de texto, imágenes y otros elementos de página. Cuando crea un diseño CSS, coloca
etiquetas div en la página, añade contenido a las mismas y las sitúa en distintos lugares. A
diferencia de las celdas de tabla, que solo pueden situarse en algún lugar dentro de las filas y
columnas de la tabla, las etiquetas div aparecen en cualquier lugar de una página web. Puede
situar etiquetas div de forma absoluta (especificando las coordenadas x e y) o de forma relativa
(especificando su ubicación con respecto a su ubicación actual). También puede situar etiquetas
div especificando elementos flotantes, rellenos y márgenes (el método preferido conforme al
estándar web actual).

Acerca de la estructura del diseño de páginas con CSS

Antes de continuar con esta sección, debería estar familiarizado con los conceptos básicos de
CSS.
El elemento básico del diseño CSS es la etiqueta div, una etiqueta HTML que, en la mayoría de los
casos, actúa como contenedor de texto, imágenes y otros elementos de página. En los siguientes
ejemplos se muestra una página HTML que contiene tres etiquetas div independientes: una
etiqueta de “contenedor” grande y otras dos etiquetas (una de barra lateral y una de contenido
principal) dentro de la etiqueta de contenedor.
A pesar de que con el paso de los años las imágenes, los videos y las animaciones han tomado
gran relevancia como medios de contenido por Internet, el texto sigue representando la principal
fuente de información y la de uso más común.
La importancia de manejar correctamente un texto va desde la codificación hasta la interfaz.

La tipografía es uno de los elementos más importantes entre los que componen una página web.
Un diseñador web debe tener siempre en cuenta los múltiples problemas que pueden surgir desde
el momento que decide establecer las diferentes tipografías.

En la primera parte de este artículo estudiaremos la manera en que se debe estructurar un texto,
como aplicar de manera correcta las etiquetas HTML que se relacionan con él y cómo lograr su
manipulación para generar una buena semántica en el código y una presentación adecuada en la
interfaz.

Dar formato a un texto en HTML

Debido a que su aplicación es sencilla, muchos consideran al texto algo fácil de implementar en
una estructura HTML sin embargo se omiten muchos aspectos relativos a su formato.
Nos concentramos tanto en aspectos de la estructura del sitio, capas, links, secciones, que nos
olvidamos que existen toda una gama de etiquetas desarrolladas exclusivamente para dar un
formato correcto al texto.
Con la llegada de CSS muchas de estas etiquetas fueron quedando enterradas y en el olvido, ya
que los estilos podían replicar lo que se hacía con ellas, pero esto no significó que se declararan
obsoletas. Al contrario, su uso sigue siendo considerado lo correcto, pues agregan una correcta
semántica al código y delimitan correctamente la función de cada parte del texto.
Desgraciadamente, actualmente siguen siendo muchas las malas costumbres que se tienen en
relación al texto, una de las más comunes es el manejo del salto de línea “br” para dar la
presentación que deseamos.
Usamos saltos de línea en todos lados, para separar trozos de texto, para separar títulos e incluso
para imitar funciones de padding.

Debemos recordar que existen etiquetas como “p” párrafo que cumplen mejor con una función de
segmentación y que los títulos deben ser definidos mediante cabeceras de “h1” hasta “h6”.
El hecho de que algunos navegadores muestren las etiquetas de manera similar, no significa que
cumplan la misma función, debemos aprender a marcar los elementos de texto como citas,
abreviaturas o códigos, ya que no todos serán párrafos comunes y corrientes.

Resumen de etiquetas HTML para poner texto en una web

Resaltar textos
<strong> Texto de mayor importancia</strong>
Normalmente devuelve el texto en negrita, pero fundamentalmente se usa para dar mayor
importancia a ciertas palabras o frases dentro de un texto. Es una etiqueta importante para el SEO.
<b>texto en negrita</b>
La etiqueta que convierte el texto en negrita, simplemente. Para darle a un texto mayor importacia
es más correcto usar <strong>.
<em> texto en cursiva </em>
Crea énfasis en el texto seleccionado, normalmente mostrando el texto en cursiva. Es una manera
de resaltar parte del texto. Usa esta etiqueta en lugar de <i>.
<h1> títulos y encabezados</h1>
Crea títulos, para dar más o menos importancia a frases de tu texto y establecer orden dentro de la
narración. Hay 6 niveles de mayor a menor importante, de H1 a H6. Estas etiquetas título son
importantes para el SEO.
<big>texto más grande</big>
Una forma rápida de aumentar el tamaño de la fuente. Para hacer el texto más pequeño sin
usar css se usa <small>.
_subíndice
Muestra el texto dentro de estas etiquetas por debajo de la línea normal, a modo de un subíndice.
^superíndice
Muestra el texto dentro de estas etiquetas por encima de la línea normal, a modo de un
superíndice.
Estructura y disposición de textos en la página
<p>bloque de texto</p>
Establece un bloque personalizado de texto en tu página. Se utilizan sobre todo junto con las hojas
de estilos para crear estructuras en los textos web.
<span> Bloque de texto en línea</span>
Similar a la etiqueta div, pero el texto contenido dentro de esta etiqueta sigue el flujo normal del
resto, mientras que el texto contenido dentro de la etiqueta <div> actúa como un bloque
separándolo visualmente del resto. Puedes leer más información sobre elementos y etiquetas en
HTML.
Texto preformateado
<pre> texto preformateado</pre>
Soportes de texto preformateado. Si envuelve alrededor de este texto, que va a seguir la forma
del texto en el código – es decir, sin formato extra tiene que poner pulg Si tienes espacio que en su
código, éste aparecerá espaciadas en la página.
<samp> Textos de ejemplo</samp>
Se utiliza para mostrar un ejemplo en pantalla, por lo general de una salida de un programa, un
script, etc. Es similar en uso a la etiqueta <code>.
<code> código</code>
Establece el texto como código, se usa mucho en páginas como esta, para ejemplos de código
fuente.
Citas y Referencias
<blockquote>cita larga</blockquote>
Sangría todo el bloque de texto de ambas partes y añade saltos de línea superior e inferior. Se
utiliza para citas largas.
<cite>cita</cite>
Muestra una cita (el título de una obra a la que estás haciendo referencia, por ejemplo).
<q>citas pequeñas</q>
Se usa para entrecomillar una cita pequeña. A diferencia de <blockquote>, no presenta el texto en
un bloque separado sino que sigue el flujo normal de la página.
<dfn> definición</dfn>
Pues eso, para formatear un texto en HTML como una definición.
<abbr>abreviaturas</abbr>
Denota una abreviatura, utilizar el atributo title para darle el significado completo.
<acronym>acrónimos</acronym>
Lo mismo que la anterior. Sólo que en lugar de para abreviaturas se usa para acrónimos.

Ahora vamos a ver en detalle las etiquetas HTML más importantes para textos:
Párrafos
Quizás el elemento más importante que se relaciona con un texto es el párrafo, generalmente su
etiqueta es utilizada para definir y englobar la mayor parte del texto y su contenido puede variar
mucho, lo cual la convierte en la etiqueta con texto más rico dentro de una página web.

Su declaración es tan sencilla como usar la etiqueta de apertura, el texto deseado y finalmente la
clausura, como esto:

<p>Este es un párrafo sencillo</p>

Una distancia será agregara entre los dos párrafos, pues las reglas de escritura nos indican que
así debe ser.

Las ventajas que conlleva el agrupar el texto en párrafos en vez de utilizar “br”, es que ahora cada
texto es una unidad y como tal tiene significado semántico. Tanto para mejorar el SEO como la
legilibilidad es recomendable su uso.
Esto no significa que este incorrecto usar etiquetas “br” en ocasiones, si por ejemplo queremos
definir un párrafo y dentro de él establecer una distancia podemos hacer algo como esto:

<p>Aquí tenemos un párrafo más largo donde hacemos un salto de línea y<br />
continuamos el texto del párrafo debajo </p>

Strong y em
Si lo que queremos es dar énfasis a alguna parte de nuestro texto entonces tenemos dos
alternativas, podemos utilizar la etiqueta “em” para dar un énfasis con letra de tipo itálica
o “strong” si queremos dar un mayor énfasis y poner el texto en negrita.

<p>Este es un párrafo con <em>énfasis</em>.

Como ya dije, con <strong>¡énfasis!</strong></p>

Cabeceras y títulos
En la gran mayoría de los textos, los párrafos constituyen la parte más grande e importante del
contenido, pero en ocasiones dichos párrafos necesitan separarse con títulos y subtítulos para
darle una mejor estructura al documento.
Para esas ocasiones fueron creadas las etiquetas de tipo cabecera las cuales están definidas por
los nombres “h1”, “h2”, “h3”, “h4”, “h5” y “h6”.
El efecto que se produce al utilizar estas etiquetas es dar un formato que distinga a la línea donde
se aplica, resaltándola sobre el resto del texto.

Por defecto agrega un espacio en la parte superior y otro en la parte inferior, aumenta el tamaño de
la letra y las pone en negritas.

La etiqueta “h1” representa el nivel más alto y por consecuente “h6” el más bajo, así que debemos
respetar esta jerarquía al momento de estar escribiendo, ya que si usamos la etiqueta “h2” para
definir el título del artículo no podemos usar “h1” para un subtítulo.
Si el estilo por defecto de una cabecera no te agrada, o sientes que no se adapta a lo que tienes
en la página, no te preocupes recuerda que siempre puedes editar esto con CSS.

<h1>Título del escrito</h1>

<p>Párrafo de texto.</p>

<h2>Subtítulo del escrito</h2>

<p>Texto sobre el subtítulo de importancia 2</p>

<h3>Tercer nivel del escrito</h3>

<p>Texto sobre el subtítulo de importancia 3</p>

<h2>Otro subtítulo del escrito</h2>

<p>Más texto</p>

HTML

Copiar

Citas
Conforme vamos avanzando nos encontremos con etiquetas menos utilizadas cuya función es
marcar tipos muy específicos de texto, dentro de esta clase encontramos a las citas.

El hecho de que sean utilizadas con menos frecuencia que los párrafos o los saltos de línea, no
significa que no sean importantes.

Su función está en citar las palabras de otra persona u organizaciones en un escrito, o referenciar
un documento.
La principal etiqueta para agregar una cita es “blockquote”, y se usa para señalar una cita de texto
grande, que por lo general se busca presentar de manera individual.
Entre los aspectos relevantes de esta etiqueta, encontramos que su contenido se presenta
mediante párrafos y podemos agregar un link hacia una página, en caso de que el contenido pueda
ser observado por Internet.

<blockquote cite=”https://www.lawebera.es/xhtml-css/conceptos-basicos-html.php“>
HTML tiene una sintaxis muy sencilla y fácil de comprender,
 el contenido está estructurado en elementos,
los cuales son declarados mediante el uso
de etiquetas que proporcionan información
adicional a través de atributos.
</blockquote>

HTML

Copiar

Otra etiqueta que también puede ser utilizada, en este caso para citas pequeñas, es “q”. A
diferencia de “blockquote”, esta etiqueta se utiliza más para desplegar citas “inline” es decir en una
sóla línea sin desplegar un bloque individual.
También existe la etiqueta “cite” que sirve para etiquetar al autor de la referencia.

Como se menciona en el artículo

de <cite>La Webera</cite> sobre el HTML:

<q>HTML tiene una sintaxis muy sencilla

y fácil de comprender, el contenido
está estructurado en elementos, los cuales
son declarados mediante el uso de etiquetas
que proporcionan información adicional
a través de atributos</q>

HTML

Copiar

Abreviaturas y acrónimos
Otro caso muy específico que podemos encontrar son las abreviaturas y acrónimos, son pocas
veces las que llegamos a utilizar estas etiquetas, pero ya dijimos siguen siendo importantes.

Si te encuentras con una abreviatura debes marcarla como tal y para ello tenemos la
etiqueta “abbr”, por otro lado si lo que tienes es un acrónimo, es decir una abreviatura que se
puede leer y pronunciar como una sola palabra entonces puedes usar “acronym”.
Ambas etiquetas puedes contener el atributo “title” lo que permitirá añadir su significado, así cada
vez que el usuario pase el cursor sobre la palabra un tooltip se encargará de presentarle el nombre
o significado completo.

La <acronym title="Fédération Internationale de Football Association">FIFA</acronym>,

es el órgano que rige el fútbol.

HTML

Copiar

Código en el texto
Si eres diseñador o desarrollador y te has encontrado con la necesidad de escribir algún artículo
para tu página web que explique el trabajo que realizaste, es muy probable que hayas tenido la
necesidad de plasmar una parte de tu código, si lo hiciste de forma correcta utilizaste la
etiqueta “code” para envolver dicho texto.
La etiqueta “code” nos permite introducir marcado HTML en un párrafo para identificarlo y
manejarlo como tal.
<code>
Este es el código de un
<strong>párrafo HTML</strong>
</code>

HTML

Copiar

Si queremos que la indentación de dicho código se respete tenemos que introducirlo en un

elemento de tipo “pre”, ya que por default HTML no toma como referencia los espacios en blanco o
los tabs que agreguemos.
Y así como estás existen muchas otras clases de etiquetas muy específicas como “address” que
nos sirve para especificar la dirección de un establecimiento, generalmente utilizado en la sección
de contacto o “kbd” que sugiere la parte donde un usuario debería introducir texto.
Dar estilos a los textos con CSS
Ahora ya tenemos una amplia noción de como estructurar el texto con XHTML, pero esto no
significa que llegamos al final del camino.
Si observamos los elementos que creamos por defecto con estas etiqueta, podremos darnos
cuenta que no son para nada atractivos visualmente, por lo que es muy probable que deseemos
darle un estilo para crear un mejor entorno.

Para ello vamos a recurrir a CSS para tomar el control de las fuentes, tamaños, colores y espacios.
Tipo de fuente
En muchos casos, el primer encuentro con el manejo de fuentes en un ordenador se puede
remontar a un procesador de texto, al momento de realizar nuestros trabajos o tareas utilizábamos
ciertas fuentes para identificar los encabezados y el contenido, cada quien escogía el tipo que más
se adecuaba al documento y a nuestros gustos.

Tenemos que tener en cuenta que muchas fuentes no son universales por lo que si incluimos
alguna de estás en nuestra página un usuario no la puede apreciar de la misma manera.
La primera parte de esta propiedad que estudiaremos es “font-family”, con esta parte podemos
definir que fuente o tipografía usaremos en el documento.
El uso de muchas fuentes en un sólo documento puede estropear nuestra web, no lucirá nada bien
y sólo atormentaremos al usuario invadiéndolo con basura anti-estética.
Por ello esta propiedad debe usarse relativamente poco, pero su importancia no disminuye para
nada.

El valor de “font-family” puede ser el nombre de una fuente, el cual debe ir entre comillas, o
también puede ser el nombre de varias fuentes separados por comas; de esta manera podemos
crear un respaldo, en caso de que el navegador no pueda encontrar la fuente principal usará la
siguiente en la lista.

Este respaldo es comúnmente utilizado por cuestiones de seguridad, existen ocasiones en que
algunas fuentes tienen nombres diferentes en distintos sistemas operativos o simplemente la
fuente que estamos utilizando es muy rara, por lo que se opta por utilizar fuentes genéricas
como sans-serif o monospace para actuar en caso de que todas las demás fallen.

body { font-family: "Arial" }

.contenido { font-family: Arial, Helvetica, Sans-serif }

CSS

Copiar
Tipografía en pantalla vs. tipografía impresa
La tipografía de las páginas web tienen diferencias sustanciales con la tipografía impresa.

La resolución de las tipografías de las páginas web está muy limitada por la cantidad de puntos por
pulgada(ppp), que en los sistemas de impresión, aún los de menor resolución, son muy superiores.
Sin embargo, gracias al sistema “anti-alias” que los sistemas operativos aplican a sus fuentes, es
posible mejorar la visibilidad de las mismas.
El “anti-alias” es el suavizado de los bordes mediante la aplicación de un gradiente.
En la siguiente imagen, veremos una comparación de fuentes con y sin anti-alias.

Muchos diseñadores noveles tienden a justificar el texto en pantalla. Ten en cuenta desde el
principio que un texto justificado en pantalla se lee pero que alineado a la izquierda.
El modo de renderizar este tipo de alineación no es óptima en pantallas de ordenador.

El navegador tiende a justificar el texto a costa de establecer espacios irregulares entre las
palabras, algunas aparecen más juntas, otras claramente alejadas provocando saltos bruscos
dentro de las frases lo que dificulta su lectura. Lo más usable es dejar el texto alineado a la
izquierda.
Color del texto
La propiedad “color” ya fue mencionada anteriormente en nuestro manual, como su nombre lo
indica sirve para establecer un color para un elemento, en este caso nos ayudará a determinar el
color en que se mostrarán las letras del texto.
En cambio si lo que quisiéramos es cambiar el fondo del texto, entonces debemos utilizar
la propiedad “background-color”, la cual únicamente se encarga de resaltar la parte que queda
exactamente atrás del texto.

body {
font-family: Arial, Helvetica, Sans-serif;
color: white;
background-color: blue;
}

CSS

Copiar

Tamaño
Para definir el tamaño de la fuente tenemos a “font-size”, dicha propiedad recibe unidades de tipo
píxel, em o porcentaje como valor, pero también tiene la particularidad de recibir cadenas de texto
como “small”, “medium” y “large” las cuales establecen un valor predefinido para el tamaño, el cual
puede variar según el navegador.

body {
font-family: Arial, Helvetica, Sans-serif;
color: white;
background-color: blue;
font-size: 12px;
}

.contenido{
font-size: 80%;
}

CSS

Copiar

Interlineado (line-height)
En muchas ocasiones existe la necesidad de ajustar la altura de la línea (interlineado) donde
desplegamos el texto, para ello muchos recurren a modificar la fuente del texto, pero el proceso
correcto sería utilizar la propiedad “line-height”.
Dicha propiedad nos permitirá crear un texto más legible al ajustar la línea de texto en elementos
como párrafos.

p { line-height: 1.5; }

CSS

Copiar

Otro aspecto que mejora la legibilidad y la estética, la utilización correcta de espacios en blanco.
Establecer márgenes a los lados del texto sirve como método de establecer separación entre
contenidos y proporciona alivio visual.
La utilización correcta del interlineado favorece la lectura de los textos, ya que es mucho más
sencillo ubicar la siguiente línea.
Para que el usuario no se canse de la lectura, es una buena medida establecer párrafos
relativamente cortos y con espacios en blanco entre ellos, de forma tal que se produzca un
descanso visual.

Otro factor que provoca cansancio visual y dificultades para encontrar la siguiente línea, es
establecer anchos de párrafo de mucha longitud, siendo preferible que el texto se extienda más en
lo vertical con anchos de línea más reducidos.

Negrita y cursiva
Si lo que queremos es establecer el grosor y la inclinación de nuestro texto entonces debemos
recurrir a “font-weight” y “font-style” para definirlo.
La propiedad “font-weight” se encargará de definir el grosor de la fuente, los valores típicos para
esto son “bold” que nos pondrá el texto en negritas y “normal” que lo regresará a una visualización
común.

Por su parte, la propiedad “font-style” se usará para volver cursiva un tipo de letra, y por cursiva
nos referimos a dar un formato itálico.

p{
font-weight: bold;
font-style: italic;
}

CSS

Copiar
Mayúsculas y minúsculas
Una vez adentrado en la estilización del texto, podemos pasar a aspectos más específicos como
por ejemplo el aspecto de cada letra, dentro de esto encontramos a las mayúsculas y minúsculas.

Muchos consideran de mala educación y mal gusto escribir todo el texto con mayúsculas, por lo
que es mejor escribir el texto de forma normal.
No obstante, hay propiedades CSS que sirven para cambira la forma del texto, estas propiedades
son “font-variant” y “text-transform”.
En el caso de “font-variant” tenemos el calor “small-caps” que sirve para convertir un texto a
pequeñas letras mayúsculas que no revasen la altura de una minúscula, es decir simplemente
toman la forma.

Por otro lado “text-transform” nos permite jugar más con las letras, ya que con su propiedad
“uppercase” podemos transformar todo el texto a mayúsculas o con “lowercase” convertirlas a
minúsculas, y si lo que queremos es una palabra correctamente escrita entonces podemos usar
“capitalize” que convierte a mayúscula únicamente la primera letra de la palabra.

h1 { text-transform: capitalize; }

CSS

Copiar

Alineación
Finalmente, una vez que ya tenemos estilizadas las letras, podemos definir una alineación
adecuada para mostrar nuestro texto.

Como en todo lo que es bidimensional, existen dos formas básicas de alinear, la horizontal y la
vertical, siendo el primer caso el más fácil.

Para definir una alineación horizontal basta con utilizar la propiedad “text-align”, la cual se
encargará de utilizar el elemento padre como marco para alinear el texto con alguno de sus 4
valores “left”, “right”, “center” o “justify”.
La alineación horizontal tiene utilidad en algunos tipos de textos muy especiales, pero para bloques
de texto más o menos extensos, es mejor que se encuentren alineados a la izquierda.
Esto se debe a que para el lector es más sencillo ubicar los principios de línea, lo que resulta
mucho más difícil cuando el texto se encuentra alineado a la derecha, debido a la irregularidad de
los comienzos de línea ubicados a la derecha.

Por otra parte, los textos justificados necesitan modificar el espacio entre palabras para que tanto
los comienzos como los finales se encuentren alineados, como dijimos un poco más arriba, esto
que provoca una fuerte asimetría que perjudica la lectura y la presentación de la página.

El código CSS para alinear el texto es el siguiente:

text-align: center; /* texto centrado */

text-align: left; /* texto alineado a la izquierda, por defecto */
text-align: right; /* texto alineado a la derecha */
text-align: justify; /* texto justificado */

CSS

Copiar
Por su parte el alineado vertical de textos es un poco más de trucos, podemos utilizar la propiedad
“vertical-align” pero puede que los resultados no sean los esperados.
Los valores para esta propiedad son “middle”, “bottom”, “text-top”, “text-bottom”, “sub” y “super”.