Saltar al contenido
Apuntes FS(+)

Clase 10 - CSS Básico

#curso #css

CSS Básico 💻

1. 📥 Formas de incluir CSS en HTML

<!-- Inline (no recomendado para producción) -->
<p style="color: blue; font-size: 16px;">Texto azul</p>


<!-- Internal (en el head) -->
<head>
  <style>
    p { color: blue; }
  </style>
</head>


<!-- External (recomendado) -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

2. 🎯 Selectores CSS modernos

Selectores básicos

/* Selector por Tag | Etiqueta */
p { color: blue; }


/* Selector por Class | Clase */
.highlight { background: yellow; }


/* Selector por ID */
#main { font-size: 20px; }


/* Selector Universal */
* { margin: 0; padding: 0; }

Combinadores

/* Elementos descendientes ->  father_tag descendant_tag  */
section p {
  color: red;
}


/* Elementos hijos ->  father_tag > child_tag  */
section > h2 {
  color: blue;
}


/* Elemento hermano adyacente -> first_tag + second_tag */
h2 + p {
  color: rebeccapurple;
}


/* Elemento hermano general -> first_tag ~ second_tag */
h2 ~ p {
  color: darkcyan;
}

Selectores de atributo

/* Existencia de atributo */
[data-type] { color: green; }


/* Valor exacto de atributo */
[data-type="info"] { color: blue; }


/* Inicio de atributo */
[href^="https"] { color: green; }


/* Fin de atributo */
[href$=".pdf"] { color: red; }


/* Contenido de atributo */
[class*="btn"] { cursor: pointer; }

Pseudo-clases esenciales

/* Estados de interacción */
a:hover { color: red; }
input:focus { border-color: blue; }
button:active { transform: scale(0.98); }


/* Selectores de posición */
li:first-child { font-weight: bold; }
li:last-child { margin-bottom: 0; }
p:nth-child(2n) { background: #f0f0f0; }


/* Estados de formulario */
input:valid { border-color: green; }
input:invalid { border-color: red; }
input:required { border-left: 3px solid orange; }

Pseudo clases funcionales

/* Selector de lista -> :is */
article :is(h1, h2, h3) {
  color: crimson;
}


/* Selector de lista sin especificidad -> :where */
:where(article, section, aside) h2 {
  color: orange;
}


/* Selector de contenido/descendientes */
article:has(img) {
  border: 2px solid black;
}


/* Selector de negación */
button:not(:disabled) {
  color: green;
}


/* Combinandolos */
form:has(input:invalid) :is(button[type="submit"]) {
  cursor: not-allowed;
}

Pseudo-elementos

/* Contenido generado */
p::before { content: "→ "; }
blockquote::after { content: '"'; }


/* Marca de listado */
li::marker { color: red; }


/* Selección de texto */
::selection { background: yellow; color: black; }


/* Primera Letra / Línea */
p::first-letter { font-size: 2em; }
p::first-line { font-weight: bold; }

3. 📦 Modelo de Caja (Box Model)

/* Box Model tradicional */
.box {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
  /* total width = 300 + 2*20 + 2*2 = 344px */
}


/* Box Model con Border Box (recomendado) */
.modern-box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
  /* total width = 300px (includes padding & border) */
}


/* Border Box Global */
*, *::before, *::after {
  box-sizing: border-box;
}


/* Propiedades de dimensión */
.flexible-box {
  min-width: 300px;
  max-width: 600px;
  min-height: 200px;
  max-height: 50vh;
}

4. 📏 Unidades de medida

/* Unidades absolutas */
.px-example { width: 500px; }


/* Unidades relativas */
.percent { width: 50%; }
.em { font-size: 1.5em; } /* relativa al padre */
.rem { font-size: 1.5rem; } /* relativa a la raíz */


/* Unidades basadas al viewport */
.viewport {
  width: 80vw; /* 80% del ancho del viewport */
  height: 50vh; /* 50% del alto del viewport */
}
.smallest { width: 100vmin; } /* vh o vw más chico */
.largest { width: 100vmax; } /* vh o vw más grande */


/* Unidades de tipografía */
.character-width { max-width: 70ch; } /* medida en caracteres */


/* Funciones de medidas */
.clamp-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
}
.min-max {
  width: min(100%, 800px);
  height: max(300px, 30vh);
}

5. 🔤 Variables CSS (Custom Properties)

/* Definición de variables */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --spacing-unit: 8px;
  --font-main: 'Arial', sans-serif;
}


/* Uso de variables */
.button {
  background-color: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2);
  font-family: var(--font-main);
}


/* Variables con fallback */
.card {
  color: var(--text-color, black);
}


/* Variables en un scope reducido */
.dark-theme {
  --primary-color: #66b3ff;
  --secondary-color: #868e96;
}

6. 🎨 Colores modernos

/* Propiedades tradicionales */
.colors {
  color: blue; /* color nombrado - no recomendada */
  background: #ff0000; /* color hexadecimal */
  border-color: rgb(0, 255, 0); /* color con valores RGB */
  outline-color: rgba(0, 0, 255, 0.5); /*  color con valores RGBA - incluye transparencia */
}


/* Color HSL (Hue, Saturation, Lightness) */
.hsl-example {
  background: hsl(180, 50%, 50%);
  color: hsla(240, 100%, 50%, 0.75);
}


/* Colores con formatos modernos */
.modern-colors {
  /* OKLCH para mejor percepción humana - (Lightness, Chroma, Hue) */
  color: oklch(80% 0.12 250);


  /* color-mix para mezclar colores */
  background: color-mix(in srgb, red 40%, blue);


  /* Gradientes */
  background: linear-gradient(to right, red, blue);
}
Visitar web Ejemplo de OKLCH vs HSL

7. 🔤 Tipografía

/* Propiedades de Texto básicas */
.typography {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  font-style: italic;
  text-align: center;
  text-decoration: underline;
}


/* Fuente custom con @font-face */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-display: swap;
}


/* Ajuste de texto - propiedad relativamente nueva */
.balanced-text {
  text-wrap: balance; /* Auto-balancea el texto */
}


/* Control spacing */
.text-control {
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
}

🎯 Extra: Metodologías y Buenas Prácticas

BEM (Block Element Modifier)

/* Bloque: un componente independiente */
.card { }


/* Elemento: parte de que compone un bloque */
.card__header { }
.card__body { }
.card__footer { }


/* Modificador: variación de un bloque o un elemento */
.card--featured { }
.card__header--large { }

CSS Reset

/* RESET de CSS */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html {
  font-size: 16px;
}


body {
  min-height: 100vh;
  line-height: 1.5;
}


img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}


input, button, textarea, select {
  font: inherit;
}