Want to create interactive content? It’s easy in Genially!

Get started free

LOS ALPES

Dulcepaola Montes salgado

Created on March 25, 2025

Start designing with a free template

Discover more than 1500 professional designs like these:

Transcript

Paola Montes

LOS ALPES

Puedes utilizar la fotografía, gif o ilustración que tú quieras para darle caña al contenido multimedia.

Tus contenidos gustan, pero solo enganchan si son interactivos. Capta la atención de tu público con una fotografía o ilustración interactiva.

Dar color a textos, fondos y bordes. Cambiar tamaños de fuentes, imágenes y márgenes. Crear diseños responsivos (adaptados a diferentes pantallas). Animar elementos como botones o transiciones.

¿Para qué sirve CSS?

HTML estructura el contenido (texto, imágenes, enlaces). CSS le da estilo y lo hace visualmente atractivo. Por ejemplo: HTML crea un botón. CSS lo hace rojo, redondeado y con sombra.

¿Cómo se relaciona con HTML?

Estructura de CSS

CSS se compone de reglas que tienen dos partes principales: Selector: Elige el elemento que quieres diseñar. Propiedad y valor: Define qué cambiar y cómo.

Elementos clave de CSS

Selectores:p → Selecciona párrafos. h1 → Títulos principales. .clase → Elementos con una clase específica. #id → Elementos con un ID único. Propiedades y valores: color: red; → Cambia el color. background: yellow; → Fondo amarillo. width: 300px; → Ancho de 300 píxeles. Comentarios en CSS: Se escriben entre /* */ y no afectan el código.

Estilizar una etiqueta HTML Este estilo aplica a todos los títulos <h1> de la página: Usar una clase (para varios elementos) El estilo aplica a cualquier elemento con la clase "parrafo" Usar un ID (para un solo elemento) Un ID es único. El estilo se aplica solo a ese elemento.. Aplicas el estilo dentro del propio elemento con el atributo style.

Ejemplo

  • Etiqueta Todos los elementos de un tipo (p, h1, etc.) <h1>Hola</h1>
  • Clase (.) Elementos con una clase específica <p class="parrafo">Hola</p>
  • ID (#) Un elemento único con un identificador <p id="destacado">Hola</p>