CSS ​

CSS nos permite dar formato a nuestras páginas web. En esta sección veremos los elementos básicos de CSS y como podemos modificar el aspecto de nuestra aplicación.

🔩 Sintaxis ​

Introducción a la sintaxis de CSS.

Conceptos: Selectores, Propiedades, Valores

🎣 Selectores ​

Los selectores nos permiten atacar a diferentes elementos a los que queremos aplicar un estilo.

Conceptos: Selectores de etiqueta, Selectores de clase, Selectores de id, Selectores de atributo, Selectores de pseudo-clase, Selectores de pseudo-elemento

🪄 Propiedades ​

Las propiedades nos permiten definir el estilo que queremos aplicar a los elementos seleccionados. Aprenderemos las propiedades más comunes y como podemos usarlas.

Conceptos: Color, Fondo, Bordes, Margenes, Padding, Ancho, Alto, Posición, etc

📐 Unidades ​

Las unidades nos permiten definir valores para las propiedades.

Conceptos: Unidades absolutas, Unidades relativas, px, em, rem, vh, vw, vmin, vmax, cm, mm, in, pt, pc, %

💡 Pseudoclases ​

Las pseudoclases nos permiten definir estilos para elementos en diferentes estados, por ejemplo, cuando el usuario pasa el ratón por encima de un elemento o cuando un enlace se ha visitado.

Conceptos: :hover, :active, :focus, :visited, :disabled, :checked, :empty, :enabled, :first-child, :last-child, :first-of-type, :in-range

✂️ Pseudoelementos ​

Los pseudoelementos nos permiten definir estilos para elementos que no existen en el HTML, por ejemplo, el primer elemento de una lista o el primer párrafo de un elemento.

Conceptos: ::first-line, ::first-letter, ::before, ::after, ::selection

📃 Texto ​

Las propiedades de texto nos permiten definir el estilo de los textos de nuestra página web.

Conceptos: color, font-family, font-size, font-weight, font-style, text-align, text-decoration, text-transform, text-shadow, line-height, letter-spacing, word-spacing, white-space, vertical-align

📸 Imágenes ​

Las propiedades de imagen nos permiten definir el estilo de las imágenes de nuestra página web.

Conceptos: width, height, background-image, background-repeat, background-position, background-size, background-attachment, background-color, border-image, border-radius, box-shadow

🥪 Flexbox ​

Flexbox es un sistema de posicionamiento de un solo eje que nos permite crear layouts flexibles y responsivos.

Conceptos: display: flex, flex-direction, flex-wrap, flex-flow, justify-content, align-items...

🔦 Frameworks ​

Los frameworks CSS nos permiten crear páginas web de forma más rápida y sencilla. En esta sección veremos algunos de los frameworks CSS más populares.

Puedes aprender sobre Picocss ya!

Conceptos: Bootstrap, Semantic UI, Picocss, Bulma, Tailwind, Materialize

BEM ​

BEM nos propone una nomenclatura para nombrar clases en CSS.

Conceptos: Block, Element, Modifier

Medidas del navegador ​

Nuestro navegador nos proporciona información sobre el tamaño de la ventana del navegador, el tamaño del documento, y el tamaño de la pantalla que estamos usando, entre muchos otros.

Conceptos: screen.width, screen.height, window.outerWidth, window.outerHeight, window.innerWidth, window.innerHeight, document.documentElement.clientWidth, document.documentElement.clientHeight

Media queries ​

Las media queries nos permiten definir estilos para diferentes tamaños de pantalla.

Keyframes ​

Los keyframes nos permiten definir animaciones en CSS.

Transform ​

La propiedad transform nos permite transformar elementos en CSS, util en animaciones.