Uso de CSS / CSS desde cero

Esta página no pretende ser un manual de CSS. Sino una recopilación donde puedas conocer sus ventajas y usos. En la sección ejemplos y en la sección documentación encontrarás suficiente información al respecto para profundizar. Ya leidas las ventajas. En cuanto al uso, explicaré las posibles maneras de usar las hojas de estilo.

Reglas de estilo integradas

Las reglas de estilo integradas a un tag es la forma más elemental de usar CSS. Para ello se tendría que aplicar entre las etiquetas <HEAD> y </HEAD> la siguiente declaración para avisar al navegador de que el lenguaje que estamos usando en las hojas de estilo es CSS:

Y después bastará con aplicar una regla a una etiqueta HTML por medio de su atributo STYLE de la siguiente forma:

De esta forma indicaremos que ese parrafo en concreto estará en color rojo. Pero esto es muy simple ya que no aprovecha la potencia de CSS, ya que para cada parrafo tendriamos que repetir la sentencia, y para modificar cualquier aspecto del color o tamaño tendriamos que ir modificandolo parrafo a parrafo.

Hojas de estilo integradas

Una opción es introducir dentro de cada documento, en el <head> el comando <style type="text/css">...</style>. Como por ejemplo:

<!-- body { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color:#333333; } IMG { vertical-align: 50%;}
P {color: #00ff00;}
A {font-family: sans-serif;}
A:link {color: #0000ee;}
A:visited {color: #551a8b;}
A:active {color: #ff0000;}

.citas { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;} --></style>

En este caso establecemos diferentes reglas de aplicación unicamente a ese documento, como es la tipografía, el tamaño de las letras, la apariencia de los hipervínculos, siempre que no haya aspectos que vayan en contrario como puede ser una clase que defina el aspecto de un parrafo en concreto. Como podría ser el ejemplo de la cita, donde se en este caso tendría un tamaño más pequeño y con otra tipografía. Se podría aplicar de la siguiente manera:

<p class="cita">Este parrafo ha sido es crito por Felipe y tiene el siguiente aspecto</p>

Hojas de estilo externas

Hojas de estilo externas son aquellas en las que se escriben las reglas de estilo en un documento diferente con extensión .css, y que aplicará sus reglas a cuantos documentos que así lo establezcan en su cabacera.

Si se aplica a un conjunto de páginas como un sitio web, se podrá dotar de un aspecto uniforme a ese conjunto de documentos. Estableciendo unas reglas comunes, y que facilitarán la modificación de un elemento común, ya que sólo habrá que modificar una línea, en vez de cada parrafo de cada documento en el caso de reglas de estilo integradas, o en cada documento, en el caso de hojas de estilo integradas.

La sentencia que define que hoja de estilo se aplica en documento viene a ser como en este ejemplo:

Hojas de estilo alternativas

Existe la posibilidad de diseñar diferentes hojas de estilo, con diferentes diseños, tipografías, colores para facilitar el acceso al contenido a nuestros usuarios. Para ello hay que asignar un nombre a cada hoja de estilo, y definir en el atributo <link rel"-"> que hoja es principal y cuál o cuales alternativas. Por ejemplo, una primera hoja principal por defecto, una segunda que por el título tendrá presencia de color amarillo y una última que aumenta el tamaño de la tipografía para facilitar la lectura.

Atributo MEDIA

Otra posibilidad que nos ofrece CSS es que la aplicación de la hoja de estilo depende de como se va a visualizar tu página. Como por ejemplo en función de la pantalla o si es hoja de impresión. Para ello existe el atributo MEDIA, que podemos usar tanto en la etiqueta <STYLE> como en <LINK>, donde se aplicará el medio concreto al que queremos dirigir la hoja. Los medios a los que podemos señalar con éste atributo son los siguientes:

SCREEN: Para visualización en el monitor, es la opción por defecto.
PRINT: Para la impresora u otro medio escrito.
PROJECTION: Para dispositivos tales como proyectores o cañones.
BRAILLE: Para dispositivos braille que permiten la lectura mediante el tacto.
SPEECH: Para aparatos que leen el texto en voz alta.
ALL: Para todos los anteriores.

Si quieres profundizar en las reglas semánticas y en su aplicación te recomiendo que visites las secciones ejemplos y documentación donde encontrarás diferentes recursos que te permitirán aprender más sobre las reglas de estilo existentes y su aplicación. Así como diversos trucos con los que podrás mejorar el diseño, pero también la accesiblidad y la usabilidad de tus páginas web.

CSS desde cero

Información de utilidad para aprender sobre las hojas de estilo.

Reglas de estilo integradas

Hojas de estilo integradas

Hojas de estilo externas

Hojas de estilo alternativas

Atributo MEDIA