Presentación - Fundamentos de CSS-1

Desarrollo de
software Web
Pablo Emilio Cuello Gómez

Ingeniero de sistemas
Coordinador del Centro de Tecnologías

de Información y Comunicaciones
Universidad Pontificia Bolivariana
Experiencia:
UPB: 10 años
Wala Digital: 6 años
Fundamentos de CSS
CSS (Cascading Style Sheets) Hojas de estilo en cascada

en español, no es realmente un lenguaje de
programación, tampoco es un lenguaje de marcado. Es
un lenguaje de hojas de estilo, es decir, te permite aplicar
estilos de manera selectiva a elementos en documentos
HTML.
¿Como incluir código
CSS?
Ejemplo de Inclusión Inline:
Ejemplo de Inclusión
Internal:
¿Como incluir código
CSS?
Ejemplo de Inclusión
External:
Anatomía de una regla
CSS
Selector
El elemento HTML en el que comienza la regla. Esta selecciona el(los) elemento(s) a dar
estilo (en este caso, los elementos <p> ). Para dar estilo a un elemento diferente, solo
cambia el selector.
Declaración
Una sola regla como color: red; especifica a cuál de las propiedades del elemento quieres
dar estilo.
Propiedades
Maneras en las cuales puedes dar estilo a un elemento HTML. (En este caso, color es una
propiedad del elemento <p> ). En CSS, seleccionas qué propiedad quieres afectar en tu
regla.
Valor de la propiedad
A la derecha de la propiedad, después de los dos puntos (:), tienes el valor de la propiedad,
para elegir una de las muchas posibles apariencias para una propiedad determinada (hay
muchos valores para color además de red).
Anatomía de una regla
CSS
Modificar varios valores de propiedad al mismo tiempo:
Aplicar la misma regla a varios elementos:

Tipos de selectores CSS
 Selector de elemento (llamado algunas veces selector de
etiqueta o tipo): Selecciona todos los elementos HTML del
tipo especificado.
 Selector de identificación(ID): selecciona el elemento en

la página con el ID especificado (en una página HTML dada,
solo se permite un único elemento por ID).
 Selector de clase: Los elementos en la página con la clase

especificada (una clase puede aparecer varias veces en una
página).
 Selector de atributo: Los elementos en una página con el

atributo especificado.
 Selector de pseudoclase: Los elementos especificados,

pero solo cuando esté en el estado especificado, por
ejemplo cuando el puntero esté sobre él.
Reglas CSS mas
comunes
 color: Define el color del texto dentro de un elemento.
 background-color: Define el color de fondo
 font-family: Especifica la fuente del texto.
 font-size: Ajusta el tamaño del texto.
 margin: Controla el espacio exterior de un elemento, es

decir, la distancia entre el borde de un elemento y los
elementos circundantes.
 padding: Controla el espacio interior de un elemento, es

decir, la distancia entre el contenido del elemento y su
borde.
 Define un borde alrededor de un elemento. Puedes

controlar el grosor, el estilo y el color del borde.
 width y height: Define el ancho y el alto de un elemento

Selectores Agrupados
Los selectores agrupados permiten aplicar las mismas reglas
de estilo a varios elementos a la vez, optimizando el código y
reduciendo la repetición. Son muy útiles cuando varios
elementos HTML necesitan compartir un conjunto común de
estilos.
Selectores
Descendientes
Los selectores descendientes aplican estilos a los elementos
que están anidados dentro de otros elementos. Este selector
se basa en la jerarquía de los elementos HTML, permitiendo
estilizar elementos hijos que están contenidos dentro de un
elemento padre específico.
Pseudo-Clases
Las pseudo-clases permiten aplicar estilos a elementos en
estados específicos o bajo condiciones especiales. Esto mejora
la interactividad de los sitios web y proporciona efectos
visuales reactivos.
Pseudo-Clases de Interacción:
:hover: Se activa cuando el usuario pasa el cursor sobre el

elemento.
:focus: Se activa cuando el elemento, generalmente un campo

de formulario o un enlace, recibe el foco.
:active: Se activa cuando un elemento está siendo clicado o

presionado.
Pseudo-Clases Estructurales
Las pseudo-clases estructurales en CSS son muy útiles cuando
queremos aplicar estilos a elementos en función de su
posición dentro de un conjunto de hermanos o en relación
con su contenedor. Estas pseudo-clases permiten un control
más específico y dinámico del estilo de los elementos sin
necesidad de modificar directamente el HTML, lo que las
convierte en una herramienta poderosa para la creación de
interfaces web dinámicas y adaptables.
:nth-child(): La pseudo-clase :nth-child() permite aplicar

estilos a los elementos según su posición entre sus hermanos,
basado en una fórmula o patrón. Esta fórmula puede ser un
número fijo, odd (impares), even (pares), o una expresión
matemática.
:first-child: selecciona el primer elemento hijo de su
contenedor. Solo afecta al primer elemento de cualquier tipo
dentro de su contenedor.
:last-child: selecciona el último elemento hijo de su

