HackMDCSS
¿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
- 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:
- 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:
- 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:
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:
Resultado sin código CSS:
Resultado con código CSS:
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:
Resultado sin código CSS:
Resultado con código CSS:
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:
Resultado sin código CSS:
Resultado con código CSS:
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:
Resultado sin código CSS:
Resultado con código CSS:
5. Selector de atributos
Es posible aplicar estilo a elementos HTML que tengan atributos o valores de atributo específicos. Ejemplo:
Resultado sin código CSS:
Resultado con código CSS:
Sobre escritura
En muchas ocasiones al utilizar enlaces externos de archivos CSS nuestros códigos se ven modificados debido a la 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.
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í
Resultado sin código CSS:
Resultado con código CSS:
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:
Resultado sin código CSS:
Resultado con código CSS:
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:
Resultado sin código CSS:
Resultado con código CSS:
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:
Resultado sin código CSS:
Resultado con código CSS:
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í
Asimismo, se pueda agregar un redondeado a los elementos HTML, con la propiedad border-radious, aquí algunos ejemplos:
Resultado sin código CSS:
Resultado con código CSS:
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:
Resultado sin código CSS:
Resultado con código CSS:
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:
Resultado sin código CSS:
Resultado con código CSS:
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:
Resultado:
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:
Resultado:
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.
Resultado:
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í:
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
Resultado:
Si quieres saber más acerca de unidades ingresa aquí
Resultado:
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.
Resultado:
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:
- Gradientes de tipo lineal
- Gradientes de tipo radial
La sintaxis de los gradientes es así:
background-image: linear-gradient(direction, color-stop1, color-stop2);
Aquí algunos ejemplos:
Resultado:
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
Aquí algunos ejemplos:
Resultado:
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:
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:
Resultado:
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 >:
Espacio entre líneas
Por otra parte, se puede definir el espacio entre líneas de texto con el atributo _line-height:
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:
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í
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.
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).
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:
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:
Aquí un ejemplo de flex:
Resultado:
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:
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:
Resultado:
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:
Resultado:
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:
Resultado:
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:
Resultado:
Mobile:
iPad:
Desktop:
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:
Resultado:
Video
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:
Aquí un ejemplo de media query:
Resultado:
Vista en Escritorio:
Vista en Tablet o iPad:
Vista en Celular:
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í
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:
Menú en la parte superior
Menú en la parte inferior:
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.
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.
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:
Existen 4 tipos de botones:
- Solo texto
- Solo borde
- Con fondo (background)
- Agrupados (Toggle button)
Otro concepto relevante es el floating button que se refiere a colocar un botón en alguna de las esquinas con ayuda de la propiedadposition: fixedcó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.
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.
Lista de iconos disponibles aquí
Si quieres conocer más acerca de material design da click aquí
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:
