¿Por qué usar CSS?

CSS es un lenguaje utilizado para diseñar sitios web. Los colores, las fuentes y los
diseños de página de un sitio se pueden administrar mediante CSS. Cuanto más
cómodo se sienta con CSS, mejor equipado estará para crear sitios web elegantes y
de apariencia contemporánea.
Enlace a una hoja de estilo
El elemento de enlace HTML vincula un archivo CSS a un archivo HTML para que
se pueda aplicar el estilo CSS. Aquí hay un ejemplo del elemento de enlace:

<link rel="stylesheet" type="text/css" href="[Link]"/>

Acerca del enlace:

1. El elemento de enlace utiliza tres atributos:

- rel: especifica la relación entre el archivo actual y el archivo al que se

vincula: en este caso, el rel atributo es "hoja de estilo".

- type: especifica el tipo de archivo vinculado.

- href: Proporciona la URL del archivo al que se vincula.

2. Al igual que el elemento de imagen HTML, el enlace se cierra

automáticamente. No necesita una etiqueta de cierre.

3. En el ejemplo anterior, [Link] es una hoja de estilo externa. El uso de

hojas de estilo externas es una de las formas más populares de escribir CSS.

CSS en línea es otro método.

Anatomía de una regla CSS

Cómo funciona el código CSS.

El diagrama de la abajo muestra la anatomía de una regla CSS:

 1. regla: una lista de instrucciones CSS sobre cómo diseñar un elemento HTML
específico o un grupo de elementos HTML.

2. selector: especifica exactamente a qué elementos HTML aplicar estilo. Aquí

está el seleccionador p.

3. propiedades y valores: ubicado dentro de los {} corchetes, las propiedades y

los valores especifican qué aspecto del selector se va a diseñar. En el
ejemplo del diagrama, la color propiedad se establece en red, lo que mostrará
todos los p elementos en rojo.

Familia tipográfica

Una de las formas más efectivas de mejorar la apariencia de un sitio web es

cambiar la fuente. En CSS, la fuente se gestiona mediante la propiedad font-family:

h1 {

font-family: Georgia, serif;

Arriba, la font-family propiedad del h1 selector se establece en el valor de Georgia,

con serif como una fuente alternativa. Las fuentes alternativas se incluyen en caso
de que el navegador web de un visitante no admita la primera fuente. A veces, se
incluye más de una fuente alternativa.
Color
En CSS, la propiedad de color establece el color de la fuente de un selector de CSS:

h1 {

color: red;

CSS viene equipado con 140 colores con nombre, como red, usado anteriormente.
Para muchas situaciones, estos colores con nombre serán suficientes. Sin embargo,
los desarrolladores web que quieran ser aún más exactos con sus opciones de color
pueden usar valores de color hexadecimales y RGB.

1. Color hexadecimal (#RRGGBB): valores hexadecimales que representan

mezclas de rojo, verde y azul. Por ejemplo, el rojo se puede expresar con el
valor hexadecimal de #FF0000: el valor ff representa rojo, 00 representa
verde y 00 representa azul.

2. Colores RGB (rojo, verde, azul): color creado por tres números que
representan rojo, verde y azul. Cuando se mezclan, los tres valores crean un
color específico. Por ejemplo: el morado se puede representar como rgb
(128,0,128).

Selectores de clase CSS

Hasta este punto, hemos usado CSS para seleccionar un elemento HTML solo por
su nombre de etiqueta. Sin embargo, podemos usar selectores de clase para
apuntar a clases de elementos HTML.

Considere el siguiente HTML:

<div class="header">

<h2>Heading</h2>
 <p>Paragraph</p>

</div>

Aquí, the div es el elemento padre y the h2 y p son elementos secundarios. Los
estilos CSS aplicados al header selector de clase se aplicarán automáticamente al
h2 y al p.

Aquí hay un repaso de los elementos padre e hijo.

En CSS, los selectores de clase se pueden identificar con un punto .seguido del
nombre de la clase, como se ve a continuación:

.header {

color: #ffffff;

Como resultado de este código, los elementos secundarios de divs con la header
clase tendrán un color de fuente #ffffff(blanco).

Tamaño de fuente
El tamaño del texto tiene un impacto en cómo los usuarios experimentan un sitio
web. La propiedad font-size establece el tamaño del texto de un elemento HTML.

h1 {
font-size: 60px;
}
En el CSS anterior, font-size se establece en 60px. En CSS, el tamaño se puede
asignar en píxeles (px), rems o ems.

1. píxel (px): unidad de medida estándar para dimensionar fuentes y otros

elementos HTML.

2. rem: representa el tamaño de fuente predeterminado para el navegador web.

Rems se puede usar para garantizar que los elementos HTML se escalen en
proporción entre sí en varios navegadores web y tamaños de pantalla. En la
 mayoría de los navegadores web, 1rem es equivalente a 16px, 2rem es
equivalente a 32px (una duplicación), 3rem es equivalente a 48px (una
triplicación) y así sucesivamente.

3. em: Un valor relativo que cambia en proporción al font-size del elemento

sobre el que em se utiliza. Debido a que font-size es una propiedad
heredada, esto generalmente significa que el em valor cambiará en
proporción al font-size del elemento principal, a menos que font-size se
establezca explícitamente a en el elemento en el que em se usa. Por
ejemplo, si un elemento principal tiene font-size: 20px;, los elementos
secundarios con font-size: 1em; serían equivalentes a 20px. Los elementos
secundarios con font-size: 0.5em; serían equivalentes a 10px (una reducción
a la mitad) y así sucesivamente.

Exploraremos principalmente los valores px y rem, ya que estos son los más
utilizados en la actualidad.
Una imagen de fondo
En CSS, la propiedad background-image establece una imagen de fondo de su
elección para un selector dado, como se ve a continuación.

.hero {
background-image:
url("[Link]
}
La regla CSS anterior asigna la imagen alojada en

[Link]
a elementos que tienen un atributo de clase establecido en hero.

Para controlar el tamaño de la imagen de fondo elegida, use la propiedad

background-size como se ve a continuación:

.hero {
background-image:
url("[Link]
background-size: cover;
}
Aquí, hemos especificado que queremos que la imagen cubra completamente los
elementos de la .hero clase.
Selectores de ID de CSS
La imagen de fondo hace una gran diferencia. ¡Buen trabajo!

Un ejercicio anterior introdujo selectores de clase CSS para diseñar elementos

HTML de clases específicas. ¿Qué pasa si el diseño de una página web requiere
que un elemento de página individual tenga un estilo único, pero todos los demás
elementos de ese tipo tengan un estilo diferente?

Por ejemplo, para diseñar un elemento de anclaje de manera diferente a todos los
demás en una página web, podría usar el atributo de identificación HTML:

<a id="learn-code" href="[Link] here to learn to code!

</a>
Luego, en el archivo CSS, crearía una regla para el selector de id, usando un
símbolo #:

#learn-code {
color: #2e69a3;
}
Acerca del uso de la identificación:

1. Un atributo de identificación solo se puede usar una vez porque la

identificación es única para el elemento al que está asignado.

2. Los identificadores tienen mayor especificidad que las clases. Si un elemento

HTML utiliza tanto atributos de id como de clase, la regla CSS para el id
tendrá prioridad sobre la de la clase.

A continuación, usaremos un selector de ID para diseñar un solo elemento HTML de

manera diferente a otros de ese tipo en la página web.
El modelo de caja
Una parte importante del estilo de una página web con CSS es organizar los límites
y el espacio.
Cada elemento de la página tiene propiedades de límite y espacio que se pueden
controlar mediante CSS. El modelo de caja CSS ilustra cada una de estas
propiedades.

1. contenido: Incluye texto, imágenes u otros medios contenidos dentro de un

elemento HTML.

2. relleno: El espacio entre el contenido y el borde. Puedes pensar en esto

como el espacio interior.

3. border: El contorno de un elemento de página HTML. Puede pensar en ello

como un marco de imagen que contiene el elemento.

4. margin: El espacio entre el elemento de la página HTML y los siguientes

elementos más cercanos.

Crear un borde
La propiedad de borde se puede utilizar para definir visualmente el borde exterior de
un elemento de página.

En CSS, el valor de la propiedad del borde requiere tres partes:

1. grosor: establece el grosor del borde, utilizando píxeles, ems o rems.

2. type: Establece el tipo de borde. Las opciones comunes son solid, dotted y
dashed. Hay muchos otros.
3. color: establece el color del borde, utilizando colores con nombre, valores
HEX o RGB.
El CSS a continuación le da a un elemento de párrafo un borde negro sólido de 2
píxeles de grosor:

p{
border: 2px solid black;
}

Trabajar con relleno

La propiedad de relleno CSS controla el espacio vacío entre el contenido del

elemento de la página y su borde. Aumentar el relleno de un elemento de página
hace que el espacio alrededor del contenido sea más espacioso, mientras que
disminuirlo hace que el espacio sea más compacto.

p{

padding: 20px;

El CSS anterior daría a los elementos de párrafo un relleno de 20px.

Trabajar con margen

La propiedad de margen CSS controla el espacio entre diferentes elementos HTML

en una página web. Utilice el margen para acercar los elementos de la página o
para separarlos más.

El CSS a continuación garantiza 2rems de espacio entre los elementos con la clase
answer y los elementos de la página circundante.

.answer {

margin: 2rem;

}
 Más márgenes

La propiedad de margen crea espacio en todos los lados de un elemento de página.

También es posible establecer espacios separados margin en cada lado de un
elemento.

Propiedades de margen adicionales:

1. margin-top: Establece el margen superior.

2. margin-bottom: Establece el margen inferior.
3. margin-left: Establece el margen izquierdo.
4. margin-right: Establece el margen derecho.

Comprender la pantalla
El uso de bordes, relleno y márgenes nos permite controlar los límites y el espacio
de los elementos HTML individuales.

Pero, ¿qué propiedades CSS están disponibles para mover elementos en la página
y crear diseños de página únicos? Las propiedades de visualización y posición de
CSS ayudan a lograr esto.

Monitor
No todos los elementos HTML se muestran en una página de la misma manera. Los
tipos de visualización determinan cómo se organizarán los elementos HTML entre
sí.
 Manténgalo en línea
Los tipos de visualización se pueden sobrescribir en CSS utilizando la propiedad de
visualización.

Por ejemplo, podemos hacer que los elementos de la lista aparezcan en la misma
línea configurando la visualización en inline:

li {
display: inline;
}

Usando flotador
Para lograr esto, podemos usar la propiedad float de CSS. Al usar float, tenemos la
opción de elementos flotantes hacia la izquierda o hacia la derecha.

Considere el siguiente código de ejemplo.

.logo {
float: left;
}

#search-bar {
float: right;
}

Pantalla: flexible
Además de otras capacidades, flex se puede usar para alinear fácilmente múltiples
elementos de página horizontalmente.

En el código de ejemplo a continuación, hay un div con clase parent:

<div class="parent">
...
</div>
Para hacer que los hijos del div se alineen horizontalmente en la página web, en
CSS podemos usar:

.parent {
display: flex;
}
Los elementos secundarios del div con clase parent ahora se alinearán
horizontalmente. Podemos asegurarnos de que ningún elemento secundario se
mueva fuera de la página usando flex-wrap: wrap;:

.parent {
display: flex;
flex-wrap: wrap;
}
Finalmente, para centrar filas de elementos secundarios, podemos usar justify-
content: center;:

.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

Trabajando con Posición

La propiedad de posición de CSS le permite colocar elementos HTML en
ubicaciones exactas en una página web. Un valor útil para esta propiedad es
relativo. ¡Este valor posiciona los elementos de la página en una página web en
relación con el lugar en el que normalmente aparecerían!

Al establecer primero position: relative;, puede usar las propiedades CSS top, left,
bottom y right para desplazar un elemento lejos de donde habría aparecido
normalmente en la página.

El fragmento de código a continuación mueve un div con la clase container 10px

lejos del 20px lado izquierdo de la página.

.container {
position: relative;
top: 10px;
left: 20px;
}
¿Alguna vez hizo clic en un botón en una página web que parecía moverse hacia
abajo y luego retroceder como un botón de la vida real? Podemos implementar este
truco usando la position propiedad.

Conceptos Web

● Modelo de caja CSS: ilustra las propiedades de espacio y límite de un

elemento HTML que se puede controlar mediante CSS.

Habilidades CSS

● borde: establece el contorno de un elemento de página HTML, como un

marco de imagen que contiene el elemento.

● relleno: establece la cantidad de espacio entre el contenido de un elemento y

su borde.
 ● margin: establece la cantidad de espacio entre un elemento HTML y los
siguientes elementos más cercanos.

● display: propiedad que determina cómo se organizará el elemento

seleccionado en relación con otros elementos HTML en la página.

● en línea: valor de visualización utilizado para organizar elementos HTML en

la misma línea que los elementos vecinos.

● Flex: valor de visualización que nos permite alinear fácilmente varios

elementos de la página vertical u horizontalmente.

● float: propiedad utilizada para hacer flotar elementos HTML a la izquierda o a

la derecha de los elementos vecinos.

● posición: propiedad utilizada para colocar elementos HTML en ubicaciones

exactas en una página web.

En la red
Una de las razones por las que Bootstrap y frameworks como este son tan
populares es porque ofrecen grids. Una cuadrícula permite organizar elementos
HTML utilizando columnas preconfiguradas. Con una cuadrícula, puede personalizar
diseños de página receptivos de forma rápida y confiable.

La cuadrícula de Bootstrap contiene 12 columnas de igual tamaño, como se ve en el

diagrama de abajo. Los elementos HTML se organizan para abarcar diferentes
números de columnas con el fin de crear diseños de página personalizados.
Anatomía CSS
El diagrama de la derecha muestra dos métodos diferentes, o sintaxis, para escribir
código CSS. La primera sintaxis muestra que CSS se aplica como un conjunto
de reglas, mientras que la segunda lo muestra escrito como un estilo en línea . Dos
métodos diferentes de escribir CSS pueden parecer un poco intimidantes al
principio, ¡pero no es tan malo como parece!

Observe cómo ambas sintaxis contienen una declaración. Las declaraciones son el

núcleo de CSS. Aplican un estilo al elemento seleccionado. Aquí, el <p>elemento ha
sido seleccionado en ambas sintaxis y tendrá un estilo para mostrar el texto en azul.

¡Comprender que una declaración se usa para diseñar un elemento seleccionado es

clave para aprender a diseñar documentos HTML con CSS! Los siguientes términos
explican cada una de las etiquetas en el diagrama de la derecha.

Términos del conjunto de reglas:

 Selector: el comienzo del conjunto de reglas que se utiliza para apuntar al

elemento al que se le aplicará estilo.
 Bloque de declaración: el código entre (e incluye) las llaves ( { }) que contiene
la(s) declaración(es) de CSS.
 Declaración: el nombre de grupo para un par de propiedad y valor que aplica
un estilo al elemento seleccionado.
 Propiedad: la primera parte de la declaración que indica qué característica
visual del elemento se va a modificar.
  Valor: la segunda parte de la declaración que representa el valor de la
propiedad.

Términos de estilo en línea:

 Etiqueta de apertura: el comienzo de un elemento HTML . Este es el

elemento que será estilizado.
 Atributo: el atributo de estilo se usa para agregar estilos CSS en línea a un
elemento HTML.
 Declaración: el nombre de grupo para un par de propiedad y valor que aplica
un estilo al elemento seleccionado.
 Propiedad: la primera parte de la declaración que indica qué característica
visual del elemento se va a modificar.
 Valor: la segunda parte de la declaración que representa el valor de la
propiedad.

Estilos en línea
Aunque CSS es un lenguaje diferente a HTML, es posible escribir código CSS
directamente dentro del código HTML usando estilos en línea.

Para diseñar un elemento HTML, puede agregar el style atributo directamente a la

etiqueta de apertura. Después de agregar el atributo, puede establecerlo igual a los
estilos CSS que desea aplicar a ese elemento.

<p style='color: red;'>I'm learning to code!</p>

El código del ejemplo anterior demuestra cómo usar el estilo en línea. El elemento
de párrafo tiene un style atributo dentro de su etiqueta de apertura. A continuación,
el style atributo se establece igual a color: red;, lo que establecerá el color del texto
del párrafo en rojo dentro del navegador.

Si desea agregar más de un estilo con estilos en línea, simplemente siga agregando

al style atributo. Asegúrese de terminar los estilos con un punto y coma (;).

<p style='color: red; font-size: 20px;'>I'm learning to code!</p>

Es importante saber que los estilos en línea son una forma rápida de diseñar
directamente un elemento HTML, pero rara vez se usan al crear sitios web. Pero es
posible que encuentre circunstancias en las que el estilo en línea sea necesario, por
lo que comprender cómo funciona y reconocerlo en el código HTML es un buen
conocimiento que debe tener. ¡Pronto aprenderá la forma correcta de agregar
código CSS!

Hoja de estilo interna

Como se indicó anteriormente, los estilos en línea no son la mejor manera de
diseñar elementos HTML. Si quisiera diseñar, por ejemplo, varios <h1> elementos,
tendría que agregar un estilo en línea a cada elemento manualmente. Además,
también tendría que mantener el código HTML cuando <h1> se agreguen elementos
adicionales.

Afortunadamente, HTML te permite escribir código CSS en su propia sección

dedicada con un <style> elemento anidado dentro del <head>elemento. El código
CSS dentro del <style> elemento a menudo se denomina hoja de estilo interna.

Una hoja de estilo interna tiene ciertos beneficios y casos de uso sobre los estilos en
línea, pero una vez más, no es la mejor práctica (llegaremos allí, lo
prometemos). Sin embargo, comprender cómo usar las hojas de estilo internas es
un conocimiento útil.

Para crear una hoja de estilo interna, <style> se debe colocar un elemento dentro
del <head> elemento.

<head>
  <style>

  </style>
</head>
Después de agregar etiquetas de apertura y cierre <style> en la sección de
encabezado, puede comenzar a escribir código CSS.

<head>
  <style>
    p {
      color: red;
      font-size: 20px;
     }
  </style>
</head>
El código CSS del ejemplo anterior cambia el color de todo el texto del párrafo a rojo
y también cambia el tamaño del texto a 20 píxeles. Observe cómo la sintaxis del
código CSS coincide (en su mayor parte) con la sintaxis que usó para el estilo en
línea. La principal diferencia es que puede especificar a qué elementos aplicar el
estilo.
Hoja de estilo externa
Los desarrolladores evitan mezclar código almacenando código HTML y CSS en
archivos separados (los archivos HTML contienen solo código HTML y los archivos
CSS contienen solo código CSS).

Puede crear una hoja de estilo externa utilizando la extensión de nombre de

archivo .css, así: [Link]

Con una hoja de estilo externa, puede escribir todo el código CSS necesario para
diseñar una página sin sacrificar la legibilidad y el mantenimiento de su archivo
HTML.

Vincular el archivo CSS

¡Perfecto! Separamos con éxito la estructura (HTML) del estilo (CSS), pero la página
web aún se ve insulsa. ¿Por qué?

Cuando los códigos HTML y CSS están en archivos separados, los archivos deben
estar vinculados. De lo contrario, el archivo HTML no podrá ubicar el código CSS y
no se aplicará el estilo.

Puede utilizar el <link> elemento para vincular archivos HTML y CSS. El <link>

elemento debe colocarse dentro del encabezado del archivo HTML. Es una etiqueta
de cierre automático y requiere los siguientes atributos:
 1. href — al igual que el elemento ancla, el valor de este atributo debe ser la
dirección o la ruta al archivo CSS.
2. rel— este atributo describe la relación entre el archivo HTML y el archivo
CSS. Debido a que está vinculando a una hoja de estilo, el valor debe
establecerse en stylesheet.

Al vincular un archivo HTML y un archivo CSS, el <link> elemento tendrá el

siguiente aspecto:

<link href=’[Link] rel=’stylesheet’>

Tenga en cuenta que en el ejemplo anterior, la ruta a la hoja de estilo es una URL:

[Link]
Especificar la ruta a la hoja de estilo mediante una URL es una forma de vincular
una hoja de estilo.

Si el archivo CSS está almacenado en el mismo directorio que su archivo HTML,

puede especificar una ruta relativa en lugar de una URL, así:

<link href='./[Link]' rel='stylesheet'>

Usar una ruta relativa es una forma muy común de vincular una hoja de estilo.

Selectores

Escribe

Recuerda que las declaraciones son una parte fundamental de CSS porque aplican

un estilo a un elemento seleccionado. Pero, ¿cómo decide qué elementos obtendrán
el estilo? Con selector.

Se utiliza un selector para apuntar a los elementos HTML específicos a los que se
aplicará el estilo de la declaración. Un selector con el que quizás ya esté
familiarizado es el selector de tipo. Tal como sugiere su nombre, el selector de tipo
coincide con el tipo del elemento en el documento HTML.

En la lección anterior, cambió el color de un elemento de párrafo.

p{
  color: green;
}

¡Esta es una instancia del uso del selector de tipo! El tipo de elemento es p, que
proviene de la <p>etiqueta HTML.

Algunas notas importantes sobre el selector de tipo:

 El selector de tipo no incluye los corchetes angulares.

 Dado que los tipos de elementos a menudo se denominan por su nombre de
etiqueta de apertura, el selector de tipo a veces se denomina nombre de
etiqueta o selector de elemento.

Universal
Aprendió cómo el selector de tipo selecciona todos los elementos de un tipo
determinado. Pues bien, el selector universal selecciona todos los elementos
de cualquier tipo.

Dirigirse a todos los elementos de la página tiene algunos casos de uso específicos,
como restablecer el estilo predeterminado del navegador o seleccionar todos
los elementos secundarios de un elemento principal. No se preocupe si no
comprende los casos de uso en este momento; los abordaremos más adelante en
nuestro viaje de Learn CSS.

El selector universal usa el * carácter en el mismo lugar donde especificó el selector
de tipo en un conjunto de reglas, así:

*{
  font-family: Verdana;
}
En el código anterior, cada elemento de texto en la página cambiará su fuente
a Verdana.

Clase
CSS no se limita a seleccionar elementos por su tipo. Como sabes, los elementos
HTML también pueden tener atributos. Cuando se trabaja con HTML y CSS, un
atributo de clase es una de las formas más comunes de seleccionar un elemento.

Por ejemplo, considere el siguiente HTML:

<p class='brand'>Sole Shoe Company</p>

El elemento de párrafo del ejemplo anterior tiene un class atributo dentro de la
etiqueta de apertura del <p> elemento. El class atributo se establece
en 'brand'. Para seleccionar este elemento usando CSS, podemos crear un conjunto
de reglas con un selector de clase de .brand.

.brand {

}
Para seleccionar un elemento HTML por su clase usando CSS, .se debe anteponer
un punto al nombre de la clase. En el ejemplo anterior, la clase es brand, por lo que
el selector de CSS para ella es .brand.
Múltiples Clases
Podemos usar CSS para seleccionar el class atributo de un elemento HTML por
nombre. Y hasta ahora, hemos seleccionado elementos usando solo un nombre de
clase por elemento. Si cada elemento HTML tuviera una sola clase, toda la
información de estilo para cada elemento requeriría una nueva clase.

Afortunadamente, es posible agregar más de un nombre de clase al class atributo

de un elemento HTML.

Por ejemplo, tal vez haya un elemento de encabezado que deba ser verde y
negrita. Podrías escribir dos conjuntos de reglas CSS así:

.green {
  color: green;
}

.bold {
  font-weight: bold;
}
Luego, podría incluir ambas clases en un elemento HTML como este:

<h1 class='green bold'> ... </h1>

Podemos agregar varias clases al class atributo de un elemento HTML
separándolas con un espacio. Esto nos permite mezclar y combinar clases de CSS
para crear muchos estilos únicos sin tener que escribir una clase personalizada para
cada combinación de estilos necesaria.
IDENTIFICACIÓN
A menudo, es importante seleccionar un solo elemento con CSS para darle su
propio estilo único. Si un elemento HTML necesita un estilo único, podemos darle
una ID usando el id atributo.

<h1 id='large-title'> ... </h1>

En contraste con class el que acepta múltiples valores y se puede usar ampliamente
en un documento HTML, un elemento id solo puede tener un valor único y solo se
puede usar una vez por página.

Para seleccionar el ID de un elemento con CSS, anteponemos el id nombre con un

signo #. Por ejemplo, si quisiéramos seleccionar el elemento HTML en el ejemplo
anterior, se vería así:

#large-title {

Atributo
Puede recordar que algunos elementos HTML usan atributos para agregar detalles
o funciones adicionales al elemento. Algunos atributos familiares pueden ser href
y src, pero hay muchos más , incluido class e id!

El selector de atributos se puede utilizar para apuntar a elementos HTML que ya

contienen atributos. Los elementos del mismo tipo pueden orientarse de manera
diferente por su atributo o valor de atributo. Esto alivia la necesidad de agregar
código nuevo, como los atributos class o id

Los atributos se pueden seleccionar de manera similar a los tipos, clases e ID.

[href] {
   color: magenta;
}
La sintaxis más básica es un atributo entre corchetes. En el ejemplo anterior: [href]
se orientaría a todos los elementos con un href atributo y se establecería color
en magenta.

Y puede volverse más granular a partir de ahí al agregar valores de tipo y/o

atributo. Una forma es usando type [attribute*=value]. En resumen, este código
selecciona un elemento donde el atributo contiene cualquier instancia del valor
especificado. Echemos un vistazo a un ejemplo.

<img src='/images/seasons/cold/[Link]'>
<img src='/images/seasons/warm/[Link]'>
El código HTML anterior representa dos <img> elementos, cada uno de los cuales
contiene un src atributo con un valor equivalente a un enlace a un archivo de
imagen.

img[src*='winter'] {
  height: 50px;
}

img[src*='summer'] {
  height: 100px;
}
Ahora eche un vistazo al código CSS anterior. El selector de atributos se utiliza para
orientar cada imagen individualmente.

 El primer conjunto de reglas busca un img elemento con un atributo de src

que contiene la cadena 'winter' y establece el height en 50px.
  El segundo conjunto de reglas busca un img elemento con un atributo de src
que contiene la cadena 'summer' y establece el height en 100px.

Observe cómo no fue necesario agregar un nuevo marcado HTML (como una clase
o una identificación), y todavía pudimos modificar los estilos de cada imagen de
forma independiente. ¡Esta es una de las ventajas de usar el selector de atributos!
Pseudo-clase
Es posible que haya observado cómo la apariencia de ciertos elementos puede
cambiar, o estar en un estado diferente, después de ciertas interacciones del
usuario. Por ejemplo:

 Cuando hace clic en un <input> elemento, se agrega un borde azul que

muestra que está enfocado.
 Cuando hace clic en un <a> enlace azul para visitar otra página, pero cuando
regresa, el texto del enlace es morado.
 Cuando está completando un formulario y el botón Enviar está atenuado
y deshabilitado. Pero cuando se completaron todos los campos, el botón
tiene un color que muestra que está activo.

¡Todos estos son ejemplos de selectores de pseudoclases en acción! De

hecho, :focus, :visited, :disabled y :active son todas pseudoclases. Factores como la
interacción del usuario, la navegación del sitio y la posición en el árbol del
documento pueden dar a los elementos un estado diferente con pseudoclase.

Una pseudoclase se puede adjuntar a cualquier selector. Siempre se escribe con

dos puntos seguidos de un nombre. p:hover por ejemplo

p:hover {
  background-color: lime;
}
En el código anterior, siempre que el mouse se desplace sobre un elemento de
párrafo, ese párrafo tendrá un fondo de color lima.
 Clases e identificaciones
CSS puede seleccionar elementos HTML por su tipo, clase e ID. Las clases e ID de
CSS tienen diferentes propósitos, lo que puede afectar cuál usa para diseñar
elementos HTML.

Las clases CSS están destinadas a ser reutilizadas en muchos elementos. Al

escribir clases de CSS, puede diseñar elementos de varias maneras mezclando
clases. Por ejemplo, imagine una página con dos titulares. Un título debe ser negrita
y azul, y el otro debe ser negrita y verde. En lugar de escribir reglas CSS separadas
para cada título que repiten el código del otro, es mejor escribir una .bold regla CSS,
una .green regla CSS y una .blue regla CSS. Luego puede darle a un titular las bold
green clases y al otro las bold blue clases.

Si bien las clases están destinadas a usarse muchas veces, una ID está diseñada
para diseñar solo un elemento. Como aprenderá en el siguiente ejercicio, los ID
anulan los estilos de tipos y clases. Dado que los ID anulan estos estilos, deben
usarse con moderación y solo en elementos que deben aparecer siempre iguales.
Especificidad
La especificidad es el orden en que el navegador decide qué estilos CSS se
mostrarán. Una mejor práctica en CSS es aplicar estilo a los elementos utilizando el
grado más bajo de especificidad para que, si un elemento necesita un nuevo estilo,
sea fácil de anular.

Los ID son el selector más específico en CSS, seguidos de las clases y, por último,
el tipo. Por ejemplo, considere el siguiente HTML y CSS:

<h1 class='headline'>Breaking News</h1>

h1 {
  color: red;
}

.headline {
  color: firebrick;
}
En el código de ejemplo anterior, el color del encabezado se establecería
en firebrick, ya que el selector de clase es más específico que el selector de tipo. Si
se agregara un atributo de ID (y un selector) al código anterior, los estilos dentro del
cuerpo del selector de ID anularían todos los demás estilos del encabezado.

Con el tiempo, a medida que los archivos crecen con el código, muchos elementos
pueden tener ID, lo que puede dificultar la edición de CSS, ya que se debe crear un
estilo nuevo y más específico para cambiar el estilo de un elemento.

Para hacer que los estilos sean fáciles de editar, es mejor diseñarlos con un selector
de tipo, si es posible. Si no, agregue un selector de clase. Si eso no es lo
suficientemente específico, considere usar un selector de ID.

Encadenamiento
Al escribir reglas CSS, es posible requerir que un elemento HTML tenga dos o más
selectores CSS al mismo tiempo.

Esto se hace combinando varios selectores, a lo que nos referiremos como

encadenamiento. Por ejemplo, si hubiera una special clase para los <h1>
elementos, el CSS se vería así:
[Link] {

}
El código anterior seleccionaría solo los <h1> elementos con una clase
de special. Si un <p> elemento también tuviera una clase de special, la regla del
ejemplo no aplicaría estilo al párrafo.
Combinador de descendientes
Además de encadenar selectores para seleccionar elementos, CSS también admite
la selección de elementos que están anidados dentro de otros elementos HTML,
también conocidos como descendientes. Por ejemplo, considere el siguiente HTML:

<ul class='main-list'>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>
Los elementos anidados <li>son descendientes del <ul>elemento y se pueden
seleccionar con el combinador descendiente así:

.main-list li {

}
En el ejemplo anterior .main-list selecciona el elemento con la .main-list clase
(el <ul>elemento). Los descendientes <li> se seleccionan sumando li al selector,
separados por un espacio. Esto da .main-list li como resultado el selector final.

Seleccionar elementos de esta manera puede hacer que nuestros selectores sean
aún más específicos al asegurarse de que aparezcan en el contexto que
esperamos.
Encadenamiento y especificidad
En el último ejercicio, en lugar de seleccionar todos los <h5> elementos, seleccionó
solo los <h5> elementos anidados dentro de los .description elementos. Este selector de
CSS era más específico que solo escribir h5. Agregar más de una etiqueta, clase o
ID a un selector de CSS aumenta la especificidad del selector de CSS.
Por ejemplo, considere el siguiente CSS:

p{
  color: blue;
}

.main p {
  color: red;
}
Ambas reglas CSS definen el <p> aspecto que debe tener un elemento. Como .main p
tiene una clase y un p tipo como su selector, solo aparecerán los <p> elementos
dentro del .main elemento red. Esto ocurre a pesar de que existe otra regla más
general que establece que los <p> elementos deben ser blue.
Selectores múltiples
Para que el CSS sea más conciso, es posible agregar estilos CSS a varios
selectores CSS a la vez. Esto evita escribir código repetitivo.

Por ejemplo, el siguiente código tiene atributos de estilo repetitivos:

h1 {
  font-family: Georgia;
}

.menu {
  font-family: Georgia;
}
En lugar de escribir font-family: Georgia dos veces para dos selectores, podemos
separar los selectores con una coma para aplicar el mismo estilo a ambos, así:

h1,
.menu {
  font-family: Georgia;
}
Al separar los selectores de CSS con una coma, tanto los <h1>elementos como los
elementos con la menú clase recibirán el font-family: Georgia estilo.
 Revisar
A lo largo de esta lección, aprendió cómo seleccionar elementos HTML con CSS y
aplicarles estilos. Repasemos lo que aprendiste:

 CSS puede seleccionar elementos HTML por tipo, clase, ID y atributo.

 Todos los elementos se pueden seleccionar con el selector universal.
 Un elemento puede tener diferentes estados utilizando el selector de
pseudoclase.
 Se pueden aplicar varias clases de CSS a un elemento HTML.
 Las clases pueden ser reutilizables, mientras que las identificaciones solo se
pueden usar una vez.
 Los ID son más específicos que las clases, y las clases son más específicas
que el tipo. Eso significa que los ID anularán cualquier estilo de una clase y
las clases anularán cualquier estilo de un selector de tipo.
 Se pueden encadenar varios selectores para seleccionar un elemento. Esto
aumenta la especificidad, pero puede ser necesario.
 Los elementos anidados se pueden seleccionar separando los selectores con
un espacio.
 Varios selectores no relacionados pueden recibir los mismos estilos
separando los nombres de los selectores con comas.

Reglas visuales

Familia tipográfica
Si alguna vez usó un software de procesamiento de texto, como Microsoft Word o
Google Docs, es probable que también haya usado una función que le permitió
cambiar la fuente que estaba escribiendo. Fuente se refiere al término técnico tipo
de letra o familia de fuentes.

Para cambiar el tipo de letra del texto de su página web, puede utilizar la font-family
propiedad.

h1 {
  font-family: Garamond;
}
En el ejemplo anterior, la familia de fuentes para todos los elementos del
encabezado principal se ha establecido en Garamond.

Al configurar tipos de letra en una página web, tenga en cuenta los siguientes
puntos:

 La fuente especificada debe instalarse en la computadora del usuario o

descargarse con el sitio.

 Las fuentes web seguras son un grupo de fuentes compatibles con la

mayoría de los navegadores y sistemas operativos.

 A menos que esté utilizando fuentes web seguras, es posible que la fuente
que elija no aparezca igual en todos los navegadores y sistemas operativos.

 Cuando el nombre de un tipo de letra consta de más de una palabra, es una

buena práctica encerrar el nombre del tipo de letra entre comillas, así:

h1 {
  font-family: 'Courier New';
}

Tamaño de fuente
Cambiar el tipo de letra no es la única forma de personalizar el texto. A menudo, las
diferentes secciones de una página web se resaltan modificando el tamaño de
fuente.

Para cambiar el tamaño del texto en su página web, puede usar la font-size
propiedad.

p{
  font-size: 18px;
}
En el ejemplo anterior, el font-size de todos los párrafos se estableció en 18px. Px
significa píxeles, que es una forma de medir el tamaño de la fuente.
Peso de fuente
En CSS, la font-weight propiedad controla cómo aparece el texto en negrita o fino.

p{
  font-weight: bold;
}
En el ejemplo anterior, todos los párrafos de la página web aparecerían en negrita.

La font-weight propiedad tiene otro valor: normal. ¿Por qué existe?

Si quisiéramos que todo el texto de una página web apareciera en negrita,

podríamos seleccionar todos los elementos de texto y cambiar el peso de la fuente
a bold. Sin embargo, si se requería que una determinada sección de texto pareciera
normal, podríamos establecer el peso de la fuente de ese elemento en particular
en normal, esencialmente apagando la negrita para ese elemento.
Texto alineado
No importa cuánto estilo se aplique al texto (tipo de letra, tamaño, peso, etc.), el
texto siempre aparece en el lado izquierdo del contenedor en el que reside.

Para alinear texto podemos usar la text-align propiedad. La text-align propiedad alineará

el texto con el elemento que lo contiene, también conocido como su padre.

h1 {
  text-align: right;
}
La text-align propiedad se puede establecer en uno de los siguientes valores de uso
común:

 left — alinea el texto a la izquierda de su elemento principal, que en este caso

es el navegador.
 center — centra el texto dentro de su elemento principal.
 Right — alinea el texto a la derecha de su elemento principal.
 justify— espacia el texto para alinearlo con el lado derecho e izquierdo del
elemento principal.

Color y color de fondo

Antes de discutir los detalles del color, es importante hacer dos distinciones sobre el
color. El color puede afectar los siguientes aspectos del diseño:

 Color de primer plano

 Color de fondo

El color de primer plano es el color en el que aparece un elemento. Por ejemplo,

cuando se aplica estilo a un título para que aparezca verde, se ha aplicado estilo
al color de primer plano del título. Por el contrario, cuando se aplica estilo a un
encabezado de modo que su fondo se vea amarillo, se ha aplicado estilo al color de
fondo del encabezado.

En CSS, estos dos aspectos de diseño se pueden diseñar con las dos propiedades
siguientes:

 color: esta propiedad da estilo al color de primer plano de un elemento

 background-color: esta propiedad da estilo al color de fondo de un elemento

h1 {
  color: red;
  background-color: blue;
}
En el ejemplo anterior, el texto del encabezado aparecerá en rojo y el fondo del
encabezado aparecerá en azul.
Opacidad
La opacidad es la medida de cuán transparente es un elemento. Se mide de 0 a 1,
donde 1 representa el 100 % o totalmente visible y opaco, y 0 representa el 0 % o
totalmente invisible.

La opacidad se puede usar para hacer que los elementos se desvanezcan en otros
para obtener un bonito efecto de superposición. Para ajustar la opacidad de un
elemento, la sintaxis se ve así:

.overlay {
  opacity: 0.5;
}
En el ejemplo anterior, el .overlay elemento sería visible en un 50 %, dejando que se
vea lo que esté colocado detrás de él.

Imagen de fondo
CSS tiene la capacidad de cambiar el fondo de un elemento. Una opción es
convertir el fondo de un elemento en una imagen. Esto se hace a través de la
propiedad CSS background-image. Su sintaxis se ve así:

.main-banner {
  background-image: url('[Link]
}

1. La background-image propiedad establecerá el fondo del elemento para mostrar

una imagen.

2. El valor proporcionado a background-image es un url. Debe url ser una URL a una

imagen. Puede ser un archivo url dentro de su proyecto o puede ser un enlace
a un sitio externo. Para vincular a una imagen dentro de un proyecto
existente, debe proporcionar una ruta de archivo relativa . Si hubiera una
carpeta de imágenes en el proyecto, con una imagen llamada [Link], la
ruta de archivo relativa se vería a continuación:

.main-banner {
  background-image: url('images/[Link]');
}

Importante
!important se puede aplicar a declaraciones específicas, en lugar de reglas
completas. Anulará cualquier estilo sin importar cuán específico sea. Como
resultado, casi nunca debe usarse. Una vez !important que se usa, es muy difícil de
anular.

La sintaxis de !important en CSS se ve así:

p{
  color: blue !important;
}

.main p {
  color: red;
}
Una justificación para su uso !important es cuando se trabaja con varias hojas de
estilo. Por ejemplo, si usamos el marco Bootstrap CSS y queremos anular los estilos
de un elemento HTML específico, podemos usar la !important propiedad.

Revisar las reglas visuales

¡Increíble trabajo! Usaste CSS para modificar texto e imágenes en un sitio web. A lo
largo de esta lección, aprendió conceptos que incluyen:

 La font-family propiedad define el tipo de letra de un elemento.

 font-size controla el tamaño del texto mostrado.
 font-weight define qué tan delgado o grueso se muestra el texto.
 La text-align propiedad coloca el texto a la izquierda, a la derecha o al centro de
su contenedor principal.
 El texto puede tener dos atributos de color diferentes: color y background-
color. Color define el color del texto, mientras que background-color define el color
detrás del texto.
 CSS puede hacer que un elemento sea transparente con la opacity propiedad.
 CSS también puede establecer el fondo de un elemento en una imagen con
la background-image propiedad.
 La !important bandera anulará cualquier estilo, sin embargo, casi nunca debe
usarse, ya que es extremadamente difícil de anular.

Introducción al modelo de caja

Los navegadores cargan elementos HTML con valores de posición
predeterminados. Esto a menudo conduce a una experiencia de usuario inesperada
y no deseada al tiempo que limita las vistas que puede crear. En esta lección,
aprenderá sobre el modelo de caja, un concepto importante para comprender cómo
se colocan y muestran los elementos en un sitio web.

Si ha utilizado HTML y CSS, sin saberlo, ha visto aspectos del modelo de caja. Por
ejemplo, si configuró el color de fondo de un elemento, es posible que haya notado
que el color se aplicó no solo al área directamente detrás del elemento, sino también
al área a la derecha del elemento. Además, si tiene texto alineado, sabrá que está
alineado con respecto a algo. ¿Qué es ese algo?

El navegador interpreta todos los elementos de una página web como "vivos" dentro
de una caja. Esto es lo que significa el modelo de caja.

Por ejemplo, cuando cambia el color de fondo de un elemento, cambia el color de

fondo de todo su cuadro.

En esta lección, aprenderá sobre los siguientes aspectos del modelo de caja:

1. Las dimensiones de la caja de un elemento.

2. Los bordes de la caja de un elemento.
3. Los rellenos de la caja de un elemento.
4. Los márgenes de la caja de un elemento.

El modelo de caja
El modelo de caja comprende el conjunto de propiedades que definen partes de un
elemento que ocupan espacio en una página web. El modelo incluye el tamaño del
área de contenido (ancho y alto) y el relleno, el borde y el margen del elemento. Las
propiedades incluyen:

1. Width y height: El ancho y alto del área de contenido.

2. padding: La cantidad de espacio entre el área de contenido y el borde.
3. border: el grosor y el estilo del borde que rodea el área de contenido y el
relleno.
4. margin: La cantidad de espacio entre el borde y el borde exterior del elemento.
 Alto y ancho
El contenido de un elemento tiene dos dimensiones: una altura y una anchura. De
forma predeterminada, las dimensiones de un cuadro HTML se establecen para
contener el contenido sin procesar del cuadro.

El CSS height y width las propiedades se pueden usar para modificar estas

dimensiones predeterminadas.

p{
  height: 80px;
  width: 240px;
}
En este ejemplo, los elementos de párrafo height y width de se establecen en 80
píxeles y 240 píxeles, respectivamente.

Los píxeles le permiten establecer el tamaño exacto del cuadro de un elemento

(ancho y alto). Cuando el ancho y el alto de un elemento se configuran en píxeles,
tendrá el mismo tamaño en todos los dispositivos: un elemento que llena la pantalla
de una computadora portátil desbordará la pantalla de un dispositivo móvil.

Fronteras
Un borde es una línea que rodea un elemento, como un marco alrededor de una
pintura. Los bordes se pueden establecer con un width, style y específico color:

 width—El grosor del borde. El grosor de un borde se puede establecer en

píxeles o con una de las siguientes palabras clave: thin, médium o thick.

 style—El diseño de la cenefa. Los navegadores web pueden representar

cualquiera de los 10 estilos diferentes . Algunos de estos estilos
incluyen: none, dotted y solid.

 color—El color del borde. Los navegadores web pueden reproducir colores

utilizando algunos formatos diferentes, incluidas 140 palabras clave de color
integradas.

p{
  border: 3px solid coral;
}
En el ejemplo anterior, el borde tiene un ancho de 3 píxeles, un estilo de solid y un
color de coral. Las tres propiedades se establecen en una línea de código.

El borde predeterminado es médium none color, donde color es el color actual del

elemento. Si width, style o color no están configurados en el archivo CSS, el navegador
web asigna el valor predeterminado para esa propiedad.

[Link]-header {
  height: 80px;
  width: 240px;
  border: solid coral;
}
En este ejemplo, el estilo del borde se establece en solid y el color se establece
en coral. El ancho no está establecido, por lo que el valor predeterminado es medium.

Radio del borde

Desde que revelamos los bordes de las cajas, es posible que haya notado que los
bordes resaltan la verdadera forma de la caja de un elemento: cuadrado. Gracias a
CSS, un borde no tiene que ser cuadrado.

Puede modificar las esquinas del cuadro de borde de un elemento con la border-radius
propiedad.

[Link] {
  border: 3px solid blue;
  border-radius: 5px;
}
El código del ejemplo anterior establecerá las cuatro esquinas del borde en un radio
de 5 píxeles (es decir, la misma curvatura que tendría un círculo con un radio de 5
píxeles).

Puede crear un borde que sea un círculo perfecto creando primero un elemento con
el mismo ancho y alto, y luego configurando el radio igual a la mitad del ancho del
cuadro, que es 50%.

[Link] {
  height: 60px;
  width: 60px;
  border: 3px solid blue;
  border-radius: 50%;
}
El código del ejemplo anterior crea un <div> círculo perfecto.

Relleno
El espacio entre el contenido de una caja y los bordes de una caja se conoce
como relleno. El relleno es como el espacio entre una imagen y el marco que la
rodea. En CSS, puede modificar este espacio con la padding propiedad.

[Link]-header {
  border: 3px solid coral;
  padding: 10px;
}
El código de este ejemplo pone 10 píxeles de espacio entre el contenido del párrafo
(el texto) y los bordes, en los cuatro lados.
La padding propiedad se usa a menudo para expandir el color de fondo y hacer que
el contenido se vea menos apretado.

Si desea ser más específico acerca de la cantidad de relleno en cada lado del
contenido de un cuadro, puede usar las siguientes propiedades:

 padding-top
 padding-right
 padding-bottom
 padding-left

Cada propiedad afecta el relleno en solo un lado del contenido del cuadro, lo que le
brinda más flexibilidad en la personalización.

[Link]-header {
  border: 3px solid fuchsia;
  padding-bottom: 10px;
}
En el ejemplo anterior, solo la parte inferior del contenido del párrafo tendrá
un padding tamaño de 10 píxeles.

Taquigrafía de relleno
Otra implementación de la padding propiedad le permite especificar exactamente
cuánto relleno debe haber en cada lado del contenido en una sola declaración. Una
declaración que utiliza varias propiedades como valores se conoce como propiedad
abreviada.

La abreviatura de relleno le permite especificar todas las padding propiedades como

valores en una sola línea:

 padding-top

 padding-right

 padding-bottom

 padding-left

Puede especificar estas propiedades de diferentes maneras:

4 valores

[Link]-header {
  padding: 6px 11px 4px 9px;
}
En el ejemplo anterior, los cuatro valores 6px 11px 4px 9px corresponden a la cantidad
de relleno en cada lado, en una rotación en el sentido de las agujas del reloj. En
orden, especifica el valor de relleno superior ( 6px), el valor de relleno derecho (11px),
el valor de relleno inferior (4px) y el valor de relleno izquierdo (9px) del contenido.

3 valores

[Link]-header {
  padding: 5px 10px 20px;
}
Si los lados izquierdo y derecho del contenido pueden ser iguales, la propiedad
abreviada de relleno permite especificar 3 valores. El primer valor establece el valor
de relleno superior (5px), el segundo valor establece los valores de relleno izquierdo
y derecho (10px) y el tercer valor establece el valor de relleno inferior ( 20px).

2 valores

[Link]-header {
  padding: 5px 10px;
}
Y finalmente, si los lados superior e inferior pueden ser iguales, y los lados izquierdo
y derecho pueden ser iguales, puede especificar 2 valores. El primer valor establece
los valores padding-top y padding-bottom (5px), y el segundo valor establece los
valores padding-left y padding-right (10px).

Margen
Hasta ahora ha aprendido acerca de los siguientes componentes del modelo de
caja: contenido, bordes y relleno. El cuarto y último componente del modelo de caja
es el margen.

El margen se refiere al espacio directamente fuera de la caja. La margin propiedad se

utiliza para especificar el tamaño de este espacio.
p{
  border: 1px solid aquamarine;
  margin: 20px;
}
El código del ejemplo anterior colocará 20 píxeles de espacio en el exterior del
cuadro del párrafo en los cuatro lados. Esto significa que otros elementos HTML de
la página no pueden estar dentro de los 20 píxeles del borde del párrafo.

Si desea ser aún más específico sobre la cantidad de margen en cada lado de un
cuadro, puede usar las siguientes propiedades:

 margin-top
 margin-right
 margin-bottom
 margin-left

Cada propiedad afecta el margen en un solo lado de la caja, lo que brinda más
flexibilidad en la personalización.

p{
  border: 3px solid DarkSlateGrey;
  margin-right: 15px;
}
En el ejemplo anterior, solo el lado derecho del cuadro del párrafo tendrá un margen
de 15 píxeles. Es común ver valores de margen utilizados para un lado específico
de un elemento.
Taquigrafía de margen
¿Qué sucede si no desea márgenes iguales en los cuatro lados de la caja y no tiene
tiempo para separar las propiedades de cada lado? ¡Estás de suerte! El margen
también se puede escribir como una propiedad abreviada. La sintaxis abreviada de
los márgenes es la misma que la del relleno, por lo que, si se siente cómodo con
eso, salte a las instrucciones. De lo contrario, ¡siga leyendo para aprender a usar la
abreviatura de margen!

Similar a la taquigrafía de relleno, la taquigrafía de margen le permite especificar

todas las margin propiedades como valores en una sola línea:
  margin-top

 margin-right

 margin-bottom

 margin-left

Puede especificar estas propiedades de diferentes maneras:

4 valores

p{
  margin: 6px 10px 5px 12px;
}
En el ejemplo anterior, los cuatro valores 6px 10px 5px 12pxcorresponden a la
cantidad de relleno en cada lado, en una rotación en el sentido de las agujas del
reloj. En orden, especifica el valor del margen superior ( 6px), el valor del margen
derecho ( 10px), el valor del margen inferior ( 5px) y el valor del margen izquierdo
( 12px) del contenido.

3 valores

p{
  margin: 5px 12px 4px;
}
Si los lados izquierdo y derecho del contenido pueden ser iguales, la propiedad
abreviada de margen permite especificar 3 valores. El primer valor establece el valor
del margen superior ( 5px), el segundo valor establece los valores del margen
izquierdo y derecho ( 12px) y el tercer valor establece el valor del margen inferior
( 4px).

2 valores

p{
  margin: 20px 10px;
}
Y finalmente, si los lados superior e inferior pueden ser iguales, y los lados izquierdo
y derecho pueden ser iguales, puede especificar 2 valores. El primer valor establece
los valores de margen superior e inferior (20px), y el segundo valor establece los
valores de margen izquierdo y margen derecho (10px).

Auto
La margin propiedad también le permite centrar el contenido. Sin embargo, debe
seguir algunos requisitos de sintaxis. Echa un vistazo al siguiente ejemplo:

[Link] {
  width: 400px;
  margin: 0 auto;
}
En el ejemplo anterior, margin: 0 auto; centrará los divs en los elementos que los
contienen. El 0 establece los márgenes superior e inferior en 0 píxeles. El auto valor
indica al navegador que ajuste los márgenes izquierdo y derecho hasta que el
elemento esté centrado dentro del elemento que lo contiene.

Para centrar un elemento, se debe establecer un ancho para ese elemento. De lo

contrario, el ancho del div se establecerá automáticamente en el ancho total del
elemento que lo contiene, como el <body>, por ejemplo. No es posible centrar un
elemento que ocupa todo el ancho de la página, ya que el ancho de la página puede
cambiar debido al tamaño de la pantalla y/o la ventana del navegador.

En el ejemplo anterior, el ancho del div está configurado en 400 píxeles, que es

menor que el ancho de la mayoría de las pantallas. Esto hará que el div se centre
dentro de un elemento contenedor que tenga más de 400 píxeles de ancho.

Colapso de margen
Como ha visto, el relleno es un espacio agregado dentro del borde de un elemento,
mientras que el margen es un espacio agregado fuera del borde de un
elemento. Una diferencia adicional es que los márgenes superior e inferior, también
llamados márgenes verticales, colapsan, mientras que el relleno superior e inferior
no lo hace.

Los márgenes horizontales (izquierdo y derecho), como el relleno, siempre se

muestran y se suman. Por ejemplo, si dos divs con ids #div-one y #div-two, están uno al
lado del otro, estarán tan separados como la suma de sus márgenes adyacentes.

#img-one {
  margin-right: 20px;
}

#img-two {
  margin-left: 20px;
}
En este ejemplo, el espacio entre los bordes #img-one y #img-two es de 40 píxeles. El
margen derecho de #img-one (20px) y el margen izquierdo de #img-two (20px) se suman
para hacer un margen total de 40 píxeles.

A diferencia de los márgenes horizontales, los márgenes verticales no se suman. En

cambio, el mayor de los dos márgenes verticales establece la distancia entre los
elementos adyacentes.

#img-one {
  margin-bottom: 30px;
}

#img-two {
  margin-top: 20px;
}
En este ejemplo, el margen vertical entre los elementos #img-one y #img-two es de 30
píxeles. Aunque la suma de los márgenes es de 50 píxeles, el margen se colapsa,
por lo que el espaciado solo depende del #img-one margen inferior.

Puede ser útil pensar en el colapso de los márgenes verticales como una persona
de baja estatura que intenta empujar a una persona más alta. La persona alta tiene
brazos más largos y puede empujar fácilmente a la persona baja, mientras que la
persona con brazos cortos no puede alcanzar a la persona con brazos largos.

Altura y anchura mínimas y máximas

Debido a que una página web se puede ver a través de pantallas de diferentes
tamaños de pantalla, el contenido de la página web puede sufrir esos cambios de
tamaño. Para evitar este problema, CSS ofrece dos propiedades que pueden limitar
la estrechez o la anchura del cuadro de un elemento:

 min-width—esta propiedad asegura un ancho mínimo de la caja de un

elemento.
 max-width—esta propiedad asegura un ancho máximo de la caja de un
elemento.

p{
  min-width: 300px;
  max-width: 600px;
}
En el ejemplo anterior, el ancho de todos los párrafos no se reducirá por debajo de
los 300 píxeles, ni excederá los 600 píxeles.

El contenido, como el texto, puede volverse difícil de leer cuando la ventana del
navegador se estrecha o se expande. Estas dos propiedades aseguran que el
contenido sea legible al limitar los anchos mínimo y máximo de un elemento.

También puede limitar la altura mínima y máxima de un elemento:

 min-height — esta propiedad asegura una altura mínima para la caja de un

elemento.
 max-height — esta propiedad asegura una altura máxima de la caja de un
elemento.

p{
  min-height: 150px;
  max-height: 300px;
}
En el ejemplo anterior, la altura de todos los párrafos no se reducirá por debajo de
los 150 píxeles y la altura no superará los 300 píxeles.

¿Qué sucederá con el contenido de la caja de un elemento si la max-height propiedad

se establece en un valor demasiado bajo? Es posible que el contenido se derrame
fuera de la caja, lo que resulta en contenido que no es legible. Aprenderá a
solucionar este problema en el siguiente ejercicio.

Desbordamiento
Todos los componentes del modelo de caja comprenden el tamaño de un
elemento. Por ejemplo, una imagen que tiene las siguientes dimensiones tiene 364
píxeles de ancho y 244 píxeles de alto.

 300 píxeles de ancho

 200 píxeles de altura

 Relleno de 10 píxeles a la izquierda y a la derecha

 Relleno de 10 píxeles en la parte superior e inferior

 Borde de 2 píxeles a la izquierda y a la derecha

 Borde de 2 píxeles en la parte superior e inferior

 Margen de 20 píxeles a la izquierda y a la derecha

 Margen de 10 píxeles en la parte superior e inferior

Las dimensiones totales (364 px por 244 px) se calculan sumando todas las
dimensiones verticales juntas y todas las dimensiones horizontales juntas. A veces,
estos componentes dan como resultado un elemento que es más grande que el
área contenedora del padre.
¿Cómo podemos asegurarnos de que podemos ver todo un elemento que es más
grande que el área contenedora de su padre?

La overflow propiedad controla lo que sucede con el contenido que se derrama o se

desborda fuera de su caja. Los valores más utilizados son:

 hidden: cuando se establece en este valor, cualquier contenido que se

desborde se ocultará a la vista.

 scroll: cuando se establece en este valor, se agregará una barra de

desplazamiento al cuadro del elemento para que el resto del contenido se
pueda ver desplazándose.

 visible: cuando se establece en este valor, el contenido de desbordamiento se

mostrará fuera del elemento contenedor. Tenga en cuenta que este es el
valor predeterminado.

p{
  overflow: scroll;
}
En el ejemplo anterior, si el contenido de algún párrafo se desborda (quizás un
usuario cambia el tamaño de la ventana del navegador), aparecerá una barra de
desplazamiento para que los usuarios puedan ver el resto del contenido.

La propiedad de desbordamiento se establece en un elemento principal para instruir

a un navegador web sobre cómo representar elementos secundarios. Por ejemplo,
si la propiedad de desbordamiento de un div se establece en scroll, todos los
elementos secundarios de este div mostrarán contenido desbordado con una barra
de desplazamiento.

Para una mirada más profunda overflow, incluyendo propiedades adicionales

como overflow-x y overflow-y que separan los valores horizontales y verticales, dirígete a
la documentación de MDN.

Restablecimiento de valores predeterminados

Todos los principales navegadores web tienen una hoja de estilo predeterminada
que utilizan en ausencia de una hoja de estilo externa. Estas hojas de estilo
predeterminadas se conocen como hojas de estilo de agente de usuario. En este
caso, el término agente de usuario es un término técnico para el navegador.

Las hojas de estilo de los agentes de usuario a menudo tienen reglas CSS
predeterminadas que establecen valores predeterminados para el relleno y el
margen. Esto afecta la forma en que el navegador muestra los elementos HTML, lo
que puede dificultar que un desarrollador diseñe o aplique estilo a una página web.

Muchos desarrolladores eligen restablecer estos valores predeterminados para que

realmente puedan trabajar desde cero.

*{
  margin: 0;
  padding: 0;
}
El código del ejemplo anterior restablece los valores predeterminados de margen y
relleno de todos los elementos HTML. A menudo es la primera regla CSS en una
hoja de estilo externa.

Tenga en cuenta que ambas propiedades están establecidas en 0. Cuando estas

propiedades se establecen en 0, no requieren una unidad de medida.

Visibilidad
Los elementos se pueden ocultar de la vista con la visibility propiedad.

La visibility propiedad se puede establecer en uno de los siguientes valores:

 hidden — oculta un elemento.

 visible — muestra un elemento.
 collapse — colapsa un elemento.

<ul>
  <li>Explore</li>
  <li>Connect</li>
  <li class="future">Donate</li>
</ul>
.future {
  visibility: hidden;
}
En el ejemplo anterior, el elemento de la lista con una clase de future estará oculto a
la vista en el navegador.

Tenga en cuenta, sin embargo, que los usuarios aún pueden ver el contenido del
elemento de la lista (por ejemplo, Donate) al ver el código fuente en su
navegador. Además, la página web solo ocultará el contenido del elemento. Todavía
dejará un espacio vacío donde se pretende que se muestre el elemento.

Nota: ¿Cuál es la diferencia entre display: none y visibility: hidden? Un elemento

con display: none será completamente eliminado de la página web. Un elemento
con visibility: hidden, sin embargo, no será visible en la página web, pero sí el espacio
reservado para ello.
Revisar
En esta lección, cubrimos las cuatro propiedades del modelo de caja: alto y ancho,
relleno, bordes y márgenes. Comprender el modelo de caja es un paso importante
para aprender temas de HTML y CSS más avanzados. Tomemos un minuto para
revisar lo que aprendiste:

 El modelo de caja comprende un conjunto de propiedades utilizadas para

crear espacio alrededor y entre los elementos HTML.
 La altura y el ancho de un área de contenido se pueden establecer en píxeles
o porcentajes.
 Los bordes rodean el área de contenido y el relleno de un elemento. El color,
el estilo y el grosor de un borde se pueden configurar con las propiedades de
CSS.
 El relleno es el espacio entre el área de contenido y el borde. Se puede
configurar en píxeles o en porcentaje.
 El margen es la cantidad de espacio fuera del borde de un elemento.
  Los márgenes horizontales se suman, por lo que el espacio total entre los
bordes de los elementos adyacentes es igual a la suma del margen derecho
de un elemento y el margen izquierdo del elemento adyacente.
 Los márgenes verticales colapsan, por lo que el espacio entre los elementos
adyacentes verticalmente es igual al margen más grande.
 margin: 0 auto centra horizontalmente un elemento dentro de su área de
contenido principal, si tiene un ancho.
 La overflow propiedad se puede establecer en display, hiden o scroll, y dicta cómo
HTML representará el contenido que desborda el área de contenido principal.
 La visibility propiedad puede ocultar o mostrar elementos.

Modelo de caja: caja de borde

Afortunadamente, podemos restablecer todo el modelo de caja y especificar uno
nuevo: border-box.

*{
  box-sizing: border-box;
}
El código del ejemplo anterior restablece el modelo de caja border-box para todos los
elementos HTML. Este nuevo modelo de caja evita los problemas dimensionales
que existen en el modelo de caja anterior que aprendiste.

En este modelo de caja, la altura y el ancho de la caja permanecerán fijos. El grosor

del borde y el relleno se incluirán dentro de la caja, lo que significa que las
dimensiones generales de la caja no cambian.

<h1>Hello World</h1>
*{
  box-sizing: border-box;
}

h1 {
  border: 1px solid black;
  height: 200px;
  width: 300px;
  padding: 10px;
}
En el ejemplo anterior, la altura del cuadro permanecería en 200 píxeles y el ancho
permanecería en 300 píxeles. El grosor del borde y el relleno permanecerían
completamente dentro de la caja.
El nuevo modelo de caja simplemente se asegura de que las dimensiones de los
elementos permanezcan iguales independientemente del ancho del borde y el
relleno.

Revisión: Cambiar el modelo de caja

En esta lección, aprendió acerca de una limitación importante del modelo de cuadro
predeterminado: las dimensiones del cuadro se ven afectadas por el grosor del
borde y el relleno.

Repasemos lo que aprendiste:

1. En el modelo de cuadro predeterminado, las dimensiones del cuadro se ven

afectadas por el grosor del borde y el relleno.
2. La box-sizing propiedad controla el modelo de caja utilizado por el navegador.
3. El valor predeterminado de la box-sizing propiedad es content-box.
4. El valor para el nuevo modelo de caja es border-box.
 5. El border-box modelo no se ve afectado por el grosor del borde o el relleno.

Flujo de HTML
Un navegador representará los elementos de un documento HTML que no tiene
CSS de izquierda a derecha, de arriba a abajo, en el mismo orden en que existen en
el documento. Esto se llama el flujo de elementos en HTML.

Además de las propiedades que proporciona para dar estilo a los elementos HTML,
CSS incluye propiedades que cambian la forma en que un navegador posiciona los
elementos. Estas propiedades especifican dónde se encuentra un elemento en una
página, si el elemento puede compartir líneas con otros elementos y otros atributos
relacionados.

En esta lección, aprenderá cinco propiedades para ajustar la posición de los

elementos HTML en el navegador:

 position
 display
 z-index
 float
 clear

Cada una de estas propiedades nos permitirá posicionar y visualizar elementos en

una página web. Se pueden usar junto con cualquier otra propiedad de estilo que
pueda conocer.
Posición
Eche un vistazo a los elementos a nivel de bloque en la imagen a continuación:
Los elementos a nivel de bloque como estos cuadros crean un bloque del ancho
completo de sus elementos principales y evitan que otros elementos aparezcan en
el mismo espacio horizontal.

Observe que los elementos a nivel de bloque en la imagen de arriba ocupan su

propia línea de espacio y, por lo tanto, no se superponen entre sí. En el navegador
de la derecha, puede ver que los elementos a nivel de bloque también aparecen
constantemente en el lado izquierdo del navegador. Esta es la
posición predeterminada para los elementos a nivel de bloque.

La posición predeterminada de un elemento se puede cambiar configurando

su position propiedad. La position propiedad puede tomar uno de cinco valores:

 static - el valor predeterminado (no es necesario especificarlo)

 relative
 absolute
 fixed
 sticky
En los siguientes ejercicios, aprenderá acerca de los valores de la lista anterior. Por
ahora, es importante comprender que, si favorece la posición predeterminada de un
elemento HTML, no necesita establecer su position propiedad.
Cargo: Relativo
Una forma de modificar la posición predeterminada de un elemento es establecer
su position propiedad en relative.

Este valor le permite colocar un elemento en relación con su posición estática

predeterminada en la página web.

.green-box {
  background-color: green;
  position: relative;
}
Aunque el código del ejemplo anterior le indica al navegador que espere una
posición relativa del .green-box elemento, no especifica dónde .green-box debe
colocarse el elemento en la página. Esto se hace acompañando la position
declaración con una o más de las siguientes propiedades de desplazamiento que
alejarán el elemento de su posición estática predeterminada:

 top - mueve el elemento hacia abajo desde la parte superior.

 bottom - mueve el elemento hacia arriba desde la parte inferior.
 left - aleja el elemento del lado izquierdo (hacia la derecha).
 right - aleja el elemento del lado derecho (hacia la izquierda).

Puede especificar valores en píxeles, ems o porcentajes, entre otros, para marcar
exactamente qué tan lejos necesita que se mueva el elemento. También es
importante tener en cuenta que las propiedades de compensación no funcionarán si
la position propiedad del elemento es la predeterminada static.

.green-box {
  background-color: green;
  position: relative;
  top: 50px;
  left: 120px;
}
En el ejemplo anterior, el elemento de green-box clase se moverá 50 píxeles hacia
abajo y 120 píxeles hacia la derecha desde su posición estática predeterminada. La
siguiente imagen muestra la nueva posición de la caja.

Desplazar el elemento relativo no afectará el posicionamiento de otros elementos.

Posición: Absoluta
Otra forma de modificar la posición de un elemento es establecer su posición
en absolute.

Cuando la posición de un elemento se establece en absolute, todos los demás

elementos de la página ignorarán el elemento y actuarán como si no estuviera
presente en la página. El elemento se colocará en relación con su elemento
principal más cercano, mientras que las propiedades de compensación se pueden
usar para determinar la posición final desde allí. 
El “Sitio web en construcción. ¡Por favor regresa más tarde!" el texto se desplaza de
su posición estática en la esquina superior izquierda de su contenedor
principal. Tiene declaraciones de propiedad de desplazamiento de top: 300px; y right:
0px; colocándolo 300 píxeles hacia abajo y 0 píxeles desde el lado derecho de la
página.
Posición: Fija
Cuando la posición de un elemento se establece en absolute, como en el último
ejercicio, el elemento se desplazará con el resto del documento cuando un usuario
se desplace.

Podemos fijar un elemento en una posición específica en la página

(independientemente del desplazamiento del usuario) configurando su posición
en fixed y acompañándolo con las propiedades familiares de
compensación top, bottom, left y right.

.title {
  position: fixed;
  top: 0px;
  left: 0px;
}
En el ejemplo anterior, el .titleelemento permanecerá fijo en su posición sin importar
dónde se desplace el usuario en la página, como en la imagen a continuación:

Esta técnica se usa a menudo para las barras de navegación en una página web.
Posición: Pegajoso
Dado que en static y relative los elementos posicionados permanecen en el flujo normal
del documento, cuando un usuario se desplaza por la página (o el elemento
principal), estos elementos también se desplazarán. Y dado que en fixed y absolute los
elementos posicionados se eliminan del flujo del documento, cuando un usuario se
desplaza, estos elementos permanecerán en su posición de desplazamiento
especificada.

El sticky valor es otro valor de posición que mantiene un elemento en el flujo del
documento a medida que el usuario se desplaza, pero se mantiene en una posición
específica a medida que la página se desplaza más. Esto se hace usando el sticky
valor junto con las propiedades de compensación familiares, así como una nueva.
.box-bottom {
  background-color: darkgreen;
  position: sticky;
  top: 240px;
}
En el ejemplo anterior, .box-bottom <div> permanecerá en su posición relativa y se
desplazará como de costumbre. Cuando alcance los 240 píxeles desde la parte
superior, se mantendrá en esa posición hasta que llegue a la parte inferior de su
contenedor principal, donde se "despegará" y volverá a unirse al flujo del
documento.

Índice Z
Cuando los recuadros en una página web tienen una combinación de diferentes
posiciones, los recuadros (y, por lo tanto, su contenido) pueden superponerse entre
sí, lo que dificulta la lectura o el consumo del contenido.
.blue-box {
  background-color: blue;
}

.green-box {
  background-color: green;
  position: relative;
  top: -170px;
  left: 170px;
}
En el ejemplo anterior, el .green-box elemento se superpone encima del .blue-box
elemento.

La z-index propiedad controla qué tan atrás o qué tan adelante debe aparecer un
elemento en la página web cuando los elementos se superponen. Esto se puede
considerar como la profundidad de los elementos, con elementos más profundos
que aparecen detrás de elementos menos profundos.

La z-index propiedad acepta valores enteros. Dependiendo de sus valores, los

números enteros indican al navegador el orden en que los elementos deben
colocarse en capas en la página web.

.blue-box {
  background-color: blue;
  position: relative;
  z-index: 1;
}

.green-box {
  background-color: green;
  position: relative;
  top: -170px;
  left: 170px;
}
En el ejemplo anterior, establecemos la .blue-box posición relative y el índice z en 1.
Cambiamos la posición a relative, porque la z-index propiedad no funciona en
elementos estáticos. El índice z de 1 mueve el .blue-box elemento hacia adelante,
porque el z-index valor no se ha especificado explícitamente para el .green-box
elemento, lo que significa que tiene un valor predeterminado z-index de 0. Observe la
imagen de ejemplo a continuación:

Pantalla en línea
Cada elemento HTML tiene un display valor predeterminado que dicta si puede
compartir el espacio horizontal con otros elementos. Algunos elementos ocupan
todo el navegador de izquierda a derecha, independientemente del tamaño de su
contenido. Otros elementos solo ocupan el espacio horizontal que requiere su
contenido y pueden estar directamente al lado de otros elementos.

En esta lección, cubriremos tres valores para la display propiedad: inline, block

e inline-block.
El valor predeterminado display para algunos elementos, como <em>, <strong>
y <a>, se denomina en línea. Los elementos en línea tienen un cuadro que envuelve
firmemente su contenido, ocupando solo la cantidad de espacio necesario para
mostrar su contenido y no requiere una nueva línea después de cada elemento. La
altura y el ancho de estos elementos no se pueden especificar en el documento
CSS. Por ejemplo, el texto de una etiqueta de anclaje (<a>) se mostrará, de forma
predeterminada, en la misma línea que el texto circundante, y solo tendrá el ancho
necesario para contener su contenido. Los elementos inline no se pueden modificar
en tamaño con las propiedades height o width CSS.

To learn more about <em>inline</em> elements, read <a href="#">MDN

documentation</a>.   
En el ejemplo anterior, el <em> elemento es inline, porque muestra su contenido en
la misma línea que el contenido que lo rodea, incluida la etiqueta de anclaje. Este
ejemplo mostrará:

Para obtener más información sobre los elementos en línea, lea la documentación
de MDN .

La propiedad CSS display proporciona la capacidad de convertir cualquier elemento

en un elemento en línea. Esto incluye elementos que no están en línea de forma
predeterminada, como párrafos, divs y encabezados.

h1 {
  display: inline;
}
El CSS del ejemplo anterior cambiará la visualización de todos los <h1>elementos
a inline. El navegador representará <h1> elementos en la misma línea que otros
elementos en línea inmediatamente antes o después de ellos (si los hay).
Bloqueo de pantalla
Algunos elementos no se muestran en la misma línea que el contenido que los
rodea. Estos se denominan elementos a nivel de bloque. Estos elementos ocupan
todo el ancho de la página de forma predeterminada, pero también se puede
establecer su propiedad width. Salvo que se especifique lo contrario, tienen la altura
necesaria para acomodar su contenido.
Los elementos que están a nivel de bloque por defecto incluyen todos los niveles de
elementos de encabezado (<h1>hasta <h6>) <p>, <div> y <footer>. Para obtener una lista
completa de elementos a nivel de bloque, visite la documentación de MDN .

strong {
  display: block;
}
En el ejemplo anterior, todos los <strong> elementos se mostrarán en su propia línea,
sin contenido directamente a cada lado de ellos, aunque es posible que su
contenido no ocupe el ancho de la mayoría de las pantallas de las computadoras.
Pantalla: bloque en línea
El tercer valor de la display propiedad es inline-block. La visualización de bloques en
línea combina características de elementos en línea y de bloques. Los elementos de
bloque en línea pueden aparecer uno al lado del otro y podemos especificar sus
dimensiones usando las propiedades width y height. Las imágenes son el mejor
ejemplo de elementos de bloque en línea predeterminados.

Por ejemplo, las <div> siguientes se mostrarán en la misma línea y con las

dimensiones especificadas:

Echemos un vistazo al código:

<div class="rectangle">
  <p>I’m a rectangle!</p>
</div>
<div class="rectangle">
  <p>So am I!</p>
</div>
<div class="rectangle">
  <p>Me three!</p>
</div>
.rectangle {
  display: inline-block;
  width: 200px;
  height: 300px;
}
Hay tres divs rectangulares que contienen cada uno un párrafo de texto. Todas
las .rectangle <div>s aparecerán en línea (siempre que haya suficiente espacio de
izquierda a derecha) con un ancho de 200 píxeles y una altura de 300 píxeles,
aunque el texto dentro de ellas no requiera 200 píxeles por 300 píxeles de espacio.
Flotador
Hasta ahora, ha aprendido a especificar la posición exacta de un elemento mediante
las propiedades de compensación. Si simplemente está interesado en mover un
elemento lo más a la izquierda o lo más a la derecha posible en el contenedor,
puede usar la float propiedad.

La float propiedad se usa comúnmente para envolver texto alrededor de una

imagen. Tenga en cuenta, sin embargo, que mover elementos hacia la izquierda o
hacia la derecha con fines de diseño es más adecuado para herramientas como la
cuadrícula CSS y el cuadro flexible, que aprenderá más adelante.

La float propiedad a menudo se establece utilizando uno de los siguientes valores:

 left - mueve, o hace flotar, elementos lo más a la izquierda posible.

 right - mueve los elementos lo más a la derecha posible.
.green-section {
  width: 50%;
  height: 150px;
}

.orange-section {
  background-color: orange;
  width: 50%;
  float: right;
}
En el ejemplo anterior, flotamos el .orange-section elemento al right. Esto funciona para
elementos posicionados estáticos y relativos. Vea el resultado del código a
continuación:

Los elementos flotantes deben tener un ancho especificado, como en el ejemplo

anterior. De lo contrario, el elemento asumirá el ancho total del elemento que lo
contiene, y cambiar el valor flotante no producirá ningún resultado visible.
 Clear
Hasta ahora, ha aprendido a especificar la posición exacta de un elemento mediante
las propiedades de compensación. Si simplemente está interesado en mover un
elemento lo más a la izquierda o lo más a la derecha posible en el contenedor,
puede usar la float propiedad.

La clear propiedad se usa comúnmente para envolver texto alrededor de una

imagen. Tenga en cuenta, sin embargo, que mover elementos hacia la izquierda o
hacia la derecha con fines de diseño es más adecuado para herramientas como la
cuadrícula CSS y el cuadro flexible, que aprenderá más adelante.

 left—el lado izquierdo del elemento no tocará ningún otro elemento

dentro del mismo elemento contenedor.
 right—el lado derecho del elemento no tocará ningún otro elemento
dentro del mismo elemento contenedor.
 both—ninguno de los lados del elemento tocará ningún otro elemento
dentro del mismo elemento contenedor.
 none—el elemento puede tocar cualquier lado.

div {
  width: 200px;
  float: left;
}

[Link] {
  clear: left;
}
En el ejemplo anterior, todos <div> los correos electrónicos en la página flotan
hacia el lado izquierdo. El elemento con clase special no se movió
completamente hacia la izquierda porque un <div> más alto bloqueó su
posicionamiento. Al establecer su clear propiedad en left, special <div>se moverá
completamente hacia el lado izquierdo de la página.
 Revisión: Diseño

¡Gran trabajo! En esta lección, aprendió a controlar la posición de los elementos en

una página web.

Repasemos lo que has aprendido hasta ahora:

 La position propiedad le permite especificar la posición de un elemento.

 Cuando se establece en relative, la posición de un elemento es relativa a su
posición predeterminada en la página.
 Cuando se establece en absolute, la posición de un elemento es relativa a su
elemento principal más cercano. Se puede anclar a cualquier parte de la
página web, pero el elemento seguirá moviéndose con el resto del
documento cuando se desplace la página.
 Cuando se establece en fixed, la posición de un elemento se puede anclar a
cualquier parte de la página web. El elemento permanecerá a la vista pase lo
que pase.
 Cuando se establece en sticky, un elemento puede adherirse a una posición
de desplazamiento definida cuando el usuario se desplaza por su contenedor
principal.
 El z-index de un elemento especifica qué tan atrás o qué tan adelante
aparece un elemento en la página cuando se superpone a otros elementos.
 La display propiedad le permite controlar cómo un elemento fluye vertical y
horizontalmente en un documento.
 Los elementos inline ocupan el menor espacio posible y no pueden ajustarse
manualmente width o height.
 Los elementos block ocupan el ancho de su contenedor y se pueden ajustar
manualmente height.
 Los elementos inline-block pueden tener width y height, pero también pueden
aparecer uno al lado del otro y no ocupar todo el ancho del contenedor.
 La float propiedad puede mover elementos tanto a la izquierda como a la
derecha en una página web.
 Puede borrar el lado izquierdo o derecho de un elemento (o ambos) usando
la clear propiedad.
Cuando se combina con una comprensión del modelo de caja, el posicionamiento
puede crear páginas web visualmente atractivas. Hasta ahora, nos hemos centrado
en agregar contenido en forma de texto a una página web. En la siguiente unidad,
aprenderá a agregar y manipular imágenes en una página web.

Primer plano frente a fondo

Antes de discutir los detalles del color, es importante hacer dos distinciones sobre el
color. El color puede afectar los siguientes aspectos del diseño:

 El color de primer plano

 el color de fondo

El color de primer plano es el color en el que aparece un elemento. Por ejemplo,

cuando se aplica estilo a un título para que aparezca verde, se ha aplicado estilo
al color de primer plano del título.

Por el contrario, cuando se aplica estilo a un encabezado de modo que su fondo se

vea amarillo, el color de fondo del encabezado se ha aplicado

En CSS, estos dos aspectos de diseño se pueden diseñar con las dos propiedades
siguientes:

 color - esta propiedad da estilo al color de primer plano de un elemento.

 background-color - esta propiedad da estilo al color de fondo de un elemento.

h1 {
  color: red;
  background-color: blue;
}
En el ejemplo anterior, el texto del encabezado aparecerá en rojo y el fondo del
encabezado aparecerá en azul.
Hexadecimal
Una sintaxis que podemos usar para especificar colores se llama hexadecimal. Los
colores especificados con este sistema se denominan colores hexadecimales. Un
color hexadecimal comienza con un carácter hash (#) seguido de tres o seis
caracteres. Los caracteres representan valores para rojo, azul y verde.
darkseagreen: #8FBC8F
sienna:       #A0522D
saddlebrown:  #8B4513
brown:        #A52A2A
black:        #000000 or #000
White:        #FFFFFF or #FFF
aqua:         #00FFFF or #0FF
En el ejemplo anterior, puede notar que hay letras y números en los valores. Esto se
debe a que el sistema numérico hexadecimal tiene 16 dígitos (0-15) en lugar de 10
(0-9) como en el sistema decimal estándar. Para representar 10-15, usamos
AF. Aquí hay una lista de muchos colores diferentes y sus valores hexadecimales.

Observe que black, White, y aqua se representan con tres y seis caracteres. Esto se

puede hacer con colores hexadecimales cuyos pares de números son los mismos
caracteres. En el ejemplo anterior, aqua se puede representar como #0FF porque
los dos primeros caracteres son 0 y el segundo y tercer par de caracteres son
ambos Fs. Tenga en cuenta que los colores hexadecimales de los tres caracteres se
pueden representar con seis caracteres (repitiendo cada carácter dos veces), pero
no ocurre lo mismo a la inversa.

Puede incluir colores hexadecimales tal como incluiría colores con

nombre: background-color: #9932cc; y las letras pueden ser mayúsculas o
minúsculas.
Colores RGB
Hay otra sintaxis para representar valores RGB, comúnmente conocida como "valor
RGB" o simplemente "RGB", que usa números decimales en lugar de números
hexadecimales, y se ve así:

h1 {
  color: rgb(23, 45, 23);
}
Cada uno de los tres valores representa un componente de color y cada uno puede
tener un valor numérico decimal de 0 a 255. El primer número representa la
cantidad de rojo, el segundo es verde y el tercero es azul. Estos colores son
exactamente iguales que hexadecimales, pero con una sintaxis diferente y un
sistema numérico diferente.

En general, las representaciones de color hexadecimal y RGB son equivalentes. El

que elijas es una cuestión de gusto personal. Dicho esto, es bueno elegir uno y ser
coherente en todo el CSS, porque es más fácil comparar hexadecimal con
hexadecimal y RGB con RGB.
Hexadecimal y RGB
El sistema de color hexadecimal y RGB puede representar muchos más colores que
el pequeño conjunto de colores con nombre CSS. Podemos usar este nuevo
conjunto de colores para refinar el estilo de nuestra página web.

Tanto en hexadecimal como en RGB, tenemos tres valores, uno para cada
color. Cada uno puede ser uno de 256 valores. Específicamente, 256 * 256 * 256 =
16,777,216. Esa es la cantidad de colores que ahora podemos representar. ¡Compare
eso con los aproximadamente 140 colores CSS con nombre!

Recuerde que comenzamos con colores con nombre, los convertimos a

hexadecimal y luego convertimos algunos de los colores hexadecimales a RGB. A
menos que cometamos un error, todos los colores deberían seguir siendo los
mismos, visualmente. Usemos nuestra paleta ampliada para hacer algunas
elecciones de color más refinadas.
Tono, saturación y luminosidad
El esquema de color RGB es conveniente porque es muy similar a cómo las
computadoras representan los colores internamente. Hay otro sistema igualmente
poderoso en CSS llamado esquema de color tono-saturación-luminosidad,
abreviado como HSL.

La sintaxis de HSL es similar a la forma decimal de RGB, aunque difiere en

aspectos importantes. El primer número representa el grado del matiz y puede
estar entre 0 y 360. El segundo y tercer número son porcentajes que
representan la saturación y la luminosidad respectivamente. Aquí hay un
ejemplo:

color: hsl (120, 60%, 70%);

Hue es el primer número. Se refiere a un ángulo en una rueda de color. El rojo es 0
grados, el verde es 120 grados, el azul es 240 grados y luego vuelve al rojo a 360.
Puede ver un ejemplo de una rueda de color a continuación.

La saturación se refiere a la intensidad o pureza del color. La saturación aumenta

hacia el 100 % a medida que el color se vuelve más rico. La saturación disminuye
hacia el 0% a medida que el color se vuelve más gris.

La luminosidad se refiere a qué tan claro u oscuro es el color. La mitad, o el 50%, es

una luminosidad normal. Imagine un atenuador deslizante en un interruptor de luz
que comienza a la mitad. Deslizar el atenuador hacia el 100 % hace que el color sea
más claro, más cercano al blanco. Deslizar el atenuador hacia el 0 % hace que el
color sea más oscuro, más cercano al negro.

HSL es conveniente para ajustar los colores. En RGB, hacer que el color sea un
poco más oscuro puede afectar a los tres componentes de color. En HSL, eso es
tan fácil como cambiar el valor de luminosidad. HSL también es útil para crear un
conjunto de colores que funcionen bien juntos seleccionando varios colores que
tengan la misma luminosidad y saturación, pero diferentes tonalidades.
Opacidad y Alfa
Todos los colores que hemos visto hasta ahora han sido opacos o no
transparentes. Cuando superponemos dos elementos opacos, nada del elemento
inferior se muestra a través del elemento superior. En este ejercicio, cambiaremos
la opacidad, o la cantidad de transparencia, de algunos colores para que algunos o
todos los elementos inferiores sean visibles a través de un elemento de cobertura.

Para usar la opacidad en el esquema de color HSL, use hsla en lugar de hsl y cuatro
valores en lugar de tres. Por ejemplo:

color: hsla(34, 100%, 50%, 0.1);

Los tres primeros valores funcionan igual que hsl. El cuarto valor (que no hemos
visto antes) es el alfa. Este último valor a veces se denomina opacidad.

Alfa es un número decimal de cero a uno. Si alfa es cero, el color será

completamente transparente. Si alfa es uno, el color será opaco. El valor para
semitransparente sería 0.5.

Puede pensar en el valor alfa como "la cantidad de fondo que se mezcla con el
primer plano". Cuando el alfa de un color está por debajo de uno, cualquier color
detrás de él se combinará. La combinación ocurre para cada píxel; no se produce
desenfoque.

El esquema de color RGB tiene una sintaxis similar para la

opacidad, rgba. Nuevamente, los primeros tres valores funcionan igual rgb y el
último valor es el alfa. Aquí hay un ejemplo:

color: rgba(234, 45, 98, 0.33);

Un poco convencional, pero vale la pena mencionar que los colores hexadecimales
también pueden tener un valor alfa. Al agregar un valor hexadecimal de dos dígitos
al final de la representación de seis dígitos ( #52BC8280), o un valor hexadecimal
de un dígito al final de la representación de tres dígitos (#F003), puede cambiar la
opacidad de un color hexadecimal. La opacidad hexagonal varía
de 00(transparente) a FF(opaco).

Alfa solo se puede usar con colores HSL, RGB y hexadecimales; no podemos
agregar el valor alfa para nombrar colores como green.
Sin embargo, hay una palabra clave de color con nombre para la opacidad
cero, transparent. Es equivalente a rgba (0, 0, 0, 0) y se usa como cualquier otra
palabra clave de color:

color: transparent;

Revisar
¡Hemos completado nuestro extenso recorrido por los colores en CSS! Repasemos
la información clave que hemos aprendido.

Hay cuatro formas de representar el color en CSS:

 Colores con nombre: hay más de 140 colores con nombre, que puede
revisar aquí .

 Colores hexadecimales o hexadecimales

o El hexadecimal es un sistema numérico que tiene dieciséis dígitos, del

0 al 9 seguidos de la "A" a la "F".

o Los valores hexadecimales siempre comienzan con # y especifican

valores de rojo, azul y verde usando números hexadecimales
como #23F41A.

o Los valores hexadecimales de seis dígitos con valores duplicados para

cada valor RGB se pueden reducir a tres dígitos.

 RGB

o Los colores RGB usan la rgb() sintaxis con un valor para el rojo, un
valor para el azul y un valor para el verde.

o Los valores RGB van de 0 a 255 y se ven así: rgb(7, 210, 50).

 LGV
 o HSL significa tono (el color en sí), saturación (la intensidad del color) y
luminosidad (qué tan claro u oscuro es un color).

o El tono varía de 0 a 360 y la saturación y la luminosidad se

representan como porcentajes como este: hsl(200, 20%, 50%).

 Puede agregar opacidad al color en RGB y HSL agregando un cuarto valor, a

que se representa como un porcentaje.

Tipografía
En esta lección, nos centraremos en la tipografía, el arte de organizar el texto en
una página. Veremos:

 Cómo diseñar y transformar fuentes.

 Cómo distribuir el texto en una página.
 y cómo agregar fuentes externas a sus páginas web.

Parte de la información más importante que un usuario verá en una página web será
textual. Diseñar el texto para que el contenido de la página sea accesible y atractivo
puede mejorar significativamente la experiencia del usuario. ¡Vamos a empezar!
Familia tipográfica
Puede recordar de la lección Reglas visuales que la fuente de un elemento se puede
cambiar usando la font-family propiedad.

h1 {
  font-family: Arial;
}
En el ejemplo anterior, la familia de fuentes para todos los <h1> del encabezado se ha
establecido en Arial.

Hablemos de algunas cosas a tener en cuenta al establecer font-family valores.

Valores de varias palabras

Al especificar un tipo de letra con varias palabras, como Times New Roman, se
recomienda utilizar comillas (' ') para agrupar las palabras, así:
h1 {
  font-family: 'Times New Roman';
}
Fuentes seguras para la web

Hay una selección de fuentes que aparecerán iguales en todos los navegadores y
sistemas operativos. Estas fuentes se conocen como fuentes web seguras. Puede
consultar una lista completa de fuentes web seguras aquí .

Fuentes alternativas y pilas de fuentes

Las fuentes web seguras son buenas fuentes alternativas que se pueden usar si su

fuente preferida no está disponible.

h1 {
  font-family: Caslon, Georgia, 'Times New Roman';
}
En el ejemplo anterior, Georgia y Times New Roman son fuentes alternativas a
Caslon. Cuando especifica un grupo de fuentes, tiene lo que se conoce como pila
de fuentes. Una pila de fuentes generalmente contiene una lista de fuentes de
aspecto similar. Aquí, el navegador primero intentará usar la fuente Caslon. Si no
está disponible, intentará usar una fuente similar, Georgia. Y si Georgia no está
disponible, intentará usar Times New Roman.

Serif y Sans-Serif

Quizás se pregunte qué características hacen que una fuente sea similar a otra
fuente. Las fuentes Caslon, Georgia y Times New Roman son fuentes Serif. Las
fuentes Serif tienen detalles adicionales en los extremos de cada letra, a diferencia
de las fuentes Sans-Serif, que no tienen detalles adicionales.
Serif y sans-serif también son valores de palabras clave que se pueden agregar
como fuente alternativa final si no hay nada más disponible en la pila de fuentes.

h1 {
  font-family: Caslon, Georgia, 'Times New Roman', serif;
}
En este último ejemplo, la pila de fuentes tiene 4 fuentes. Si las 3 primeras fuentes
no están disponibles, el navegador utilizará cualquier fuente serif que esté
disponible en el sistema.
Peso de fuente
En CSS, la font-weight propiedad controla cómo aparece el texto en negrita o fino. Se
puede especificar con palabras clave o valores numéricos.

Valores de palabras clave

La font-weight propiedad puede tomar cualquiera de estos valores de palabra clave:

 bold: Peso de fuente en negrita.

 normal: Peso de fuente normal. Este es el valor predeterminado.

 lighter: Un peso de fuente más ligero que el valor principal del elemento.

 bolder: Un peso de fuente más negrita que el valor principal del elemento
Valores numéricos

Los valores numéricos pueden oscilar entre 1 (el más claro) y 1000 (el más audaz),
pero es una práctica común usar incrementos de 100. Un grosor de fuente de 400 es
igual al valor de la palabra clave normal y un grosor de fuente de 700 es igual a bold.

.left-section {
  font-weight: 700;
}

.right-section {
  font-weight: bold;
}
En el ejemplo anterior, el texto de los elementos de las clases .left-section y .right-section
aparecerá en negrita.

Es importante tener en cuenta que no a todas las fuentes se les puede asignar un
peso de fuente numérico, y no todos los pesos de fuente numéricos están
disponibles para todas las fuentes. Es una buena práctica buscar la fuente que está
utilizando para ver qué font-weight valores están disponibles.
Font Style
En CSS, la font-style propiedad controla cómo aparece el texto en negrita o fino. Se
puede especificar con palabras clave o valores numéricos.

h3 {
  font-style: italic;
}
La italic propiedad puede tomar cualquiera de estos valores de palabra clave: font-

style property also has a normal value which is the default.

Transformación de texto
En CSS, la text-transform propiedad controla cómo aparece el texto en negrita o
fino. Se puede especificar con palabras clave o valores numéricos.

h1 {
  text-transform: uppercase;
}
La <h1> propiedad puede tomar cualquiera de estos valores de palabra
clave: uppercase (mayúscula) o lowercase.

Dado que el texto se puede escribir directamente en mayúsculas o minúsculas

dentro de un archivo HTML, ¿cuál es el punto de una regla CSS que le permite
formatear mayúsculas y minúsculas?

Dependiendo del tipo de contenido que muestre una página web, puede tener
sentido diseñar siempre un elemento específico en todas las letras mayúsculas o
minúsculas. Por ejemplo, un sitio web que informa noticias de última hora puede
decidir formatear todos los <h1> elementos del encabezado para que siempre
aparezcan en mayúsculas, como en el ejemplo anterior. También evitaría el texto en
mayúsculas en el archivo HTML, lo que podría dificultar la lectura del código.

Diseño de texto
Ha aprendido cómo se puede definir el texto por familia de fuentes, peso, estilo y
transformaciones. Ahora aprenderá acerca de algunas formas en las que se puede
mostrar o distribuir el texto dentro del contenedor del elemento.

Espaciado de letras

La letter-spacing propiedad se utiliza para establecer el espacio horizontal entre los

caracteres individuales de un elemento. No es común establecer el espacio entre
letras, pero a veces puede ayudar a la legibilidad de ciertas fuentes o
estilos. La letter-spacing propiedad toma valores de longitud en unidades, como 2px
o 0.5em.

p{
  letter-spacing: 2px;
}
En el ejemplo anterior, cada carácter en el elemento de párrafo estará separado por
2 píxeles.

Espaciado entre palabras

Puede establecer el espacio entre palabras con la word-spacing propiedad. Tampoco
es común aumentar el espacio entre las palabras, pero puede ayudar a mejorar la
legibilidad del texto en negrita o ampliado. La word-spacing propiedad también toma
valores de longitud en unidades, como 3px o 0.2em.

h1 {
  word-spacing: 0.3em;
}
En el ejemplo anterior, el espaciado entre palabras se establece en 0.3em. Para el
espaciado entre palabras, em se recomienda el uso de valores porque el espaciado
se puede establecer en función del tamaño de la fuente.

Altura de la línea

Podemos usar la line-height propiedad para establecer qué tan alto queremos que sea
cada línea que contiene nuestro texto. Los valores de altura de línea pueden ser un
número sin unidades, como 1.2, o un valor de longitud, como 12px, 5% o 2em.

p{
  line-height: 1.4;
}
En el ejemplo anterior, la altura entre líneas se establece en 1.4. En general, se
prefiere el valor sin unidades, ya que responde según el tamaño de fuente
actual. En otras palabras, si line-height se especifica mediante un número sin
unidades, cambiar el tamaño de la fuente reajustará automáticamente la altura de la
línea.

Alineación del texto

La text-align propiedad, con la que quizás ya esté familiarizado por la lección Reglas
visuales de CSS , alinea el texto con su elemento principal.
h1 {
  text-align: right;
}
En el ejemplo anterior, el <h1>elemento está alineado a la derecha, en lugar de a la
izquierda predeterminada.
Fuentes web
Anteriormente, aprendimos sobre las fuentes web seguras, un grupo de fuentes
compatibles con todos los navegadores y sistemas operativos. Sin embargo, las
fuentes que puede usar para su sitio web son ilimitadas: las fuentes web le permiten
expresar su estilo único a través de una multitud de fuentes diferentes que se
encuentran en la web.

Los servicios de fuentes gratuitos, como Google Fonts y Adobe Fonts , alojan

fuentes a las que puede vincular desde su documento HTML con un <link> elemento
proporcionado.

También puede usar fuentes de distribuidores de fuentes pagas

como [Link] descargándolas y alojándolas con el resto de los archivos de su
sitio. Puede crear un @font-face conjunto de reglas en su hoja de estilo CSS para
vincular a la ruta relativa del archivo de fuente.

Ambas técnicas para incluir fuentes web en su sitio le permiten ir más allá de la
apariencia a veces "tradicional" de las fuentes web seguras. ¡En los próximos dos
ejercicios, aprenderá exactamente cómo usar cada una de estas técnicas!
Fuentes web usando <enlace>
Los servicios de fuentes en línea, como Google Fonts , facilitan la búsqueda y el
enlace a las fuentes de su sitio. Puede buscar y seleccionar fuentes que coincidan
con el estilo de su sitio web.
Cuando seleccione una fuente en Google Fonts, se le mostrarán todos los diferentes
estilos disponibles para esa fuente en particular. A continuación, puede seleccionar
los estilos que desea utilizar en su sitio.

Cuando haya terminado de seleccionar una fuente y sus estilos, puede revisar la
familia de fuentes seleccionada y <link> se generará automáticamente un elemento
para que lo use en su sitio.
<head>
  <!-- Add the link element for Google Fonts along with other metadata -->
  <link href="[Link]
family=Roboto:wght@100&display=swap" rel="stylesheet">
</head>
El elemento generado <link> debe agregarse al <head> elemento en su documento
HTML para que esté listo para usarse en su CSS.

p{
  font-family: 'Roboto', sans-serif;
}
Luego puede crear font-family declaraciones en su CSS, ¡tal como aprendió a hacer
con otras fuentes!
Fuentes web usando @font-face
Las fuentes también se pueden agregar usando un conjunto de @font-face reglas en
su hoja de estilo CSS en lugar de usar un <link> elemento en su documento
HTML. Como se mencionó anteriormente, las fuentes se pueden descargar como
cualquier otro archivo en la web. Vienen en algunos formatos de archivo diferentes,
como:

 OTF (Fuente OpenType)

 TTF (Fuente TrueType)
 WOFF (formato de fuente abierta web)
 WOFF2 (formato de fuente abierta Web 2)

Los diferentes formatos son una progresión de estándares sobre cómo funcionarán
las fuentes con diferentes navegadores, siendo WOFF2 el más progresivo. Es una
buena idea incluir los formatos TTF, WOFF y WOFF2 con su @font-face regla para
garantizar la compatibilidad en todos los navegadores.

Echemos un vistazo a cómo usar @font-facela misma fuente Roboto que antes:

Dentro de la sección "Familias seleccionadas", puede usar el botón "Descargar"

para descargar los archivos de fuentes a su computadora. Los archivos se
descargarán en un solo formato, en este caso, TTF. Puede usar una herramienta
como Google Web Fonts Helper para generar tipos de archivos adicionales para
WOFF y WOFF2.

Cuando tenga los archivos que necesita, muévalos a una carpeta dentro del
directorio de trabajo de su sitio web y estará listo para usarlos en un conjunto
de @font-face reglas.

@font-face {
  font-family: 'MyParagraphFont';
  src: url('fonts/Roboto.woff2') format('woff2'),
       url('fonts/[Link]') format('woff'),
       url('fonts/[Link]') format('truetype');
}
Echemos un vistazo al ejemplo anterior, línea por línea:

 La @font-faceregla arroba se utiliza como selector. Se recomienda definir

el @font-faceconjunto de reglas en la parte superior de su hoja de estilo CSS.
 Dentro del bloque de declaración, la font-family propiedad se usa para
establecer un nombre personalizado para la fuente descargada. El nombre
puede ser cualquier cosa que elija, pero debe estar entre comillas. En el
ejemplo, la fuente se llama 'MyParagraphFont', ya que esta fuente se utilizará
para todos los párrafos.
 La src propiedad contiene tres valores, cada uno de los cuales especifica la
ruta relativa al archivo de fuente y su formato. En este ejemplo, los archivos
de fuentes se almacenan dentro de una carpeta denominada fonts dentro del
directorio de trabajo.

Una vez @font-face que se define la regla arroba, ¡puede usar la fuente en su hoja de
estilo!

p{
  font-family: 'MyParagraphFont', sans-serif;
}
Al igual que con cualquier otra fuente, puede usar la font-family propiedad para
establecer la fuente en cualquier elemento HTML. Se puede hacer referencia a la
fuente descargada con el nombre que proporcionó como el font-family valor de la
propiedad en el @font-faceconjunto de reglas; en este caso, 'MyParagraphFont'.
Revisar
¡Gran trabajo! Aprendió a diseñar un aspecto importante de la experiencia del
usuario: la tipografía.

Repasemos lo que has aprendido hasta ahora:

 La tipografía es el arte de ordenar el texto en una página.

 El texto puede aparecer en negrita o delgado con la font-weight propiedad.
 El texto puede aparecer en cursiva con la font-style propiedad.
 El espaciado vertical entre líneas de texto se puede modificar con la line-height
propiedad.
 Las fuentes Serif tienen detalles adicionales en los extremos de cada
letra. Las fuentes Sans-Serif no.
 Las fuentes alternativas se utilizan cuando una determinada fuente no está
instalada en la computadora de un usuario.
 La word-spacing propiedad cambia la distancia entre las palabras individuales.
 La letter-spacing propiedad cambia la distancia entre las letras individuales.
 La text-align propiedad cambia la alineación horizontal del texto.
 Google Fonts proporciona fuentes gratuitas que se pueden usar en un
archivo HTML con la <link>etiqueta o la @font-facepropiedad.
 Las fuentes locales se pueden agregar a un documento con la @font-
facepropiedad y la ruta a la fuente de la fuente.

¡Usando su nuevo conocimiento de la tipografía CSS, siéntase libre de editar más el

código para hacer que la página web sea más atractiva!