CSS 1

📹
No olvides poner a grabar la clase

Diplomatura
FullStack
Temario
● Historia css
● Formas de integrar CSS en nuestro HTML
● Propiedad color
● Selectores en tags HTML
○ Selector CLASS
○
○
Selector ID
Regla !important
👀
● Concepto herencia
● selectores dentro de CSS
● Introduccion a la tipografia web
○ google fonts
○ Seleccion de tipografia
● Propiedad font, font-family, font-face, font-size, font-weight,
font-style
historia de CSS
Historia de CSS
Si bien hablamos varias veces de CSS, lo vamos a presentar

formalmente. Su nombre proviene del término Cascade Style
Sheets (hojas de estilo en cascada), y es el lenguaje que
define el estilo gráfico de cada elemento de un documento
HTML.
Es el lenguaje que nos permitirá mejorar la apariencia de

nuestros documentos HTML.
Historia de CSS
Nace como idea en Llega su Separan CSS, Nace la 2009: nace CSS todavía no
1994. En 1995 la W3C primera versión DOM y HTML recomendación CSS 2.1, y cuenta con
decide estandarizar oficial. para que c/u oficial CSS 2.0. aún sigue soporte oficial
su desarrollo. CSS 1.0 tenga su vigente. de todos los
desarrollo navegadores
autónomo. web, para su
versión 3.0
1995 1996 1997 1998 2022+

Fundamentos de CSS
Ventajas de usar CSS:
Diferencia estilos CSS aplicados a
elementos HTML, según el tipo de
Separamos el contenido HTML de Manipulamos y modificamos todo
pantalla donde se ejecute.
CSS, trabajando con este en un tipo de contenido, sin poner en
documento independiente. riesgo los documentos HTML.
Unificamos el diseño en un único

archivo por cada proyecto web. De
Es compatible con casi todos los
esta forma todos los documentos
navegadores web, dado que aunque
HTML mantienen el mismo estilo.
el browser no soporte la versión 3, sí
El posicionamiento y tamaño del
pueda seguir ejecutando la versión
contenido será exacto en cualquier
2.
documento HTML, gracias a poder
definir medidas variables o relativas,
adaptables a diferentes pantallas.
Es accesible y permite estructurar el

diseño a través del uso de
marcadores descriptivos.
Formas de integrar CSS en
documentos HTML
Integrar CSS en documentos HTML
Repasemos las dos maneras convencionales de integrar CSS en los documentos HTML:
Mediante el tag <style> Referenciando el archivo CSS con el tag <link>

Integrar CSS en documentos HTML
Tal como mostraba la línea evolutiva del lenguaje CSS, lo ideal es agregarlo
como archivo externo.
Esto nos garantiza poder tener un único CSS para todos los documentos
HTML, manteniendo de forma transversal los estilos de nuestro proyecto.
Cualquier otra integración de CSS dentro de los archivos HTML, no nos
permiten cumplir con uno de los principios de la programación: DRY.
Primera propiedad css -
color
Colores y fondos
¿Qué es una paleta de colores?
Es una combinación armónica de colores. Son usadas por

diseñadores de logotipos, diseñadores gráficos, ilustradores,
desarrolladores web y otros artistas para diseñar algo con
apariencia consistente, y son fundamentales para el diseño
visual profesional.
Resumen: colores web

Colores y fondos
¿Cómo se hacen?
Mayormente depende de un diseñador o artista con experiencia
elegir manualmente colores que combinen que funcionan bien
juntos y sean estéticamente agradables.
Elegir una paleta de colores puede ser difícil, pero por suerte los
algoritmos informáticos ayudan con eso.
Una buena paleta tiene buen contraste, es visualmente

agradable y contiene colores perceptualmente diferentes.
Propiedad color
La propiedad color se utiliza en CSS para establecer el color del texto
de un elemento. Esta propiedad acepta diferentes tipos de valores de

