02-Sintaxis CSS

---

Elementos Semánticos en HTML

• CSS Syntax
• 1. Selectors - Identifican los elementos a los que se aplican las reglas de estilo.
• 2. Properties - Definen qué aspecto tendrán los elementos seleccionados.
• 3. Values - Especifican el valor para cada propiedad.
• 4. Declaration Block - Contiene una o más declaraciones de estilo.
• 5. Comments - Se utilizan para dejar notas en el código sin afectar la presentación.

---

CSS Syntax

La sintaxis de CSS (Cascading Style Sheets) es el conjunto de reglas que definen cómo se aplican los estilos a los elementos HTML en una página web. Comprender esta sintaxis es esencial para poder aplicar correctamente estilos y lograr una presentación visual atractiva.

Una regla CSS básica se compone de dos partes principales: el selector y el bloque de declaración. El selector indica a qué elementos HTML se aplicará el estilo, mientras que el bloque de declaración contiene una o más declaraciones separadas por punto y coma.

A continuación se presenta la estructura básica de una regla CSS:

selector {
    propiedad: valor;
}
                

Por ejemplo, si queremos cambiar el color del texto de todos los elementos <h1> a azul, escribiríamos:

h1 {
    color: blue;
}
                

En este caso, <h1> es el selector, color es la propiedad y blue es el valor.

Además, es posible incluir múltiples declaraciones dentro de un solo bloque de declaración, separándolas con un punto y coma. Por ejemplo:

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}
                

En este caso, el elemento <h1> tendrá un color de texto azul, un tamaño de fuente de 24 píxeles y el texto estará alineado al centro.

Los comentarios en CSS se pueden agregar para facilitar la lectura del código, utilizando la siguiente sintaxis:

/* Este es un comentario */
                

Los comentarios son útiles para anotar explicaciones o recordatorios en el código, sin que afecten la ejecución de los estilos.

En resumen, la sintaxis de CSS es fundamental para definir cómo se presentan los elementos en una página web. Al dominarla, los desarrolladores pueden crear interfaces atractivas y coherentes que mejoren la experiencia del usuario.

---

Ejemplos Visuales

A continuación se muestra un ejemplo visual del uso de CSS para cambiar el color de un encabezado (H1):

Ejemplo Visual: Cambiar el color de un encabezado H1

<h1>Bienvenido a mi página</h1>
                

Y la regla CSS utilizada es:

h1 {
    color: red; /* Cambia el color del texto a rojo */
}
                

El resultado en la página web sería:

Bienvenido a mi página

Esto demuestra cómo aplicar estilos utilizando CSS de manera efectiva para mejorar la presentación de los elementos HTML.

---

...

Selectores

Los selectores son patrones utilizados en CSS para seleccionar los elementos HTML a los que se aplicarán las reglas de estilo. Existen varios tipos de selectores, cada uno con su propio propósito y aplicación.

A continuación, se describen los tipos más comunes de selectores:

• Selector de tipo: Selecciona todos los elementos de un tipo específico. Por ejemplo:

elemento {
    propiedad: valor;
}
            

Ejemplo:

p {
    color: blue; /* Aplica el color azul a todos los párrafos */
}
            

• Selector de clase: Selecciona todos los elementos que tienen una clase específica. Se denota con un punto (.) antes del nombre de la clase:

.clase {
    propiedad: valor;
}
            

Ejemplo:

.titulo {
    font-size: 20px; /* Aplica un tamaño de fuente de 20 píxeles a los elementos con clase 'titulo' */
}
            

• Selector de ID: Selecciona un único elemento que tenga un ID específico, denotado por un símbolo de almohadilla (#):

#id {
    propiedad: valor;
}
            

Ejemplo:

#encabezado {
    background-color: red; /* Aplica un fondo rojo al elemento con ID 'encabezado' */
}
            

• Selector de atributo: Selecciona elementos basados en la presencia o valor de un atributo. Por ejemplo:

[elemento[atributo="valor"]] {
    propiedad: valor;
}
            

Ejemplo:

input[type="text"] {
    border: 1px solid black; /* Aplica un borde negro a todos los inputs de tipo texto */
}
            

Los selectores son una parte fundamental de CSS, ya que permiten aplicar estilos específicos a diferentes elementos, creando así un diseño más controlado y personalizado. Con el dominio de los selectores, los desarrolladores pueden construir sitios web visualmente atractivos y funcionales.

---

Ejemplos Visuales: Selectores

A continuación se presentan ejemplos visuales de cómo se utilizan los selectores en CSS:

Selector de tipo

Este es un párrafo (color azul)

Este es otro párrafo (color azul)

p {
    color: blue; /* Cambia el color del texto a azul */
}
        

Selector de clase

Este es un título con clase (color negro)

Este párrafo también puede estar estilizado con la misma clase.

.titulo {
    color: black; /* Cambia el color del texto a negro */
}

p {
    color: blue; /* Cambia el color del texto a azul */
}
        

Selector de ID

Bienvenido a mi página (fondo rojo)

#encabezado {
    background-color: red; /* Cambia el fondo a rojo */
    color: white; /* Cambia el color del texto a blanco */
}
        

Selector de atributo

input[type="text"] {
    border: 1px solid black; /* Cambia el borde del input a negro */
    padding: 5px; /* Agrega espacio interno */
}
        

Estos ejemplos ilustran cómo los diferentes tipos de selectores en CSS pueden ser utilizados para aplicar estilos específicos a los elementos HTML.

---

Properties

Las propiedades en CSS son las características que se pueden modificar para cambiar la apariencia de un elemento HTML. Cada propiedad tiene un valor que define cómo se aplicará al elemento seleccionado. Por ejemplo, algunas propiedades comunes son:

• color: Define el color del texto.
• background-color: Establece el color de fondo del elemento.
• font-size: Controla el tamaño de la fuente del texto.
• margin: Define el espacio exterior de un elemento.
• padding: Controla el espacio interior entre el contenido de un elemento y su borde.

Cada propiedad se debe escribir en el formato nombre: valor;. Por ejemplo:

h1 {
    color: blue; /* Cambia el color del texto a azul */
    font-size: 24px; /* Establece el tamaño de fuente a 24 píxeles */
}
        

En este caso, se están utilizando dos propiedades: color y font-size, con sus respectivos valores.

Las propiedades pueden combinarse dentro de un bloque de declaración, lo que permite personalizar múltiples aspectos de un elemento en una sola regla CSS. Esto ayuda a mantener el código organizado y eficiente.

En resumen, las propiedades son fundamentales en CSS, ya que permiten a los desarrolladores web definir cómo deben mostrarse los elementos en una página, mejorando así la experiencia del usuario y la estética general del sitio.

---

Values

En CSS, los valores son los datos asignados a las propiedades para definir cómo se deben aplicar en los elementos HTML. Cada propiedad tiene un conjunto específico de valores que se pueden utilizar, y estos pueden ser de diferentes tipos.

Algunos ejemplos de tipos de valores son:

• Color: Los valores de color pueden ser nombres de colores (como red), códigos hexadecimales (como #ff0000), o valores RGB (como rgb(255, 0, 0)).
• Tamaño: Para propiedades como font-size, los valores pueden ser en píxeles (como 16px), ems (como 1.5em), o porcentajes (como 100%).
• Medidas: Otras propiedades pueden usar valores como length (como 10px o 5%), time (como 2s), o angle (como 45deg).
• Palabras clave: Algunas propiedades aceptan palabras clave como auto, inherit, o none.

Un ejemplo de uso de valores en CSS es el siguiente:

h1 {
    color: blue; /* Valor de color */
    font-size: 24px; /* Valor de tamaño */
    margin: 20px; /* Valor de margen */
}
        

En este caso, color, font-size y margin son propiedades que utilizan diferentes tipos de valores para definir el estilo del elemento <h1>.

Es esencial elegir los valores correctos para cada propiedad, ya que esto impacta directamente en la presentación y la usabilidad de la página web. Conocer y comprender los diferentes tipos de valores disponibles en CSS permite a los desarrolladores tener un control preciso sobre el diseño de sus sitios.

---

Declaration Block

El bloque de declaración en CSS es la parte de una regla CSS que contiene una o más declaraciones de estilo. Este bloque se encuentra entre llaves { } y define cómo se deben presentar los elementos seleccionados.

La sintaxis general de un bloque de declaración es la siguiente:

selector {
    propiedad1: valor1;
    propiedad2: valor2;
    /* ... otras propiedades ... */
}
        

En el bloque de declaración, cada línea contiene una propiedad CSS seguida de un valor, y las declaraciones están separadas por punto y coma ;. Es importante asegurarse de incluir el punto y coma al final de cada declaración, aunque el último puede omitirse sin causar errores.

A continuación, se presenta un ejemplo de un bloque de declaración con múltiples propiedades:

h1 {
    color: blue; /* Cambia el color del texto a azul */
    font-size: 24px; /* Establece el tamaño de fuente en 24 píxeles */
    text-align: center; /* Alinea el texto al centro */
    margin: 20px; /* Establece un margen de 20 píxeles */
}
        

En este ejemplo, el bloque de declaración para el selector h1 contiene cuatro declaraciones que afectan a la presentación de los elementos <h1> en la página web.

Los bloques de declaración son fundamentales en CSS, ya que permiten a los desarrolladores aplicar múltiples estilos a un elemento de manera organizada y eficiente, facilitando la gestión y la lectura del código.

---

---

Ir al índice

---

---