8.9. Introducción a CSS: selectores, propiedades y valores: Cómo aplicar valores a las propiedades de CSS

Introducción a CSS: Selectores, Propiedades y Valores

CSS, u hojas de estilo en cascada, es un lenguaje de estilo utilizado para describir la apariencia de un documento escrito en HTML. CSS describe cómo se deben mostrar los elementos HTML en la pantalla, el papel u otros medios. CSS ahorra mucho trabajo ya que controla el diseño de varias páginas a la vez.

Selectores CSS

Los selectores CSS se utilizan para "buscar" (o seleccionar) elementos HTML según su nombre de elemento, ID, clase, atributo y más.

Por ejemplo, un selector de tipo selecciona elementos por nombre de nodo. Por ejemplo, el selector de tipo 'h1' selecciona todos los elementos <h1>.

<estilo>
h1 {
  color azul;
}
</estilo>

Este ejemplo selecciona todos los <h1> elementos y cambia el color del texto a azul.

Propiedades CSS

Las propiedades CSS se utilizan para especificar el estilo de un elemento. Cada propiedad tiene un nombre y un valor. El nombre de la propiedad va seguido de dos puntos y el valor de la propiedad. Una declaración CSS siempre termina con un punto y coma y las declaraciones de estilo están separadas por un espacio.

Por ejemplo:

<estilo>
PAG {
  color rojo;
  alineación de texto: centro;
}
</estilo>

Este ejemplo establece el color del texto en rojo y alinea el texto en el centro.

Valores CSS

Los valores CSS se definen junto con las propiedades para diseñar elementos HTML. Por ejemplo, la propiedad de color puede tener valores como 'rojo', 'azul', 'verde', etc. Además, la propiedad de ancho puede tener valores como '100px', '50%', etc.

Ejemplo:

<estilo>
PAG {
  tamaño de fuente: 20px;
  color blanco;
  color de fondo: negro;
}
</estilo>

Este ejemplo establece el tamaño de fuente en 20 píxeles, el color del texto en blanco y el color de fondo en negro.

Cómo aplicar valores a propiedades CSS

Aplicar valores a las propiedades CSS es bastante simple. Primero, debe seleccionar el elemento al que desea aplicar el estilo. A continuación, debe definir la propiedad que desea cambiar. Finalmente, debe establecer el valor que desea aplicar a esta propiedad.

Por ejemplo, si desea cambiar el color de todos sus párrafos a azul, puede hacerlo de la siguiente manera:

<estilo>
PAG {
  color azul;
}
</estilo>

En este ejemplo, 'p' es el selector, 'color' es la propiedad y 'azul' es el valor.

CSS es un lenguaje potente que permite a los desarrolladores controlar la apariencia de sus sitios web. Al comprender cómo funcionan los selectores, propiedades y valores de CSS, podrá crear sitios web más atractivos y eficaces.

Esperamos que esta guía le haya ayudado a comprender mejor CSS. Recuerda que la práctica es clave a la hora de aprender y dominar CSS. Así que sigue practicando y experimentando con diferentes selectores, propiedades y valores.

Siguiente página del libro electrónico gratuito:

53Introducción a CSS: selectores, propiedades y valores: comprensión de la cascada y la herencia en CSS

3 minutos