color, como nombres de colores predefinidos, códigos hexadecimales,
valores RGB, valores HSL, entre otros.
color formatos
Estilo Descripción
CSS tiene una serie de nombres de colores predefinidos, como red, green, blue, yellow,
colores predefinidos
white, entre otros.
Los códigos hexadecimales son una combinación de seis caracteres que representan valores de
Códigos
rojo, verde y azul (RGB) en formato hexadecimal. Por ejemplo, #FF0000 representa el color rojo
hexadecimales:
puro.
Los valores RGB consisten en tres números que representan los niveles de rojo, verde y azul en
Valores RGB una escala del 0 al 255. Por ejemplo, rgb(255, 0, 0) representa el color rojo puro.
Los valores RGBA son similares a los valores RGB, pero también incluyen un valor de opacidad
Valores RGBA que va del 0 al 1. Por ejemplo, rgba(255, 0, 0, 0.5) representa el color rojo con una opacidad del
50%.
os valores HSL (Matiz, Saturación y Luminosidad) son una forma diferente de representar
Valores HSL colores que utiliza valores de matiz, saturación y luminosidad. Por ejemplo, hsl(120, 100%,
50%) representa el color verde brillante.
Color y los Selectores en
tags HTML
Selectores en tags HTML
Vinculado el archivo CSS con nuestro documento HTML, ya podemos

comenzar a definir los estilos en cuestión. Para ello, podemos optar
por alguna de las tres formas de referencias estilos aplicables en un
documento HTML:
● etiqueta (el nombre de cada etiqueta HTML)
● class (el atributo class de cada elemento HTML)
● id (el atributo id de cada elemento HTML)

Definir un estilo sobre las etiquetas HTML hará que cada propiedad
incluida en estas se aplique de forma masiva en todos los tags. Es
muy útil elegir esta opción cuando sabemos que los estilos a
aplicar deben ser masivos en todos los elementos HTML.
También podemos definir una propiedad en común a varios tags

HTML, desde una única sentencia CSS. Cuando un estilo se puede
usar de forma común a varios elementos HTML, podemos definir
esto de una manera resumida, tal como muestra el ejemplo.
Atributo class
Atributo class
Las clases CSS permiten definir estilos más atomizados y pueden

usarse de manera acumulativa, por lo tanto podemos pensar en
combinar varias clases CSS en un elemento HTML, y así lograr
diferentes combinaciones de estilos.
En atributo id
Regla !important
Selector !important
El selector !important en CSS es una declaración que se agrega al
final de una regla de estilo para indicar que esa propiedad en
particular debe tener la máxima prioridad y que cualquier otra
declaración de estilo para esa propiedad en el mismo elemento
será anulada.
En otras palabras, cuando una propiedad está marcada como

!important, esta propiedad se aplicará a ese elemento incluso si
se especifica otra regla de estilo posterior que intente anular esa
propiedad. Esto puede ser útil en situaciones en las que necesitas
asegurarte de que una propiedad en particular tenga un valor
específico en todas las circunstancias, independientemente de
cualquier otra regla de estilo que se aplique.
Concepto de herencia
herencia
En CSS, la herencia es un mecanismo que permite que un elemento herede ciertas propiedades de su
elemento padre. Cuando se aplica una propiedad a un elemento, esta propiedad se propagará
automáticamente a sus elementos hijos, a menos que se especifique lo contrario.
Selectores en CSS
Selectores en CSS
Selector de descendencia: El selector de descendencia se utiliza para seleccionar un elemento que se
encuentra dentro de otro elemento. Se representa con un espacio entre los dos selectores. Por ejemplo, si
quisieras seleccionar todos los elementos <p> que se encuentran dentro de un elemento <div>, puedes
utilizar el siguiente selector:
Selectores en CSS
Selector de hijo: El selector de hijo se utiliza para seleccionar un elemento que es un hijo directo de otro
elemento. Se representa con el signo ">". Por ejemplo, si quisieras seleccionar todos los elementos <p> que
son hijos directos de un elemento <div>, puedes utilizar el siguiente selector:
Selectores en CSS
Selector de hermanos adyacentes: El selector de hermanos adyacentes se utiliza para seleccionar un
elemento que sigue inmediatamente a otro elemento. Se representa con el signo "+". Por ejemplo, si
quisieras seleccionar todos los elementos <p> que siguen inmediatamente a un elemento <div>, puedes
utilizar el siguiente selector:
Selectores en CSS
Selector de hermanos generales: El selector de hermanos generales se utiliza para seleccionar todos los
elementos que siguen a otro elemento. Se representa con el signo "~". Por ejemplo, si quisieras seleccionar
todos los elementos <p> que siguen a un elemento <div>, puedes utilizar el siguiente selector:
Introducción al uso de
tipografías web
Introducción al uso de tipografías web
Extracto de la película “Jobs (2013)”
Escena donde se discute en equipo

por el desarrollo de la computadora
Apple LISA, año 1982.
Link al video en Youtube

Desde la llegada de las interfaces gráficas, el uso de

tipografías (o fuentes tipográficas), es algo que no
escapa de ser una necesidad imperiosa.
Las fuentes tipográficas revolucionaron todo en el

ámbito informático y la web no fue la excepción.
Los tipos de fuentes convencionales, se dividen en dos categorías principales:
(serifas y sin serifas)
Las fuentes del tipo serif suelen incluir lo que se
denomina “serifa”, “remate”, “gracia” y hacen
referencia a un adorno ubicado en los extremos de
cada caracter tipográfico.
Times, Georgia, Garamond, Courier, son algunos

de los ejemplos de tipografías que utilizan serifa.
Las fuentes del tipo san serif son aquellas que
terminan de forma recta en cada uno de sus
extremos. Se las denomina Tipografías de “palo
seco”, o sin “gracia”.
Helvetica, Arial, Gotham, Avenir, son algunos de

los ejemplos de tipografías que no utilizan serifa.
Algunas otras categorías
También existe una categoría, denominada Slab

Serif, la cual presenta como característica un
estilo serifa gruesa, en forma de bloque.
Más información: Slab Serif.

Por supuesto, la tipografía de estilo handwriting, es la que simula de la mejor

forma posible la escritura a mano alzada.
Y la tipografía de estilo monospace, que se ocupa de

tener un ancho fijo para cada una de sus letras, sin
importar que su estilo sea:
● mayúsculas
● minúsculas
● cursiva
● negrita
Es la tipografía heredada de las máquinas de escribir.

Tipos de formato de fuentes tipográficas
Extensión Descripción
Formato de fuente de los más antiguos, iniciado originalmente en los sistemas operativos
.ttf
gráficos de escritorio. Está soportado también por todos los navegadores web.
Formato de fuente que incluye compresión de archivo, por lo cual ocupa un menor espacio
.woff
que el formato .ttf. También cuenta con soporte de todos los navegadores web.
Versión mejorada del formato anterior. Los navegadores web modernos son quienes mejor
.woff2
soportan a este formato de fuente.
Creado originalmente por Microsoft, este formato está casi extinto, dado que Internet
.eot
Explorer era el único navegador web que le daba soporte.
Google Fonts
Los navegadores web, incluyen una serie de fuentes

tipográficas predeterminadas, para que todo sitio web
que se cargue en éstos, cuente de forma nativa con
fuentes que pueden utilizarse sin necesidad de
recurrir a un archivo tipográfico dedicado.
Entre estas, podemos encontrar a:
● Arial ● Tahoma
● Times New Roman ● Century Gothic
● Helvetica ● Courier New
● Calibri ● Rockwell
● Georgia ● Garamond
● Cambria ● Impact
● Veranda ● Cooperlate
Y para extender el potencial de los sitios web,
desde la llegada de CSS como “estilizador de
sitios web”, se comenzó a trabajar fuertemente
en la inclusión de fuentes web.
Para el año 2000, ya se veían los primeros

resultados de sitios con tipografías web por
fuera de lo convencional.
Hoy en día, existen varios sitios web

