¿Qué es CSS?

¿Qué son las hojas de estilo?

A finales de los años 90, los codificadores HTML notaron que estaban volviendo a escribir las mismas etiquetas antiguas una y otra vez en la misma página, lo que llevó a archivos HTML más grandes y, sobre todo, al consumo de tiempo y la frustración. Es posible que te hayas encontrado en la misma situación, agregando montañas de etiquetas < strong, a pesar de quererlas todas igual; o usando trucos como gifs invisibles para espaciar.

Luego, alguien tuvo una gran idea: tener un archivo que defina todos los valores que habrían hecho esos montones de etiquetas, y luego hacer que todas sus páginas verifiquen este archivo y formateen sus páginas en consecuencia. Por lo tanto, puede omitir la mayoría de las etiquetas de formato en HTML y usar solo elementos estructurales agradables (como encabezados, párrafos y enlaces), que separa la estructura y la presentación.

A fines de 1996, CSS (Cascading StyleSheets) se convirtió en una realidad, forjada por nuestros buenos amigos, el »World Wide Web Consortium (W3C). Su hoja de estilo actúa como un socio para su código HTML; Cuidando todo el diseño, las fuentes, los colores y el aspecto general de su sitio.

Si alguna vez decides cambiar el aspecto de tu sitio, modificas ese archivo CSS (tu hoja de estilo ) y todas las páginas HTML que se leen de ese archivo se mostrarán de manera diferente . Esto hace que el mantenimiento de su diseño sea mucho más fácil.

Beneficios de CSS

Otro de los beneficios de CSS es que usted define las cosas una vez , lo que lo hace mucho más eficiente que definir todo en HTML en cada página. Esto significa:

• Las páginas se descargan más rápido , a veces hasta en un 50%
• Tienes que escribir menos código, y tus páginas son más cortas y limpias.
• El aspecto de su sitio se mantiene constante en todas las páginas que funcionan en la misma hoja de estilo.
• La actualización de su diseño y el mantenimiento general del sitio se hacen mucho más fáciles, y los errores causados ​​por la edición de varias páginas HTML ocurren con mucha menos frecuencia.

Un CSS de buena autoría también mejora la accesibilidad del contenido web, permitiendo el acceso a través de innumerables dispositivos ( PDA de mano, por ejemplo) y asegurando que los usuarios web con discapacidades aún puedan recibirlo. También elimina la necesidad de hacks y etiquetas específicos del navegador, lo que significa que su sitio tiene una mejor oportunidad de funcionar en todos los principales navegadores.

Inicialmente vagamente intimidante, CSS es un lenguaje elegante y bien diseñado. Es sumamente importante para el futuro del diseño web, y ha sido fundamental para ayudar a los diseñadores a alejarse de los problemáticos días de las etiquetas HTML de presentación <font>, y nos permitió volver a usar elementos estructurales y lógicos que hacen que nuestros sitios sean más complejos. accesibles .

Todo eso, y hay docenas de poderosas opciones de formato extra y posibilidades disponibles a través de comandos de hojas de estilo que no son posibles a través del HTML normal. Los verás más adelante cuando lleguemos a cosas como fondos, espaciado, capas y bordes.

Nota de compatibilidad del navegador:

El W3C ha lanzado hasta ahora dos versiones principales de las especificaciones de CSS: »CSS 1 y » CSS 2 , en '96 y '98 respectivamente. Estos estándares funcionan igual que los nuevos estándares HTML, con nuevas características agregadas en cada versión posterior. CSS 3 está actualmente en desarrollo, pero no se finalizará por algunos años más.

Los navegadores comenzaron a admitir correctamente las hojas de estilo en la marca de la versión 4. Internet Explorer 3 tenía algunos conocimientos básicos, y Netscape Navigator 4.7 era muy defectuoso. Para la versión 5 de »Internet Explorer, el navegador se estaba acercando a la compatibilidad total de la primera de estas dos normas, aunque aún quedaban muchos errores en su implementación.

CSS 2 y versiones posteriores ahora están casi totalmente compatibles con el soporte, en particular en los navegadores más sofisticados como »Firefox , » Chrome , »Opera y » Safari . Tomó muchos años dolorosos, pero todos deberían estar usando CSS hoy.

Implementación

Los archivos CSS se denominan hojas de estilo "en cascada" debido a dos razones: una hoja de estilo puede conectarse en cascada o tener influencia sobre varias páginas. Del mismo modo, muchos archivos CSS pueden definir una sola página.

Hay 3 formas de implementar comandos css en su sitio:

• Utilice un archivo CSS para todas sus páginas . Esta es la mejor manera de hacerlo.
• Integre los comandos CSS en headcada uno de sus documentos.
• Utilice el styleatributo para poner el código CSS directamente en un elemento HTML.

CSS le permite usar estos tres métodos en tándem glorioso, heredando y anulando valores a medida que avanza (veremos todo eso en el siguiente tutorial).

