Esta página explica por qué los documentos usan CSS. Usas CSS para añadir una hoja de estilos a tu documento de prueba.
Esta es la segunda sección del tutorial.
Sección anterior: Que es CSS
Sección siguiente: How CSS works
Información: ¿Por qué usar CSS?
CSS ayuda a mantener la información de contenido de un documento separado de los detalles de como mostrarlo. Los detalles de como se muestra el documento son conocidos como estilos. Si mantienes los estilos separados del contenido puedes:
- Evitar duplicación
- Hacer el mantenimiento más simple
- Usar el mismo contenido con diferentes estilos para diferentes propositos.
|
Tu sitio web podría mostrar miles de páginas que se ven similar. Usando CSS, almacenas la información de estilos en archivos comunes que todas las páginas comparten.Cuando un usuario visualiza una página web, el navegador carga la información de estilos junto con el contenido de la página. Cuando un usuario imprime una página web, podrías proveerle diferente información de estilos que hace que las páginas impresas sean fáciles de leer. |
En general con HTML, usas el lenguaje de marcado para describir la información del contenido del documento, no sus estilos. Usas CSS para especificar sus estilos, no su contenido. (Más adelante en este tutorial, verás algunas excepciones a este acuerdo).
|
Un lenguaje de marcado como HTML también provee algunas maneras de especificar estilos. Por ejemplo en HTML puedes usar una etiqueta Cuando usas CSS, normalmente evitas usar estas características del lenguaje de marcado así toda la información de estilos de tu documento está en un solo lugar. |
Acción: Creando una hoja de estilos
- Crea un archivo de texto en el mismo directorio anterior. Este archivo será tu hoja de estilos. Nombrala como:
style1.css - En tu archivo CSS, copia y pega esta única línea, luego graba el archivo:
-
strong {color: red;}
Enlazando tu documento a tu hoja de estillos
- Para enlazar tu documento a tu hoja de estilos, edita tu archivo HTML. Añade la línea acentuada aquí:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Sample document</title> <link rel="stylesheet" type="text/css" href="style1.css"> </head> <body> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html> - Graba el archivo y refresca la pantalla del navegador. Esta hoja de estilos hace que las letras inicales sean rojas, como esto:
Cascading Style Sheets
| En adición al rojo, CSS permite algunos otros nombres de colores.
Sin mirar la referencia, encuentra cinco o más nombres de colores que funcionen en tu hoja de estilos. |
See a solution for the challenge. Ver la solución al reto.
¿Qué sigue?
Si tienes alguna dificultad entendiendo esta página, o si tienes comentarios acerca de la misma, por favor contribuye en esta página de Discusión.
Ahora que tienes un archivo de ejemplo enlazado a una hoja de estilos separada, estás listo para aprender más acerca de como tu navegador combina ellos cuando muestra el documento: Como funciona CSS.