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 CLASE ● Entender la metodología BEM
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 Esto te habilita a agregar atributos específicos
documento HTML principal. a “hijos”, sin alterar los del “padre”.

CSS (Cascading Style Sheets): es un Class: generalmente se utiliza para darle

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

Joroba de camello: permite que se puedan Unidades de medidas

leer de 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 Box model

caja

Tipos de
Display
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 CSS
Tres posibilidades
h1 {
Por etiqueta propiedad: valor;
}
.clase {
Por clase propiedad: valor;
(anteponiendo el “.”) }
#id {
Por ID propiedad: valor;
(anteponiendo el “#”) }
SELECCIÓN DE HTML MEDIANTE CSS
Ejemplos

<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 CLASES E IDS
No es posible crear nombres separados por espacios.

La “joroba de camello”, permite

que 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.
BLOQUE 1
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.
BLOQUE 1

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;
}
BLOQUE 1

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 {}
BLOQUE 1

HTML

CSS
BLOQUE 1

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).
ELEMENTOS 2

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.
ELEMENTOS 2
HTML

CSS
MODIFICADORES 3
Cuando nombras una clase, la intención es ayudar a que ese elemento
pueda 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 {}
MODIFICADORES 3
HTML

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
● Entrega simplicidad. de 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 CAJA
Todos los elementos del HTML 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 🔎 La propiedad CSS que controla la
propiedad CSS que controla la altura de la caja de los elementos se
anchura de la caja de los elementos. denomina height.

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

valores negativos, y aquellos en aquellos en porcentaje se calculan a
porcentaje se calculan a partir de la partir de la altura de su elemento
anchura de su elemento padre. 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.
 OVERFLOW
Propiedad: 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
CAJA 2 exceda la caja será visible. El
inconveniente que esto genera es que,
si luego se suma otro contenido, los
CAJA 3 mismos se van a superponer.
 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 {
/* propiedades decorativas */
HTML
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-top
margin-right, margin-bottom y
margin-left se utilizan para definir los
márgenes de cada uno de los lados
Caja
del elemento por 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;
margin-right: 10px;
5px
margin-bottom: 12px;
margin-left: 15px;
}
15px 10px
/* forma abreviada pone en top, right, bottom, left */
div {
12px 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

/* forma abreviada */
15px 10px

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 que
veritatis ea fugit qui. 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 SI SI SI SI
bloque
 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 Determina un
Define qué tipo calcular la distancia (si valor numérico para
de posición será desde arriba, las propiedades
quieres usar. derecha, abajo o top, bottom, left,
izquierda). right.
 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 STICKY
Ambos 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
 HTML CSS
<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

¿PREGUNTAS?
¿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
#DEMOCRATIZANDOLAEDUCACIÓN