Fuentes y Web Fonts en CSS: Cómo Seleccionarlas y Aplicarlas

Curso Definitivo de HTML y CSS

Contenido del curso

Web Developer Fundamentals

HTML

Etiquetas multimedia

Formularios

CSS

Responsive Design

Accesibilidad

Próximos pasos

Tomar examen

Fuentes y Web Fonts en CSS: Cómo Seleccionarlas y Aplicarlas

Resumen

Las Web Fonts son grupos familiares de fuentes, los navegadores web poseen fuentes predeterminadas y dependiendo del mismo cada uno de ellos posee estilos diferentes.

Algunas Generic Families

Serif: son un tipo de fuente de estilo formal o clásico como Times New Roman.
Sans-serif: No tienen acabado en las puntas, como: Verdana.
Cursive: Son las que tienen estilo cursivo.
Monospace: Son tipos de fuentes con espaciado entre las letras, como: Roboto mono. ¿Como puedo saber que tipo de fuente tengo instaladas en mi navegador?
Menú>Configuración>Diseño>Personalizar Fuentes>Fuente Serif/Fuente Sans-serif

¿Como puedo importar tipos de fuentes a mi proyecto?

Ir a Google Fonts.
Seleccionar la fuente. Seleccionar Estilo de fuente.
Agregar al proyecto, se considera buena práctica agregar las fuentes utilizando la etiqueta <link>, ya que la fuente cambia la fuente una vez que se haya cargado la página.

Buenas Prácticas: cargar una sola fuente. Importarlas siempre en la etiqueta del head.

Contribución creada con los aportes de: Germán Ceballos

Repasa qué es Full stack

Cristian Andres MQ

Estudiante

Hace 6 años

Un resumen de casi todo.

