Crear estilos CSS (2)

Ahora, para aplicarlo, por ejemplo, al cuerpo del documento (etiqueta <body>), se debe utilizar el atributo class:

<body class="textoarial">
<p>Este texto es de clase textoarial</p>
</body>

Una clase se puede aplicar a distintas etiquetas, en este caso se aplicó a todo el cuerpo del documento.
Se puede crear también una clase a partir de una etiqueta HTML. En este caso, se define de este modo:
P{font-family:arial;color:blue}
P.negrita{font-weight:bold}

Y se utiliza de la siguiente forma:

<P>Parrafo con letra ARIAL y color azul</P>
<BR>
<P class="negrita">Igual que antes pero, además, en negrita</P>

• También se pueden utilizar identificadores cuando se quiere aplicar un estilo a uno o a varios elementos, los cuales pueden haberse definido con anterioridad o no por lo que se pueden hacer modificaciones y excepciones. Se los define con el carácter almohadilla (#)

para utilizarlo, por ejemplo, en una celda, utilizamos el atributo id:

<td id="resaltado">Ocupación</td> <td>Estudiante de Ingeniería</td>

En esta tabla, se aplicará el formato definido para la etiqueta table, pero en la primer celda se aplica un identificador para aumentar el tamaño del texto y pasarlo a negrita.

Vínculos de hojas de estilo externas
Dijimos anteriormente que es posible crear una sola hoja de estilos CSS global y guardarla en un archivo con extensión CSS para que de este modo se pueda vincular a un grupo o a todas las páginas de nuestro sitio. Para crear esta hoja de estilos podemos utilizar cualquier programa que trabaje con texto sin formato, como el Block de notas o Note Pad de Windows, y al momento de guardar, escribir el nombre de la siguiente manera: "estilos.css". De esta forma, al poner las comillas, el archivo se guardará con la extensión css (de otro modo se guardaría como txt).

En el archivo CSS, no se deben incluir las etiquetas de comienzo y fin (<style...> </style>) , ya que estas son código HTML y no corresponden a la definición de estilos.

Para realizar el vínculo debemos colocar el siguiente código en la sección <head>:

En el atributo href, debemos colocar la ubicación del archivo css. Ahora, todas las páginas que lleven el link a la hoja de estilos, utilizarán el mismo formato y si queremos hacer algún cambio, solo debemos modificar el archivo css.

Aplicándolo a todas las páginas del sitio
Si utilizamos FrontPage 2000 para crear nuestras páginas, encontraremos en él la posibilidad de vincular, automáticamente, todas las páginas de nuestro sitio a una hoja de estilos. Para ello hay que ir a [Formato / Vínculos de hojas de estilo], elegir Todas las páginas y luego presionar en [Agregar] para seleccionar el archivo css. Automáticamente, se insertará el link a la hoja de estilos en todas las páginas del sitio.

Usuarios que han visto este tema también han visto...

- Crear menus de navegación en CSS usando listas
- Menus Simples con CSS y listas
- Texto 3D con CSS
- Maquetar con CSS usando X columnas
- Efectos en textos e imágenes con CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento