Cómo trabajar con CSS - Guía para principiantes

Primeros Pasos con CSS

Como se ha mencionado anteriormente CSS es la ropa, los colores y hasta los accesorios que le dan vida a ese esqueleto. Para empezar, se necesita:

Un archivo HTML (ejemplo: index.html)
Un archivo CSS (ejemplo: styles.css)
Un editor de texto (ejemplo: Visual Studio Code, Sublime Text, etc.)

Archivo: index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="estilos.css" />
  </head>
  <body>
    <h1>¡Hola Mundo!</h1>
  </body>
</html>

Archivo: estilos.css

/* estilos.css */
h1 {
  color: #ff5733;
  text-align: center;
}

Ejemplo práctico

<div class="producto">
  <img src="producto.jpg" />
  <h3>Zapatillas Deportivas</h3>
  <p>$59.99</p>
  <button class="btn-comprar">Añadir al carrito</button>
</div>

.producto {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
  max-width: 300px;
  transition: transform 0.3s;
}

.producto:hover {
  transform: translateY(-5px);
}

.btn-comprar {
  background: var(--color-primario);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

@media (max-width: 600px) {
  .producto {
    max-width: 100%;
  }
}

Importancia del CSS en el desarrollo web

CSS es esencial para la usabilidad, el rendimiento y la expe...

CSS en linea, interno y externo

Aprende a trabajar con CSS en linea, interno y externo, incl...

Referencias

MDN Contributors. (17 de diciembre del 2024). CSS. https://developer.mozilla.org/es/docs/Web/CSS

Web.dev. Learn CSS. https://web.dev/

Cómo trabajar con CSS - Guía para principiantes

Primeros Pasos con CSS

Ejemplo práctico

Conceptos Básicos de HTML

Conceptos Básicos de JavaScript

Conceptos Básicos SQL

Conceptos Básicos de GIT

Conceptos Básicos de Python

Conceptos Básicos de UML