que ofrecen la integración de fuentes
web. El que cobró mayor
popularidad en estos últimos diez
años, fue Google Fonts.
El mismo dispone un abanico importante de fuentes tipográficas a nuestra

disposición, para incluir en nuestros desarrollos web.
Podemos indicar una categoría de fuente (serif, san serif, monospace, handwriting…),
un tipo de idioma para la fuente, y seleccionar el o los tipos de propiedades
que cada tipografía debe incluir.
Desde hace poco, sumó la posibilidad de
seleccionar e incluir íconos basados en
el Diseño Material, propio de esta
empresa.
Los mismos están categorizados y

pueden utilizarse tanto en el diseño web
como también en aplicaciones como
Figma, para el ámbito del diseño UX/UI.
Selección de tipografías
En el desarrollo web, si no
declaramos una tipografía
específica para nuestros diseños,
el browser se ocupa de
seleccionar un set por defecto.
De manera predeterminada, no se define un único tipo de fuente, sino un Set. Esto garantiza de que si
la fuente tipográfica elegida en primer lugar no está disponible en el dispositivo que navega la web,
entonces se intentará cargar una segunda fuente alternativa, o una tercera, etcétera.
En la variedad de opciones por

defecto, podremos elegir qué
tipo de tipografía es la que
nuestro diseño debe tener
(serif, san serif, etcétera).
Si elegimos una tipografía de Google Fonts, debemos en principio seleccionar:

● su categoría
● el idioma que debe representar
● y las propiedades de la fuente
El número de estilos, engloba: A su vez, el espesor de las fuentes
● El espesor de la fuente tipográficas se dividen en tres categorías:
● Su inclinación (cursiva) ● delgada (thin/light)
● El ancho ● regular/media (Regular/Medium)
● espesa (Bold/Black)
Seleccionada la fuente tipográfica y las propiedades que nos interesan,

tendremos la posibilidad de aprovechar la vista previa para allí seleccionar
cuáles serán las apropiadas para nuestro desarrollo.
Integrar tipografías
mediante el tag <link>
Seleccionada la fuente y sus diferentes propiedades, podemos ver
en el panel lateral un resumen de lo que marcamos para integrar
como fuente web.
En el panel superior, los diferentes espesores y tipografía normal
y/o itálica. En el panel inferior, veremos la forma de poder utilizar
estas fuentes en nuestro desarrollo web.

Podremos integrar la fuente web directamente en cada
uno de los documentos HTML de nuestro proyecto,
utilizando la opción <link>.
También podemos integrar la o las fuentes web
seleccionadas, directamente en nuestro archivo CSS, a
través de la función @import().

La opción <link> genera una serie de tags HTML homónimos que podremos copiar, para luego
incluirlos en el encabezado de los documentos HTML. El tercero de los tags corresponde a la
fuente que seleccionamos, con todas sus propiedades incluidas.

Los tags <link rel=”preconnect”...> responden a una opción que acelerará la
conexión del navegador web con el sitio web remoto. En este caso, ese sitio es
desde donde provendrán las fuentes web que utilizaremos.

La integración de la fuente mediante @import,
nos ofrece un tag del tipo <style> para incluir
también en un documento HTML.
Podemos también copiar solo el contenido, e
incluirlo en la primera línea de un archivo CSS.

Cualquiera de las opciones de integración de fuentes web
que hayamos elegido requerirá, como toque final, definir
dentro de un archivo CSS o de un tag <style> en los
documentos HTML, la fuente tipográfica elegida, como
primera fuente dentro del set de la familia de fuentes que
utilice el navegador web para cargar el contenido de
nuestro proyecto.
El uso de las fuentes web de Google Fonts ofrece de manera
predeterminada consumir a las mismas a través de lo que
conocemos como CDN (Content Delivery Network).
Utilizar preconnect garantizará empezar a precargar ese
contenido remoto de la forma más rápida posible apenas se
comienza a cargar el documento HTML en el navegador web.

