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

Get started free

CSS EN HTML

Isaac González

Created on April 16, 2024

Valeria Aglaed Absalón Hernández

Start designing with a free template

Discover more than 1500 professional designs like these:

Tarot Presentation

Geniaflix Presentation

Shadow Presentation

Newspaper Presentation

Vintage Photo Album

Memories Presentation

Zen Presentation

Explore all templates

Transcript

css en html

START

CONCEPTO

CSS

CSS (Cascading Style Sheets) es un lenguaje utilizado para definir la presentación de documentos HTML (o XML). Permite controlar el diseño, la apariencia y el formato de una página web.

APLICACION EN

PAGINAS WEB
  • Tamaños
  • Dar estilo a elementos HTML
  • Márgenes
  • Cambiar colores
  • Posicionamiento de elementos en una página web.
  • Fuentes

COMO SE UTILIZAN

CON HTML

Se utiliza mediante la inclusión de reglas de estilo dentro de un documento HTML, ya sea mediante etiquetas <style> en el <head> o mediante archivos externos de CSS enlazados con la etiqueta <link>.

QUE ETIQUETAS PUEDEN

UTILIZAR ATRIBUTOS CSS

- <h1 style="color: blue;">Encabezado 1</h1> - <p style="font-size: 18px;">Este es un párrafo con tamaño de fuente 18px.</p> - <div style="background-color: #f0f0f0; padding: 10px;">Div con fondo gris claro y relleno de 10px.</div> - <a href="#" style="text-decoration: none; color: green;">Enlace sin subrayado y color verde</a> - <img src="imagen.jpg" style="width: 200px; height: 150px; border-radius: 50%;">Imagen con ancho y alto definidos y bordes redondeados.

- <ul style="list-style-type: circle;"> <li>Elemento 1</li> <li>Elemento 2</li> </ul>- <table style="border-collapse: collapse;"> <tr> <td style="border: 1px solid black;">Celda 1</td> <td style="border: 1px solid black;">Celda 2</td> </tr> </table> - <form style="margin: 20px;"> <input type="text" style="width: 200px;"> <input type="submit" style="background-color: blue; color: white;"> </form> - <span style="font-weight: bold;">Texto en negrita</span> - <button style="border: 1px solid black; background-color: yellow;">Botón con borde negro y fondo amarillo</button>

RELACION DE

CSS Y JAVASCRIPT

JavaScript se utiliza a menudo para manipular el contenido HTML y los estilos CSS dinámicamente, por ejemplo, cambiando estilos en respuesta a eventos del usuario.

- Separación de la estructura y la presentación.- Flexibilidad para estilizar múltiples páginas con una sola hoja de estilos. - Eficiencia en el rendimiento, ya que los estilos se aplican de manera uniforme a múltiples elementos.

DESVENTAJAS

- Curva de aprendizaje para dominar completamente todas las características.- Problemas de compatibilidad entre navegadores. - Dificultad para mantener hojas de estilo grandes en proyectos complejos.

VENTAJAS

REFERENCIA

https://blog.hubspot.es/website/que-es-css#:~:text=CSS%20permite%20separar%20el%20contenido,la%20actualizaci%C3%B3n%20de%20los%20estilos.