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

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

Print Friendly, PDF & Email
Introducción al CSS. Que significa Cascading Style Sheets.
Valora esta entrada
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

El HTML sirve para determinar el CONTENIDO y la ESTRUCTURA web

El CSS sirve para determinar el ASPECTO VISUAL de los contenidos de una página web.

El JS sirve para determinar el COMPORTAMIENTO web.

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;

}

resultado final
Resultado final

¡Hey querido lector!

Hasta aquí nuestra clase introductoria al CSS.

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

Entradas relacionadas:

Selectores CSS. Que son y como usarlos
- 236
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web
- 179
Ejemplos prácticos y visuales dónde se muestran los posicionamientos static | absolute | relative | fixed | sticky. Incluye código CSS y HTML
La propiedad z-index
- 76
Resumen y ejemplo de aplicación de la propiedad Z-index. Asignatura CSS curso confección y publicación de páginas web.
Elementos en línea. Elementos bloque. Elementos inline-block.
- 441
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
Factores que afectan al tiempo de carga de una página web
- 356
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Colores CSS para web
- 626
Existen distintas formas de indicar los colores que queremos dar a los elementos de un documento. Básicamente necesitamos dominar los colores RGB, RGBa y Hexadecimal. Se muestran varios ejemplos de us...
Ejemplo de creación de menú horizontal en CSS: inline-block y float
- 286
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
Unidades de medida absolutas y relativas en CSS
- 324
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Concepto de herencia en CSS
- 285
¿Imaginas tener que especificar una por una los estilos a cada una de las etiquetas? El concepto de CSS nos ayuda a optimizar código. Entender sus propiedades nos puede ayudar mucho a ser mejores maqu...
Ejemplo de centrado horizontal de una caja con CSS
- 448
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.