Lección: Introducción a CSS3 y Selectores Básicos
¿Qué es CSS?
CSS significa: Cascading Style Sheets (Hojas de Estilo en Cascada), CSS son las instrucciones que se usan para
dar estilo al documento HTML, como:
Colores
Tamaños
Posiciones
Tipografías
Diseño responsive
Sintaxis básica de CSS
selector {
propiedad: valor;
}
Ejemplo:
p {
color: blue;
}
¿Qué es un selector?
Un selector es la parte que indica cuál elemento HTML será estilizado.
Selector: h1 - elemento afectado: todos los <h1> del documento
h1 {
font-size: 30px;
}
1. Selector Universal (*)
El selector universal aplica estilos a todos los elementos de la página, independientemente de su tipo. Es útil
para establecer estilos globales, como resetear márgenes o fuentes predeterminadas.
Ejemplo:
* {
margin: 0;
color: black;
}
2. Selector de Etiqueta
Este selector aplica estilos a todos los elementos de un tipo específico de etiqueta HTML, como <p> para párrafos
o <a> para enlaces. Es ideal para estilos generales por tipo de elemento.
Ejemplo:
p {
color: blue;
font-size: 16px;
}
3. Selector de ID (#)
El selector de ID se usa para elementos únicos en la página. Un ID es un atributo único en HTML (como
id="miElemento"). Se denota con # seguido del nombre del ID.
HTML:
<div id="contenedor">Contenido único</div>
CSS:
#contenedor {
background-color: green;
padding: 10px;
}
4. Selector de Clase (.)
El selector de clase aplica estilos a múltiples elementos que comparten la misma clase. Una clase es un atributo
en HTML (como class="destacado") y puede usarse en varios elementos. Se denota con . seguido del nombre de la
clase.
HTML:
<p class="destacado">Párrafo destacado</p>
CSS:
.destacado {
border: 1px solid red;
font-weight: bold;
}
5. Selector Descendente
Este selector aplica estilos a elementos que son descendientes (hijos, nietos, etc.) de otro elemento. Se escribe
separando selectores con un espacio. Por ejemplo, ul li selecciona todos los li dentro de un ul.
HTML:
<div id="menu">
<ul>
<li>Ítem 1</li>
<li>Ítem 2</li>
</ul>
</div>
CSS:
#menu li {
list-style-type: none;
color: purple;
}
6. Pseudo-clases (:)
Las pseudo-clases permiten estilizar elementos basados en su estado o posición, no solo en su estructura. Se
denotan con : seguido del nombre (ej. :hover).
Ejemplos comunes:
• :hover: Cuando el mouse pasa sobre el elemento.
• :active: Cuando se hace clic en el elemento.
HTML:
<ul>
<li>Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
</ul>
CSS:
li:hover {
background-color: yellow; /* Fondo amarillo al pasar el mouse */
}
Resumen de Selectores
Cómo vincular un CSS a un HTML
Este es el método más común y profesional. Crea un archivo .css separado y lo vincula al HTML con la etiqueta
<link> en el <head>. Puede aplicar el mismo CSS a múltiples páginas HTML.
Paso a paso:
1. Cree un archivo CSS, por ejemplo, [Link] dentro de la carpeta css.
2. Escribe las reglas CSS en él (usando los selectores).
3. En el HTML, agregar <link rel="stylesheet" href="css/[Link]"> en el <head>.
<head>
<title>Ejemplo CSS Externo</title>
<link rel="stylesheet" href="css/[Link]">
</head>
Este contenido fue generado con inteligencia artificial (ChatGPT y Grok)
Adaptado y editado por Profesor Sergio Suárez Barajas