Saltar al contenido principal

Introducción a CSS

CSS (Cascading Style Sheets) es el lenguaje utilizado para dar estilo a las páginas web. Permite cambiar colores, tamaños, márgenes, ubicaciones y mucho más.

¿Cómo se utiliza CSS?​

Hay varias formas de aplicar CSS en una página HTML:

  • CSS en línea: dentro de un atributo style directamente en el elemento HTML. No es recomendable para proyectos grandes.
<p style="color: red;">Texto en rojo</p>
http://localhost:3000

Texto en rojo

  • CSS interno: dentro de una etiqueta <style> en el <head> del documento HTML.
<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: green;
      }
    </style>
  </head>
  <body>
    <p>Texto en verde</p>
  </body>
</html>
http://localhost:3000

Texto en verde

  • CSS externo: se crea un archivo .css separado y se importa con <link>.
<!-- index.html -->
<link rel="stylesheet" href="estilos.css">
/* estilos.css */
body {
  background-color: #fafafa;
  font-family: sans-serif;
}

1. Selectores​

Los selectores permiten apuntar a los elementos HTML que quieres estilizar.

Selector por etiqueta​

p {
  color: blue;
}

Selector por clase​

.texto-rojo {
  color: red;
}

Selector por ID​

#titulo-principal {
  font-size: 32px;
}
<!DOCTYPE html>
<html>
  <body>
    <p id="texto-rojo">Este texto será rojo.</p>
  </body>
</html>
http://localhost:3000

Este texto será rojo.

2. Propiedades comunes​

Algunas propiedades comunes en CSS incluyen:

  • color
  • background-color
  • padding
  • margin
  • border
  • font-size
  • text-align
.box {
  color: white;
  background-color: steelblue;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #333;
}

3. Medidas Absolutas vs Relativas​

  • Absolutas:

    • px (píxeles)
    • cm (centímetros)
    • in (pulgadas)

  • Relativas:

    • em: equivale al tamaño de fuente del elemento padre. Por ejemplo, si el padre tiene font-size: 16px, entonces 1em = 16px. Si usas 2em, serían 32px.
    • rem: equivale al tamaño de fuente raíz, normalmente definido en el elemento <html>. Por ejemplo, si html { font-size: 16px; }, entonces 1rem = 16px en toda la página, sin importar el padre.
    • %: relativo al tamaño del contenedor padre.
    • vw, vh: relativo al ancho (vw) o alto (vh) del viewport (ventana del navegador). 100vw es el 100% del ancho de la ventana.
.texto-absoluto {
  font-size: 16px;
}
.texto-relativo {
  font-size: 2em;
}
http://localhost:3000

Texto con tamaño absoluto

Texto con tamaño relativo

4. Pseudo-clases​

Las pseudo-clases permiten aplicar estilos según el estado del elemento.

a:hover {
  color: red;
}
input:focus {
  border-color: blue;
}
http://localhost:3000

Enlace de ejemplo

5. Flexbox​

Flexbox permite distribuir elementos fácilmente dentro de un contenedor flexible.

Propiedades comunes del contenedor:

  • display: flex

  • justify-content: alineación horizontal

    • flex-start, center, flex-end, space-between, space-around

  • align-items: alineación vertical

.contenedor {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 150px;
  background-color: #f0f0f0;
}
.item {
  background: teal;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

Enlaces de referencia:

6. Media Queries​

Permiten adaptar los estilos según el tamaño de pantalla. Muy útiles para diseño responsivo.

body {
  background-color: lightgreen;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

El only screen es una consulta que se aplica solo a pantallas, excluyendo otros dispositivos como impresoras.

http://localhost:3000

Redimensiona la ventana del navegador. Cuando el ancho de este documento sea de 600 píxeles o menos, el color de fondo será "lightblue", de lo contrario será "lightgreen".

.flex-mediaquery-demo {
    display: flex;
    flex-direction: row;
    gap: 16px;
    background: #f5f5f5;
    padding: 16px;
}
.flex-mediaquery-demo .item {
    background: #1976d2;
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    text-align: center;
}
@media (max-width: 600px) {
    .flex-mediaquery-demo {
        flex-direction: column;
        align-items: stretch;
    }
}
http://localhost:3000
Elemento 1
Elemento 2
Elemento 3

Enlaces sobre Media query: