Act 06 - CSS para aplicaciones web y responsibo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
CCS3 {
< Es un lenguaje de diseño utilizado para describir la presentación de los
elementos HTML. Es utilizado para establecer el color, el tamaño, la posición, la
fuente, entre otras propiedades de los elementos en una página web. Es esencia
para darle estilo y diseño a una página web. >
[Cascading Style Sheets]
CSS3
< Definicion >
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Cascading Style Sheets {
Con CSS, los desarrolladores web pueden separar la estructura de una
página web (definida con HTML) de su presentación visual. Esto permite
que los diseños sean reutilizados y modificados fácilmente en varias
páginas web, lo que agiliza el proceso de desarrollo y facilita el
mantenimiento.
CSS también permite la creación de diseños responsivos, adaptando el
diseño de una página web a diferentes tamaños de pantalla, lo que
permite una mejor experiencia de usuario en dispositivos móviles.Select
the element that you want to copy.
}
¿Que es .CSS?
Historia.CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Tiene varios usos importantes en el desarrollo web:
¿Para qué sirve .CSS?
Mejorar la
accesibilidad
Separar el
contenido y
el diseño
Mejorar la
velocidad de
carga
Crear
diseños
adaptativos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
CSS fue desarrollado por el {World Wide Web
Consortium (W3C)}
Historia de .CSS
< número limitado
de propiedades y
selectores
CSS1
< Soporte para media
queries, permitía
adaptar la
presentación de una
página web
CSS2
< nuevas características
como la posibilidad de
crear animaciones y
transiciones
CSS3
< Mejoras en la capacidad de
seleccionar elementos, mejoras
en el soporte para grids,
mejoras en la capacidad de
adaptar la presentación a
dispositivo
CSS4
/1998 /Act.
/1996 /2012

1
2
3
4
5
6
7
8
9
10
11
12
13
14
¿Cómo funciona .CSS?
CSS funciona mediante la aplicación de reglas
de estilo a los elementos de una página web.
Estas reglas se escriben en un archivo CSS y se
vinculan a una página HTML mediante un enlace
en la cabecera de la página.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
p {
background-color: blue;
}
< Este código se puede incluir en un archivo externo con extensión .css
y vincularlo en el HTML de la siguiente manera: >
<head>
<link rel="stylesheet" type="text/css" href=“css/estilos.css">
</head>
Aquí te dejo un ejemplo de código CSS que cambia el color de fondo de
todos los párrafos en una página web a azul:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
<style>
p { background-color: blue; } </style>
</head>
<También se puede incluir en el HTML directamente dentro de una
etiqueta «style»:>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Rol de CSS en un sitio web
<separar la estructura
de contenido de una
página (definida en
HTML) de su
presentación visual
presentación
y diseño
/01
< permite dar una
apariencia consistente
y profesional a todas
las páginas del sitio
web
estilos
visuales
< la presentación de
una página web a
diferentes dispositivos
y resoluciones de
pantalla a través de
media queries,
permite
adaptar
/02 /03
4/9 7/10 6/10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Componentes de CSS
< son los elementos HTML a los que se aplicarán las
reglas CSS. Los selectores pueden ser basados en el
nombre de la etiqueta, la clase, el ID, entre otros.
Selectores
/01
< Son las características visuales que se
modificarán en los elementos seleccionados. Algunas
propiedades comunes son color, tamaño de fuente,
margen, padding, borde, entre otras.
Propiedades
/02
< son los valores asignados a las propiedades.
Pueden ser valores numéricos, unidades de medida,
nombres de colores, entre otros.
Valores
/03
< son las líneas que componen una regla CSS
y consisten en una propiedad y un valor
separados por dos puntos.
Declaraciones
/04

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Componentes de CSS
< son conjuntos de declaraciones que se aplican a
los elementos seleccionados.
Reglas
/05
< son los archivos donde se guardan las reglas CSS
y se vinculan en el HTML.
Archivos
/06
< es un componente que permite adaptar la
presentación de una página web a diferentes
dispositivos y resoluciones de pantalla.
Media
Queries
/07
< son sistemas de diseño que ayudan a crear
diseños más flexibles y adaptables.
Grid yFlexbox
/08
< son lenguajes que proporcionan una
sintaxis adicional a CSS para facilitar el
desarrollo y mejorar la productividad de los
desarrolladores.
Lenguajes de
preprocesamiento
/09

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Componentes de CSS
< son líneas de código que no son interpretadas por el
navegador y sirven para dejar notas o documentación
dentro de un archivo CSS.
Comentarios
< son los valores numéricos que se asignan a las
propiedades y pueden ser expresadas en diferentes unidades
como pixels, ems, porcentajes, entre otras.
Unidades de
medida
< es un componente que permite adaptar la presentación
de una página web a diferentes dispositivos y
resoluciones de pantalla.
Pseudo-clases y
pseudo-elementos
< es el sistema que utiliza CSS para calcular el tamaño y
la posición de los elementos en una página web.
Box-model
< son herramientas que permiten identificar y
solucionar problemas en el código CSS, tales como el
inspector de elementos en los navegadores web.
Herramientas
de depuración

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Ejemplos:
selector {
propiedad: valor;
propiedad: valor; ...
}
h1 {
color: blue;
font-size: 36px;
text-align: center;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Tecnologías para CSS
< Es un sistema de diseño de
cuadrícula que permite a los
diseñadores crear diseños de
cuadrícula complejos y adaptables.
Grid
< Es un sistema de diseño de
caja flexible que permite a los
diseñadores crear diseños
flexibles y adaptables.
Flexbox
< Permite a los diseñadores y
desarrolladores adaptar el diseño
de una página a diferentes tamaños
de pantalla y dispositivos.
Media Queries:
< Es un marco de diseño de código
abierto que proporciona un
conjunto de herramientas y
componentes preconstruidos para
ayudar a los diseñadores a crear
diseños adaptables y responsivos.
Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
¿Qué son los selectores en CSS?
< Los selectores en CSS son patrones utilizados para
seleccionar elementos HTML específicos a los que se
aplicarán estilos.
< Los selectores pueden ser tan simples como seleccionar
un elemento por su nombre, como un encabezado h1, o más
complejos, como seleccionar elementos con un cierto
atributo o valor.
SELECTORES

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Selectores de Elemento {CSS}
SELECTORES
p {
font-size: 16px;
color: #333;
}
CSS
<p>Este es un párrafo de
ejemplo.</p>
<p>Este es otro párrafo de
ejemplo.</p>
< Los selectores de elemento son los más simples y comunes en CSS.
HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Selectores de clase {CSS}
SELECTORES
.alerta {
background-color: red;
color: white;
padding: 10px;
}
CSS
<p class="alerta">
Este es un mensaje de alerta.
</p>
< Los selectores de clase se escriben con un punto delante del nombre
de la clase.
HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Selectores de ID {CSS}
SELECTORES
#titulo-principal {
font-size: 24px;
font-weight: bold;
color: #333;
}
CSS
<h1 id="titulo-principal">
Bienvenidos a mi sitio web
</h1>
< Los selectores de ID se escriben con un numeral delante del nombre
del ID.
HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Selectores de descendencia {CSS}
SELECTORES
div p {
font-style: italic;
}
CSS
<div>
<p>Este es un párrafo dentro de
un div.</p> </div>
< Los selectores de descendencia seleccionan elementos HTML que son
descendientes de otro elemento HTML específico.
Se escriben separando los selectores por un espacio.
HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Selectores de hijo directo {CSS}
SELECTORES
ul > li {
list-style: square;
}
CSS
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
< Los selectores de hijo directo seleccionan elementos HTML que son
hijos directos de otro elemento HTML específico.
Se escriben separando los selectores por un signo mayor que (>).
HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Selectores de pseudoclase {CSS}
SELECTORES
a:hover {
color: red;
text-decoration:
underline;
}
CSS
<a href="#">Enlace de ejemplo</a>
< Son palabras clave que se agregan a un selector para seleccionar
elementos HTML que se encuentran en un estado específico, como cuando
el cursor del mouse se coloca sobre un enlace o cuando se selecciona
un campo de formulario.
Las pseudoclases se escriben después del selector, separadas por dos
puntos (:).
HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Agrupa selectores {CSS}
SELECTORES
h1, h2, h3 {
font-family: Arial,
sans-serif;
color: #333;
}
CSS
<h1>Título principal</h1>
<h2>Título secundario</h2>
<h3>Título terciario</h3>
< Agrupa selectores similares para evitar la repetición innecesaria de
estilos en tu código CSS.
HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Utiliza selectores de cascada {CSS}
SELECTORES
nav ul li a {
color: blue;
}
nav ul li a:hover {
color: red;
}
CSS <nav>
<ul>
<li><a
href="#">Inicio</a></li>
<li><a href="#">Acerca
de</a></li>
<li><a
href="#">Contacto</a></li>
</ul>
</nav>
< Los selectores de cascada te permiten aplicar estilos a elementos
específicos en función de su relación con otros elementos. Utiliza
selectores de cascada para aplicar estilos a elementos específicos de
manera más precisa.
HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
¿Qué es el color en CSS3?
< En el contexto del diseño web, el color es un atributo
de estilo que se aplica a los elementos HTML para
mejorar la apariencia, la legibilidad y la experiencia
del usuario.
< Por ejemplo, puedes aplicar un color de fondo a un
elemento div y cambiar el color del texto dentro de ese
div:
div {
background-color: lightblue;
color: darkblue;
}
COLORES

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Sistemas de colores: RGB, HSL y HEX
< Es un modelo de color aditivo en
el que los colores se crean
mediante la combinación de
diferentes intensidades de luz
roja, verde y azul. Los valores de
RGB van de 0 a 255 para cada
componente de color.
RGB (Red, Green, Blue):
< Es un modelo de color que se basa
en la percepción humana del color.
El matiz (Hue) se representa en
grados (0 a 360), la saturación
(Saturation) en porcentaje (0% a
100%), y la luminosidad (Lightness)
también en porcentaje (0% a 100%).
HSL (Hue, Saturation,
Lightness):
color: rgb(255, 0, 0);
color: hsl(120, 100%, 50%);
COLORES

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Es un sistema de color que
utiliza valores hexadecimales para
representar los colores. Cada color
se representa mediante una
combinación de seis caracteres (0-9
y A-F) precedidos por un símbolo de
hash (#).
HEX (Hexadecimal):
< En CSS3, se pueden especificar
colores con opacidad variable
utilizando las versiones “A” de los
modelos de color RGB y HSL (RGBA y
HSLA, respectivamente), donde la “A”
representa la opacidad (alfa).
Opacidad y transparencia
en colores
color: #0000FF;
color: rgba(255, 0, 0, 0.5);
color: hsla(120, 100%, 50%, 0.75);
COLORES

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Colores predefinidos y nombres de
colores:
COLORES

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< En CSS, el color de texto se
utiliza para establecer el color de
texto de un elemento HTML. Puedes
especificar el color de texto de un
elemento utilizando la propiedad
color.
.example { color: red; }
Color de texto
< En CSS, el color de borde se
utiliza para establecer el color de
borde de un elemento HTML. Puedes
especificar el color de borde de un
elemento utilizando la propiedad
border-color.
.div { border-color: red; }
Color de borde
color: #0000FF;
COLORES

1
2
3
4
5
6
7
8
9
10
11
12
13
14
¿Qué son los gradientes?
< Un gradiente es una representación visual de una
transición gradual entre dos o más colores. En CSS3, los
gradientes se utilizan principalmente como fondos de
elementos, pero también se pueden aplicar a otras
propiedades, como bordes y sombras.
COLORES Gradientes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Los gradientes lineales son
transiciones de color a lo largo de
una línea recta. Puedes controlar
la dirección del gradiente y los
colores que se utilizan en la
transición.
Gradientes lineales
< Los gradientes radiales son
transiciones de color que se
irradian desde un punto central.
Puedes controlar la forma, el tamaño
y la posición del gradiente radial.
Gradientes radiales
background-image: radial-gradient(
forma tamaño at posición, color-stop1, color-stop2,
...);
COLORES Gradientes
background-image: linear-gradient(dirección,
color-stop1, color-stop2, ...);
div {
background-image: linear-gradient(90deg,
red, yellow, green);
}
div {
background-image: radial-gradient(circle at center,
red, yellow, green);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
CSS Background
< La propiedad background en CSS se utiliza para
establecer el fondo de un elemento. Puede ser utilizada
para establecer el color de fondo, establecer una imagen
de fondo, establecer la posición de una imagen de fondo,
establecer si una imagen de fondo se debe repetir o no,
y establecer si una imagen de fondo se debe fijar o
desplazarse con el contenido.
La sintaxis básica de la propiedad de fondo es:
background: valor1 valor2 valor3 valor4;
element { background: green url('image.jpg') no-repeat center center; }
CSS Background

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Propiedades relacionadas
Establece el color de fondo del elemento.
background-color
Establece una imagen de fondo para el elemento. El
valor debe ser una URL que apunta a la imagen.
background-image
Controla si la imagen de fondo se repite o no. Los
valores posibles son repeat, repeat-x, repeat-y y
no-repeat.
background-repeat:
Controla la posición de la imagen de fondo.
Puede ser un valor en formato x y o un valor
predefinido como center, top, bottom, left o
right.
background-position:
CSS Background

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Propiedades relacionadas
Controla el tamaño de la imagen de fondo. Puede ser un
tamaño fijo en pixels, un porcentaje, o valores como
cover o contain.
background-size:
background
Es una propiedad abreviada para establecer varios valores
de fondo de una sola vez, como el color, la imagen, la
posición de la imagen, si se repite la imagen o no.
CSS Background

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Earth is where
we all live on
Earth
75%
< Mercury is a
small planet
Mercury
25%
< It’s the
biggest planet
Jupiter
90%
< Mars is
actually cold
Mars
50%
COLORES

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Programming language {infographics}
< It’s the second
planet from the Sun
Venus
< Neptune is very
far from Earth
Neptune
25%
25%
Place 1
Place 2
Saturn has several rings
forbeginners.html workshop.css
Programming Language

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Jupiter is a gas
giant and the
biggest planet >
Jupiter
< Venus has a nice
name and high
temperatures >
Venus
< Mercury is the
closest planet to
the Sun >
Mercury
< Saturn is a gas
giant and has
several rings >
Saturn
5/6 2/6
3/6 6/6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< This planet is
a gas giant
Jupiter
< It’s the
smallest planet
Mercury
< Earth is where
we all live on
Earth

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Venus is the second
planet from the Sun
Venus
< Jupiter is the biggest
planet of them all
Jupiter
/01
/02
40%
60%
Saturn is a gas giant
and has several rings.
It’s composed mostly of
hydrogen and helium. It
was named after the
Roman god of wealth
Saturn

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Earth is where
we all live on
Earth
75%
< Mercury is a
small planet
Mercury
25%
< It’s the
biggest planet
Jupiter
90%
< Mars is
actually cold
Mars
50%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< It’s the
smallest planet
Mercury
< Venus has a
beautiful name
Venus
< Saturn is a
gas giant
Saturn
< It’s far away
from Earth
Neptune
/2000 /2022
/1900 /2020

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< It’s the
biggest planet
Jupiter
25%
< Despite being
red, Mars is cold
Mars
10%
< Earth is where
we all live on
Earth
30%
< Mercury is the
smallest planet
Mercury
35%
Saturn has several rings

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Jupiter is the
biggest planet of
them all
Jupiter
70%
< Venus is the
second planet from
the Sun
Venus
< This planet is far
away from our planet
called Earth
Neptune
45%
25%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< It’s the
biggest planet
Jupiter
15%
< Mars is
actually cold
Mars
35%
< Earth is where
we all live on
Earth
30%
< Mercury is the
smallest planet
Mercury
20%
Follow the link in the graph to modify its data and then
paste the new one here. For more info, click here

1
2
3
4
5
6
7
8
9
10
11
12
13
14
75% < It’s the
smallest planet
Mercury
90% < Venus has a
beautiful name
Venus
50% < Mars is
actually cold
Mars
25% < It’s the
biggest planet
Jupiter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< It’s the closest planet to the Sun
Mercury
/01
< Venus is the second planet from the Sun
Venus
/02
< Mars is actually a very cold place
Mars
/03
< It’s the biggest planet of them all
Jupiter
/04
< It’s composed of hydrogen and helium
Saturn
/05
< Neptune is far away from Earth
Neptune
/06

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Jupiter is the
biggest planet
Jupiter
50%
< It’s the second
planet from the Sun
Venus
away from Earth
Neptune
75%
25%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< It’s composed
mostly of hydrogen
and helium
Saturn
< Venus is the
second planet from
the Sun
Venus
< Jupiter is the
biggest planet of
them all
Jupiter
30% 70% 50%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< It’s the closest
planet to the Sun Mercury
planet from the Sun
Venus
< Mars is actually a
very cold place Mars
< Neptune is far away
from Earth
Neptune

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Mercury is very small
Mercury 50%
< Venus has a beautiful name
Venus 65%
< Mars is a very cold place
Mars 20%
< Jupiter is a gas giant
Jupiter 30%
< Saturn has several rings
Saturn 80%
< Neptune is a very cold place
Neptune 100%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Jupiter is a gas
giant and the
biggest planet >
Jupiter
< Venus has a nice
name and high
temperatures >
Venus
< Mercury is the
closest planet to
the Sun >
Mercury
< Saturn is a gas
giant and has
several rings >
Saturn

1
2
3
4
5
6
7
8
9
10
11
12
13
14
planet from the Sun
Venus
/01
< Saturn is composed of
hydrogen and helium
Saturn
/02
/html.
/html.
50% 80%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< This planet has a very beautiful name
Venus
< Saturn is a gas giant and has rings
Saturn
< Mercury is the closest planet to the Sun
Mercury
< Despite being red, Mars is a cold place
Mars

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< It’s closest planet to the Sun
< It’s the smallest planet of all
< Mercury is a small planet
Mercury
< It’s the second planet from Sun
< Venus has a toxic atmosphere
< Venus has extreme temperatures
< Venus is a very hot planet
Venus
/html.
50%
/html.
90%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/01
< Mercury is a
small planet
Mercury
< Venus has a
beautiful name
Venus
< Saturn is a
gas giant
Saturn
< It’s far away
from Earth
Neptune
< We all live
on Earth
Earth
< Mars is
actually cold
Mars
/02

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Venus has a beautiful name and is the second planet from the
Sun. It is terribly hot, even hotter than Mercury, and its
atmosphere is toxic
Conclusions
Mercury 65%
< Mars is a very cold place
Mars 20%
Jupiter 30%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Mercury is a
small planet
Mercury
< Venus has a
beautiful name
Venus
< It’s composed
of hydrogen
Saturn
< It’s far away
from Earth
Neptune

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Venus has a
beautiful name
Venus
< It’s far away
from Earth
Neptune
< Despite being
red, it’s cold
Mars
/2020 /2021 /2022
80% 45% 50%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Jupiter is the
biggest planet
Jupiter
< It’s the second
planet from the Sun
Venus
away from Earth
Neptune
75% 60%
90%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Saturn is a gas
giant and has several
rings. It’s composed
mainly of hydrogen and
helium. It was named
after the Roman god of
wealth and agriculture
Saturn
< Venus has a
beautiful name and is
the second planet from
the Sun. It’s hot,
even hotter than
Mercury, and its
atmosphere is toxic
Venus
40% 60%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Mon Tue Wed Thu Fri
Project 01
Project 02
Project 03
Project 04
Project 05
Project 01 Project 02 Project 03 Project 04 Project 05

1
2
3
4
5
6
7
8
9
10
11
12
13
14
December
Mon Tue Wed Thu Fri Sat Sun
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Activity 1 Activity 2 Activity 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Mercury is the smallest
planet of them all
< Despite being red, Mars
is a very cold planet
< Saturn is a gas giant and
has several rings
Venus
planet from the Sun
< Neptune is the farthest
planet from the Sun
and the biggest planet
Mars

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Mercury is the smallest
planet of them all
< Despite being red, Mars
is a very cold planet
< Saturn is a gas giant and
has several rings
< Jupiter is the biggest
planet of them all
< Neptune is the farthest
planet from the Sun
planet from the Sun

Instructions for use
For more information about editing slides, please read our FAQs or visit our blog:
https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school
If you have a free account, in order to use this template, you must credit Slidesgo in your final presentation. Please refer
to the next slide to read the instructions for premium users.
As a Free user, you are allowed to:
- Modify this template.
- Use it for both personal and commercial projects.
You are not allowed to:
- Sublicense, sell or rent any of Slidesgo Content (or a modified version of Slidesgo Content).
- Distribute Slidesgo Content unless it has been expressly authorized by Slidesgo.
- Include Slidesgo Content in an online or offline database or file.
- Offer Slidesgo templates (or modified versions of Slidesgo templates) for download.
- Acquire the copyright of Slidesgo Content.

Instructions for use (premium users)
As a Premium user, you can use this template without attributing Slidesgo.
You are allowed to:
● Modify this template.
● Use it for both personal and commercial purposes.
● Share this template in an editable format with people who are not part of your team.
You are not allowed to:
● Sublicense, sell or rent this Slidesgo Template (or a modified version of this Slidesgo Template).
● Distribute this Slidesgo Template (or a modified version of this Slidesgo Template) or include it in a database or in
any other product or service that offers downloadable images, icons or presentations that may be subject to
distribution or resale.
● Use any of the elements that are part of this Slidesgo Template in an isolated and separated way from this
Template.
● Register any of the elements that are part of this template as a trademark or logo, or register it as a work in an
intellectual property registry or similar.
For more information about editing slides, please read our FAQs or visit our blog:
https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school

Infographics
You can add and edit some infographics to your presentation to present your data in a visual way.
● Choose your favourite infographic and insert it in your presentation using Ctrl C
+ Ctrl V or Cmd C + Cmd V in Mac.
● Select one of the parts and ungroup it by right-clicking and choosing
“Ungroup”.
● Change the color by clicking on the paint bucket.
● Then resize the element by clicking and dragging one of the square-shaped
points of its bounding box (the cursor should look like a double-headed arrow).
Remember to hold Shift while dragging to keep the proportions.
● Group the elements again by selecting them, right-clicking and choosing
“Group”.
● Repeat the steps above with the other parts and when you’re done editing, copy
the end result and paste it into your presentation.
● Remember to choose the “Keep source formatting” option so that it keeps the
design. For more info, please visit our blog.

Act 06 - CSS para aplicaciones web y responsibo

Recommended

Recommended

More Related Content

Similar to Act 06 - CSS para aplicaciones web y responsibo

Similar to Act 06 - CSS para aplicaciones web y responsibo (20)

More from AlexBaldeon2

More from AlexBaldeon2 (12)

Recently uploaded

Recently uploaded (20)

Act 06 - CSS para aplicaciones web y responsibo