Fuentes locales versus
Fuentes remotas
🤔
Fuentes locales / Fuentes remotas
El uso de fuentes remotas dependen siempre del CDN que las
aloja. El mismo debe garantizar su funcionamiento 24/7.
Esas mismas fuentes que seleccionamos desde Google Fonts,
también pueden ser descargadas e integradas en nuestro
proyecto, sumando las mismas como archivos locales.

Para integrarlas dentro de nuestro proyecto web, recurriremos al uso de la regla
CSS denominada @font-face. de esta forma, sumando una serie de propiedades
CSS adicionales, lograremos referenciar la fuente tipográfica de manera local, tal
como se ve en el siguiente ejemplo:

En resumen, podemos integrar fuentes web en nuestros proyectos, de tres
formas diferentes:
1. referenciarlas mediante <link> en los documentos HTML
2. integrarlas en archivos CSS mediante @import()
3. usarlas localmente integrándolas en archivos CSS mediante @font-face()
Para los primeros dos casos, siempre será conveniente sumar a los
documentos HTML, el uso de los tags <link rel=”preconnect”> así el
navegador web prioriza la descarga del contenido remoto, en la computadora
del usuario que acceda a nuestro sitio o aplicación web.
Propiedades font
font-family
La propiedad font-family se utiliza en CSS para establecer la fuente

de texto que se utilizará en un elemento. Esta propiedad acepta uno o
varios valores de fuentes, en orden de preferencia. Si la primera
fuente no está disponible en el sistema del usuario, el navegador
intentará cargar la siguiente fuente de la lista, y así sucesivamente
hasta que encuentre una fuente disponible.
El valor de font-family se puede especificar de varias maneras,

incluyendo nombres de fuentes genéricas (como "serif" o
"sans-serif"), nombres de fuentes específicas (como "Arial" o "Times
New Roman"), rutas de archivo de fuentes externas (como archivos
.ttf o .woff), y combinaciones de estos elementos.
font-face
La propiedad @font-face es una regla de CSS que permite a los

diseñadores web utilizar fuentes personalizadas en sus sitios web, sin
tener que depender de las fuentes preinstaladas en los sistemas de
los usuarios. Con la regla @font-face, se puede cargar una fuente
externa en un sitio web y utilizarla en el texto del mismo.
La regla @font-face se utiliza junto con la propiedad font-family

para establecer una nueva fuente personalizada. La sintaxis básica de
la regla es la siguiente:
font-face
La propiedad @font-face es una regla de CSS que permite a los

diseñadores web utilizar fuentes personalizadas en sus sitios web, sin
tener que depender de las fuentes preinstaladas en los sistemas de
los usuarios. Con la regla @font-face, se puede cargar una fuente
externa en un sitio web y utilizarla en el texto del mismo.
La regla @font-face se utiliza junto con la propiedad font-family

para establecer una nueva fuente personalizada. La sintaxis básica de
la regla es la siguiente:
font-weight
La propiedad font-weight se utiliza en CSS para establecer el grosor

o peso de la fuente de un elemento de texto. Esta propiedad acepta
valores numéricos y palabras clave que van desde 100 (muy delgado)
hasta 900 (muy grueso).
Los valores numéricos de font-weight suelen estar en incrementos

de 100 y se corresponden con los valores de la tabla de peso de
fuente CSS. Algunos valores comunes son 100 (Thin), 200 (Extra
Light), 300 (Light), 400 (Normal), 500 (Medium), 600 (Semi Bold),
700 (Bold), 800 (Extra Bold) y 900 (Black).
Además de los valores numéricos, la propiedad font-weight también

acepta palabras clave predefinidas: normal (400), bold (700) y bolder o
lighter, que hacen que la fuente sea más gruesa o más delgada,
respectivamente, en función del valor de peso de la fuente anterior.
Por ejemplo, si el valor anterior es 400, bolder aumentaría el peso a
700, mientras que lighter lo reduciría a 300.
font-style
La propiedad font-style se utiliza en CSS para establecer el estilo de

la fuente de un elemento de texto. Esta propiedad acepta tres valores
principales: normal, italic y oblique.
El valor normal establece el estilo de la fuente en su forma

predeterminada, sin ningún tipo de inclinación. El valor italic establece
el estilo de la fuente en cursiva, lo que significa que las letras
aparecerán inclinadas hacia la derecha. El valor oblique también
inclina la fuente, pero a diferencia de italic, no utiliza una versión
específicamente diseñada de la fuente para mostrar el texto en
cursiva, sino que inclina la fuente existente.
¿Dudas o preguntas?
Muchas gracias

CSS 1

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CSS 1

Cargado por

Copyright:

Formatos disponibles

📹

No olvides poner a grabar la clase

Si bien hablamos varias veces de CSS, lo vamos a presentar

Es el lenguaje que nos permitirá mejorar la apariencia de

1995 1996 1997 1998 2022+

Unificamos el diseño en un único

Es accesible y permite estructurar el

Mediante el tag <style> Referenciando el archivo CSS con el tag <link>

¿Qué es una paleta de colores?

Es una combinación armónica de colores. Son usadas por

Resumen: colores web

Una buena paleta tiene buen contraste, es visualmente

La propiedad color se utiliza en CSS para establecer el color del texto

de un elemento. Esta propiedad acepta diferentes tipos de valores de

Vinculado el archivo CSS con nuestro documento HTML, ya podemos

● class (el atributo class de cada elemento HTML)

● id (el atributo id de cada elemento HTML)

También podemos deﬁnir una propiedad en común a varios tags

Las clases CSS permiten deﬁnir estilos más atomizados y pueden

En otras palabras, cuando una propiedad está marcada como

Extracto de la película “Jobs (2013)”

Escena donde se discute en equipo

Link al video en Youtube

Desde la llegada de las interfaces gráﬁcas, el uso de

Las fuentes tipográﬁcas revolucionaron todo en el

Times, Georgia, Garamond, Courier, son algunos

Helvetica, Arial, Gotham, Avenir, son algunos de

También existe una categoría, denominada Slab

Más información: Slab Serif.

Por supuesto, la tipografía de estilo handwriting, es la que simula de la mejor

Y la tipografía de estilo monospace, que se ocupa de

Es la tipografía heredada de las máquinas de escribir.

Los navegadores web, incluyen una serie de fuentes

Para el año 2000, ya se veían los primeros

Hoy en día, existen varios sitios web

El mismo dispone un abanico importante de fuentes tipográﬁcas a nuestra

Los mismos están categorizados y

declaramos una tipografía

especíﬁca para nuestros diseños,

seleccionar un set por defecto.

En la variedad de opciones por

Si elegimos una tipografía de Google Fonts, debemos en principio seleccionar:

El número de estilos, engloba: A su vez, el espesor de las fuentes

● El espesor de la fuente tipográﬁcas se dividen en tres categorías:

● Su inclinación (cursiva) ● delgada (thin/light)

● El ancho ● regular/media (Regular/Medium)

Seleccionada la fuente tipográﬁca y las propiedades que nos interesan,

Seleccionada la fuente y sus diferentes propiedades, podemos ver

en el panel lateral un resumen de lo que marcamos para integrar

como fuente web.

En el panel superior, los diferentes espesores y tipografía normal

y/o itálica. En el panel inferior, veremos la forma de poder utilizar

estas fuentes en nuestro desarrollo web.

Podremos integrar la fuente web directamente en cada

uno de los documentos HTML de nuestro proyecto,

utilizando la opción <link>.

También podemos integrar la o las fuentes web

seleccionadas, directamente en nuestro archivo CSS, a

través de la función @import().

incluirlos en el encabezado de los documentos HTML. El tercero de los tags corresponde a la

fuente que seleccionamos, con todas sus propiedades incluidas.

Los tags <link rel=”preconnect”...> responden a una opción que acelerará la

desde donde provendrán las fuentes web que utilizaremos.