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

Get started free

CSS EN HTML

ALEXA SANDIN COLIN

Created on April 16, 2024

SI

Start designing with a free template

Discover more than 1500 professional designs like these:

Desktop Workspace

Decades Presentation

Psychology Presentation

Medical Dna Presentation

Geometric Project Presentation

Vaporwave presentation

Dynamic Higher Education Thesis

Explore all templates

Transcript

CSS en html

Alumno: Alexa Sandin Colin. Profesora: Karlita

Título TFG/TFM

Fecha

¿Qué es?

‘CSS, o Cascading Style Sheets, es un lenguaje de hojas de estilo utilizado para definir el aspecto y la presentación de documentos HTML. Es fundamental en el diseño web moderno, ya que permite separar el contenido de un sitio web de su estilo visual, lo que facilita la gestión y la actualización del diseño.

Aplicación en páginas web

En las páginas web, CSS se utiliza para controlar aspectos visuales como el color, el tamaño y la disposición de los elementos HTML. Puedes usar CSS para cambiar la fuente, el color de fondo, el espaciado entre párrafos, la posición de los elementos, etc.

Cómo se utiliza con HTML:

Para utilizar CSS con HTML, puedes incluir reglas CSS directamente en el documento HTML utilizando la etiqueta <style> dentro del elemento <head>, o puedes enlazar un archivo CSS externo utilizando la etiqueta <link> en la sección <head> del documento HTML.

Etiquetas que pueden utilizar atributos CSS:

<div><div style="background-color: #ff0000; color: #ffffff; padding: 10px;">Contenido del div</div>

<span><span style="font-style: italic;">Texto en cursiva</span>

<ul><ul style="list-style-type: square;"> <li>Elemento de lista</li> <li>Otro elemento de lista</li> </ul>

<p><p style="font-size: 16px; font-weight: bold;">Este es un párrafo</p>

<h1><h1 style="text-align: center; color: #333333;">Título Principal</h1>

<img><img src="imagen.jpg" alt="Imagen" style="width: 100px; height: auto;">

<a><a href="#" style="text-decoration: none; color: #0000ff;">Enlace sin subrayado</a>

<input><input type="text" style="width: 200px; padding: 5px;">

<button><button style="background-color: #008000; color: #ffffff;">Botón</button>

Etiquetas que pueden utilizar atributos CSS:

<div><div style="background-color: #ff0000; color: #ffffff; padding: 10px;">Contenido del div</div>

<span><span style="font-style: italic;">Texto en cursiva</span>

<ul><ul style="list-style-type: square;"> <li>Elemento de lista</li> <li>Otro elemento de lista</li> </ul>

<p><p style="font-size: 16px; font-weight: bold;">Este es un párrafo</p>

<h1><h1 style="text-align: center; color: #333333;">Título Principal</h1>

<img><img src="imagen.jpg" alt="Imagen" style="width: 100px; height: auto;">

<a><a href="#" style="text-decoration: none; color: #0000ff;">Enlace sin subrayado</a>

<input><input type="text" style="width: 200px; padding: 5px;">

<button><button style="background-color: #008000; color: #ffffff;">Botón</button>

RELACIÓN DE CSS Y JAVA SCRIPT

CSS y JavaScript son lenguajes diferentes que se utilizan para tareas diferentes en el desarrollo web. CSS se utiliza para definir la presentación y el estilo de un documento HTML, mientras que JavaScript se utiliza para la interactividad y la lógica del cliente en una página web. Sin embargo, JavaScript puede manipular atributos CSS dinámicamente, lo que permite cambiar el estilo de los elementos HTML en respuesta a eventos del usuario o condiciones específicas.

VENTAJAS Y DESVENTAJAS

VENTAJAS

  • Separación de preocupaciones: Permite separar el contenido de la presentación, lo que facilita el mantenimiento y la actualización del sitio web.
  • Control preciso del estilo: Proporciona un control detallado sobre la apariencia de los elementos HTML.
  • Reutilización de estilos: Permite definir estilos una vez y aplicarlos a múltiples elementos.
  • Eficiencia: Los navegadores pueden almacenar en caché los archivos CSS, lo que mejora el rendimiento del sitio web.

VENTAJAS

  • Curva de aprendizaje: Algunos aspectos de CSS pueden ser complejos de entender para los principiantes.
  • Inconsistencias entre navegadores: A veces, los estilos CSS se muestran de manera diferente en diferentes navegadores, lo que puede requerir ajustes adicionales.
  • Limitaciones en el diseño: CSS tiene algunas limitaciones en términos de diseño complejo, como diseños bidimensionales complejos o animaciones avanzadas, que pueden requerir JavaScript adicional.