Una hoja de estilo central

Así es como deberías usar la mayor parte de tu CSS. Usted escribe un solo .cssarchivo y todas sus páginas hacen referencia a él. De esta manera, un cambio en cualquier elemento de este archivo ajustará esta cosa (una fuente, por ejemplo) en todo el sitio. Si lo desea, puede cambiar su esquema de color completo con una modificación en un número ilimitado de páginas. Esa es una de las cosas por las que se diseñó CSS: la flexibilidad .

Para crear su hoja de estilo, abra un editor de texto (NotePad o SimpleText estarán bien). ¿Recuerda que en la primera lección de este sitio, aprendió a guardar desde un editor de texto en el formato de archivo .html ? Bueno, aquí harás más o menos lo mismo, excepto que tu archivo tendrá un .csssufijo. Simplemente guarda un archivo en blanco como mystyles.css y colócalo en el mismo directorio que tu página de inicio. Ahora que tienes eso, puedo mostrarte la sintaxis utilizada en CSS:

Muy importante

selector {propiedad: valor ; propiedad: valor ; propiedad: valor ; }

Y ahora un ejemplo trabajado:

p {color: azul ; tamaño de letra: 120% ; }

Solo ponga esa línea en su archivo mientras dure este tutorial. Eso es todo lo que necesitas. Esta regla se aplica a todos los elementos de párrafo. Una vez que haya vinculado la hoja de estilo a sus páginas, tener esta declaración de estilo en su archivo css hará que todo el texto de sus páginas se incluya en las etiquetas <p>y </p>azul, y tenga un tamaño del 120% tan grande como el tamaño de fuente predeterminado.

Así es como se formatearán todos los párrafos afectados.

Echa un vistazo a estas reglas:

• El selector suele ser el nombre de una etiqueta, sin sus corchetes angulares circundantes.
• Las llaves son {rizadas} , no [cuadradas] o (redondas).
• Después del nombre de la propiedad hay dos puntos, y entre cada parte individual hay un punto y coma . Cada uno de estos pares de propiedades y valores es una declaración .

Usted podría agregar otra línea debajo de su primera. Pruebe esta línea de CSS y luego use algunos encabezados grandes en su página:

h1 {font-family: Verdana, sans-serif ; color: rojo ; tamaño de fuente: 20px ; }

Tu hoja de estilo debe verse algo como esto . Si desea afectar a varios selectores con el mismo formato CSS, agréguelos todos, con comas:

p, div, h1 {color: # 00DDFF; ancho: 80%; } / * modifica las 3 etiquetas * /

Como arriba, también puede agregar comentarios a su hoja de estilo usando los delimitadores /*...*/ . Estos le pueden dar a usted o a cualquier otra persona el uso de sus sugerencias vitales de la hoja de estilo sobre lo que sucede en su código.

Adjuntar su hoja de estilo

Ahora que tiene algo en su archivo, deberá mostrar sus páginas donde se encuentra su archivo css . Coloque esta línea de código en la headparte de los documentos que desea leer este archivo:

<link rel="stylesheet" type="text/css" href="mystyles.css">

Esto podría ser una nueva etiqueta para usted: relsignifica "RELationhip" del archivo y typemuestra que es un archivo de texto que actúa como una hoja de estilo CSS. Una vez que se haya asegurado de que hrefsea ​​correcto (se puede definir de forma absoluta o relativa ), debería ver el formato de sus páginas con sus valores preferidos. Puede vincular múltiples hojas de estilo a cada página si lo desea, como tener un archivo con todas sus fuentes, otro para márgenes y espaciado, etc.

Bloques de estilo individual

Si utiliza un diseño común en todas las páginas de su sitio, debe utilizar el método anterior. Sin embargo, si varias páginas necesitan un estilo particular y necesita anular los valores que ha definido en su hoja de estilo principal, puede usar el método de bloques de estilo. Para incrustar estilo, ponga esto en su head:

<style type="text/css">

p {font-weight: normal; color: gray; }

h1 {color: black; }
</style>

El typeatributo aquí permite a los navegadores tratar este código como CSS. El código CSS aplicado de esta manera no es técnicamente una hoja de estilo , sino que se denomina "bloque de estilo en línea".

Usando el atributo de estilo

Si necesita modificar una etiqueta por sí misma, puede incrustar información de estilo en ella usando el styleatributo:

<p style="color: blue; font-family: Arial; ">

El formato del estilo se detendrá tan pronto como cierre la etiqueta a la que se aplica, al igual que cualquier otro atributo , por lo que será solo este párrafo el que se verá afectado. También tenga en cuenta que aquí no se utilizan llaves, pero la regla de punto y coma todavía se aplica.

Este método es útil para el formateo único y para anular propiedades definidas previamente, pero no debería usarlo mucho. Si está agregando el mismo estilo a varias etiquetas, puede valer la pena promocionarlo a su hoja de estilo principal, para ahorrar tiempo y espacio.