Lectura - HTML y CSS (Parte II)
Cargado por
Gabriel Kake Rodriguez CornejoLectura - HTML y CSS (Parte II)
Cargado por
Gabriel Kake Rodriguez CornejoHTML y CSS (Parte II)
HTML5: Etiquetas semánticas
Competencias
● Aplicar las etiquetas semánticas de HTML5, para agrupar el contenido, darle sentido
y forma a las diferentes secciones que componen la página web.
Introducción
En el capítulo anterior conocimos cómo se estructura HTML y la importancia de las
etiquetas para estructurar una página web. Además, comprendimos la importancia de
organizar nuestro texto en secciones, de acuerdo al objetivo del contenido.
En este capítulo abordaremos el concepto de “etiquetas semánticas”, un tópico clave de
HTML5 y que necesitamos comprender para organizar correctamente las áreas de nuestros
sitios, facilitando que los navegadores identifiquen los aspectos clave que queremos
comunicar.
_ 1
www.desafiolatam.com
Dividiendo nuestra página en secciones
¿Recuerdas la estructura del archivo HTML de Meet&Coffee?
● Una barra de navegación.
● Una sección principal, llamada Hero section.
● Sección de lugar.
● Sección de próxima charla.
● Sección de eventos anteriores.
● Sección final, de contacto, llamada footer.
La etiqueta clásica para generar divisiones es la etiqueta <div>.
Si vamos a cualquier sitio, por ejemplo Ebay y analizamos su página principal, podremos ver
visualmente que tiene diferentes secciones de información. Si damos clic derecho y
apretamos inspeccionar podemos ver su código HTML (Imagen 1). Ahí nos podremos dar
cuenta que dentro de su <body> hay varias etiquetas <div> que agrupan la información.
Imagen 1. Secciones en HTML.
Fuente: Ebay.com.
La etiqueta <div> por sí misma sólo divide el contenido, pero no tiene semántica.
_ 2
www.desafiolatam.com
¿A qué se refiere con esto?
La semántica es el estudio de los significados. En el caso del <div>, éste sólo divide
contenido, pero no se le atribuye ninguna carga de significado específica.
HTML5 -el estándar de hoy- tiene etiquetas que cumplen la misma función de dividir que el
<div>, pero que le atribuyen semántica al contenido. Su objetivo es ayudar a definir la
estructura del documento y facilitar que las páginas web sean mejor indexadas por los
buscadores, ya que cualquier mecanismo automático sabrá con exactitud qué partes de su
contenido corresponden a cada una de las estructuras típicas de un sitio:
Imagen 2. Etiquetas semánticas.
Fuente: w3schools.
Nosotros usaremos: <nav>, <header>, <section> y <footer>, pero existen muchas más.
Si quieres conocer más acerca de las etiquetas semánticas, puedes consultar este enlace.
_ 3
www.desafiolatam.com
Comencemos analizando sección a sección nuestro HTML. Para ello usaremos el "HTML5
Element Flowchart" de HTML5 Doctor (Imagen 3).
Imagen 3. HTML5.
Fuente: HTML5 Doctor.
Comencemos por la primera sección: Una barra de navegación.
- ¿Es un bloque de navegación?: Sí, por lo tanto la etiqueta que usaremos será <nav>.
<nav>
<ul>
<li><a href="#">Ícono</a></li>
<li><a href="#">Ubicación</a></li>
<li><a href="#">Próxima Charla</a> </li>
<li><a href="#">Eventos anteriores</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
Sigamos con la segunda sección, la sección principal (o Hero section).
_ 4
www.desafiolatam.com
● ¿Es un bloque de navegación? No, porque no nos proporciona enlaces para navegar
por el sitio.
● ¿Tiene sentido por sí misma? No, porque es la primera parte de un contenido mayor.
● ¿Se requiere para entender el contenido? Sí.
● ¿Podría moverse a un apéndice (complemento)? No.
● ¿Tiene lógica añadirle un encabezado?: Sí, por lo tanto sería un <section>.
Sin embargo, existe una sección más específica que <section> para esta división. Si nos
fijamos bien, en esta sección está el encabezado principal <h1>, además, es lo primero que
se ve de la página después del menú de navegación, e incluye la información que permite
contextualizar respecto al sitio que se está visitando.
En resumen, es la introducción a todo el sitio. Por lo tanto, esta sección la podemos
etiquetar como <header> (No confundir con la etiqueta <head>).
<header>
<img src="assets/img/bg-hero.png" alt="Hero image">
<h1>Descubre lo último en tecnología bebiendo café</h1>
<h2>Charlas, eventos y simposios sobre tecnología</h2>
</header>
Sigamos con la tercera sección, la sección de lugar.
● ¿Es un bloque de navegación? No.
● ¿Tiene sentido por sí misma? No, ya que depende de las otras secciones para su
entendimiento.
● ¿Se requiere para entender el contenido? Sí.
● ¿Podría moverse a un apéndice (complemento)? No.
● ¿Tiene lógica añadirle un encabezado?: Sí, por lo tanto sería un <section>..
<section>
<img src="assets/img/we-work.jpg" alt="We work location">
<h2>¿Donde nos juntamos?</h2>
<p>Todos los martes y viernes, de 19:00 a 22:00 en We Work, Calle
Baker 133, Providencia, Santiago.</p>
</section>
Si nos fijamos bien, las secciones que le siguen también son de tipo <section>, ya que en
su conjunto se requieren para entender el contenido de la página: sección de charla y
eventos anteriores.
_ 5
www.desafiolatam.com
Ahora nos faltaría la sección final, de contacto, a veces llamada footer. La etiqueta
<footer> representa un pie de página para el elemento principal, en este caso la página y
generalmente contiene información sobre su sección como quién lo escribió, enlaces a
documentos relacionados, datos de derechos de autor y similares.
<footer>
<p>Meet & coffee 2018. Todos los derechos reservados.</p>
</footer>
Ahora si guardamos y recargamos el navegador, no vemos que haya cambiado nada; pero si
lo inspeccionamos, podemos ver que cada contenido está agrupado según su información.
Esto más adelante nos permitirá establecer estilos específicos con CSS, para cada sección
que hemos definido.
_ 6
www.desafiolatam.com
Introducción a CSS
Competencias
● Reconocer las propiedades de CSS, para agregar efectos visuales a una página web.
● Emplear adecuadamente los selectores para definir reglas por id, clase y/o etiqueta,
en los archivos de estilo CSS.
Introducción
Si bien, el contenido de un sitio es sumamente relevante, también el estilo es una parte
fundamental de los aspectos que lo componen. Fuentes, colores y efectos visuales, son
necesarios para que un sitio sea atractivo y comunique lo que queremos transmitir.
En este capítulo conoceremos qué es CSS, sus propiedades y sintaxis, para comenzar a
darle forma a nuestro proyecto y comencemos a adquirir las herramientas para construir
sitios visualmente atractivos.
_ 7
www.desafiolatam.com
¿Qué es CSS?
Imagen 4. HTML y CSS.
Fuente: Desafío Latam.
Desde un punto de vista simple (Imagen 4), HTML sería el esqueleto del personaje, la
estructura. Por otro lado, CSS sirve para darle apariencia al contenido, colores, fuentes,
tipografías, etc. Todo el estilo y apariencia visual de la página.
CSS significa "Cascading Style Sheets", que traducido es "hojas de estilo en cascada". En
resumen CSS define la apariencia de los elementos HTML en la pantalla, en papel o en otros
medios especificados.
Dentro de este capítulo vamos a abrir el proyecto que creamos anteriormente y le vamos a
añadir CSS.
Formas de añadir CSS
Existen varias formas de añadir CSS a las páginas:
● En línea en el HTML, añadiéndole el atributo style a las etiquetas.
● Añadiendo la etiqueta <style> en el head.
● A través de un archivo de tipo CSS, llamado desde el head. (RECOMENDADO).
La mejor práctica es hacerlo a través de un archivo externo al HTML de tipo .css llamándolo
en nuestra etiqueta <head>, con la siguiente línea de código:
<link rel="stylesheet" href="assets/css/style.css">
_ 8
www.desafiolatam.com
La etiqueta es link. El atributo rel especifica la relación entre el documento actual y el
documento vinculado, por lo tanto, su valor vendría siendo stylesheet. El atributo href, que ya
lo hemos visto en otras ocasiones, específica de dónde viene el documento, o sea, debemos
darle la ruta al archivo .css que queremos vincular.
Introducción a CSS
Lo que hicimos en el video anterior fue asignarle una característica de tipo background a la
etiqueta body.
Sintaxis
Analicemos un poco la sintaxis que escribimos, que es distinta a la sintaxis que ya
conocimos de HTML.
Podemos identificar lo siguiente: un selector de etiqueta (body), las llaves curvas ({ ... })
que determinan el inicio y cierre del bloque de declaración, una declaración (background:
red;) que está compuesta por una propiedad (background) y su valor (red).
Imagen 5. Sintaxis CSS.
Fuente: Desafío Latam.
El selector indica qué elemento del HTML queremos modificar.
Dentro del bloque de declaración puede haber más de una declaración. Éstas se separan por
un punto y coma.
_ 9
www.desafiolatam.com
Tipos de selectores
Hay diversos tipos de selectores. De momento vamos a ver los siguientes:
● Selector por etiqueta.
● Selector por id.
● Selector por clase.
El selector por etiqueta es el que acabamos de revisar recién. Éste selecciona el elemento
según su nombre de etiqueta.
Además del selector por etiqueta existe el selector por clase. Las clases sirven para que
varias etiquetas tengan características determinadas. El selector de clase selecciona todos
los elementos con el mismo valor del atributo de clase.
Por ejemplo, queremos que algunos textos sean de color verde, entonces, vamos a atribuirle
a algunas etiquetas el atributo class con valor verde:
<h1 class="verde">Descubre lo último en tecnología bebiendo café</h1>
<h4 class="verde">Rafaela Valdéz</h4>
<h2 class="verde">Eventos anteriores</h2>.
Para seleccionar esa clase en específico en el CSS, debemos escribir un . seguido por el
valor de la clase:
.verde {
/* Soy un comentario de CSS, no confundirse con comentarios de
HTML. */
color: green;
}
Las etiquetas pueden tener más de una clase, para esto, a las etiquetas sólo hay que
separarlas por espacio:
<h1 class="verde centrado">Descubre lo último en tecnología bebiendo
café</h1>
_ 10
www.desafiolatam.com
Además del selector por etiqueta y del selector por clase, existe el selector por id, que utiliza
valor del atributo id de una etiqueta HTML para seleccionar un elemento específico.
El valor id de un elemento debe ser único, no puede repetirse en ninguna otra etiqueta
dentro de la página. Además de que cada etiqueta puede tener como máximo un solo id:
<h2 id="subtitulo">Charlas, eventos y simposios sobre
tecnología</h2>
A lo largo de este módulo, trataremos de utilizar clases por sobre los id. La razón es,
básicamente, la etiqueta es menos específica que la clase, la clase es menos específica que
el id.
Pues bien, si llevamos los selectores al mundo real, se podría decir que mi etiqueta sería
"humano", mis clases serían mi nombre, mi edad, mi nacionalidad, entre otros y mi id sería
mi RUT.
Si quieres aprender más sobre los selectores te recomiendo este juego: CSS Diner.
La cascada de CSS
En CSS existen dos reglas importantes.
● Regla N°1: La primera es que la última regla manda. Por ejemplo, si yo declaro que
un background-color es gris y más adelante específico que el color es negro, el
resultado será el último que indicamos.
body {
background-color: grey;
padding: 0;
margin: 0;
background-color: black;
}
Si lo vemos con el inspector de elementos, veremos que existen los dos background-color
pero uno está mandando por sobre el otro, es decir la última regla manda.
_ 11
www.desafiolatam.com
● Regla N°2: La segunda regla de oro de CSS es que lo específico manda por sobre lo
general.
¿Qué quiere decir esto?
Si definimos que los textos dentro de un div en específico tengan la letra de color rojo, pero
luego en su interior indicamos específicamente que el h2 sea de color verde, ¿qué es lo que
creen que sucederá?
Como dijimos, la regla más específica manda, por lo tanto las letras de la etiqueta serán de
color verde. Si lo vemos en el inspector de elementos, podremos comprobar que para el h2
hay una propiedad que se hereda que es el de letra de color rojo; pero tenemos otra
propiedad más específica que indica que el color de letra debe ser verde.
div {
color: red;
}
div h2 {
color: green;
}
Entonces, cuando estemos trabajando en CSS y no se vean los resultados que buscamos,
siempre tenemos que tener en consideración esas dos reglas: la última es la que manda y la
más específica es la que manda.
_ 12
www.desafiolatam.com
Ejercicio guiado: Meet & Coffee con CSS
Vamos a retomar el proyecto que desarrollamos en capítulos anteriores, para comenzar a
hacer que nuestro contenido sea visualmente atractivo. Partiremos por añadir una hoja de
estilo e ir probando algunas de las propiedades de CSS que vimos recientemente.
Nos basaremos en el archivo index.html que hemos creado hasta ahora:
<!DOCTYPE html>
<html>
<head>
<title>Meet & Coffee</title>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="favicon.png">
<meta name="author" content="Francisca Medina Concha">
<meta name="description" content="Comparte tus conocimientos
tomando café">
<meta name="keywords" content="charlas, eventos, simposios,
tecnología, co-work">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<ul>
<li><a href="#">Ícono</a></li>
<li><a href="#">Ubicación</a></li>
<li><a href="#">Próxima Charla</a> </li>
<li><a href="#">Eventos anteriores</a></li>
<li><a href="#">Contacto</a></li>
</ul>
<img src="assets/img/bg-hero.png" alt="Hero image">
<h1>Descubre lo último en tecnología bebiendo café</h1>
<h2>Charlas, eventos y simposios sobre tecnología</h2>
<img src="assets/img/we-work.jpg" alt="We work location">
<h2>¿Donde nos juntamos?</h2>
<p>Todos los martes y viernes, de 19:00 a 22:00 en We Work, Calle
Baker 133, Providencia, Santiago.</p>
<img src="assets/img/speaker.jpg" alt="speaker">
<h2>Próxima charla</h2>
<h3>Big Data para Noobs</h3>
<h4>Rafaela Valdéz</h4>
_ 13
www.desafiolatam.com
<h5>Data scientist, phD Theoriccal Physics, Carneige Mellon
University</h5>
<p>En esta charla revisaremos las técnicas y tecnologías que hacen
que sea económico hacer frente a los datos de una escala extrema.</p>
<h2>Eventos anteriores</h2>
<img src="assets/img/simposio-vegan.jpg" alt="Events simposio
vegan">
<h3>Simposio Vegan DB</h3>
<img src="assets/img/machine-learning.jpg" alt="machine-learning">
<h3>Machine learning 101</h3>
<img src="assets/img/scrum-sin-scream.jpg" alt="scrum-sin-scream">
<h3>Scrum sin scream</h3>
</body>
</html>
● Paso 1: Como ya lo vimos en el caso de las imágenes, es importante clasificar los
distintos tipos de archivos y no dejarlos todos en la carpeta raíz. Por lo tanto, dentro
de nuestra carpeta assets/css, crearemos el archivo que llamaremos style.css:
Imagen 6. Archivo style.css.
Fuente: Desafío Latam.
● Paso 2: Ahora, en nuestro archivo index.html, dentro de la etiqueta <head> vamos a
colocar el siguiente código:
<link rel="stylesheet" href="assets/css/style.css">
● Paso 3: Para ver si nos funcionó, haremos una pequeña prueba. En el archivo
style.css, agrega el siguiente código:
body {
background: red;
}
_ 14
www.desafiolatam.com
Guardaremos tanto nuestro archivo HTML como CSS y recargamos el navegador.
Imagen 7. Vincular HTML con CSS.
Fuente: Desafío Latam.
Como se puede apreciar en la imagen 7, nuestro HTML ha sido vinculado con un
CSS.
Lo que hicimos fue darle estilo a la etiqueta <body>, la etiqueta general del contenido
de nuestro HTML.
● Paso 4: Ahora haremos una prueba dándole estilo a la etiqueta <h2>, la cual hemos
escrito 4 veces en nuestro HTML. Le daremos dos declaraciones, la primera del
alineamiento del texto, la segunda del color de la letra.
h2 {
text-align: center;
color: blue;
}
A la propiedad text-align le hemos puesto el valor de center y a la propiedad de color
que especifica el color de letra le hemos puesto el valor blue, o sea, azul. Guardemos
nuestro archivo CSS y recarguemos nuestro navegador (Imagen 8).
_ 15
www.desafiolatam.com
Imagen 8. Propiedad text-align.
Fuente: Desafío Latam.
Ha cambiado, todos los textos de tipo h2 han pasado de estar alineados a la
izquierda (que es el valor por defecto) a estar centrados. Además, su letra se ha
puesto de color azul, y no negra.
● Paso 5: Ahora probemos agregar un selector por clase. A los headers, le
agregaremos la clase “verde” y luego en el archivo CSS pondremos la fuente de color
verde, de la siguiente manera:
<!-- Archivo index.html -->
<h1 class="verde">Descubre lo último en tecnología bebiendo café</h1>
<h4 class="verde">Rafaela Valdéz</h4>
<h2 class="verde">Eventos anteriores</h2>.
Para seleccionar esa clase en específico en el CSS, debemos escribir un . (punto)
seguido por el valor de la clase. Le pondremos que tenga la letra de color verde.
/* archivo style.css */
.verde {
color: green;
}
_ 16
www.desafiolatam.com
Ahora, vemos que a todas las etiquetas con clase verde se les cambió el color de
letra, incluyendo a la etiqueta h2, ya que la clase es más específica que la etiqueta
por sí sola.
Imagen 9. Etiqueta con clase.
Fuente: Desafío Latam.
● Paso 6: Además de la fuente, podemos darle distintos atributos a la clase green.
Centraremos el texto de h1, de la siguiente manera:
<h1 class="verde centrado">Descubre lo último en tecnología bebiendo
café</h1>
En el CSS especificaremos que todas las etiquetas con clase centrado tendrán un
alineamiento de texto al centro.
.centrado {
text-align: center; }
_ 17
www.desafiolatam.com
Para añadirle más de una clase a las etiquetas sólo hay que separarlas por espacio.
Imagen 10. Etiquetas con más de una clase.
Fuente: Desafío Latam.
● Paso 7: Ahora, vamos a añadir un selector por id a uno de los h2.
Comencemos añadiendolo al primero, el que está justo por debajo del h1. Atributo
id, valor subtítulo.
<h2 id="subtitulo">Charlas, eventos y simposios sobre
tecnología</h2>
Para seleccionar ese id en específico en el CSS, debemos escribir un # seguido por el
valor del id. Ahora, le podremos dar valores a las distintas propiedades de ese h2
con id "subtitulo". Le pondremos que tenga la letra de color blanco y que esté
alineado a la derecha.
#subtitulo {
text-align: right;
_ 18
www.desafiolatam.com
color: white;
}
Imagen 11. Agregar propiedades al subtítulo.
Fuente: Desafío Latam.
Hasta ahora hemos visto cómo agregar una hoja CSS a un proyecto y cómo enlazarla con un
archivo HTML. Además, revisamos los principios de la sintaxis de CSS y algunos tipos de
selectores, claves para añadir las propiedades de estilo al área específica de la estructura
que queremos afectar.
Con estas nociones, ya podemos comenzar a abordar algunas de las principales
propiedades de estilo, para que nuestro proyecto se vaya acercando cada vez más a la
maqueta que definimos inicialmente.
_ 19
www.desafiolatam.com
Añadiendo CSS al proyecto
Competencias
● Implementar estilos CSS texto, color, fondo, alineación, imágenes y el modelo de
cajas, para la definición de aspectos visuales de una interfaz web.
Introducción
Los estilos CSS son de vital importancia para el desarrollo web. Piensa en una página que
contenga sólo texto, ¿No es muy atractiva verdad?
Hasta ahora hemos conocido la sintaxis de CSS y hemos probado algunas de sus
propiedades. En este capítulo tendremos un primer acercamiento a los estilos relacionados
al color, texto y fondo, para que poco a poco nuestro proyecto vaya teniendo un estilo más
profesional.
_ 20
www.desafiolatam.com
Una vez que hemos creado los contenidos y estructurado nuestro archivo HTML,
utilizaremos lenguaje CSS para definir el aspecto de cada uno de los elementos: color,
tipografía, márgenes, posiciones, etc.
Partamos revisando las propiedades asociadas al color.
Color
Los colores en CSS se pueden indicar de cinco formas diferentes:
Palabras clave
En CSS existen 17 palabras clave para referirse a los colores básicos. Las palabras se
corresponden con el nombre en inglés de cada color:
Imagen 12. Colores CSS.
Fuente: w3.org.
Un ejemplo de esto es:
p { color: red; }
_ 21
www.desafiolatam.com
Colores del sistema
Estos son similares a los mencionados anteriormente, pero en este caso se refieren a los
colores de los elementos que muestra el sistema operativo del usuario:
Acá una lista completa de estos colores: w3.org.
Un ejemplo de esto es:
p { color: WindowText; background-color: Window }
Tanto esta forma como la anterior, son poco utilizadas al escribir código CSS, ya que son
muy limitadas en relación a las otras opciones.
RGB hexadecimal
Este es el método más habitual. El modelo RGB consiste en definir un color indicando la
cantidad de color rojo, verde y azul que se debe mezclar para obtener ese color. El código de
color hexadecimal está compuesto por un # más 6 números y/o letras:
Se especifica con: #RRGGBB, donde los enteros hexadecimales RR (rojo), GG (verde) y BB
(azul).
En cada uno de sus 6 caracteres se permiten valores que van desde el 0 hasta la f (a partir
del número 10 se empiezan a mostrar como letras, desde la a hasta la f): 0, 1, 2, 3, 4, 5, 6, 7,
8, 9, a, b, c, d, e y f.
Eso especifica los componentes del color (0 = menor valor | f = mayor valor).
Un ejemplo de esto es:
p { color: #FF0000; } /*rojo*/
Gracias a esto, se pueden obtener hasta 16.777.216 combinaciones diferentes
_ 22
www.desafiolatam.com
RGB numérico
Al igual que el RGB hexadecimal, el color se define indicando sus tres componentes R (rojo),
G (verde) y B (azul). Cada uno puede tomar un valor entre 0 y 255.
Por ejemplo, para crear el color rojo, el primer componente tiene un valor máximo y las otras
dos, toman un valor de 0:
Un ejemplo de esto es:
p { color: rgb(255, 0, 0); } /*rojo*/
RGB porcentual
Al igual que la lógica anterior, se toman los tres componentes R, G y B. La diferencia es que
el valor mínimo (0) y máximo (255) están expresadas en porcentaje.
Para el ejemplo del color rojo, sería expresado de la siguiente manera:
p { color: rgb(100%, 0%, 0%); } /*rojo*/
Texto
Color
La propiedad básica que define CSS relacionada con la tipografía se denomina color y se
utiliza para establecer el color de la letra.
El color por defecto, si no definimos uno, en la mayoría de los navegadores es negro. Para
establecer un estilo de color, lo haremos con el atributo color utilizando cualquiera de las
cinco formas vistas anteriormente, de la siguiente manera:
p { color: #ffffff; } /*blanco*/
_ 23
www.desafiolatam.com
Si observamos con el inspector de elementos la página principal de Desafío Latam, veremos
las propiedades de color en la fuente del banner:
Imagen 13. Color Texto.
Fuente: Desafío Latam.
Normalmente la propiedad de color se define en el elemento body, para establecer un color
de fuente base para todos los elementos de la página, junto con la tipografía y otras
propiedades, como la alineación.
Tipografía
El tipo de letra se define con la propiedad font-family y se puede especificar de dos
formas diferentes:
● Mediante el nombre de una familia tipográfica: Es decir, el nombre de la fuente. Por
ejemplo: "Arial", "Verdana", "Garamond", etc.
● Mediante el nombre genérico de una familia tipográfica: Es decir, el estilo de la
fuente. Por ejemplo: serif, sans-serif, cursive, fantasy y monospace.
Si quieres conocer más sobre las familias tipográficas, puedes revisarlo aquí: MDN Web
Docs.
La forma de utilizar esta propiedad en css, es la siguiente:
p { font-family: Montserrat,Times New Roman,fantasy; }
¿Qué pasa si el navegador del cliente no tiene la fuente que hemos definido? CSS nos
permite definir más de una fuente, para prevenir estos casos.
_ 24
www.desafiolatam.com
En el ejemplo anterior, el navegador intentará mostrar la página con la fuente “Montserrat”, si
el usuario no la tuviera, probará con “Times New Roman”, finalmente con la familia
tipográfica “Fantasy”. En el caso que no encontrara ninguna de ellas, mostrará el sitio con la
fuente por defecto del navegador.
Tamaño de fuente
El tamaño de fuente se define con la propiedad font-size y se puede especificar de las
siguientes maneras:
Imagen 14. Propiedad font-weight.
Fuente: Uniwebsidad.
Para asignar tamaños a las fuentes no se recomienda utilizar los píxeles (px). Como
estudiamos anteriormente, mencionamos las unidades de medida, los pixeles son de tipo
absoluta, por ende rígidas. Si usamos píxeles también estamos ignorando las
configuraciones que cada usuario pueda tener en su navegador.
_ 25
www.desafiolatam.com
Vamos a comenzar de la base de que los navegadores de manera predeterminada definen
un font-size de 16px al elemento HTML.
● em: La unidad em es escalable y siempre depende de su elemento padre. Por
ejemplo, si el elemento body tiene un tamaño de fuente de 16px y un elemento hijo
tiene una fuente con tamaño 1.3em, este texto se mostrará de un tamaño un 30%
más grande que el del body (20.8px), mientras que si dentro de ese elemento
tenemos otro hijo con un font-size de 1.3 em, el tamaño de fuente de este objeto
sería un 30% más grande que el tamaño de su padre (27.04px). Es recomendable
usarla para:
○ Tamaños de fuente.
○ Saltos de línea.
○ Margen entre párrafos.
● rem: La unidad rem no es escalable porque no depende del elemento padre, sino del
elemento raíz del documento, el elemento HTML. Si el elemento HTML tiene un
tamaño de fuente de 16px (como es por defecto), entonces 1rem, sería igual a 16px,
y si queremos aplicar un tamaño basado en rem a cualquier elemento de la página,
no importará cual sea el tamaño de fuente que tenga asociado ese elemento, ya que
1 rem siempre será igual a 16 pixeles a no ser que se modifique el elemento raíz. Es
recomendable usarla para:
○ Elementos del layout que tengan medida fija.
Por otra parte, el grosor de la letra se puede controlar con la propiedad font-weight,
mientras que el estilo utiliza la propiedad font-style. Pensemos en el grosor como qué tan
“negrita” queremos la fuente y el estilo, si es cursiva o no.
Su sintaxis es la siguiente:
p { font-size: 1em;
font-weight: 300;
font-style: italic; }
Más adelante abordaremos en profundidad el uso de los estilos tipográficos, pero si quieres
saber más sobre estas propiedades, puedes consultar el material disponible en
lenguajecss.com
_ 26
www.desafiolatam.com
Alineación
La propiedad que define la alineación del texto se denomina text-align y los valores
permitidos son: izquierda (left), derecha (right), centrado (center) y justificado (justify):
Su sintaxis es la siguiente:
p { text-align: center; }
Imagen 15. Propiedad text-align.
Fuente: Uniwebsidad.
_ 27
www.desafiolatam.com
Existen además otras propiedades del texto como el interlineado (line-height), la
decoración (text-decoration), transformación (text-transform), alineación vertical
(vertical-align), indentación (text-indent), entre muchos otros. Puedes leer más
sobre esto, en este enlace.
Fondo
Existen distintas propiedades relacionadas al estilo del fondo (background) de nuestra
página, algunos de ellos son:
● background-color.
● background-image.
● background-position.
● background-repeat.
background-color, como su nombre lo indica nos permite fijar un color de fondo para el
elemento, de la siguiente manera:
body {
background-color: #fff000;
}
background-image, permite establecer una imagen de fondo. El origen puede ser una
carpeta del proyecto o un enlace a una fuente externa. Lo recomendable es almacenar todos
los recursos de manera local.
body {
background-image: url("imagen.jpg");
}
background-position, indica la posición del elemento en relación al fondo.
body {
background-position: center; /*se posicionará al centro*/
}
_ 28
www.desafiolatam.com
background-repeat, indica si la imagen, de no cubrir completamente el fondo, se repetirá o
no y en qué posición.
body {
background-repeat: no-repeat; /*no se repetirá*/
}
Ejercicio guiado: Continuando con el proyecto Meet & Coffee
En los capítulos anteriores comenzamos a crear la estructura para nuestro proyecto de Meet
& Coffee, a través de un archivo HTML, con ellos definimos las secciones y los contenidos
que poblarán nuestro sitio.
Lo que haremos en este ejercicio será comenzar a darle forma a nuestra hoja de estilo CSS,
para ir agregando las propiedades de la tipografía, los colores y las propiedades del fondo:
<!DOCTYPE html>
<html>
<head>
<title>Meet & Coffee</title>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="favicon.png">
<meta name="author" content="Francisca Medina Concha">
<meta name="description" content="Comparte tus conocimientos
tomando café">
<meta name="keywords" content="charlas, eventos, simposios,
tecnología, co-work">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<nav>
<ul>
<li><a href="#inicio">Ícono</a></li>
<li><a href="#ubicacion">Ubicación</a></li>
<li><a href="#proxima-charla">Próxima Charla</a> </li>
<li><a href="#eventos">Eventos anteriores</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
_ 29
www.desafiolatam.com
<header id="inicio">
<img src="assets/img/bg-hero.png" alt="Hero image">
<h1>Descubre lo último en tecnología bebiendo café</h1>
<h2>Charlas, eventos y simposios sobre tecnología</h2>
</header>
<section id="ubicacion">
<img src="assets/img/we-work.jpg" alt="We work location">
<h2>¿Donde nos juntamos?</h2>
<p>Todos los martes y viernes, de 19:00 a 22:00 en We Work,
Calle Baker 133, Providencia, Santiago.</p>
</section>
<section id="proxima-charla">
<img src="assets/img/speaker.jpg" alt="speaker">
<h2>Próxima charla</h2>
<h3>Big Data para Noobs</h3>
<h4>Rafaela Valdéz</h4>
<h5>Data scientis, phD Theoriccal Physics, Carneige Mellon
University</h5>
<p>En esta charla revisaremos las técnicas y tecnologías que
hacen que sea económico hacer frente a los datos de una escala
extrema.</p>
</section>
<section id="eventos">
<h2>Eventos anteriores</h2>
<img src="assets/img/simposio-vegan.jpg" alt="Events
simposio vegan">
<h3>Simposio Vegan DB</h3>
<img src="assets/img/machine-learning.jpg"
alt="machine-learning">
<h3>Machine learning 101</h3>
<img src="assets/img/scrum-sin-scream.jpg"
alt="scrum-sin-scream">
<h3>Scrum sin scream</h3>
</section>
<footer id="contacto">
<p>Meet & coffee 2018. Todos los derechos reservados.</p>
</footer>
</body>
</html>
_ 30
www.desafiolatam.com
● Paso 1: Es buena práctica ir de lo más general a lo más específico. Si miramos la
maqueta final y la guía de estilo podremos darnos cuenta que la mayoría de los
textos están centrados y que el color de letra que predomina en la mayoría de los
textos es el Rich Black (#000f08).
Por lo tanto, vamos a asignarle a todos los textos ese alineamiento y color de
momento.
Para no ir de una etiqueta a otra dándole la propiedad, nos simplificamos la vida
indicando la propiedad al selector de body.
body {
text-align: center;
color: #000f08;
}
Como todo el contenido está dentro de la etiqueta <body> se aplicará para todos los
textos.
● Paso 2: Si visualizamos la maqueta final podremos darnos cuenta que la secciones
que tienen colores de fondo (diferente al blanco, que es el que viene por defecto) son
el nav, la sección de próxima charla y el footer.
Entonces, le entregaremos a cada sección su color de fondo correspondiente. Según
la guía de estilo podemos identificar los siguientes colores:
● Color Rich Black: #000f08
● Color Sweet Brown: #a4452c
● Color Blanco: #ffffff
Tanto el <nav> como el <footer> comparten la característica de tener fondo de
color Rich Black y la letra de color blanco, por lo tanto le podremos dar una misma
clase para añadirle tales propiedades sin tener que repetirnos: <nav
class="oscuro"> y <footer id="contacto" class="oscuro">
.oscuro {
background: #000f08;
color: #ffffff;
}
_ 31
www.desafiolatam.com
Grabamos y vemos el resultado:
Imagen 16. Nav.
Fuente: Desafío Latam.
Imagen 17. Footer.
Fuente: Desafío Latam.
● Paso 3: Los links (etiqueta <a>) se siguen viendo azules y con el subrayado. Esto lo
modificamos usando el selector descendente. Si en CSS escribimos un elemento +
espacio + otro elemento, por ejemplo, .oscuro a: selecciona todas las etiquetas
<a> que estén dentro de las etiquetas con clase oscuro.
.oscuro a{
color: #ffffff;
text-decoration: none;
}
Grabamos y vemos cómo cambia:
Imagen 18. Selector descendente.
Fuente: Desafío Latam.
_ 32
www.desafiolatam.com
● Paso 4: Ahora, editaremos el fondo y el color de la sección de próxima charla. Si nos
fijamos es la única sección con texto alineado a la izquierda. Entonces, le pondremos
una clase para diferenciarla.
En el archivo index.html, modificaremos la sección de la siguiente manera:
<section id="proxima-charla" class="sweet-brown">
Ahora en CSS añadiremos:
.sweet-brown {
text-align: left;
background: #a4452c;
color: #ffffff;
}
Grabamos y vemos el resultado:
Imagen 19. Nueva clase.
Fuente: Desafío Latam.
● Paso 5: Si nos fijamos la sección con etiqueta <header> tiene el texto alineado a la
derecha, la letra de color blanco con una sombra de color Nickel (#707070) y,
además, tiene una imagen de fondo (que hasta ahora la hemos puesto como
etiqueta <img>). Vamos a borrarle esa foto, que llamaremos a través del background
y a añadirle una clase a ese header.
_ 33
www.desafiolatam.com
En el archivo HTML:
<header id="inicio" class="hero-section">
<h1>Descubre lo último en tecnología bebiendo café</h1>
<h2>Charlas, eventos y simposios sobre tecnología</h2>
</header>
Y en el CSS:
.hero-section {
text-align: right;
background-image: url('../img/bg-hero.png');
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
}
_ 34
www.desafiolatam.com
Profundizando las propiedades CSS
Competencias
● Implementar estilos CSS, utilizando el modelo de cajas y las propiedades display,
unidades de medida y estilos tipográficos avanzados, para la definición de aspectos
visuales de una interfaz web.
Introducción
Hasta ahora hemos visto cómo incluir estilos CSS en nuestros sitios, a través de las
propiedades de las fuentes, colores y fondo.
Hemos experimentado la importancia del estilo en una página web, pero ¿Qué pasa con su
adaptabilidad a distintos dispositivos? Debes conocer al menos una página que no se
adecúa correctamente al tamaño de la pantalla de tu celular. Es por esto que es importante
que conozcas el concepto del “modelo de cajas” en CSS, que permite anticipar y controlar
cómo se comportará el contenido.
_ 35
www.desafiolatam.com
Modelo de cajas
El modelo de cajas es uno de los conceptos más importantes detrás de CSS, y responde a la
pregunta de cuánto mide realmente cada elemento.
Imagen 20. Modelo de cajas.
Fuente: Desafío Latam.
Propiedades del modelo de cajas
Primero, vamos a analizar el área de contenido. El área de contenido es lo que está
comprendido dentro del elemento, como textos e imágenes, por ejemplo.
Para editarla, podemos alterar el contenido (ya sea agregándole, editando o quitándole
contenido en HTML) o asignarle un ancho (width) y/o un alto (height) como propiedades en
CSS.
Además del área de contenido existe el padding, que se utiliza para generar espacio
alrededor del contenido, dentro del borde del elemento. El padding es siempre transparente.
El borde (border) es lo que contiene y está alrededor del contenido + el padding. Las
propiedades de borde de CSS permiten especificar el estilo, el ancho y el color del borde de
cada elemento. Aunque, por defecto, en la mayoría de las etiquetas el valor de la propiedad
de borde es none, border: none;
Por su lado, el margen (margin) es espacio alrededor de los elementos, fuera de los bordes
definidos. El margen es siempre transparente.
Nosotros podemos cambiar los valores de todas estas propiedades utilizando CSS, pero
antes de cambiarlas con código directamente, utilizaremos el inspector de elementos para
familiarizarnos con estas propiedades y los valores que vienen por defecto en cada etiqueta.
_ 36
www.desafiolatam.com
Si inspeccionamos primero la etiqueta <body> de nuestra página, veremos lo computado
por el navegador. En la pestaña de Style, del inspector de elementos, bajaremos hasta
encontrar una caja que dice margin, border y padding.
Imagen 21. Propiedades del modelo de cajas.
Fuente: Desafío Latam.
Ahí podremos ver cuánto mide el área de contenido de nuestro body (ancho x alto), el
padding (que no tiene en este caso), el border (que tampoco tiene) y un margin que es de
8px en todas las direcciones.
Si inspeccionamos la etiqueta <nav> podremos ver que sólo tiene un área de contenido
delimitada por un ancho x alto. Luego, nos vamos a la etiqueta <ul> y vamos encontrando
cosas curiosas.
Imagen 22. Propiedades del modelo de cajas.
Fuente: Desafío Latam.
Podemos observar el tamaño de su área de contenido (ancho x alto), un padding sólo a la
izquierda de 40px, una carencia de borde y un margen de 16px arriba y abajo.
_ 37
www.desafiolatam.com
Luego vamos a inspeccionar la etiqueta <header>, que al igual que la etiqueta <nav>, sólo
tiene un área de contenido delimitada por un ancho x alto. Pero, si nos vamos a la etiqueta
<h1> y <h2>, podremos ver que tienen propiedades de margen arriba y abajo.
Imagen 23. Propiedades del modelo de cajas - header & nav.
Fuente: Desafío Latam.
Podemos ir inspeccionando una a una las etiquetas, pero lo importante de este ejercicio es
darnos cuenta que cada etiqueta tiene propiedades con valores por defecto.
_ 38
www.desafiolatam.com
Modificando elementos desde el inspector
Desde el inspector de elementos, podremos modificar las características de cada caja. Si
vamos a padding o height, podremos ir cambiando valores para verlos reflejados de
inmediato en la pantalla. Es importante destacar que podemos alterar cualquier propiedad
desde el inspector de elementos, pero estos cambios no quedan guardados en el código.
Incluso, puedes intentarlo con cualquier otro sitio que no te pertenezca, de manera online.
Seleccionemos una sección de nuestra página desde el inspector de elementos y
agreguemos margen.
margin: 50px;
Imagen 24. Agregar margen.
Fuente: Desafío Latam.
Observa lo que ocurre con el elemento.
Ahora cambiemos los bordes. Vamos a utilizar las siguientes propiedades:
border-width: 5px;
border-style: dashed;
border-color: blue;
_ 39
www.desafiolatam.com
También podemos especificar las 3 propiedades en una sola línea.
Ejemplo:
border: 5px dashed blue;
Las dos formas son correctas, pero probablemente te será más cómodo escribirlas en una
sola línea.
Observemos los cambios:
Imagen 25. Especificar 3 propiedades en una línea de código.
Fuente: Desafío Latam.
_ 40
www.desafiolatam.com
También podemos modificar el padding, recuerda que este es el espacio que existe entre el
elemento y el borde.
padding: 20px;
Imagen 26. Modificar el paddling.
Fuente: Desafío Latam.
Tanto en margin como padding se pueden dar valores para top, right, bottom y left.
Cuando se da un sólo valor por convención se asume que aplica a todos los lados. Cuando
tiene dos valores el primero indica top y bottom y el segundo indica right y left. Cuando
tiene 4 valores aplica la ley del reloj: primero top, segundo right, tercero bottom y cuarto
left.
También se puede definir como margin-top, margin-right, margin-bottom, margin-left,
padding-top, padding-right, padding-bottom y padding-left.
Hagamos algunas pruebas con el padding:
padding: 20px 50px;
Bueno, estos ejercicios nos han ayudado a conocer mejor las diferencias entre el margin,
border y padding.
_ 41
www.desafiolatam.com
Vamos a actualizar la página y ninguno de los cambios que hicimos desde el inspector de
elementos se ha guardado.
Imagen 27. Cambios desde el inspector de elementos.
Fuente: Desafío Latam.
Reseteando las propiedades
Cuando generamos el estilo, debemos tener en consideración que existen propiedades por
defecto que tiene cada navegador y que pueden afectar la forma en que vemos el resultado
final de los estilos que hemos aplicado.
Es por esto, que se suelen iniciar las propiedades generales por un valor por defecto, antes
de comenzar a añadir estilos. Esta técnica se llama “reset CSS”.
Un ejemplo de esto, sería lo siguiente:
body * {
margin: 0;
border: 0;
padding: 0;
}
El * como selector en CSS significa todo (es el selector universal que aplica a todas las
etiquetas), y que esté seguido de body separados por un espacio significa que a todos las
etiquetas que están dentro del body le daremos propiedades en el bloque de declaración.
_ 42
www.desafiolatam.com
Propiedad Display (inline, block, inline-block)
La propiedad display es la propiedad de CSS más importante para controlar la disposición
de los elementos.
Cada elemento HTML tiene un valor de visualización predeterminado según el tipo de
elemento que sea. El valor de visualización predeterminado para la mayoría de los
elementos es en block o inline.
Elementos block
Un elemento de bloque siempre comienza en una nueva línea y ocupa todo el ancho
disponible (se extiende desde izquierda hacia la derecha todo lo que pueda).
Algunos ejemplos son:
● <div>.
● <h1> - <h6>.
● <p>.
● <form>.
● <header>.
● <footer>.
● <section>.
Elementos inline
Por su parte, los elementos inline no comienzan en una nueva línea y su ancho ocupa el
mínimo espacio posible (sólo lo necesario según su contenido).
Algunos ejemplos son:
● <span>.
● <a>.
● <em>.
● <strong>.
_ 43
www.desafiolatam.com
Inline-block
Existe un híbrido de valor display entre el block y el inline. El inline-block.
La diferencia principal entre el inline-block y el block es que no agrega un salto de línea
después del elemento, por lo que el elemento puede ubicarse junto a otros elementos.
La diferencia principal entre el inline-block y el inline es que permite establecer un ancho
(width) y una altura (height) del elemento. Además respeta los márgenes y paddings.
Un ejemplo claro son las imágenes, ya que se despliegan unas al lado de las otras pero
podemos asociar un ancho (width) y un alto (height).
Width y Height + Unidades de medida
Width y height son las propiedades que se utilizan para establecer el ancho y el alto de un
elemento, respectivamente. Las propiedades de anchura y altura no incluye el padding,
bordes o márgenes, sino que afectan directamente al área de contenido del elemento.
Los valores que pueden alcanzar estas propiedades son valores de longitud basadas en las
unidades de medida estándar para CSS.
Podemos clasificar las unidades de medida para CSS en dos, unidades absolutas y
unidades relativas.
Unidades absolutas
Las unidades de medida absolutas son unidades que están completamente definidas, o sea,
se encuentran definidas en términos concretos y de manera medible. Esto quiere decir que
su valor no depende de otro valor de referencia. La que hemos estado utilizando hasta ahora
es el pixel, pero también existen los milímetros, centímetros, pulgadas y puntos. Pero, como
estamos trabajando con pantallas lo más lógico sería que trabajemos con los pixeles, que
es la unidad mínima de resolución de la pantalla.
Ojo que los píxeles (px) son relativos al dispositivo de visualización, por ende cambian si el
dispositivo es de una alta resolución o baja.
_ 44
www.desafiolatam.com
Unidades relativas
Las unidades relativas no son valores exactos, sino que se calculan a partir de otro valor de
referencia. A pesar de parecer más difíciles de calcular, son las más utilizadas en el diseño
de sitios web responsive por su adaptabilidad a los diferentes dispositivos.
● Porcentaje (%): Su valor está calculado en base a su contenedor. Si, por ejemplo, el
porcentaje se utiliza para establecer la anchura de un elemento, su referencia es la
anchura de su elemento contenedor. Si el elemento no se encuentra dentro de ningún
otro elemento, su referencia es la anchura de la página entera.
● Viewport width (vw) y viewport height (vh): Son medidas relativas de acuerdo al
viewport o ventana de visualización del navegador.
- 1vw = 1% del ancho de la ventana de visualización.
- 100vw = el ancho total de la ventana de visualización.
- 1vh = 1% de la altura de la ventana de visualización.
- 100vh = altura de la ventana de visualización.
● rem: Las unidades rem dependen directamente del tamaño de fuente del elemento
<html>. Si el font-sizedel <html> es 16px, 1rem sería igual a 16px en cualquier
parte del documento.
● em: Las unidades em dependen del font-size definido dentro del elemento en el que
se encuentra.
Las últimas dos medidas (rem y em) son más utilizadas para los tamaños de fuente, ahora
que vamos a trabajar sobre el ancho (width) y el alto (height) nos fijamos más en los
porcentajes (%).
_ 45
www.desafiolatam.com
Ejercicio guiado: Perfeccionando el CSS de Meet & Coffee
A continuación utilizaremos los conceptos que hemos aprendido en este capítulo para ir
perfeccionando el estilo del proyecto Meet & Coffee.
Comenzaremos reseteando las propiedades de márgenes, padding y bordes, para tener un
completo control de los estilos que definamos en nuestro sitio. Definiremos estas
propiedades de acuerdo a la maqueta final y la guía de estilo.
Utilicemos como base el código que llevamos hasta el momento:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Meet & Coffee</title>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="favicon.png">
<meta name="author" content="Francisca Medina Concha">
<meta name="description" content="Comparte tus conocimientos
tomando café">
<meta name="keywords" content="charlas, eventos, simposios,
tecnología, co-work">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<nav class="oscuro">
<ul>
<li><a href="#inicio">Ícono</a></li>
<li><a href="#ubicacion">Ubicación</a></li>
<li><a href="#proxima-charla">Próxima Charla</a> </li>
<li><a href="#eventos">Eventos anteriores</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<header id="inicio" class="hero-section">
<h1>Descubre lo último en tecnología bebiendo café</h1>
<h2>Charlas, eventos y simposios sobre tecnología</h2>
</header>
_ 46
www.desafiolatam.com
<section id="ubicacion">
<img src="assets/img/we-work.jpg" alt="We work location">
<h2>¿Donde nos juntamos?</h2>
<p>Todos los martes y viernes, de 19:00 a 22:00 en We Work,
Calle Baker 133, Providencia, Santiago.</p>
</section>
<section id="proxima-charla" class="sweet-brown">
<img src="assets/img/speaker.jpg" alt="speaker">
<h2>Próxima charla</h2>
<h3>Big Data para Noobs</h3>
<h4>Rafaela Valdéz</h4>
<h5>Data scientis, phD Theoriccal Physics, Carneige Mellon
University</h5>
<p>En esta charla revisaremos las técnicas y tecnologías que
hacen que sea económico hacer frente a los datos de una escala
extrema.</p>
</section>
<section id="eventos">
<h2>Eventos anteriores</h2>
<img src="assets/img/simposio-vegan.jpg" alt="Events
simposio vegan">
<h3>Simposio Vegan DB</h3>
<img src="assets/img/machine-learning.jpg"
alt="machine-learning">
<h3>Machine learning 101</h3>
<img src="assets/img/scrum-sin-scream.jpg"
alt="scrum-sin-scream">
<h3>Scrum sin scream</h3>
</section>
<footer id="contacto" class="oscuro">
<p>Meet & coffe 2018. Todos los derechos reservados.</p>
</footer>
</body>
</html>
_ 47
www.desafiolatam.com
CSS
body {
text-align: center;
color: #000f08;
}
.oscuro {
background: #000f08;
color: #ffffff;
}
.oscuro a{
color: #ffffff;
text-decoration: none;
}
.sweet-brown {
text-align: left;
background: #a4452c;
color: #ffffff;
}
.hero-section {
text-align: right;
background-image: url('../img/bg-hero.png');
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
}
● Paso 1: Partamos por resetear las propiedades por defecto que fija el navegador
sobre el padding y bordes, para esto, le daremos a todo el body un margin: 0;
(añadiendolo al selector que ya habíamos escrito).
body {
text-align: center;
color: #000f08;
margin: 0; /* esta es la propiedad que añadimos */
}
_ 48
www.desafiolatam.com
● Paso 2: Ahora reseteamos todas las etiquetas dentro del <body> dándole las
propiedades de margin, border y padding con el valor 0. Esto es para que vayamos
asignándole a cada sección encabezado y texto sus valores correspondientes para
acercarnos más a la maqueta.
body * {
margin: 0;
border: 0;
padding: 0;
}
Imagen 28. Etiquetas dentro del body.
Fuente: Desafío Latam.
_ 49
www.desafiolatam.com
● Paso 3: Si nos fijamos en la maqueta final podemos ver que tiene un padding similar
arriba y al lado derecho, además de un gran padding hacia abajo. Por lo tanto
añadiremos lo siguiente: padding: 50px 50px 250px 50px; al selector de la clase
hero-section.
.hero-section {
text-align: right;
background-image: url('../img/bg-hero.png');
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
text-shadow: 2px 3px 2px #707070;
padding: 50px 50px 250px 50px; /* esta es la propiedad que
añadimos */
}
Lo que hicimos fue añadir 50px arriba al lado derecho y al lado izquierdo y 250px
hacia abajo.
● Paso 4: Podemos ver que existe una separación entre el <header>, <hero section
y la sección <ubicación>. Pero, relativamente todas las secciones están separadas
por un margen similar, por lo tanto las seleccionaremos como grupo para darles a
todas la propiedad de margin-top.
section, footer {
margin-top: 75px;
}
_ 50
www.desafiolatam.com
● Paso 5: Ahora, nos damos cuenta que la sección de próxima charla y el footer
también tiene padding. A la sección de próxima charla se lo añadiremos usando el
selector de clase que ya habíamos usado para esa sección, sweet-brown. Y al footer
se lo podremos dar creando un selector de etiqueta.
.sweet-brown {
text-align: left;
background: #a4452c;
color: #ffffff;
padding: 50px; /* esta es la propiedad que añadimos */
}
footer {
padding: 50px;
}
Vamos a guardar nuestros cambios en el CSS y vamos a recargar el navegador.
_ 51
www.desafiolatam.com
Imagen 29. Añadir selector de clase.
Fuente: Desafío Latam.
● Paso 6: En nuestra página podemos encontrar más de algún inline-block. Por
ejemplo en el menú, en la sección de próxima charla y en la sección de eventos
anteriores.
En la sección de próxima charla podemos identificar la imagen y al lado de ésta el
texto. También podemos darnos cuenta que, si bien el texto está alineado a la
izquierda, el contenido está centrado.
Lo que haremos será agrupar tanto la imagen como los textos en un <div> y luego
las etiquetas del texto (<h2>, <h3>, <h4>, <h5> y <p>) en otro <div> más específico.
Y, tanto a ese div particular contenedor de las etiquetas de texto, como a la imagen le
daremos la propiedad display: inline-block; a través de una clase para cada
una.
_ 52
www.desafiolatam.com
Escribamos…
HTML
<section id="proxima-charla" class="sweet-brown">
<div class="centrado">
<img src="assets/img/speaker.jpg" alt="speaker"
class="charla-speaker">
<div class="charla-texto">
<h2>Próxima charla</h2>
<h3>Big Data para Noobs</h3>
<h4>Rafaela Valdéz</h4>
<h5>Data scientis, phD Theoriccal Physics, Carneige Mellon
University</h5>
<p>En esta charla revisaremos las técnicas y tecnologías
que hacen que sea económico hacer frente a los datos de una escala
extrema.</p>
</div>
</div>
</section>
Imagen 30. CSS.
Fuente: Desafío Latam.
● Paso 7: En la sección de eventos anteriores podemos ver los 3 eventos desplegados
uno al lado del otro. Por lo tanto, debemos agrupar cada uno de ellos en un divisor
propio. Podríamos intuir que cada evento es un artículo por separado ya que tiene
sentido por sí mismo, entonces la info de cada evento la englobamos en un
<article>. A cada <article> le añadiremos una clase para darle la propiedad
display: inline-block.
_ 53
www.desafiolatam.com
HTML
<section id="eventos">
<h2>Eventos anteriores</h2>
<article class="evento">
<img src="assets/img/simposio-vegan.jpg" alt="Events
simposio vegan">
<h3>Simposio Vegan DB</h3>
</article>
<article class="evento">
<img src="assets/img/machine-learning.jpg"
alt="machine-learning">
<h3>Machine learning 101</h3>
</article>
<article class="evento">
<img src="assets/img/scrum-sin-scream.jpg"
alt="scrum-sin-scream">
<h3>Scrum sin scream</h3>
</article>
</section>
.charla-speaker, .charla-texto, .evento {
display: inline-block;
}
Imagen 31. HTML.
Fuente: Desafío Latam.
_ 54
www.desafiolatam.com
● Paso 8: Lo primero que haremos para ejercitar el ancho es darle un ancho específico
al <div> contenedor de la próxima charla, ese a que le dimos clase centrado.
.centrado {
width: 75%;
margin: 0 auto;
}
● Paso 9: Le añadimos una propiedad margin: 0 auto para centrar horizontalmente, ya
que con eso le damos valor de 0 para arriba y abajo y auto para el lado derecho e
izquierdo.
Podemos ver el resultado:
Imagen 32. Añadir propiedad margin.
Fuente: Desafío Latam.
El ancho que le dimos resultó ser el 75% del contenedor <section
id="proxima-charla" class="sweet-brown"> que a su vez tiene el tamaño del
100% de la ventana de visualización del navegador.
_ 55
www.desafiolatam.com
Si achicamos la ventana podemos ver cómo el div también se achica. Llega un punto
en el que los dos elementos en display: inline-block no caben uno al lado del
otro dentro del <div class="centrado">, lo que genera que el segundo debe caer.
Imagen 33. Cambio de posición de texto.
Fuente: Desafío Latam.
● Paso 10: Lo que haremos a continuación será darle una propiedad de ancho a la
imagen y al div contenedor del texto, también en porcentajes.
Como a la imagen y al <div> ya le habíamos dado la clase charla-speaker y
charla-text respectivamente, crearemos 2 nuevos selectores con esa clase.
.charla-speaker{
width: 25%;
}
.charla-texto {
width: 72.5%;
}
_ 56
www.desafiolatam.com
Si agrandamos o achicamos la pantalla se va a seguir viendo en proporción.
Imagen 34. Agrandar pantalla.
Fuente: Desafío Latam.
● Paso 11: Nos faltan dos cosas, la primera es que la imagen en relación al texto esté
verticalmente alineada al centro y la segunda es que tenga su margen entre imagen y
texto. Para la primera le vamos a añadir la propiedad vertical-align: middle a
ambas etiquetas.
.charla-speaker{
width: 25%;
vertical-align: middle; /* esta es la propiedad que añadimos */
}
.charla-texto {
width: 72.5%;
vertical-align: middle; /* esta es la propiedad que añadimos */
}
_ 57
www.desafiolatam.com
Y podemos ver el resultado:
Imagen 35: vertical-align.
Fuente: Desafío Latam.
Para lo segundo vamos a hacer un margen al lado izquierdo del div <div
class="charla-texto"> de 2.5% para que sumados con la <imagen + margen +
div contenedor> de los textos den 100% (25 + 2.5 + 72.5 = 100).
.charla-texto {
width: 72.5%;
vertical-align: middle;
margin-left: 2.5%; /* esta es la propiedad que añadimos */
}
Ahora recargamos y ¿Qué pasó? Cayó el <div> de los textos.
Imagen 36. Margen izquierdo.
Fuente: Desafío Latam.
_ 58
www.desafiolatam.com
¿Por qué? Si la <imagen + margen + div contenedor> da exactamente 100%.
Aunque suene obvio, el espacio entre la imagen y el div en el HTML es el
responsable.
Miremos qué sucede si pegamos el div a la imagen:
<section id="proxima-charla" class="sweet-brown">
<div class="centrado">
<img src="assets/img/speaker.jpg" alt="speaker"
class="charla-speaker"><div class="charla-texto">
<h2>Próxima charla</h2>
<h3>Big Data para Noobs</h3>
<h4>Rafaela Valdéz</h4>
<h5>Data scientist, phD Theoriccal Physics, Carneige Mellon
University</h5>
<p>En esta charla revisaremos las técnicas y tecnologías que
hacen que sea económico hacer frente a los datos de una escala
extrema.</p>
</div>
</div>
</section>
Pues no tenemos ese problema...
Imagen 37. Espacio entre imagen y div.
Fuente: Desafío Latam.
Pero, no vamos a ir una a una pegando las etiquetas unas con otras para que esto no
nos suceda, eso nos haría muy confuso entender nuestro propio código.
_ 59
www.desafiolatam.com
Hay diversas formas de solucionar este problema. Vamos a revisar una de ellas, pero
puedes encontrar más soluciones en este link.
Tenemos que añadir la propiedad white-space: nowrap; al contenedor de estos dos
elementos, o sea al <section id="proxima-charla" class="sweet-brown"> .
Luego resetear esta misma propiedad en el div contenedor de texto para que no le
afecte al texto de ésta.
.sweet-brown {
text-align: left;
background: #a4452c;
color: #ffffff;
padding: 50px;
white-space: nowrap; /* esta es la propiedad que añadimos */
}
.charla-texto {
width: 72.5%;
vertical-align: middle;
margin-left: 2.5%;
white-space: normal; /* esta es la propiedad que añadimos */
}
_ 60
www.desafiolatam.com
Utilizando fuentes externas
Competencias
● Implementar estilos CSS, utilizando fuentes externas, para la definición de aspectos
visuales de una interfaz web.
Introducción
En este capítulo profundizaremos en cómo obtener estilos como recursos desde fuentes
externas y las mejores prácticas para incluirlos en nuestros desarrollos.
Estos conocimientos nos entregarán las herramientas que nos faltan, para terminar el
proyecto de Meet & Coffee, pero por sobretodo, nos abren las posibilidades para incluir
estilos y recursos en nuestros sitios, lo que es clave para construir sitios de calidad.
_ 61
www.desafiolatam.com
Tipografías, peso tipográfico y tamaños de fuente
Hasta ahora hemos trabajado con la tipografía y los tamaños por defecto que vienen para
los encabezados y los párrafos. Profundicemos un poco más en las propiedades de CSS
asociadas a las fuentes.
CSS Web Safe Font
Las Web Safe Font, son las tipografías que se pueden llamar libremente con CSS sin
problemas. Recordemos que al agregar fuentes en nuestra página web, es importante saber
que las CSS Web Safe Font servirán en cualquier navegador, debido a que son estándar y
están incluidas en casi todos los sistemas operativos.
Sin embargo, son pocas tipografías y no siempre se adaptarán al diseño que queremos.
Según la guía de estilo la tipografía usada es la 'Open Sans' en sus pesos Extra-Bold, Bold y
Regular.
Imagen 38. Tipografías.
Fuente: Desafío Latam.
Pero, la Open Sans no está dentro de las CSS Web Safe Font.
_ 62
www.desafiolatam.com
Google Fonts
Un recurso muy valioso es Google Fonts, un repositorio de tipografías proporcionado por
Google, donde podrás encontrar muchas tipografías de forma gratuita y libre.
Imagen 39. Google Fonts.
Fuente: Desafío Latam.
Para utilizar Google Fonts debes realizar los siguientes pasos:
● Paso 1: Ingresamos a Google Fonts.
● Paso 2: A la derecha de la página existe un buscador, vamos a escribir el nombre de
una las tipografías de nuestro sitio.
_ 63
www.desafiolatam.com
Comencemos buscando la 'Open Sans'. Una vez encontrada, podemos ver un botón a la
derecha que dice Select this font, presionemos y en la parte inferior derecha aparece un
menú el cual nos indica la fuente seleccionada.
Imagen 40. Utilizar Google Fonts.
Fuente: Desafío Latam.
_ 64
www.desafiolatam.com
Con la fuente seleccionada, debemos customizar los estilos que necesitamos descargar.
Para ello existe la pestaña llamada customize donde marcaremos la opción de los pesos
que requerimos: Extra-Bold, Bold y Regular.
Imagen 41. Customizar estilos.
Fuente: Desafío Latam.
Una vez seleccionado todo lo que necesitamos, presionaremos otra vez la pestaña de
embed donde aparecerá la URL que necesitamos añadir a nuestro archivo HTML.
_ 65
www.desafiolatam.com
● Paso 3: Copiamos el código que entrega Google y lo pegaremos dentro de la etiqueta
head de la página, siempre por sobre del llamado a tu CSS propio ¿Por qué? Porque
en nuestro CSS vamos a utilizar las tipografías, por lo tanto, las necesitamos llamar
antes.
<head>
<title>Meet & Coffee</title>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="favicon.png">
<meta name="author" content="Francisca Medina Concha">
<meta name="description" content="Comparte tus conocimientos
tomando café">
<meta name="keywords" content="charlas, eventos, simposios,
tecnología, co-work">
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800"
rel="stylesheet"> <!-- Esto es lo que hemos añadido -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
● Paso 4: Para utilizar la tipografía donde corresponda debemos usar el ejemplo
proporcionado por Google Fonts, es decir, usar la propiedad font-family con el
valor 'Open Sans', sans-serif en los elementos que corresponda.
Como, en este caso, la tipografía va a ser la misma para todos los textos (párrafos y
distintos tipos de encabezados) y sólo varían los valores de los pesos, le vamos a dar la
propiedad font-family: 'Open Sans', sans-serif; a la etiqueta del body.
body {
text-align: center;
color: #000f08;
margin: 0;
font-family: 'Open Sans', sans-serif; /* esta es la propiedad que
añadimos */
}
_ 66
www.desafiolatam.com
Miremos el resultado:
Imagen 42. Resultado.
Fuente: Desafío Latam.
Muy bien, ha cambiado.
_ 67
www.desafiolatam.com
Position
En muchos sitios el menú nos sigue mientras hacemos scroll.
● En Facebook.
● En LinkedIn.
● En W3Schools.
Eso facilita al usuario ir navegando por la página o sitio, esta propiedad se llama position.
La propiedad de position especifica el tipo de método de posicionamiento utilizado para
un elemento. Los valores pueden ser: static, relative, fixed, absolute o sticky.
Por defecto los elementos son static, o sea, no se posiciona de ninguna manera especial.
Siempre se posiciona de acuerdo con el flujo normal de la página (uno bajo el otro o uno al
lado del otro dependiendo de su display).
El valor de estos menús que mencionamos es fixed. Un elemento con la propiedad
position: fixed; por defecto se posiciona en la esquina superior izquierda de la ventana
de visualización del navegador y no se mueve de ahí aunque hagamos scroll. Hagamos la
prueba:
Si quieres conocer más sobre la propiedad position te dejo este link de W3Schools.
z-index
Muchas veces, con los temas de posición te verás enfrentado a que los elementos se
sobreponen. Ahí conocerás la propiedad z-index, que define cómo se apilan los elementos.
Te dejo este link de W3Schools donde podrás conocerla mejor.
_ 68
www.desafiolatam.com
SVG y Font Awesome
SVG
Los gráficos vectoriales son muy útiles en muchas circunstancias. Tienen un tamaño de
archivo pequeño y son altamente escalables, ya que no se pixelean cuando les haces zoom
o amplían a un gran tamaño. SVG es un lenguaje basado en XML para describir imágenes
vectoriales. SVG significa Scalable Vector Graphics.
Una manera rápida de añadir svg a nuestra página es llamándola como imagen <img
src="assets/img/imagen.svg" alt="">. Lo malo de esto es que no podremos
aprovechar las posibilidades que nos da svg. Cómo controlar el contenido SVG con CSS,
desde nuestro propio style.css.
Para poder lograr hacer eso, vamos a colocar el svg en línea, copiando el código que viene
en el archivo y reemplazandolo por el texto que dice Ícono. Además a su <li> contenedor le
vamos a dar una clase icono para poder darle un tamaño en específico a través de css.
<nav class="oscuro">
<ul>
<li class="icono"><a href="#inicio">
<svg xmlns="" viewBox="0 0 44 44"><path d="M11.8
26l-2.2 2.3c-.5-2.9-.7-7.5 2.2-11.2V26zm-.4 4.1c2.7.5 7.2.7
10.6-2.3h-8.5l-2.1
2.3zm5.3-16.2c-.8.2-1.7.5-2.4.9v8.5l2.4-2.6v-6.8zm2.5-.3v4.6l4-4.2c-1.1-
.3-2.5-.5-4-.4zM16 25.2h8.1c.4-.8.7-1.7.9-2.6h-6.6L16 25.2zm28-6.1V25c0
4.3-3.3 7.8-7.4 7.8h-1.8v2.9c0 4.6-3.6 8.3-7.9 8.3h-19C3.6 44 0 40.3 0
35.7V0h34.8v11.4h1.8c4.1 0 7.4 3.5 7.4
7.7zm-16.2.9c.1-2.6-.4-5-.8-6.4-.2-.9-.4-1.4-.4-1.4s-.5-.2-1.4-.4c-1.4-.
4-3.6-.9-6.1-.8-.8 0-1.7.1-2.5.3-.8.2-1.6.4-2.4.7-.9.4-1.7.8-2.5
1.5-.6.5-1.1 1-1.6 1.6-4.5 5.4-3.4 12.5-2.6 15.5.2.9.4 1.4.4 1.4s.5.2
1.4.4c2.8.8 9.6 2 14.7-2.7.6-.5 1.1-1.1 1.5-1.7.6-.8 1-1.7
1.4-2.6.3-.8.5-1.7.7-2.6.1-1.1.2-1.9.2-2.8zm13.2-.9c0-2.6-2-4.6-4.4-4.6h
-1.8v15.1h1.8c2.4 0 4.4-2.1 4.4-4.6v-5.9zM21 20h4.4c0-1.6-.1-3-.4-4.2L21
20z"/></svg>
</a></li>
<li><a href="#ubicacion">Ubicación</a></li>
<li><a href="#proxima-charla">Próxima Charla</a> </li>
<li><a href="#eventos">Eventos anteriores</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
_ 69
www.desafiolatam.com
.icono {
width: 2rem;
}
Si recargamos el navegador no lo vamos a poder ver, pero si inspeccionamos lo podremos
encontrar. Resulta que este ícono es negro.
Para cambiar su color a blanco debemos crear un selector que apunte a ese svg en
específico y ahí le debemos dar la propiedad fill: que es el relleno para los svg con el
valor #ffffff;
.icono svg {
fill: #ffffff;
}
Font Awesome
Otra forma de agregar iconos a nuestra página es a través de Font Awesome. Font
Awesome es un conjunto de herramientas de fuentes e iconos basado en CSS. Está
diseñado para ser utilizado con elementos en línea (inline). Los elementos <i> y <span> se
usan ampliamente para los iconos.
● Paso 1: Primero ingresamos a fontawesome.com, le daremos clic al ítem del menú
que dice Start for Free.
Imagen 43. Font Awesome Free.
Fuente: Font Awesome.
_ 70
www.desafiolatam.com
● Paso 2: En la última actualización, requieres registrarte para obtener acceso al CDN,
por lo tanto, agregamos nuestro correo electrónico para crear una cuenta:
Imagen 44. Registro Font Awesome.
Fuente: Font Awesome.
● Paso 3: Una vez que hagamos esto, nos llegará un correo de confirmación, desde
donde nos redirigirá a la cuenta que hemos creado. Una vez validada la cuenta,
iremos al siguiente enlace: https://fontawesome.com/account/cdn.
Imagen 45. CDN Font Awesome.
Fuente: Font Awesome.
Dejamos todas las opciones por defecto y seleccionamos el link que nos muestra el CDN.
_ 71
www.desafiolatam.com
● Paso 4: Pegamos este código en dentro de la etiqueta <head> de nuestro HTML:
<head>
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3
Gp2irVfcrp" crossorigin="anonymous">
</head>
La principal diferencia de la versión gratuita con la de pago, es la cantidad de íconos a los
que tendremos acceso, pero para los proyectos que estamos realizando, es suficiente con
los recursos que ofrece.
La lista completa de íconos, la puedes consultar en el siguiente enlace.
Es importante entender que estos íconos funcionan como fuentes, por lo tanto, los cambios
que le hagamos a la fuente en el CSS se verán reflejados en estos íconos. Por ejemplo que el
color de letra de las secciones con clase oscuro sean de color blanco va a aplicar a los
íconos de Font Awesome que estén dentro de esas secciones.
_ 72
www.desafiolatam.com
Ejercicio guiado: Finalizando el proyecto Meet & Coffee
Ahora lo que haremos, será terminar de personalizar el proyecto Meet & Coffee agregando el
tipo de fuente, tamaño y estilo. Además, podemos personalizar el menú, agregaremos
iconos y enlaces a la redes sociales en el footer.
Con esto podremos finalizar de implementar los estilos CSS en nuestro proyecto,
completando las modificaciones necesarias para dejar la interfaz de acuerdo con la
maqueta final y la guía de estilo.
● Paso 1: Ahora, como vimos en el texto, vamos a obtener la fuente necesaria desde
Google Fonts.
Copiamos el código que entrega Google y lo pegaremos dentro de la etiqueta head
de la página.
<head>
<title>Meet & Coffee</title>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="favicon.png">
<meta name="author" content="Francisca Medina Concha">
<meta name="description" content="Comparte tus conocimientos
tomando café">
<meta name="keywords" content="charlas, eventos, simposios,
tecnología, co-work">
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800"
rel="stylesheet"> <!-- Esto es lo que hemos añadido -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
● Paso 2: Como, en este caso, la tipografía va a ser la misma para todos los textos
(párrafos y distintos tipos de encabezados) y sólo varían los valores de los pesos, le
vamos a dar la propiedad font-family: 'Open Sans', sans-serif; a la etiqueta
del body.
body {
text-align: center;
color: #000f08;
_ 73
www.desafiolatam.com
margin: 0;
font-family: 'Open Sans', sans-serif; /* esta es la propiedad que
añadimos */
}
Miremos el resultado:
Imagen 46. Resultado.
Fuente: Desafío Latam.
● Paso 3: Ahora fijamos el estilo del tamaño de los textos.
Podemos identificar en la maqueta final que la tipografía Open Sans Extra-Bold se
aplica sobre el <h1>, para ello debemos aplicar la propiedad font-weight. En el
mismo Google Fonts podemos ver cuál es el peso correspondiente a Extra-Bold, en el
caso de esta tipografía es 800.
h1 {
font-weight: 800;
}
_ 74
www.desafiolatam.com
● Paso 4: En la maqueta, podemos ver que la mayoría de los <h2> tienen peso de Bold,
es decir, de 700, excepto el subtítulo que dice <h2> Charlas, eventos y
simposios sobre tecnología </h2>. Por lo tanto, lo que haremos será añadir una
clase específica a ese <h2>, <h2 class="subtitulo">Charlas, eventos y
simposios sobre tecnología</h2> y le daremos de font-weight: 400. A todos
los demás le daremos un font-weight: 700.
h2 {
font-weight: 700;
}
.subtitulo {
font-weight: 400;
}
Además, utilizamos h4 y h5 para la sección de próxima charla. Ambos por defecto
tienen un font-weight de 700 pero en la maqueta son regular. También editaremos
eso.
.subtitulo, h4, h5 {
font-weight: 400;
}
● Paso 5: Ahora vamos a fijar las medidas para que queden similar a las que están en
la maqueta final.
Comencemos por añadiendo un font-size y un margin-bottom al h1:
h1 {
font-weight: 800;
font-size: 3.75em; /* esta es la propiedad que añadimos */
margin-bottom: 0.25em; /* esta es la propiedad que añadimos */
}
_ 75
www.desafiolatam.com
Podemos ver que ese margin-bottom, pese a tener un "tamaño pequeño" (0.25)
igual es relativamente grande. Eso es porque esos 0.25em equivalen al 25% de
tamaño del h1, que en este caso es el 375% del tamaño del padre (HTML), que por
defecto es 16. Por lo tanto el h1 en pixeles estaría midiendo 60 y su margen inferior,
15.
Sigamos con el h2, h3, h4 y h5.
h2 {
font-weight: 700;
font-size: 2.5em;
}
h3 {
font-size: 2em;
}
h4 {
font-size: 1.75em;
}
h5 {
font-size: 1.25em;
}
● Paso 6: También les asignaremos a los encabezados, dependiendo dónde se
encuentren, margin-top y margin-bottom.
#ubicacion h2 {
margin: 1em auto;
}
.sweet-brown h3, .sweet-brown h5 {
margin-bottom: 0.5em; /* Aquí se puede ver el ejemplo claro de
cómo los em están condicionados por el elemento padre */
}
#eventos h2 {
margin-bottom: 1em;
}
#eventos h3 {
margin: 1em auto;
}
_ 76
www.desafiolatam.com
● Paso 7: Otra cosa que vamos a pasar a em será el text-shadow, como los tamaños
de fuente para el h1 y el h2 cambiaron se ven muy pequeños, así que escribiremos lo
siguiente:
.hero-section {
text-align: right;
background-image: url('../img/bg-hero.png');
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
text-shadow: 0.125em 0.25em 0.125em #707070; /* Esta línea la
pasamos a em */
padding: 3.125rem 3.125rem 6.25rem 3.125rem;
}
Lo que hicimos fue hacer el tamaño de sombra proporcional al tamaño de letra.
_ 77
www.desafiolatam.com
Imagen 47. Resultado font-size.
Fuente: Desafío Latam
_ 78
www.desafiolatam.com
● Paso 8: Llegó la hora de formatear el menú. Podemos ver en la maqueta final que los
elementos del menú:
1. Están alineados a la izquierda (text-align: left;).
2. Son desplegados uno al lado del otro (display: inline-block;).
3. Tienen márgenes entre ellos (margin: 0 1em;).
También podemos ver que la barra tiene ciertos paddings arriba y abajo y hacia
ambos lados (padding: 1.25rem 4rem;).
Otro punto importante es que los ítems del ul no deben tener su viñeta por defecto,
eso lo arreglaremos con la propiedad list-style-type con valor none.
Vamos a escribir entonces:
nav {
text-align: left;
padding: 1.25rem 4rem;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
margin: 0 1em;
}
Muy bien, ahora se ve mucho mejor:
Imagen 48. Formatear el menú.
Fuente: Desafío Latam.
_ 79
www.desafiolatam.com
● Paso 9: El valor que le vamos a poner al nav será fixed. Un elemento con la
propiedad position: fixed; por defecto se posiciona en la esquina superior
izquierda de la ventana de visualización del navegador y no se mueve de ahí aunque
hagamos scroll. Hagamos la prueba:
nav {
text-align: left;
padding: 1.25rem 4rem;
position: fixed; /* esta es la propiedad que añadimos */
}
Imagen 49. Position center.
Fuente: Desafío Latam.
Nos quedó nuestro menú. Si hacemos scroll éste nos seguirá, pero quedó más
pequeño y se sobrepuso al <header id="inicio" class="hero-section">.
● Paso 10: Eso es porque salió del flujo normal de la página. Por ende, tenemos que
hacer 2 cosas.
Primero, asignar al nav un ancho del 100% del ancho de la pantalla:
nav {
text-align: left;
padding: 1.25rem 4rem;
position: fixed;
width: 100vw; /* esta es la propiedad que añadimos */
}
_ 80
www.desafiolatam.com
Y segundo, darle un padding top mayor a <header id="inicio"
class="hero-section"> para no perder parte de su alto.
.hero-section {
text-align: right;
background-image: url('../img/bg-hero.png');
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
text-shadow: 0.125em 0.25em 0.125em #707070;
padding: 3.125rem 3.125rem; /* esto fue lo que modificamos */
}
Lo hemos logrado:
Imagen 50. Resultado nav y paddling.
Fuente: Desafío Latam.
_ 81
www.desafiolatam.com
● Paso 11: Ahora vamos a poner el código del SVG.
Para poder lograr hacer eso, vamos a colocar el svg en línea, copiando el código que
viene en el archivo y reemplazandolo por el texto que dice Ícono. Además a su <li>
contenedor le vamos a dar una clase icono para poder darle un tamaño en
específico a través de css.
<nav class="oscuro">
<ul>
<li class="icono"><a href="#inicio">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
44 44"><path d="M11.8 26l-2.2 2.3c-.5-2.9-.7-7.5 2.2-11.2V26zm-.4
4.1c2.7.5 7.2.7 10.6-2.3h-8.5l-2.1
2.3zm5.3-16.2c-.8.2-1.7.5-2.4.9v8.5l2.4-2.6v-6.8zm2.5-.3v4.6l4-4.2c-1.1-
.3-2.5-.5-4-.4zM16 25.2h8.1c.4-.8.7-1.7.9-2.6h-6.6L16 25.2zm28-6.1V25c0
4.3-3.3 7.8-7.4 7.8h-1.8v2.9c0 4.6-3.6 8.3-7.9 8.3h-19C3.6 44 0 40.3 0
35.7V0h34.8v11.4h1.8c4.1 0 7.4 3.5 7.4
7.7zm-16.2.9c.1-2.6-.4-5-.8-6.4-.2-.9-.4-1.4-.4-1.4s-.5-.2-1.4-.4c-1.4-.
4-3.6-.9-6.1-.8-.8 0-1.7.1-2.5.3-.8.2-1.6.4-2.4.7-.9.4-1.7.8-2.5
1.5-.6.5-1.1 1-1.6 1.6-4.5 5.4-3.4 12.5-2.6 15.5.2.9.4 1.4.4 1.4s.5.2
1.4.4c2.8.8 9.6 2 14.7-2.7.6-.5 1.1-1.1 1.5-1.7.6-.8 1-1.7
1.4-2.6.3-.8.5-1.7.7-2.6.1-1.1.2-1.9.2-2.8zm13.2-.9c0-2.6-2-4.6-4.4-4.6h
-1.8v15.1h1.8c2.4 0 4.4-2.1 4.4-4.6v-5.9zM21 20h4.4c0-1.6-.1-3-.4-4.2L21
20z"/></svg>
</a></li>
<li><a href="#ubicacion">Ubicación</a></li>
<li><a href="#proxima-charla">Próxima Charla</a> </li>
<li><a href="#eventos">Eventos anteriores</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
.icono {
width: 2rem;
}
Si recargamos el navegador no lo vamos a poder ver, pero si inspeccionamos lo
podremos encontrar. Resulta que este ícono es negro.
_ 82
www.desafiolatam.com
● Paso 12: Para cambiar su color a blanco debemos crear un selector que apunte a ese
svg en específico y ahí le debemos dar la propiedad fill: que es el relleno para los
svg con el valor #ffffff;
.icono svg {
fill: #ffffff;
}
● Paso 13: Y lo tenemos, ahora, falta alinear los li verticalmente. Eso ya lo sabemos
hacer, con vertical-align: middle;.
nav ul li {
display: inline-block;
margin: 0 1em;
vertical-align: middle; /* esta es la propiedad que añadimos */
}
● Paso 14: Finalmente, agregaremos las fuentes de font awesome.
Copiaremos y pegaremos el código del CDN en el head:
<head>
<title>Meet & Coffee</title>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="favicon.png">
<meta name="author" content="Francisca Medina Concha">
<meta name="description" content="Comparte tus conocimientos
tomando café">
<meta name="keywords" content="charlas, eventos, simposios,
tecnología, co-work">
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800"
rel="stylesheet">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3
Gp2irVfcrp" crossorigin="anonymous"> <!--Esto fue lo que agregamos-->
<link rel="stylesheet" href="assets/css/style.css">
</head>
_ 83
www.desafiolatam.com
● Paso 15: Buscamos el ícono en la galería de iconos de Font Awesome.
Imagen 51. Font awesome - buscar ícono.
Fuente: Font Awesome.
● Paso 16: Clickeamos el ícono y copiamos la etiqueta <i> con todas las clases que
nos entrega <i class="fab fa-github-square"></i>.
Imagen 52. Font awesome - Copiar etiqueta.
Fuente: Font Awesome.
_ 84
www.desafiolatam.com
● Paso 17: Lo pegaremos donde corresponda.
<footer id="contacto" class="oscuro">
<i class="fab fa-github-square"></i>
<p>Meet & coffe 2018. Todos los derechos reservados.</p>
</footer>
Vamos a repetir el pase 2, 3, 4 y 5 por cada ícono que necesitemos (GitHub, Twitter y
LinkedIn).
<footer id="contacto" class="oscuro">
<i class="fab fa-github-square"></i>
<i class="fab fa-twitter-square"></i>
<i class="fab fa-linkedin"></i>
<p>Meet & coffe 2018. Todos los derechos reservados.</p>
</footer>
Y veremos el resultado:
Imagen 53. Resultado Font Awesome.
Fuente: Desafío Latam.
Muy bien, gracias a Font Awesome se han desplegado los íconos. Además, estos
están blancos.
_ 85
www.desafiolatam.com
● Paso 18: Ahora, cada uno de esos íconos nos llevará a la red social específica. Eso lo
haremos añadiendo la etiqueta <a>.
<footer id="contacto" class="oscuro">
<a href="https://github.com"><i class="fab
fa-github-square"></i></a>
<a href="https://twitter.com"><i class="fab
fa-twitter-square"></i></a>
<a href="https://www.linkedin.com"><i class="fab
fa-linkedin"></i></a>
<p>Meet & coffee 2018. Todos los derechos reservados.</p>
</footer>
● Paso 19: Ahora sólo nos falta añadirle tamaño. Si bien podemos añadirle tamaño
usando la propiedad font-size, la forma más recomendada es hacerlo al estilo Font
Awesome. Para eso está la página Sizing Icons del sitio de Font Awesome donde nos
indicarán cómo hacerlos más grandes.
<footer id="contacto" class="oscuro">
<a href="https://github.com"><i class="fab fa-github-square
fa-5x"></i></a>
<a href="https://twitter.com"><i class="fab fa-twitter-square
fa-5x"></i></a>
<a href="https://www.linkedin.com"><i class="fab fa-linkedin
fa-5x"></i></a>
<p>Meet & coffee 2018. Todos los derechos reservados.</p>
</footer>
Imagen 54. Utilizar propiedad font-size.
Fuente: Desafío Latam.
_ 86
www.desafiolatam.com
● Paso 20: Ahora sólo nos toca añadirle la distancia entre íconos y estamos listos con
nuestra página index.
footer i {
margin: 0 0.25em 0.5em 0.25em;
}
Resultado
Imagen 55. Resultado con Font Awesome.
Fuente: Desafío Latam.
_ 87
www.desafiolatam.com
También podría gustarte
- Et-205-Pemex-2019 Sistema de Gas y Fuego Tableros de Seguridad100% (1)Et-205-Pemex-2019 Sistema de Gas y Fuego Tableros de Seguridad27 páginas
- Presentación HTML5, Etiquetas SemánticasAún no hay calificacionesPresentación HTML5, Etiquetas Semánticas24 páginas
- Semana 3 Practica Semantica Html5-CssAún no hay calificacionesSemana 3 Practica Semantica Html5-Css38 páginas
- 03 - 3 - Lectura HTML - CSS - BoostrapAún no hay calificaciones03 - 3 - Lectura HTML - CSS - Boostrap34 páginas
- Diseño Web I Estructura Semantica CajasAún no hay calificacionesDiseño Web I Estructura Semantica Cajas13 páginas
- Guía de Ejercicios 3 - PosicionamientocompletoAún no hay calificacionesGuía de Ejercicios 3 - Posicionamientocompleto21 páginas
- Alixt4. GFPI-F-0135 - Lenguaje HTMLAún no hay calificacionesAlixt4. GFPI-F-0135 - Lenguaje HTML10 páginas
- Introducción al Desarrollo Web FrontendAún no hay calificacionesIntroducción al Desarrollo Web Frontend34 páginas
- Apuntes Del Curso Definitivo de HTML y CSSAún no hay calificacionesApuntes Del Curso Definitivo de HTML y CSS31 páginas
- ¿Qué Es El CSS - Aprende Desarrollo Web - MDNAún no hay calificaciones¿Qué Es El CSS - Aprende Desarrollo Web - MDN6 páginas
- Curso de Desarrollo Web - Nivel Básico.Aún no hay calificacionesCurso de Desarrollo Web - Nivel Básico.63 páginas
- Actividad #10 Conocimiento Básico de Software para Procesos ContablesAún no hay calificacionesActividad #10 Conocimiento Básico de Software para Procesos Contables2 páginas
- Calculo Del Desplazamiento de Nudos y Reacciones de Una Armadura IsostáticaAún no hay calificacionesCalculo Del Desplazamiento de Nudos y Reacciones de Una Armadura Isostática13 páginas
- 13 Taller - Direccionamiento Ipv4Aún no hay calificaciones13 Taller - Direccionamiento Ipv43 páginas
- 77 Modelando de Procesos Con BPMNAún no hay calificaciones77 Modelando de Procesos Con BPMN11 páginas
- CRONOGRAMA DE ACTIVIDADES Proyecto Empresas UniminutoAún no hay calificacionesCRONOGRAMA DE ACTIVIDADES Proyecto Empresas Uniminuto4 páginas
- SaludSoft - Manual de Instrucciones DAún no hay calificacionesSaludSoft - Manual de Instrucciones D99 páginas
- Cordova Perez Claudia Aplicacion Aprendizaje ProfundoAún no hay calificacionesCordova Perez Claudia Aplicacion Aprendizaje Profundo80 páginas
- Componentes Físicos de La ComputadoraAún no hay calificacionesComponentes Físicos de La Computadora30 páginas
- r5-u3-uveg-normalizacion-de-mi-base-de-datosAún no hay calificacionesr5-u3-uveg-normalizacion-de-mi-base-de-datos20 páginas
- 3.2.2.4 Lab - Using A PL-App NotebookAún no hay calificaciones3.2.2.4 Lab - Using A PL-App Notebook7 páginas
- Autogestión y Contraseña Correo EsapAún no hay calificacionesAutogestión y Contraseña Correo Esap19 páginas