contenedor. Esto es útil cuando queremos aplicar
un estilo especial al último elemento dentro de un
grupo.
:first-child: selecciona el primer elemento hijo de su
contenedor. Solo afecta al primer elemento de cualquier tipo
dentro de su contenedor.
:last-child: selecciona el último elemento hijo de su

contenedor. Esto es útil cuando queremos aplicar
un estilo especial al último elemento dentro de un
grupo.
Inclusión de fuentes
Se pueden incluir fuentes externas a nuestros proyectos haciendo uso de Google Fonts Para esto, se
incluye el recurso en el sitio web:
Taller de CSS
Objetivo: Crear una Página Web con Estilos de Texto y Fuentes
Instrucciones:
1. Crear un archivo HTML con el siguiente contenido estructural:
• Un encabezado principal (<h1>) que represente el título de la página.
• Al menos dos encabezados secundarios (<h2>) para secciones importantes de la
página.
• Varios párrafos de texto (<p>) en las diferentes secciones.
• Una lista desordenada (<ul>) con al menos tres elementos.
• Un enlace (<a>) y un botón (<button>).
Taller de CSS
2. Crear un archivo CSS externo (llamado estilos.css) y vincularlo al archivo HTML. En este archivo deberán
aplicarse estilos siguiendo las siguientes indicaciones:
Requisitos de Estilo:
• Encabezados: El título principal (<h1>) debe tener un color de texto distinto, estar centrado y tener una
fuente distinta. Los encabezados secundarios (<h2>) deben tener un tamaño de fuente mayor que los
párrafos, un color diferente al del título principal, y un subrayado aplicado.
• Párrafos: El primer párrafo en cada sección debe estar en negrita. Todos los párrafos deben tener un
tamaño de fuente de 16px y un interlineado de al menos 1.5.Los párrafos deben estar alineados de forma
justificada.
• Lista desordenada: Alternar el color de fondo de los elementos de la lista desordenada usando :nth-child()
para aplicar colores claros alternos (por ejemplo, blanco y gris claro). Aplicar un estilo diferente (por
ejemplo, cambiar el tipo de viñeta o desactivarla) al primer y último elemento de la lista utilizando :first-
child y :last-child.
• Enlaces y botones: Los enlaces (<a>) deben cambiar de color cuando el usuario pase el cursor sobre ellos
(:hover), y el texto debe subrayarse en este estado. Los botones deben cambiar su color de fondo cuando
se presionen (:active).
Modelo de cajas(Box
Model)
El Modelo de Caja de CSS es fundamental para entender
cómo se renderizan y distribuyen los elementos en una página
web. Cada elemento se compone de su contenido, padding,
border y margen. Esta clase profundiza en cada componente
del modelo de caja y cómo manipularlo para diseñar layouts
precisos y visualmente atractivos.
Encontramos las siguientes propiedades:
• padding (relleno), el espacio alrededor del contenido. En el

ejemplo siguiente, es el espacio alrededor del texto del
párrafo.
• border (marco), la línea que se encuentra fuera del relleno.
• margin (margen), el espacio fuera del elemento que lo

separa de los demás.
• Contenido: área en donde se muestra el texto o gráficos

Gracias
Pablo Cuello Gómez
301 352 0534
pablo.cuello@upb.edu.co
Esta foto de Autor desconocido está bajo licencia CC BY-NC-ND

Presentación - Fundamentos de CSS-1

Cargado por

Copyright:

Formatos disponibles

Presentación - Fundamentos de CSS-1

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Presentación - Fundamentos de CSS-1

Cargado por

Copyright:

Formatos disponibles

Desarrollo de

Pablo Emilio Cuello Gómez

Coordinador del Centro de Tecnologías

CSS (Cascading Style Sheets) Hojas de estilo en cascada

Ejemplo de Inclusión Inline:

Aplicar la misma regla a varios elementos:

 Selector de identificación(ID): selecciona el elemento en

 Selector de clase: Los elementos en la página con la clase

 Selector de atributo: Los elementos en una página con el

 Selector de pseudoclase: Los elementos especificados,

 background-color: Define el color de fondo

 font-family: Especifica la fuente del texto.

 font-size: Ajusta el tamaño del texto.

 margin: Controla el espacio exterior de un elemento, es

 padding: Controla el espacio interior de un elemento, es

 Define un borde alrededor de un elemento. Puedes

 width y height: Define el ancho y el alto de un elemento

:hover: Se activa cuando el usuario pasa el cursor sobre el

:focus: Se activa cuando el elemento, generalmente un campo

:active: Se activa cuando un elemento está siendo clicado o

:nth-child(): La pseudo-clase :nth-child() permite aplicar

:last-child: selecciona el último elemento hijo de su

:last-child: selecciona el último elemento hijo de su

Encontramos las siguientes propiedades:

• padding (relleno), el espacio alrededor del contenido. En el

• border (marco), la línea que se encuentra fuera del relleno.

• margin (margen), el espacio fuera del elemento que lo

• Contenido: área en donde se muestra el texto o gráficos

301 352 0534

Esta foto de Autor desconocido está bajo licencia CC BY-NC-ND

También podría gustarte