Sintaxis de selectores y propiedades

CSS (Cascading Style Sheets) es el lenguaje que permite dar estilo y presentación a los documentos HTML. Para aplicar estilos de manera efectiva, es fundamental comprender cómo funciona la sintaxis básica de CSS y cómo seleccionar los elementos que queremos modificar.

Anatomía de una regla CSS

Una regla CSS está compuesta por dos partes principales: el selector y el bloque de declaraciones. Esta estructura básica se mantiene constante en todo el código CSS que escribamos.

selector {
    property: value;
    property: value;
}

El selector indica qué elementos HTML queremos modificar, mientras que las declaraciones especifican cómo queremos que se vean esos elementos. Cada declaración consta de una propiedad y su valor correspondiente, separados por dos puntos y terminados con punto y coma.

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

En este ejemplo, estamos seleccionando todos los elementos h1 y aplicándoles un color azul y un tamaño de fuente de 24 píxeles.

Selectores básicos

Los selectores de elemento son la forma más directa de aplicar estilos. Simplemente utilizamos el nombre de la etiqueta HTML que queremos modificar.

p {
    line-height: 1.5;
}

div {
    margin: 10px;
}

Los selectores de clase nos permiten aplicar estilos a elementos específicos que comparten una característica común. Se identifican con un punto seguido del nombre de la clase.

.highlight {
    background-color: yellow;
}

.container {
    width: 100%;
    max-width: 1200px;
}

Los selectores de ID se utilizan para elementos únicos en la página. Se identifican con una almohadilla seguida del nombre del identificador.

#header {
    background-color: navy;
    height: 80px;
}

#main-content {
    padding: 20px;
}

Selectores combinados

Podemos combinar selectores para ser más específicos en nuestras selecciones. El selector descendente aplica estilos a elementos que están dentro de otros elementos.

div p {
    color: gray;
}

.sidebar h3 {
    font-weight: bold;
    margin-bottom: 15px;
}

El selector de hijo directo utiliza el símbolo > para seleccionar solo los elementos que son hijos directos de otro elemento.

ul > li {
    list-style-type: square;
}

.menu > a {
    text-decoration: none;
}

Propiedades fundamentales

Las propiedades de texto controlan la apariencia del contenido textual. Estas propiedades son esenciales para mejorar la legibilidad y el diseño tipográfico.

.text-content {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    text-decoration: underline;
}

Las propiedades de color permiten modificar tanto el color del texto como el fondo de los elementos.

.colored-box {
    color: white;
    background-color: #333333;
    border: 2px solid red;
}

Las propiedades de espaciado controlan el espacio alrededor y dentro de los elementos, siendo fundamentales para el diseño y la maquetación.

.spaced-element {
    margin: 20px;
    padding: 15px;
    border: 1px solid black;
}

Valores y unidades

CSS admite diferentes tipos de valores para las propiedades. Los valores numéricos pueden expresarse en píxeles para medidas absolutas o en porcentajes para medidas relativas.

.responsive-box {
    width: 300px;
    height: 50%;
    margin: 10px auto;
}

Los colores pueden especificarse de múltiples formas: nombres predefinidos, valores hexadecimales o funciones RGB.

.color-examples {
    color: red;
    background-color: #ff6600;
    border-color: rgb(255, 0, 128);
}

Especificidad y cascada

La especificidad determina qué estilos se aplican cuando múltiples reglas afectan al mismo elemento. Los selectores de ID tienen mayor especificidad que las clases, y estas tienen mayor especificidad que los selectores de elemento.

p {
    color: black;
}

.special {
    color: blue;
}

#unique {
    color: red;
}

En este ejemplo, un párrafo con clase "special" e ID "unique" se mostrará en rojo, ya que el selector de ID tiene la mayor especificidad.

La herencia permite que ciertos estilos se transmitan de elementos padre a elementos hijo, lo que facilita la aplicación consistente de estilos en toda la página.

body {
    font-family: Georgia, serif;
    color: #333;
}

Estas propiedades se heredarán automáticamente por todos los elementos dentro del body, a menos que se especifique lo contrario.