Selectores . # p *
Psudoclases y psudoelementos :class ::element
Regla de CSS selector + {} + declaración(propiedad: valorPropiedad;)
Modelo de caja: content + padding + border + margin NOTA: para no generar scroll, usamos la siguiente regla: *{box-sizing: border-box;
Herencia en CSS: el código que se le va a pasar de un "padre" a un "hijo"
Orden de declaración y especificidad en selectores: 6.1 Importancia 6.2 Especificidad 6.3 Orden en las fuentes 6.1: 6.1.1 Hoja de estilo de agente usuario(navegador) 6.1.2 Declaraciones normales en hojas del autor (.css) 6.1.3 Declaraciones importantes (!important) 6.2: Especificidad: !important inline styles #id .class tag 6.3: En tus estilos, las declaraciones al final del documento anularán a las que sucedan antes en caso de conflicto.
Combinadores: 7.1 Adjacent Sibling div + p {Aplica una regla al selector indicado cercano} 7.2 General Sibling div ~ p {Aplica el mismo estilo siempre y cuando existan como hermanos en la misma linea} 7.3 Child div > p {El padre que sea mayor, a su hijo directo} 7.4 Descendant
div p {todas las etiquetas que estén en el contenedor}
Medidas 8.1 Absolutas: No va a cambiar sin importar el tamaño del dispositiva. 8.1.1: px 8.2 Relativas: El tamaño varia según el dispositivo. 8.2.1 em: es un acrónimo de element y lo que hace es tomar el tamaño de fuente que tenga el padre directo. 8.2.2 rem: Rem hace referencia al font-size declarado en la etiqueta HTML (62.5%). 8.2.3 Max-width/Max-height: Define el ancho y alto que un elemento puede tener. 8.2.4 Min-width/Min-height: Define el ancho y el alto mínimo, que un elemento puede tener. 8.2.5 Porcentaje % : Designa el porcentaje a usar, en el espacio en uso. 8.2.6 vw y vh: view width y view height usan de 1% a 100% del tamaño del viewport.
Position: Modifica el lugar en el que se encuentran las cajas etiquetas, por defecto todos tiene como valor predeterminado static. 9.1 static, relative, absolute, fixed, sticky las propiedades botton left right top, no están disponibles en el valor static.
Display: La propiedad display especifica como se muestra un elemento html. Todos los elementos tienen algún tipo de display. Si un elemento no se ve
en pantalla, es porque seguramente su display es none. 10.1 Block: siempre comienza en una nueva linea y ocupa 100% el espacio del width. 10.2 Inline: no comienzan en una nueva linea y solo ocupan el ancho necesario. no se le puede agregar margin. 10.3 inline-block: Combinación de los 2 anteriores.
Display: flex (flexbox):https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Display: grid https://css-tricks.com/snippets/css/complete-guide-grid/
Variables: Permiten asignar cualquier valor a una propiedad cuyo nombre podemos elegir libremente. Ejemplo: :root{--nombre-variable: valor;} ejemplo: var (--nombre-variable);
Web fonts: Buena práctica *solo cargar 1 fuente por proyecto. *importarlas siempre en la etiqueta head.

NOTA: Es buena practica antes de iniciar mis estilos: *{ box-sizing: border-box; margin: 0; padding: 0; } html{ font-size: 62.5% /Esto si quieres usar Rem como medida/ }

María Camila Betancourth Ospina

Estudiante

Hace 5 años

excelente tu resumen

Daniel Torrealba Febres Cordero

Estudiante

Hace 5 años

Muy buen resumen.

SANTIAGO QUINTERO GUARIN

Joel Dominguez Merino

Esteban Casallas

Juan Esteban Galvis

Railly Hugo

Ansony Banda

Alex Diaz Cantor

German Enrique Ceballos Garcia

Patricio Manuel Ugarte

Yair Lira

Eduardo Petraglia

Luis Rodríguez

Hace 4 años

Harold Celis

Bryan Andres Vera Garcia

José M. Veintimilla

Leidy Fabiola Cruz

Héctor Alonso Padilla Ramírez

Eduardo Rodriguez

Osmar Oña

Anthony Ismael Manotoa Moreno

Reinaldo Mendoza

Pedro Moreno

Brian Domínguez Vázquez

Nicolás Leal

Carlos Ramos

Anderson Josué Oroya Silva

Jerry Gil Contreras

Luis Velásquez

Jesús Cisneros

Juan David González Rodríguez

Pablo Luna Guzmán

Abigail Perez

Fuentes y Web Fonts en CSS: Cómo Seleccionarlas y Aplicarlas

Web Developer Fundamentals

Este curso tiene una versión actualizada.

HTML y CSS: Fundamentos para Desarrolladores Web

Fundamentos del Desarrollo Frontend: Tecnologías y Prácticas Esenciales

Fundamentos del Desarrollo Backend

Comprende el Rol y las Habilidades de un Desarrollador Full Stack

Diferencias entre Páginas Web Estáticas y Dinámicas

HTML

Anatomía de una Página Web: Estructura y Elementos HTML

Creación y Estructura de un Archivo index.html Básico

Etiquetas HTML: Contenedoras y de Contenido

Listas anidadas y enlaces en HTML para recetas

Anatomía de Etiquetas HTML: Apertura, Cierre y Atributos

Etiquetas multimedia

Formatos de Imágenes y su Uso en Desarrollo Web

Optimización de Imágenes para Web

Uso de etiquetas IMG y FIGURE en HTML

Uso de las etiquetas HTML figure y figcaption para imágenes

Uso de la etiqueta de vídeo en HTML y sus atributos clave

Formularios

Creación de Formularios Web Efectivos con HTML

Creación de Formularios HTML con Campos de Fecha y Hora

Autocompletado y Requerimiento en Formularios HTML

Creación de Menús Desplegables con Select y Data List en HTML

Diferencias entre botones submit e input en formularios HTML

CSS

Introducción a CSS: Estilos y Aplicaciones Básicas

Implementación Básica de CSS en HTML

Pseudo Clases y Pseudo Elementos en CSS

Anatomía de una Regla CSS: Selectores y Declaraciones

Modelo de Caja en CSS: Margen, Relleno y Bordes

Herencia en CSS: Cómo Funciona y Afecta a los Estilos

Especificidad y Orden de Declaración en CSS

Especificidad y Orden en CSS: Crear y Aplicar Estilos Correctamente

Buenas prácticas en CSS: Especificidad y uso adecuado de selectores

Combinadores CSS: Hermanos Adyacentes y Especificidad

Selectores de Hermano General en CSS: Uso y Ejemplos Prácticos

Combinadores CSS: Hijos y Descendientes

Medidas Absolutas y Relativas en CSS: Píxeles y Porcentajes

Comprensión del uso de em en CSS: medidas relativas de fuente

Uso de REM en CSS para Fuentes y Dimensiones

"Uso de Viewport y Dimensiones en CSS: min-width, max-width, min-height"

Posicionamiento en CSS: Static, Absolute y Relative

CSS: Display Block, Inline e Inline-Block

Posicionamiento de Layout Básico en CSS

Posicionamiento y Estilos con Display Flex en CSS

Posicionamiento Vertical con Flexbox en CSS

Uso de Variables Custom en CSS para Optimizar Estilos