8. Introducción a CSS: selectores, propiedades y valores

Capítulo 8: Introducción a CSS: selectores, propiedades y valores

Para que un sitio web sea visualmente atractivo y funcional, requiere algo más que HTML. Aquí es donde entra en juego CSS (Hojas de estilo en cascada). CSS es un lenguaje de estilo que se utiliza para describir la apariencia y el formato de un documento escrito en HTML. Es fundamental para el desarrollo web y se utiliza para definir colores, fuentes, diseño y más.

Selectores CSS

Los selectores CSS son la parte de CSS que selecciona el elemento HTML al que desea aplicar estilo. Existen varios tipos de selectores, pero nos centraremos en los más comunes: selectores de elemento, clase e ID.

• Selectores de elementos: Seleccionan elementos según el nombre del elemento HTML. Por ejemplo, si queremos aplicar estilo a todos los párrafos (<p>) de nuestro documento, usaremos el selector de elementos. Ejemplo: p {color: rojo;}
• Selectores de clase: Seleccionan elementos según el atributo de clase del elemento HTML. Las clases son útiles cuando desea crear estilos CSS que puedan reutilizarse. Ejemplo: .myClass {font-size: 20px;}
• Selectores de ID: Seleccionan elementos según el atributo de ID del elemento HTML. Los ID son únicos y deben usarse cuando desee diseñar un solo elemento. Ejemplo: #miID {color-fondo: azul;}

Propiedades CSS

Las propiedades CSS son lo que desea aplicar estilo en el elemento seleccionado. Por ejemplo, es posible que desee cambiar el color de fondo, la fuente, el color de la fuente, el espaciado, el margen, el borde y más. Cada propiedad tiene un nombre y va seguida de dos puntos y un valor. Por ejemplo: p {color: rojo;} - 'color' es la propiedad y 'rojo' es el valor.

Valores CSS

Los valores CSS son los ajustes que realizas en la propiedad elegida. En el ejemplo anterior, "rojo" es el valor que asignamos a la propiedad "color". Los valores pueden ser palabras clave como "rojo", "azul", "verde", números, porcentajes y una amplia gama de otras opciones dependiendo de la propiedad a la que le esté aplicando estilo.

Conclusión

Comprender los selectores, las propiedades y los valores de CSS es fundamental para convertirse en un desarrollador front-end eficaz. Son la base para crear sitios web funcionales y visualmente atractivos. En el próximo capítulo, exploraremos CSS más profundamente, aprenderemos sobre el modelo de caja de CSS, el posicionamiento, las animaciones y más.

Siguiente página del libro electrónico gratuito:

44Introducción a CSS: selectores, propiedades y valores: Introducción a CSS

3 minutos