Conceptos básicos de CSS

JOHAN SANTIAGO CAICEDO

Centro de comercio y servicios, SENA

Tecnólogo en Análisis y Desarrollo de Software

GUSTAVO ADOLFO SALAZAR

Popayán Cauca
2023
Introducción

Los desarrolladores de software deben de pulirse eficientemente en cuanto en

el maquetado y diseño de sus proyectos, para ello es importante utilizar las
Hojas de Estilo en Cascada (CSS). Las cuales emergen como un elemento
esencial que redefine la estética y presentación de las páginas HTML. CSS
proporciona un enfoque estructurado y eficiente para separar la estructura del
contenido de la presentación visual, permitiendo a los desarrolladores web
controlar la apariencia de sus creaciones con una precisión sin precedentes.
Este lenguaje de diseño, compuesto por reglas y selectores, se despliega en
diversas formas, desde estilos incrustados hasta archivos externos, otorgando
flexibilidad y modularidad al proceso de diseño. En este contexto, exploraremos
las partes fundamentales de una regla CSS, cómo se implementa la herencia y
los estilos en cascada, así como la variedad de selectores que facilitan la
aplicación selectiva de estilos a elementos específicos.
Conceptos básicos de CSS

1. ¿Qué es un CSS?

CSS, o Hojas de Estilo en Cascada (por sus siglas en inglés, Cascading Style
Sheets), es un lenguaje de diseño utilizado para describir la presentación y el
formato de un documento HTML o XML. Su función principal es separar la
estructura del contenido de un documento web de su presentación visual,
permitiendo un control más preciso y flexible sobre la apariencia de las
páginas.

2. Partes de una regla del CSS: Ejemplos

Una regla de CSS consta de dos partes fundamentales: el selector y las

propiedades con sus valores.

Ejemplo:

En este ejemplo, el selector es p, que se aplica a todos los elementos de

párrafo en el documento. Las propiedades y valores dentro de las llaves
especifican cómo se verán esos elementos, estableciendo el color del texto y el
tamaño de la fuente.

3. ¿Dónde se pueden definir los estilos CSS?

Los estilos CSS se pueden definir de varias maneras:

En línea: Dentro de la etiqueta HTML, utilizando el atributo style. Ejemplo:

En el documento: Dentro de la etiqueta <style> en el encabezado HTML.
Ejemplo:

En un archivo externo: Creando un archivo con extensión .css y vinculándolo al

documento HTML. Ejemplo:

4. ¿Cómo se implementa la herencia en el CSS, estilos en cascada?

La herencia en CSS se refiere a la capacidad de un elemento para heredar

estilos de sus elementos padre. Por ejemplo, si un estilo se aplica a un
elemento body, sus elementos secundarios, como p o h1, heredarán
automáticamente esos estilos a menos que se especifique lo contrario.

Ejemplo:
5. ¿Qué son los Selectores en CSS? Tipos

Los selectores en CSS son patrones que se utilizan para seleccionar y aplicar
estilos a elementos HTML específicos. Algunos tipos comunes de selectores
incluyen:

• Selectores de tipo: Seleccionan elementos basados en su tipo (etiqueta).

Ejemplo: p { ... }.
• Selectores de clase: Seleccionan elementos basados en su clase.
Ejemplo: .mi-clase { ... }.
• Selectores de ID: Seleccionan un elemento basado en su ID único.
Ejemplo: #mi-id { ... }.
• Selectores descendientes: Seleccionan elementos que son
descendientes de otro elemento. Ejemplo: div p { ... }.
• Selectores de atributo: Seleccionan elementos basados en sus atributos.
Ejemplo: input[type="text"] { ... }.

Conclusiones

• Las Hojas de Estilo en Cascada (CSS) han evolucionado para

convertirse en la columna vertebral estilística del diseño web
contemporáneo. Desde la sencillez de los selectores hasta la
complejidad de las reglas, CSS ofrece a los diseñadores y
desarrolladores un conjunto robusto de herramientas para
transformar la presentación visual de las páginas web.
• La capacidad de definir estilos en línea, en el documento o en
archivos externos permite una adaptabilidad única a las necesidades
y demandas de proyectos diversos.
• La herencia y la aplicación de estilos en cascada no solo simplifican
el proceso de diseño, sino que también garantizan una coherencia
visual a lo largo de la estructura del documento.