Sesión 7 – Estilizar texto y colores

1

Selectores de clase e IDAplicar estilos a elementos específicos

Clase (.nombre-clase): Se puede aplicar a múltiples elementos. Se define con el atributo class en HTML.

ID (#nombre-id): Debe ser único en la página. Se define con el atributo id en HTML.

Ejemplo HTML

                HTML
<h1 id="main-title">Título principal</h1>
<p class="highlight">Este párrafo está resaltado.</p>
<p class="highlight">Este también está resaltado.</p>
<p>Este es un párrafo normal.</p>
            

Ejemplo CSS

                CSS
.highlight {
    background-color: yellow;
    font-weight: bold;
}

#main-title {
    font-family: 'Georgia', serif;
    color: darkblue;
    text-align: center;
}
            

Buena práctica: Prefiere las clases a los IDs para los estilos CSS. Los IDs tienen una especificidad muy alta que dificulta sobrescribir los estilos. Reserva los IDs para anclas de enlace y JavaScript.

2

Propiedades de textoTipografía, tamaño, decoración y alineación

                CSS
p {
    font-family: 'Verdana', Geneva, sans-serif;  /* Tipografía con alternativas */
    font-size: 16px;                              /* Tamaño */
    font-weight: bold;                            /* Grosor: normal, bold, 100-900 */
    font-style: italic;                           /* Estilo: normal, italic, oblique */
    text-decoration: underline;                   /* none, underline, line-through */
    text-transform: uppercase;                    /* uppercase, lowercase, capitalize */
    text-align: justify;                          /* left, center, right, justify */
    line-height: 1.8;                             /* Interlineado */
    letter-spacing: 1px;                          /* Espaciado entre letras */
    word-spacing: 3px;                            /* Espaciado entre palabras */
}
            

3

Sistemas de color en CSSNombres, hex, RGB, RGBA, HSL

Sistema	Ejemplo	Descripción
Nombre	`color: red;`	Nombres predefinidos (~140 colores)
Hexadecimal	`color: #FF5733;`	6 dígitos hex: RR GG BB
Hex abreviado	`color: #F53;`	3 dígitos cuando los pares se repiten
RGB	`color: rgb(255, 87, 51);`	Rojo, Verde, Azul (0-255)
RGBA	`color: rgba(255, 87, 51, 0.5);`	RGB + canal alfa (transparencia 0-1)
HSL	`color: hsl(14, 100%, 60%);`	Tono, Saturación, Luminosidad

Personalizar enlaces

                CSS
/* Ejemplo de personalización de enlaces */
a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    color: #004499;
    text-decoration: underline;
}

a:visited {
    color: #663399;
}
            

4

Combinar múltiples clasesUn elemento puede tener varias clases

                HTML
<p class="text-large text-center text-blue">Texto grande, centrado y azul.</p>
            

                CSS
.text-large { font-size: 24px; }
.text-center { text-align: center; }
.text-blue { color: #0066cc; }
            

5

Conversor de coloresElige un color y observa su representación en cada sistema

Selector de color interactivo

Elige un color:

Rojo (R): 124

Verde (G): 58

Azul (B): 237

#7c3aed

Hexadecimal

#7c3aed

RGB

rgb(124, 58, 237)

RGBA (50%)

rgba(124, 58, 237, 0.5)

HSL

hsl(262, 83%, 58%)

6

Ejercicio prácticoAplica lo aprendido

Crea clases CSS para diferentes estilos de texto: .text-small, .text-large, .text-center, .text-highlight.
Aplica las clases a varios elementos de tu página.
Crea un ID #main-title para el título principal con un estilo personalizado.
Personaliza el estilo de los enlaces (<a>) con colores para los estados normal, hover y visitado.
Experimenta con al menos 3 sistemas de color diferentes (nombres, hex, rgb).
Cambia la tipografía del cuerpo de la página y usa una tipografía diferente para los títulos.
Aplica text-transform: uppercase a los títulos <h2>.