Módulo 4
"Diseñando con CSS"
¿Qué es CSS?
CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo utilizado para describir la presentación y el formato de un documento HTML. Permite definir cómo se deben mostrar los elementos de la página web, incluyendo el estilo de fuente, los colores, los márgenes, el tamaño y la posición de los elementos en la página. Además, CSS permite crear diseños flexibles y adaptables a diferentes tamaños de pantalla y dispositivos, lo que es esencial en la actualidad donde se accede a internet desde una variedad de dispositivos y tamaños de pantallas diferentes.
Estructura del código CSS
En la siguiente slide verás la forma en que se estructura un scope/bloque de código, sabiendo esto podrás avanzar en identificar las distintas propiedades y valores existentes en CSS.
A continuación en el video te explicamos las tres formas en las que se puede trabajar con CSS (en el cual el último es el recomendable y el que se determina como mejor práctica como un buen desarrollador).
Nota Importante: Para CSS existen distintas nomenclaturas para darles un nombre a tus clases y que sea descriptivo y fácil de relacionarlo en tu código. Acá te dejamos un blog de freeCodeCamp para que puedas leer y saber cuales son y ver cuales te gustaria usar más, click aqui para ver el artículo.
Propiedades y valores fundamentales
Ten en cuenta que en las siguientes slides no veremos todas las propiedades y valores existentes, y tal vez algunas de las que veas ahí no entiendas como usarlas, pero por eso vamos a ir paso por paso en la práctica para que puedas aplicarlo en tu proyecto.
Pd: Si ya tenes una noción básica en HTML y CSS puede que notes que faltan algunas propiedades es por que lo tocaremos en una sección aparte.
¡Hora de jugar un poco con propiedades y valores css!
¡A Codear! ⌨️🔥
Margin, padding y border ⏹️
A continuación te dejamos un iframe desde CodePen en el que podes ver el código HTML y CSS de los ejemplos de margin y padding de forma más interactiva, a la derecha podés ver el resultado y poder analizar el comportamiento de este mismo.
La regla del reloj ⏰
Es una forma de establecer valores de margen o padding en los cuatro lados de un elemento utilizando una sola declaración.
La regla del reloj se basa en el uso de cuatro valores separados por espacios, que representan el margen o el padding en el siguiente orden: arriba, derecha, abajo e izquierda. De esta forma, se puede establecer un valor diferente para cada lado del elemento en una sola línea de código, siguiendo el sentido de las agujas del reloj.
En el siguiente ejemplo se puede ver como generamos el margen con 2 píxeles arriba, a la derecha tiene un pixel, hacia abajo tiene un margen de 3 píxeles y como no tiene un cuarto valor para el lado izquierdo toma por defecto el valor derechoE
Posicionamiento de elementos con CSS
La propiedad position en CSS se utiliza para definir la posición de un elemento en una página web. Hay cuatro valores posibles para la propiedad position: static, relative, absolute y fixed.
- Static es el valor por defecto y significa que el elemento se posiciona en su lugar normal en el flujo del documento.
- Relative posiciona el elemento en relación con su posición normal, es decir, se puede mover hacia arriba, abajo, izquierda o derecha a partir de su posición original.
- Absolute posiciona el elemento en relación con su elemento padre más cercano que tenga una posición definida (que no sea «static»). El elemento se puede mover libremente dentro de ese elemento padre.
- Fixed posiciona el elemento en relación con la ventana del navegador, es decir, se mantiene en la misma posición en la pantalla aunque se haga scroll.