Hojas de estilo en cascada (CSS): definición, tipos y ejemplos

Publicado el 7 mayo, 2021

Tres tipos de CSS

CSS viene en tres tipos:

  • En un archivo separado ( externo )
  • En la parte superior de un documento de página web ( interno )
  • Justo al lado del texto que decora (en línea )

Las hojas de estilo externas son archivos separados llenos de instrucciones CSS (con la extensión de archivo .css). Cuando cualquier página web incluye una hoja de estilo externa, este archivo CSS controlará su apariencia y funcionamiento (a menos que decida anular un estilo con uno de estos dos tipos siguientes). Así es como se cambia todo un sitio web a la vez. ¡Y eso es perfecto si desea mantenerse al día con la última moda en páginas web sin tener que reescribir cada página!

Los estilos internos se colocan en la parte superior de cada documento de página web, antes de que se enumere el contenido. Esta es la mejor alternativa a las externas, porque son fáciles de encontrar, pero le permiten ‘anular’ una hoja de estilo externa, ¡para esa página especial que quiere ser inconformista!

Los estilos en línea se colocan justo donde los necesita, junto al texto o gráfico que desea decorar. Puede insertar estilos en línea en cualquier lugar en el medio de su código HTML, lo que le brinda una libertad real para especificar cada elemento de la página web. Por otro lado, ¡esto puede hacer que el mantenimiento de las páginas web sea una verdadera tarea!

Instrucciones CSS

Antes de presentar CSS, repasemos brevemente HTML. Una página web simple está hecha de etiquetas . Todo debe ir entre las etiquetas <html> de apertura y cierre. La sección <head> contiene direcciones invisibles llamadas metainformación . La sección <body> es donde colocamos todas las cosas visibles. Aquí hay un ejemplo de HTML súper simple:


Sencillo
ejemplo html simple

CSS externo

Ahora, aquí hay un ejemplo breve y simple de CSS usando un archivo externo (lo llamaremos ‘elegant.css’). Vamos a decirle a nuestra página web que sea blanca y que nuestro encabezado h1, que se indica en nuestro ejemplo HTML simple como ‘John Adams’, aparezca en rojo a 24 unidades de altura:


Código CSS como archivo externo independiente
código CSS externo

En el archivo de muestra, la línea superior es un comentario y no hace nada. La siguiente parte (llamada cuerpo) le dice a la página web qué color de fondo usar para la sección del body . Inmediatamente después de eso, la parte h1 dice que queremos que nuestro encabezado más grande (h1) sea de color rojo y que su tamaño de fuente sea de 24 unidades de alto.

Ahora, para incluir este archivo CSS externo (‘Stylish.css’), tenemos que incluir un enlace dentro de la sección <head> de nuestra página web en blanco, como se muestra en la pantalla:


Cómo incluir CSS externo
cómo incluir CSS externo

CSS interno

No necesitamos incluir un archivo CSS externo solo para decorar una página web. Podemos definir nuestros estilos en la parte superior de la página, en la sección <head>. Aquí hay un ejemplo rápido en el que estamos haciendo que nuestro encabezado (h1) sea azul con un tamaño de fuente de 28 px:


Ejemplo de CSS interno
ejemplo de CSS interno

CSS en línea

Para esos momentos especiales en los que tiene algo en su página que simplemente no puede ajustarse a su tema general, bueno, puede seguir adelante y dejar que muestre su verdadera individualidad usando CSS en línea. Para mostrarte cómo, anulemos nuestro estilo h1, ¿de acuerdo? De esa manera, podemos mostrarle el poder de CSS al mismo tiempo.


En línea
ejemplo de CSS en línea

Como puede ver en el ejemplo anterior, en la sección <head> originalmente dijimos que el estilo h1 fuera azul y 28 px. Pero CSS nos permite anular eso en ciertos lugares. En este caso, incluimos instrucciones dentro de la sección <body>, y nuestro fragmento de CSS en línea le dijo al sitio web que mostrara el encabezado h1 como ‘John Hancock’ en rojo con una fuente de 48 px de alto.

¿Más cosas de CSS?

¿Pensaste que era demasiado fácil? Si lo hizo, tiene razón, hay bastante más en CSS si quiere aprovechar su poder. CSS ofrece algo llamado selectores que le permite especificar qué y cuándo decorar los elementos del sitio, pero no lo haremos hoy. ¡Solo sé que hay mucho más!

Resumen de la lección

Repasemos estos asombrosos estilos en cascada que nos permiten vestir nuestras páginas web de manera uniforme sin cambiar el contenido. Piense en las hojas de estilo como una especie de código de vestimenta informático, una forma uniforme de mostrar páginas web con un aspecto y una sensación coherentes.

Aprendimos que las hojas de estilo vienen en tres tipos: externas , internas e integradas . Los externos tienen su propio archivo y se aplican a todas las páginas web que los incluyen. Los internos se aplican a todo el documento, pero debe colocarlos en la parte superior de la página en el encabezado. Los estilos en línea permiten que los puntos específicos realmente se destaquen y sean diferentes, pero a costa de ser difíciles de encontrar y modificar.

CSS también tiene cosas llamadas selectores , que le permiten especificar qué y cuándo decorar los elementos del sitio.

5/5 - (7 votes)