CSS (Cascading Style Sheets)
1. Introducción a CSS (Cascading Style Sheets)
CSS es un lenguaje de estilo que se utiliza para definir la presentación de un documento HTML.
Con CSS, se pueden establecer colores, fuentes, márgenes, alineación, disposición de los elementos
y mucho más.
1.1. ¿Qué es CSS?
● CSS se usa para separar el contenido de un documento HTML de su presentación visual
(como colores, tipografía y disposición).
● Utiliza selectores para aplicar estilos a los elementos HTML.
1.2. Sintaxis Básica de CSS
La sintaxis de CSS se compone de reglas que tienen dos partes principales:
1. Selector: Es el elemento o grupo de elementos a los que se aplicarán los estilos.
2. Declaración: Es el bloque de propiedad y valor que define cómo se debe estilizar el elemento
seleccionado.
Ejemplo básico de CSS:
h1 {
color: blue;
font-size: 24px;
}
● h1: Selector (aplica el estilo a los elementos <h1>).
● color: blue;: Propiedad y valor (establece el color de texto).
● font-size: 24px;: Otra propiedad (tamaño de la fuente).
2. Selectores en CSS
Los selectores permiten especificar qué elementos HTML se verán afectados por una regla CSS.
2.1. Selectores Básicos
Selector de tipo: Aplica estilo a todos los elementos de un tipo específico.
p{
color: red;
}
Selector de clase: Selecciona todos los elementos con una clase específica.
, .mi-clase {
font-family: Arial, sans-serif;
}
Selector de ID: Selecciona un único elemento con un ID específico.
#mi-id {
background-color: yellow;
}
2.2. Selectores Compuestos
Puedes combinar varios selectores para ser más específico:
h1, h2, h3 {
font-weight: bold;
}
Esto aplica el estilo a los encabezados <h1>, <h2> y <h3>.
2.3. Selectores de Atributo
Puedes seleccionar elementos basados en el valor de un atributo.
a[href^="https"] {
color: green; /* Para enlaces que comienzan con "https" */
}
2.4. Selectores de Pseudo-clase
Las pseudo-clases se utilizan para definir el estado de un elemento, como cuando el cursor está
sobre él.
:hover: Aplica estilo cuando el ratón pasa sobre un elemento.
a:hover {
color: red;
}
:focus: Se activa cuando un elemento, como un campo de formulario, recibe el foco.
input:focus {
border-color: blue;
}
1. Introducción a CSS (Cascading Style Sheets)
CSS es un lenguaje de estilo que se utiliza para definir la presentación de un documento HTML.
Con CSS, se pueden establecer colores, fuentes, márgenes, alineación, disposición de los elementos
y mucho más.
1.1. ¿Qué es CSS?
● CSS se usa para separar el contenido de un documento HTML de su presentación visual
(como colores, tipografía y disposición).
● Utiliza selectores para aplicar estilos a los elementos HTML.
1.2. Sintaxis Básica de CSS
La sintaxis de CSS se compone de reglas que tienen dos partes principales:
1. Selector: Es el elemento o grupo de elementos a los que se aplicarán los estilos.
2. Declaración: Es el bloque de propiedad y valor que define cómo se debe estilizar el elemento
seleccionado.
Ejemplo básico de CSS:
h1 {
color: blue;
font-size: 24px;
}
● h1: Selector (aplica el estilo a los elementos <h1>).
● color: blue;: Propiedad y valor (establece el color de texto).
● font-size: 24px;: Otra propiedad (tamaño de la fuente).
2. Selectores en CSS
Los selectores permiten especificar qué elementos HTML se verán afectados por una regla CSS.
2.1. Selectores Básicos
Selector de tipo: Aplica estilo a todos los elementos de un tipo específico.
p{
color: red;
}
Selector de clase: Selecciona todos los elementos con una clase específica.
, .mi-clase {
font-family: Arial, sans-serif;
}
Selector de ID: Selecciona un único elemento con un ID específico.
#mi-id {
background-color: yellow;
}
2.2. Selectores Compuestos
Puedes combinar varios selectores para ser más específico:
h1, h2, h3 {
font-weight: bold;
}
Esto aplica el estilo a los encabezados <h1>, <h2> y <h3>.
2.3. Selectores de Atributo
Puedes seleccionar elementos basados en el valor de un atributo.
a[href^="https"] {
color: green; /* Para enlaces que comienzan con "https" */
}
2.4. Selectores de Pseudo-clase
Las pseudo-clases se utilizan para definir el estado de un elemento, como cuando el cursor está
sobre él.
:hover: Aplica estilo cuando el ratón pasa sobre un elemento.
a:hover {
color: red;
}
:focus: Se activa cuando un elemento, como un campo de formulario, recibe el foco.
input:focus {
border-color: blue;
}
