# CSS


## ¿Qué es CSS?
>CSS es el lenguaje que usamos para diseñar un documento HTML. CSS describe cómo se deben mostrar los elementos HTML.
## ¿Dónde podemos insertar código CSS?
Existen 3 formas de insertar código CSS en nuestros documentos de HTML
1. En un archivo externo con extensión .css que contenga lineas de código CSS. Para que el código CSS se aplique al documento HTML tendremos que insertarlo en la cabecera del documento HTML (_< head >_) con la siguiente línea: <br>
2. Otra forma de insertar código CSS es escribiendo nuestro código en la cabecera del documento (_< head >_) con la etiqueta `<style></style>`, aquí un ejemplo breve: <br>
3. La última forma diferente de insertar código CSS es insertarlo en la misma etiqueta HTML, como se muestra a continuación:

## Temario:
## 1. Conocimientos básicos
### Semana 2 - Día 1
1. Sintaxis CSS
2. Selectores (ID, clases, etiquetas HTML) y formas de agregar CSS a HTML
**Actividades:** Aplicar estilos a diferentes etiquetas CSS con los ejemplos vistos en clase.

#### Sintaxis de CSS
La sintaxis básica de CSS es la siguiente: <br>
 <br>
Ahora tal vez te preguntarás, ¿Qué es un selector?

#### Selectores CSS
> Los selectores CSS se utilizan para "buscar" (o seleccionar) los elementos HTML que desea aplicar estilo.
Existen 5 diferentes tipos de selectores:
##### 1. Selectores Simples:
Este tipo de selectores permiten aplicar estilo a elementos por su clase (_class_), por su identificador (_id_) o por el nombre de la etiqueta HTML (_span_), aquí algunos ejemplos:
 <br>
Resultado sin código CSS: <br>
 <br>
Resultado con código CSS: <br>

##### 2. Selectores Combinados
Este tipo de selectores se basan en la combinación de varios selectores simples para aplicar estilo a determinadas etiquetas HTML que tengan dichos selectores, aquí un ejemplo:
 <br>
Resultado sin código CSS: <br>
 <br>
Resultado con código CSS: <br>

##### 3. Seudo Clases
Una seudo clase se usa para definir un estado especial de un elemento. Es decir, determinar si un elemento tuvo un determinado evento, aquí algunos ejemplos: <br>
 <br>
Resultado sin código CSS: <br>
 <br>
Resultado con código CSS: <br>

###### First child and Last child
Una de las seudo clases más relevantes es _:first-child_ que se refiere a seleccionar el estilo del primer hijo de un elemento html y _:last-child_ que se refiere a seleccionar el último hijo de un elemento html.

##### 4. Seudo elementos
Un pseudo-elemento CSS se utiliza para diseñar partes específicas de un elemento. Ejemplos:
 <br>
<br>
Resultado sin código CSS: <br>
 <br>
Resultado con código CSS: <br>

##### 5. Selector de atributos
Es posible aplicar estilo a elementos HTML que tengan atributos o valores de atributo específicos. Ejemplo:
 <br>
Resultado sin código CSS: <br>
 <br>
Resultado con código CSS: <br>

###### Sobre escritura
En muchas ocasiones al utilizar enlaces externos de archivos CSS nuestros códigos se ven modificados debido a la [especificidad](https://developer.mozilla.org/es/docs/Web/CSS/Especificidad) de los elementos, una manera rápida de solucionar esa especificidad es colocando _!important_ después de la propiedad CSS, con esto sobre escribiremos el código CSS y se tomará nuestras líneas de código. <br>

### Semana 2 - Día 2
3. Colores
4. Background
5. Bordes, Márgenes, Relleno (Border, Margin, Padding)
6. Overflow

#### Colores CSS
Existen diversas formas de colocar colores a los elementos HTML, aquí algunas de ellas:

##### 1. Colores por defecto CSS
Existen algunos colores definidos por defecto en HTML, aquí algunos ejemplos:
Si quieres conocer más acerca de los colores disponibles por defecto, puedes consultarlo [aquí](https://www.rapidtables.com/web/css/css-color.html) <br>
Resultado sin código CSS: <br>
 <br>
Resultado con código CSS: <br>

##### 2. Colores Hexadecimal
Este tipo de colores se basan en 6 dígitos hexadecimales que tienen un patrón de la combinación Rojo, Verde y Azul (#RRGGBB), aquí algunos ejemplos:
 <br>
Resultado sin código CSS: <br>
 <br>
Resultado con código CSS: <br>

##### 3. Colores RGB
Como su nombre lo indica, estos colores también están basados en la combinación Rojo, Verde y Azul, pero en este caso se introducen 3 valores del 0 al 255 separados por 3 comas. Además, este tipo de color nos otorga la capacidad de incluir una opacidad al color, al agregar un cuarto atributo con valor del 0 al 1, mientras ese cuarto valor se acerque al cero, más opacidad se le aplicará al color, aquí algunos ejemplos:
 <br>

Resultado sin código CSS: <br>
 <br>
Resultado con código CSS: <br>

#### Fondos (Background)
La propiedad css _background_ es utilizada para aplicar un fondo a una etiqueta HTML, este fondo puede ser un color o una imagen. Para aplicar un color, se puede realizar con cualquiera de los tres formatos descritos anteriormente. En cuanto a la imagen se puede introducir la locación de la imagen dentro del proyecto o una dirección de la imagen directamente de internet. Aquí algunos ejemplos:
 <br>

Resultado sin código CSS: <br>
 <br>
Resultado con código CSS: <br>

#### Bordes (Border)
La propiedad _border_ nos permite agregar un borde a los elementos HTML, estos bordes pueden incluir tamaño, diversas formas y colores. Esta propiedad sigue la siguiente sintaxis: tamaño forma color.
Si quieres conocer más acerca de bordes css, ingresa [aquí](https://www.w3schools.com/css/css_border.asp) <br>
Asimismo, se pueda agregar un redondeado a los elementos HTML, con la propiedad _border-radious_, aquí algunos ejemplos:
 <br>
Resultado sin código CSS: <br>
 <br>
Resultado con código CSS: <br>

#### Márgenes (Margin)
Las propiedades de margen de CSS se utilizan para crear espacio alrededor de los elementos, fuera de los bordes definidos. Esta propiedad nos otorga la posibilidad de aplicar un margen en 4 direcciones: arriba, abajo, derecha o izquierda. Esto se puede hacer de diversas formas:
 <br>
Resultado sin código CSS: <br>
 <br>
Resultado con código CSS: <br>

#### Relleno (Padding)
Las propiedades de relleno CSS se utilizan para generar espacio alrededor del contenido de un elemento, dentro de los bordes definidos. Al igual que el margen nos otorga la posibilidad de aplicar un relleno en 4 direcciones: arriba, abajo, derecha o izquierda. Esto se puede hacer de diversas formas:
 <br>
Resultado sin código CSS: <br>
 <br>
Resultado con código CSS: <br>

**Actividad:** Colocar colores a las letras, algunos fondos a diferentes elementos HTML, márgenes, bordes y relleno

### Semana 2 - Día 3
7. Altura, Anchura - 15 minutos
8. Posición - 20 minutos
9. Unidades - 10 minutos

#### Altura (Height)
Como su nombre lo indica, esta propiedad se utiliza para darle altura a los elementos HTML, existen diversas formas de dar altura a los elementos HTML, puede ser en pixeles, en porcentaje y por vistas. Aquí algunos ejemplos:
 <br>
Resultado: <br>

#### Anchura (Width)
Del mismo modo que la altura, la anchura (_width_) se utiliza para darle un ancho a los elementos HTML, al igual que la altura se puede utilizar las unidades ya mencionadas. Aquí algunos ejemplos:
 <br>
Resultado: <br>

#### Posición
La posición (_position_) es un elemento que determina la posición de los elementos HTML dentro de las vistas. Existen 5 formas de darle posición a un elemento:

##### 1. Estática
La posición estática (_static_) es la posición por defecto que todos los elementos HTML poseen, está propiedad posiciona los elementos de acuerdo al flujo de la página.

##### 2. Relativa
La posición relativa (_relative_) hace que el elemento HTML se aleje de su posición original, asimismo el resto del contenido no se ajustará para encajar en ningún espacio dejado por el elemento.

##### 3. Fija
La posición fija (_fixed_) hace que el elemento HTML siempre este posicionado en el mismo lugar de la ventana.

##### 4. Absoluta
La posición absoluta (_absolute_) hace que el elemento HTML se posicione en un lugar fijo con respecto al área del padre.

##### 5. Sticky
La posición _sticky_ hace que el elemento HTML se posicione en un lugar fijo con respecto al desplazamiento (_scroll_) de la pantalla.
 <br>
<br>
Resultado: <br>

#### Unidades
CSS tiene diversas unidades para mostrar la longitud de los elementos. Ya te hemos mencionado algunas como pixeles (_px_) o porcentajes (_%_), pero también existen otro tipo de unidades, aquí algunas de ellas:

##### 1. Milímetros y Centímetros
CSS también acepta valores en Milímetros y Centímetros, con una sintaxis así: <br>
 <br>

#### 2. EM
Relativo al tamaño de fuente del elemento (2em significa 2 veces el tamaño de la fuente actual). _1 em = 16 px_
 <br>
Resultado: <br>
Si quieres saber más acerca de unidades ingresa [aquí](https://www.w3schools.com/css/css_units.asp)
<br>
Resultado: <br>

#### 3. REM
La propiedad _rem_ es similar a la propiedad _em_ con la diferencia que _rem_ toma como referencia el tamaño de letra del _root_ en este caso del archivo _HTML_ en el que se esta aplicando estilo. <br>
 <br>
Resultado: <br>

### Semana 3 - Día 1
10. Gradientes
11. Sombras
12. Texto
Clases requeridas: 4

#### Gradientes
Los degradados CSS le permiten mostrar transiciones suaves entre dos o más colores especificados. Existen dos tipos de gradientes:
1. Gradientes de tipo lineal
2. Gradientes de tipo radial
<br>
La sintaxis de los gradientes es así: <br>
`background-image: linear-gradient(direction, color-stop1, color-stop2);`
<br>
Aquí algunos ejemplos:
 <br>
Resultado: <br>

#### Sombras
La propiedad sombra (_shadow_) permite agregar sombras a elementos HTML como textos y contenedores. Solo debemos indicar el tamaño de sombra y color que queremos aplicar.
La sintaxis de box-shadow y text-shadow es: `box-shadow: offset-x | offset-y | blur-radius | color` <br>
Aquí algunos ejemplos: <br>
 <br>
Resultado: <br>

### Texto
#### Alineación de texto
CSS nos otorga la posibilidad de alinear los textos de diferentes formas, como centrar nuestro texto o justificar el texto con la propiedad _text-align_, aquí te presentamos algunos ejemplos:
 <br>

#### Transformación de texto
Por otra parte, los textos de HTML se pueden transformar a mayúsculas o minúsculas, con la propiedad _text-transform_, aquí te presentamos algunos ejemplos:
 <br>
Resultado: <br>

#### Estilo
Otra posibilidad que nos otorga CSS es cambiar el estilo del texto para mostrarlo en letras cursivas, similar a lo que hace la etiqueta HTML < i >:<br>
 <br>

#### Espacio entre líneas
Por otra parte, se puede definir el espacio entre líneas de texto con el atributo __line-height_: <br>
 <br>

#### Tipo de letra
Asimismo, podemos cambiar el tipo de letra de nuestros textos CSS con el atributo _font-family_, con este atributo podemos cambiar el tipo de letra a _Arial_, _Times New Roman_ o cualquier otro tipo de letra disponible en _HTML_:
 <br>
<br>
Por otro lado, _Google Fonts_ nos proporciona infinidad de tipos de letra para introducirlas en nuestros estilos, puedes consultar todas las fuentes de letra disponibles [aquí](https://fonts.google.com/)

## 2. Layouts
### Semana 3 - Día 2
1. Flex
2. Grid con flex (Wrap, Flow)
3. Box Model

#### Flex
La propiedad CSS flex es una propiedad resumida que indica la capacidad de un elemento flexible para alterar sus dimensiones y llenar el espacio disponible. Con flex tenemos la posibilidad de alinear los elementos HTML de una forma sencilla.
Para ello, comenzaremos por declarar que nuestros elementos serán flex, con la siguiente propiedad: `display: flex`, con esto ya podremos utilizar flex. <br>
 <br>
Por otra parte flex nos otorga la posibilidad de alinear elementos HTML de forma horizontal y vertical en un determinado espacio de altura (_heigth_) y anchura (_width_), para ello debemos especificar la alineación de nuestros elementos del contenedor, con la propiedad _flex-direction_ ahí podemos definir si los elementos van de arriba hacia abajo (_column_), de abajo hacia arriba (column-reverse_), de izquierda a derecha (_row_) o de derecha a izquierda (_row-reverse_).
 <br>
Asimismo, podemos definir la disposición de los elementos en el espacio horizontal con la propiedad _justify-content_ algunos valores que podemos elegir son: _flex-start_, _center_, _flex-end_, _space-between_, _space-around_, _space-evenly_ aquí puedes ver un ejemplo:
 <br>

Por otra parte, también podemos definir la alineación de los elementos de manera vertical con la propiedad _align-items_ con los valores: _stretch_, _flex-start_, _flex-end_, _center_, _stretch_, aquí puedes ver un ejemplo:

Asimismo, podemos alinear los elementos de forma vertical y horizontal a la vez con la propiedad _align-content_ ahí podemos definir los atributos _flex-start_, _center_, _flex-end_, _stretch_, _space-between_, _space-around_ aquí un ejemplo:
<br> Aquí un ejemplo de flex:
 <br>
Resultado: <br>

#### Grid con flex
Es posible crear in _grid_ con flex, mediante la propiedad _flew-grow_ con la cual los elementos se posicionan de manera automática en diferentes renglones cuando el espacio de pantalla se termina. Los valores permitidos para esta propiedad son: _no-wrap_ que mantiene todos los elementos en el mismo renglón, _wrap_ con este valor los elementos se posicionan en diferentes renglones y por último _wrap-reverse_ que realiza la misma función que _wrap_ pero de derecha a izquierda. Aquí un ejemplo visual: <br>
 <br>

Asimismo existe un atajo para definir un grid tanto en dirección como en posicionamiento con la propiedad _flex-flow_ la cual recibe dos valores, el primero es el equivalente a _flex-direction_ y la segunda es el equivalente a _flex-grow_ con esto podremos hacer un grid. Aquí un ejemplo: <br>
 <br>
Resultado: <br>

#### Box Model
Por otra parte, existe otro concepto para crear layouts, este es el box model, el cual es el modelo por defecto en los principales navegadores y archivos HTML. Para ellos tenemos dos opciones, posicionar nuestros elementos de forma vertical con la propiedad `display: block` o colocarlos de forma horizontal con la propiedad `display: inline-block`, aquí un ejemplo:<br>
 <br>
Resultado: <br>

### Semana 3 - Día 3
4. Grid Css
Clases requeridas: 2

#### Grid CSS
Asimismo, CSS nos otorga una propiedad _grid_ con la cual podemos realizar nuestros grids de una forma sencilla, para ello necesitamos de 3 propiedades CSS, la primera de ellas es la propiedad `display: grid` con esta propiedad estamos declarando un grid, por otra parte utilizaremos la propiedad _grid-template-columns_ en la cual vamos a definir cuánto mide cada uno de nuestros elementos en el grid, podemos darle un valor a cada uno de nuestros elementos al separarlos con un espacio, o podemos hacer uso de la función _repeat_ para que todos los elementos tengan el mismo espacio. Por otro lado, también podemos definir el espacio entre elementos con la propiedad _grip-gap_ que acepta unidades de medida que previamente hemos visto, a continuación un ejemplo:
 <br>
Resultado: <br>
<br>

##### Grid responsivo
El concepto grid es muy extenso y útil para crear layouts, pero grid nos da la posibilidad de hacer _layouts_ responsivos que se adapten a las medidas de nuestra ventana, aquí un ejemplo:
 <br>
Resultado: <br>
Mobile: <br>
 <br>
iPad: <br>
 <br>
Desktop: <br>
 <br>

###### Bonus: Transform and Transition
CSS permite aplicar efectos a nuestros códigos, uno de ellos es _transition_ con el cual podemos colocar un lapso de tiempo en el cual nuestros elementos se transformarán, por otro lado _transform_ modifica nuestros elementos _HTML_ dando la posibilidad de rotar los elementos, escalarlos, entre otros, aquí un ejemplo de lo que se puede hacer cone estás propiedades: <br>
 <br>
Resultado:
[Video](https://www.loom.com/share/4a9ce9ce0b934b4bb6e2f2f4267ef48e)

## 3. Media Query
1. Screen media query Móvil, Tablet, Desktop

Alguna vez has pensado cómo es que las páginas web se ven diferente en los celulares, en las tables y en las computadoras (laptop y escritorio), esto es debido a los _media query_ los cuales nos dan la posibilidad de cambiar las propiedades CSS en determinadas situaciones. Para ello tenemos la propiedad _@media_ en la cuál podremos agregar reglas para desplegar nuestro contenido, aquí la sintaxis:
 <br>
Aquí un ejemplo de media query: <br>
 <br>
Resultado: <br>
Vista en Escritorio: <br>
 <br>
Vista en Tablet o iPad: <br>
 <br>
Vista en Celular: <br>
 <br>

## Material Design
### Semana 4 dia 1
1. Material Design (Teoria 15 mins)
2. Demostración de componentes (10 mins)
3. Creación de componente con Material (10 mins)
4. Estilos del componente siguiendo Material Design
Clases requeridas: 1

#### ¿Qué es material design?
Material Design es un sistema para crear productos digitales atractivos y audaces. Al unir estilo, marca, interacción y movimiento bajo un conjunto consistente de principios y componentes, los equipos de productos pueden realizar su mayor potencial de diseño. (Google).

### Fuente de letra
_Material Design_ utiliza una fuente de letra llamada _Roboto_ de complexión media, la fuente de letra la puedes encontrar [Aquí](https://fonts.google.com/specimen/Roboto?preview.text_type=custom)

##### Menú (App Bars)
Comencemos con los app bars que son menus que nos ayudarán a mostrar opciones de las diferentes secciones en nuestras aplicaciones. Tenemos dos opciones un menú en la parte superior y uno en la parte inferior.
Aquí algunos ejemplos: <br>
Menú en la parte superior
<br>
Menú en la parte inferior:
<br>
Consejos: Se recomienda colocar los elementos esenciales para facilitar la navegación y acción por parte de los usuarios y colocar efectos para un uso más interactivo.
<br> <br>
Otra posibilidad para introducir un menú es hacerlo con un _bottom navigation_ el cual consiste en introducir opciones de navegación en la parte inferior con iconos.
<br>
Aquí un ejemplo de ello:

#### Botones
Una parte esencial de material design son los botones, que cuentan con características particulares como un suave redondeado en los vertices, así como una tipografía delgada y centrada. Aquí un ejemplo: <br>
Existen 4 tipos de botones:
1. Solo texto
2. Solo borde
3. Con fondo (_background_)
4. Agrupados (_Toggle button_)
<br>
Otro concepto relevante es el _floating button_ que se refiere a colocar un botón en alguna de las esquinas con ayuda de la propiedad `position: fixed` cómo se muestra a continuación:

#### Cards
Otro de los recursos relevantes de _material design_ son las _cards_, pues nos permiten desplegar información en forma de contenedores con bordes redondeados y con pequeñas sombras para dar un relieve. Aquí un ejemplo de ello:

#### Chips
Los _chips_ son elementos que nos permiten mostrar texto con iconos o imágenes a la izquierda y algún icono de acción a la derecha, este elemento también cuenta con un borde redondeado y puede ser utilizada para mostrar etiquetas, listas, entre otros.

#### Data Tables
Los _data tables_ son tablas que permiten realizar acciones, como ordenar datos, realizar una paginación de los renglones o una búsqueda de datos en la tabla. Aquí un ejemplo:

#### Dialogs
Los _dialogs_ nos permiten mostrar elementos que sobre salen de la pantalla, con el motivo de mostrar mensajes o alertas a los usuarios, que en algunas ocasiones tienen como objetivo una respuesta. Aquí un ejemplo:

#### Navigation Drawer y List
El elemento _navigation drawer_ nos permite colocar un menú en especie de lista (_list_), con opciones de navegación y datos de los usuarios, su característica principal es sobresalir de la vista principal desde cualquiera de los lados de la aplicación. Por otro lado, las listas se caracterizan por mostrar una serie de opciones a las cuales se les puede agregar una imagen o icono. <br>

#### Snackbar
Los _snackbar_ son componentes utilizados para mostrar alertas o mensajes a los usuarios en pantalla, en una esquina de la pantalla. Aquí un ejemplo:

#### Text Fields
Los _text fields_ son inputs con un estilo particular que permitan la entrada de datos por parte de los usuarios con un diseño basado en los bordes redondeados y con colores, es esencial que estos _text fields_ puedan estar acompañados de iconos para hacerlo más visual y agradable para el usuario.

#### Iconos
Otra parte fundamental de _material design_ son los iconos, pues los iconos nos ayudan a que nuestros diseños sean más visuales y agradables a los usuarios, además de que ilustran partes de nuestra aplicación para dar más detalles.
 <br>
Lista de iconos disponibles [aquí](https://material.io/resources/icons/?style=baseline)
<br>
Si quieres conocer más acerca de material design da click [aquí](https://material.io/components?platform=web)

### Actividad final
Realizar una tarjeta de presentación utilizando conocimientos de HTML y CSS donde se muestre sus datos personales, hobbies y experiencias. Como resultado se espera algo como lo siguiente:

### Recursos
1. [Aprende flexbox con Froggy](https://flexboxfroggy.com/#es)
2. [Flexbox Defense](http://www.flexboxdefense.com/)
3. [Grid Garden](https://cssgridgarden.com/#es)
4. [CSS Pseudo clases dinner](https://flukeout.github.io/#)
5. [HEX Inaders](http://www.hexinvaders.com/)
6. [Pixactly](https://www.pixact.ly/)
7. [CSS Dinner](https://flukeout.github.io/)