Introducción al CSS. Que significa Cascading Style Sheets.

5
(2)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

Introducción al CSS. Que significa Cascading Style Sheets. 1

[vc_raw_html]JTNDYXVkaW8lMjBjb250cm9scyUyMHNyYyUzRCUyMiUyRndwLWNvbnRlbnQlMkZ1cGxvYWRzJTJGYXVkaW8lMkZhdWRpby1jc3MlMkZsZWNjaW9uMDEtcXVlLWVzLWNzcy10dXRvcmlhbC1jc3MtZnJhbmNlc2NSaWNhcnQubXAzJTIyJTNFJTNDJTJGYXVkaW8lM0U=[/vc_raw_html]CSS es el acrónimo de Cascading Style Sheets. Lo que en castellano vendría a ser Hoja de Estilos en Cascada.

A estas alturas del tutorial esto es como no decir nada pero con el tiempo le irás dando significado a la definición.

CSS vienen a ser el conjunto de reglas que indican a un navegador web como debe interpretar una página web a nivel de visualización.

«Tu eres un párrafo en mayúsculas«.

«Este otro es un enlace de color rojo y en cursiva«

«Estos 2 contenedores tienen un ancho del 50% y deben estar uno al  lado del otro para dar 2 columnas«.

Etcétera.

Se denomina en cascada porqué las reglas que indican como se debe visualizar un documento web se escriben y son leídas una tras otra.

Una vez el ordenador ha leído todas las instrucciones entonces las procesa y decide cuales debe obviar y a cuales debe hacer caso.

¡Ah! La extensión de los documentos CSS es .css a pesar de que veremos que hay veces que se puede escribir directamente en el documento .html[icon_list_item icon=»fa-chevron-right» icon_type=»circle» icon_size=»18px» icon_color=»#ffffff» icon_background_color=»#000000″ icon_border_color=»#ffffff» title=»El HTML sirve para determinar el CONTENIDO y la ESTRUCTURA web» title_color=»#000000″][icon_list_item icon=»fa-chevron-right» icon_type=»circle» icon_size=»18px» icon_color=»#ffffff» icon_background_color=»#000000″ icon_border_color=»#ffffff» title=»El CSS sirve para determinar el ASPECTO VISUAL de los contenidos de una página web.» title_color=»#000000″][icon_list_item icon=»fa-chevron-right» icon_type=»circle» icon_size=»18px» icon_color=»#ffffff» icon_background_color=»#000000″ icon_border_color=»#ffffff» title=»El JS sirve para determinar el COMPORTAMIENTO web.» title_color=»#000000″]

Que no es el CSS

El CSS no es un lenguaje de etiquetas.

El CSS no es un lenguaje de programación del mismo modo que HTML tampoco lo es.

La gran ventaja del css es que no hay que pensar mucho.

Hay una serie de instrucciones que hay que aprender y en base a ellas podemos empezar a modificar el aspecto visual de nuestra página web.

Primera toma de contacto con el CSS

En la captura de la imagen podemos ver un simple documento web con un párrafo y un enlace.

El CSS lo veréis dentro de las etiquetas <style>.

Lo que estamos indicando al documento web es que todas las etiquetas de tipo párrafo pinten el texto rojo y que la transformen a mayúscula.

También que todas las etiquetas de tipo enlace pinten el contenido rojo, que lo escriban en cursiva y que además quiten el subrayado.

Al margen de la sintaxis y si se a puesto de una o otra forma el objetivo es hacer una primera toma de contacto.

Fijaros en la estructura:

selector{

propiedad1: valor1;

propiedad2: valor2;

}
Introducción al CSS. Que significa Cascading Style Sheets. 2

Introducción al CSS. Que significa Cascading Style Sheets. 3
¡Hey querido lector!

Hasta aquí nuestra clase introductoria al CSS.

En la próxima entrega hablaremos de las versiones de CSS que existen.

  1. Avatar de Valeria
    Valeria

    ¡Esta si me quedó clara! 2 pasteles, la oferta sigue en pie.

    1. Avatar de Francesc Ricart

      Te prometo que sale en el examen

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *