RECUERDA PONER A GRABAR

LA CLASE
¿DUDAS DEL ON-
BOARDING?
MIRALO AQUI
 Clase 04. DESARROLLO WEB

CSS + BOX MODELING

 ● Comprender y modificar elementos en
bloque y en línea.
● Conocer las cajas y sus propiedades.
OBJETIVOS DE LA ● Entender la metodología BEM

CLASE
GLOSARIO:
Clase 3

Etiqueta IFRAME: es un elemento HTML Padre e hijos: es un concepto que se aplica

que permite insertar o incrustar un cuando tienes una etiqueta “dentro” de otra.
documento HTML dentro de un documento Esto te habilita a agregar atributos específicos a
HTML principal. “hijos”, sin alterar los del “padre”.

CSS (Cascading Style Sheets): es un Class: generalmente se utiliza para darle estilos
lenguaje web para aplicar formato visual a cierta parte del código.
(color, tamaño, separación y ubicación) al
HTML. Con él puedes cambiar por completo Atributo ID: suele usarse para nombrar
el aspecto de cualquier etiqueta HTML. porciones de código y sectores, como por
ejemplo cuando quieres nombrar distintas
secciones.
GLOSARIO:
Clase 3

Joroba de camello: permite que se puedan leer de Unidades de medidas

forma más simple palabras compuestas. Absolutas
● Px (pixels): es la unidad que usan las
Reset CSS: contienen en su código fuente pantallas.
definiciones para propiedades problemáticas, que
los diseñadores necesitan unificar desde un Relativas
principio. ● Rem: relativa a la configuración de tamaño
de la raíz (etiqueta html).
● Porcentaje: tomando en cuenta que 16px es
100%.
● Viewport: se utilizan para layouts
responsivos (más adelante).
MAPA DE CONCEPTOS
MAPA DE CONCEPTOS CLASE 4

Propiedades de la caja Box model

Display Tipos de elementos

Función Bug de Display

Posiciones Position
 CRONOGRAMA DEL CURSO
Clase 3 Clase 4 Clase 5

Incluyendo CSS a CSS + Box Modeling Flexbox

nuestro proyecto

PRÁCTICAS DE LO PRÁCTICAS DE LO PRÁCTICAS DE LO

VISTO EN CLASE VISTO EN CLASE VISTO EN CLASE

TIPOGRAFÍA ESTILOS PRIMERA ENTREGA

DEL PROYECTO FINAL

Incluyendo CSS a nuestro

Proyecto
GUIÓN DE LA CLASE
Accede al material complementario aquí.
RECAPITULACIÓN DE
LA CLASE ANTERIOR
 CONCEPTOS
PREVIOS
Sabemos que existen tres maneras de aplicar CSS a un documento HTML:
● Hacerlo sobre la etiqueta con el atributo style=""
● En el head, insertar la etiqueta <style>
● Buscar un archivo externo con un <link />
(Es de las etiquetas que se cierran solas. Requiere el="stylesheet" para
funcionar. Además un href="" con la ruta al archivo.)
 SELECCIÓN DE HTML
MEDIANTE
Tres posibilidades CSS
h1 {
Por etiqueta propiedad: valor;
}
.clase {
Por clase
propiedad: valor;
(anteponiendo el “.”)
}
#id {
Por ID propiedad: valor;
(anteponiendo el “#”)
}
 SELECCIÓN DE HTML
MEDIANTE
Ejemplos CSS
<p>
Párrafo con <a href="">enlace</a> <a href="" class="foo">Enlace</a>
</p>

<etiqueta class="foo">
<a href="" id="foo">Enlace</a> <etiqueta class="bar"></etiqueta>
</etiqueta>
SELECCIÓN DE HTML
MEDIANTE CSS
Ejemplos
<etiqueta class="foo">
<etiqueta class="foo">
<etiqueta id="foo"></etiqueta>
</etiqueta>
</etiqueta>

<p class="foo">
<a href="" class="bar">Enlace</a>
</p>
 LOS NOMBRES DE LAS
No es posible crear nombres separados por espacios.
CLASES
La “joroba de camello”, permite que
E IDS
se puedan leer de forma más simple
palabras compuestas.

claseDeMaquetacion

conBorde

productosMasVendidos
BEM
 BEM

Todos queremos hacer que nuestro código sea más fácil de leer. Esto nos
ayuda a trabajar más rápidamente y de manera eficiente, y cuando otros
trabajen con nosotros podremos mantener claridad y coherencia.

Hoy vamos a descubrir la metodología BEM, que nos ayudará a entender

estructuras de CSS, y a mejorar las nuestras.
 BEM
👉 BEM significa Modificador de Bloques de Elementos (Block Element
Modifier) por sus siglas en inglés. Sugiere una manera estructurada de
nombrar tus clases, basada en las propiedades del elemento en cuestión.

👉 BEM tiene como horizonte modularizar lo máximo posible cada uno de los
bloques de código dispuesto. Se centra en tres parámetros o variables posibles:
bloques (div, section, article, ul, ol, etc.), elementos (a, button, li, span, etc.) y
modificadores. Estos últimos se definen de acuerdo a la posterior utilización
que haga el desarrollador a cargo.
 1
BLOQUE
El bloque es un contenedor o contexto
donde el elemento se encuentra
presente. Piensa como si fueran partes
estructurales de código más grandes.
Puede que tengas un encabezado, pie de
página, una barra lateral y un área de
contenido principal; cada uno de estos
sería considerado como un bloque.
 1
BLOQUE

El bloque de elementos forma la raíz de la clase y siempre irá primero. Solo

debes saber que una vez que has definido tu bloque, estarás listo para
comenzar a nombrar tus elementos.

.block__element {
background-color: #FFFFFF;
}
 1
BLOQUE

La doble barra baja te permite visualizar, navegar rápidamente y

manipular tu código. Aquí hay algunos ejemplos de cómo funciona la
metodología de elementos:

.header__logo {}
.header__tagline {}
.header__searchbar {}
.header__navigation {}
 1
BLOQUE
HTML

CSS
 1
BLOQUE
El punto es mantener los nombres simples, claros,
y precisos.

No lo pienses demasiado. 🚀
Actualizar el nombre de las clases no debería ser un problema
cuando encuentras una mejor semántica que funcione (sólo debes
tratar de ser consistente, y apegarte a ella).
 2
ELEMENTOS

El elemento es una de las piezas que compondrán la estructura de un bloque.

El bloque es el todo, y los elementos son las piezas de este bloque.
De acuerdo a la metodología BEM, cada elemento se escribe después del
bloque padre, usando dos guiones bajos.
 2
ELEMENTOS
HTML

CSS
 3
MODIFICADOR
ES una clase, la intención es ayudar a que ese elemento pueda
Cuando nombras
ser repetido, para que no tengas que escribir nuevas clases en otras áreas del
sitio si los elementos de estilo son los mismos.

Cuando necesitas modificar el estilo de un elemento específico, puedes

usar un modificador. Para lograr esto, añade un doble guión -- luego del
elemento (o bloque). Aquí tenemos un corto ejemplo:
.block--modifier {}
.block__element--modifier {}
 3
MODIFICADOR
HTML
ES

CSS
 .card_button esta bien
nombrada pero un botón es
un componente que
podríamos reutilizar en
otro contexto (carousel,
con un texto, etc).

Ejemplo donde trabajamos con BEM pero que podría ser refinado para poder reutilizar
código más adelante.
Ejemplo donde gracias al uso de BEM vamos a poder hacer reuso de clase.
El código de la slide anterior sería:
 BEM
Ventajas Desventajas

● Añade especificidad. ● Las convenciones pueden ser muy largas.

● Aumenta la independencia. ● A algunas personas les puede tomar
● Mejora la herencia múltiple. tiempo aprender la metodología.
● Permite la reutilización. ● El sistema de organización puede ser difícil de
● Entrega simplicidad. implementar en proyectos pequeños.
BEM: ¿PARA QUÉ LO USARÍAS?
● Para simplificar nuestro CSS y conseguir un estilo consistente,
por lo que nuestro código será mucho más legible y fácil de
mantener.

● Si estamos usando Bootstrap y queremos modificar ciertas clases.

● Cuando trabajamos en equipo y cada miembro tiene una manera

distinta de escribir CSS.
 ☕
BREAK  

¡5/10 MINUTOS Y
VOLVEMOS!
¡VAMOS A PRACTICAR LO
VISTO!
 Box Modeling
PROPIEDADES DE LA
CAJA
 PROPIEDADES DE LA
Todos los elementos del HTMLCAJA
son cajas. Un <strong>, un <h2> y demás, son
rectangulares:

● En los elementos de
línea, se verá uno al lado
del otro.
● En cambio en los de
bloque, uno debajo del
otro.
 BOX MODEL
👉 Ese concepto de que “todo es una caja”, da lugar a algo
llamado en web como box model.

👉 Sin importar si son de línea o de bloque (pero tienen su

incidencia en lo que sean), todas las etiquetas tienen
propiedades en común.
PROPIEDADES EN
COMÚN
CONTENT: el espacio para el texto o
imagen.

PADDING: separación entre el borde y el

contenido de la caja. Es un espacio interior.

BORDER: el límite entre el elemento y el

espacio externo.

MARGIN: separación entre el borde y el

afuera de la caja. Es un espacio exterior.
EJEMPLO 1
EJEMPLO 2
 ALTO Y ANCHO
de los elementos
Ancho Alto
🔎 Se denomina width a la propiedad 🔎 La propiedad CSS que controla la
CSS que controla la anchura de la caja altura de la caja de los elementos se
de los elementos. denomina height.

🔎 Dicha propiedad no admite valores 🔎 No admite valores negativos, y

negativos, y aquellos en porcentaje se aquellos en porcentaje se calculan a
calculan a partir de la anchura de su partir de la altura de su elemento padre.
elemento padre.
 ALTO Y ANCHO
CSS Se ve así
div {
background-color: beige;

width: 400px; /* ancho */

height: 250px; /* alto */
}

Valores comunes: unidad (px, porcentaje, rem, viewport) | Ejemplos y más información.
Propiedad: overflow
OVERFLOW
Tiene 4 valores posibles:
● Visible: valor por defecto. El excedente es visible.
● Hidden: el excedente no se muestra (lo corta) → recomendado.
● Scroll: genera una barra de scroll en los dos ejes (x/y) del elemento, aunque
no se necesite.
● Auto: genera el scroll solo en el eje necesario.

Veamos cómo se ve aplicando el overflow: hidden.

 ALGO PARA ACLARAR
CAJA 1
Cuando un elemento tiene un alto o ancho
fijos, cualquier contenido que exceda la
CAJA 2 caja será visible. El inconveniente que esto
genera es que, si luego se suma otro
contenido, los mismos se van a superponer.
CAJA 3
 EJEMPLO
CSS
div {
HTML
/* propiedades decorativas */

<div> border: solid 1px black;

CSS IS <strong>AWESOME</strong> padding: 5px;

</div> display: inline-block;

font-size: 32px;
font-family: Arial;
/* propiedades que hacen el "problema" */
width: 100px;
height: 110px;
}
 SOLUCIÓN
CSS
div {
HTML /* propiedades decorativas */
border: solid 1px black;
<div>
padding: 5px;
CSS IS <strong>AWESOME</strong>
display: inline-block;
</div>
font-size: 32px;
font-family: Arial;
/* propiedades que hacen el "problema" */
width: 100px;
height: 110px;
/* solucion */
overflow: hidden;
}
¡VAMOS A PRACTICAR LO
VISTO!
 ESPACIO EXTERIOR
Margin (márgenes)
Las propiedades margin-top, margin- margin-top
right, margin-bottom y margin-left se
utilizan para definir los márgenes de cada
uno de los lados del elemento por Caja
separado. margin-left margin-right

Puedes definir los 4 lados (forma margin-bottom

abreviada “margin”) o sólo aquellos que
necesites.
 CÓDIGO
EJEMPLO div {
margin-top: 5px;
5px margin-right: 10px;
margin-bottom: 12px;
margin-left: 15px;

15px 10px }

/* forma abreviada pone en top, right, bottom, left

*/
12px div {
margin: 5px 10px 12px 15px;
}

Más información sobre Margin | Nota: se pueden resumir los 4 lados poniendo solo “margin: valor”
 ESPACIO INTERIOR
Padding (relleno)
Las propiedades padding-top, padding-
right, padding-bottom y padding-left se
utilizan para definir los espacios internos
de cada uno de los lados del elemento,
por separado.

Puedes definir los cuatro lados (forma

abreviada “padding”) o sólo aquellos que
necesites.
 div {

CÓDIGO EJEMPLO padding-top: 5px;

padding-right: 10px;
padding-bottom: 12px;
padding-left: 15px;
5px }

15px 10px /* forma abreviada */

div {
12px
padding: 5px 10px 12px 15px;
}

Más información sobre padding | Nota: se pueden resumir los 4 lados poniendo solo “margin: valor”
¡VAMOS A PRACTICAR LO
VISTO!
 BORDES
Border
Las propiedades border-top, border-
right, border-bottom, y border-left se
utilizan para definir los bordes de cada
lado del elemento por separado.

Puedes definir los cuatro lados (forma

abreviada “border”) o sólo aquellos que
necesites.
 BORDES
✏ A diferencia de los márgenes y
padding, los bordes se forman con 3
valores:

● Tipo de borde (border-style).

● Grosor (-width).
● Color (-color).
 BORDES
CSS
Se ve así
div {
border-top:solid 5px red;
border-right:solid 10px cyan;
border-bottom:solid 7px
green;
border-left:solid 12px
yellow;
}

Valores comunes: estilo grosor color| Ejemplos y más información

¡VAMOS A PRACTICAR LO
VISTO!
DISPLAY
 TIPOS DE ELEMENTOS
● El estándar HTML clasifica a todos sus elementos en dos grandes grupos:
elementos en línea (inline) y de bloque (block).
● Los elementos de bloque siempre empiezan en una nueva línea, y ocupan todo el
espacio disponible hasta el final de la misma (100%).
● Por otra parte, los elementos en línea no empiezan necesariamente en nueva
línea y sólo ocupan el espacio necesario para mostrar sus contenidos.

Fuente: https://developer.mozilla.org/es/
TIPOS DE ELEMENTOS
Representación gráfica
 TIPOS DE ELEMENTOS
● Los elementos en línea definidos por HTML son aquellos que se usan
para marcar texto, imágenes y formularios.
Ver listado de etiquetas de “en línea”.

● Los elementos de bloque definidos por HTML se utilizan para marcar

estructura (división de información/código)
Ver listado de etiquetas de en bloque
 DISPLAY
Se encarga de definir cómo se ve un elemento HTML. Los dos
comportamientos más importantes son:

● Pasar un elemento de bloque a uno de línea.

● Pasar un elemento de línea a uno de bloque.

Eso se hace con los valores block e inline respectivamente:

● Block: convierte el elemento en uno de bloque.

● Inline: transforma el elemento en uno de línea.
 DISPLAY
HTML <p>Lorem ipsum dolor sit p {/*es un elemento en bloque que CSS
amet, consectetur convierto en línea*/
adipisicing elit. display: inline;
<span>Laudantium </span> background-color: yellow;}
perspiciatis itaque span {/*es un elemento en línea
veritatis ea fugit qui. que convierto en bloque*/
</p> display: block;
background-color: grey;}

Con este ejemplo podemos verificar cómo modifico el display

de las etiquetas, puedes probar más acá.
 DISPLAY
Inline-block
Hay una propiedad que permite tomar lo mejor de ambos grupos,
llamada “inline-block”. Brinda la posibilidad tener “padding” y
“margin” hacia arriba y abajo.

li {
display: inline-block;
}

Haz clic aquí para ver más ejemplos.

 TABLA COMPARATIVA
Dependiendo de si la etiqueta de HTML es “de bloque” o “en línea”, algunas
propiedades serán omitidas (más información).

Width Height Padding Margin

Bloque SI SI SI SI

En línea NO NO Solo costados Solo costados

En línea y bloque SI SI SI SI
 QUITAR UN
ELEMENTO
El display tiene también un valor para quitar un elemento del layout display:
none; lo oculta, y además lo quita (no ocupa su lugar).

div {
display: none;
}
¡VAMOS A PRACTICAR LO
VISTO!
POSICIONES
 POSITION
Es una propiedad CSS pensada para ubicar un elemento, con una libertad muy
flexible. Algunos ejemplos de uso:

● Superponer elementos.
● Crear publicidades que te sigan con el scroll o un menú.
● Hacer un menú con submenú adentro.

Valores posibles: relative, absolute, fixed, o sticky (cualquiera excepto static).

 ¿CÓMO UBICAR UN
ELEMENTO?
1 2 3
Indica desde dónde
Define qué tipo Determina un valor
calcular la distancia (si
de posición numérico para las
será desde arriba,
quieres usar. propiedades top,
derecha, abajo o
bottom, left, right.
izquierda).
 POSITION
Al aplicar esta propiedad, puedes usar cuatro propiedades para posicionar los
elementos, y debes darles un valor numérico.
Ellas son:

● top: calcula desde el borde superior (ej: top: 100px ).

● right: calcula desde el borde derecho (ej: right: 50px).
● bottom: calcula desde el borde inferior (ej: bottom: 100px ).
● left: calcula desde el borde izquierdo (ej: left: 50%).

Haz clic aquí para acceder a más información.

 POSITION: RELATIVE
El elemento es posicionado de acuerdo al flujo normal del documento, y
luego es desplazado en relación a sí mismo.

El desplazamiento no afecta la posición de ningún otro elemento,

provocando que se pueda superponer sobre otro.
 POSITION: RELATIVE
CSS Se ve así
div {
width: 100px;
height: 100px;

position: relative;
top: 40px;
left: 40px;
}
 POSITION: ABSOLUTE
El elemento es removido del flujo normal del documento, sin crearse
espacio alguno para el mismo en el esquema de la página.

Es posicionado relativo a su padre, siempre y cuando su padre tenga

“position:relative”. De lo contrario, se ubica relativo al body. Se recomienda
establecer un ancho y alto (width, height).
 POSITION: ABSOLUTE
CSS Se ve así
div {
width: 100px;
height: 100px;

position: absolute;
top: 40px;
left: 40px;
}
 POSITION:
FIXED Y
AmbosSTICKY
métodos permiten
que el elemento se
mantenga visible, aunque
se haga scroll.
 FIXED
Esta posición es similar a la absoluta, con la excepción de que el
elemento contenedor es el “viewport”, es decir, la ventana del
navegador.

Puede ser usada para crear elementos que floten, y que queden en la
misma posición aunque se haga scroll.
 FIXED
CSS Se ve así
div {
width: 300px;
background-color: yellow;

position: fixed;
top: 0;
left: 0;
}
 STICKY
El elemento es posicionado en el “flow” natural del documento, podría
decirse que es un valor que funciona de forma híbrida, es decir, como
“relative” y también “fixed”.

Esto es, cuando llega el “viewport” (la ventana del navegador) hasta
donde se encuentra, se “pegará” sobre el borde superior.
 STICKY
CSS Se ve así

div {
position: sticky;
top: 20px;
}
 MENÚ CON SUBMENÚ
● El position (tanto relative como absolute) se usa, entre otras, para hacer un
menú que tenga un submenú emergente. Los ítems del primero son relativos,
sirven como borde de cualquier hijo.

● La lista dentro de un list-item es absoluta. Por defecto, la sublista tiene

display: none. Recién cuando un list-item detecte el :hover, si adentro tiene
una lista, dale display: block
MENÚ CON SUBMENÚ
Ejemplo
 HTM CSS
L
<ul> ul {
list-style: none;
<li><a href="">Item</a></li>
font-size:0 /* truco por el uso de inline-block*/
<li><a href="">Item</a></li> }
<li><a href="">Item</a> li {

<ul> display: inline-block;

width: 25%;
<li><a href="">Subitem</a></li>
position:relative;
<li><a href="">Subitem</a></li> font-size: 14px
</ul> }
ul ul {
</li>
position: absolute;
<li><a href="">Item</a></li>
display: none;
</ul> }
ul ul li {
display: block;
}
ul li:hover ul {
display:block;
}
 PROPIEDAD Z-INDEX
(para el orden de superposición)

El z-index entra en juego cuando dos elementos que tienen position se superponen.
Esta propiedad acepta como valor un número (sin ninguna unidad, ni px, ni cm, ni
nada); a valor más alto, se mostrará por encima de los demás elementos.

Por defecto, todos los objetos tienen z-index:1. Si dos objetos tienen el mismo valor de
z-index y se superponen, el que fue creado después en el HTML se verá encima del
otro.
 ESTILOS

● Crear un archivo HTML y otro CSS.

● Agregar un estilo de tipografía a un archivo.
 ¡A PRACTICAR!
Crea un archivo HTML con un elemento párrafo dentro de él, con texto
Lorem Ipsum. Además, crea un archivo CSS y agrégale estilo al párrafo con
los siguientes valores:
- Color de texto: #0033ff
- Indexar una google font a elección.
- Espacio entre renglones: 15px
- Tamaño de texto: 12px

Cuentas con 15 minutos para completar la actividad.

 2

AGREGANDO CSS A
NUESTRO HTML
Comienza a utilizar CSS en tu proyecto.
AGREGANDO CSS A NUESTRO HTML
Formato: Archivo HTML y CSS. Debe tener el nombre
“Idea+Apellido”.
Sugerencia: entregar en un archivo comprimido todo junto.

>> Consigna: Aplicar con CSS las propiedades vistas hasta el momento para modificar
textos, encabezados, img, colores, background y box modeling a 1 archivo HTML.

Ejemplo: modificar el valor de los ítems de la lista para que estén ubicados de manera
horizontal de nuestro index.
AGREGANDO CSS A NUESTRO HTML
>>Aspectos a incluir en el entregable: Archivos HTML y CSS en los que asignes los
siguientes estilos:

● tipografías, estilo de listas, alineación de textos, color de fondo, imagen de fondo,

padding, margins y borders a una página HTML a elección.

>>Ejemplo: podrás encontrarlo en la carpeta de clase

¿PREGUNT
AS?
 ¿QUIERES SABER MÁS? TE
DEJAMOS MATERIAL AMPLIADO
DE LA CLASE
● Referencias de reglas tipográficas | CSS Reference
● Aplicación para generar paletas de colores | Palette App
● Aplicación para generar paletas de colores | Lyft Design
 ¡MUCHAS
-
GRACIAS!
Resumen de lo visto en clase hoy:
Tipografia, tipo de fuentes, listas.
- Fondos.
OPINA Y VALORA ESTA
CLASE
#DEMOCRATIZANDOLAEDUC
ACIÓN