Estilos Con CSS

1.1.
1 Tema 3 Estilos con CSS
1.1.1.1 Conceptos básicos de CSS
CSS u Hojas de Estilos en Cascada (Cascading Style Sheets) es un lenguaje de estilos utilizado
para describir la presentación de un documento HTML (o XML). CSS controla el diseño, la
presentación y la apariencia visual de las páginas web, permitiendo separar el contenido
estructural de un documento HTML de su estilo y diseño, se puede controlar el diseño de
varias páginas web a la vez almacenando las reglas CSS en archivos .css
CSS es uno de los lenguajes base de la Open Web y posee una especificación estandarizada
por parte del W3C al igual que HTML.
Las ventajas de utilizar CSS:
▪ Separación de funcionalidades: CSS permite separar el contenido (HTML) de la

presentación (estilos). Esto facilita el mantenimiento y la actualización, ya que puedes
realizar cambios en el aspecto de tu sitio sin alterar la estructura del contenido.
▪ Reutilización de código: Puedes definir estilos en un archivo CSS y luego aplicarlos a

múltiples páginas HTML. Esto reduce la redundancia y facilita la consistencia visual en todo
el sitio.
▪ Consistencia visual: CSS proporciona un control preciso sobre la apariencia de los

elementos en una página web, lo que garantiza una consistencia visual en todo el sitio.
▪ Facilita la accesibilidad: Al separar la presentación del contenido, se facilita la creación de

páginas web accesibles. Puedes crear hojas de estilo alternativas para diferentes
dispositivos o modos de navegación.
▪ Eficiencia en la carga: Al utilizar CSS, puedes aplicar estilos de manera eficiente, lo que
resulta en archivos más pequeños y tiempos de carga más rápidos para tus páginas web.
▪ Adaptabilidad a diferentes dispositivos: CSS permite el diseño responsivo, lo que significa

que puedes adaptar fácilmente el diseño de tu sitio web a diferentes tamaños de pantalla,
dispositivos y orientaciones.
▪ Fácil actualización y mantenimiento: Cambiar el diseño de un sitio web se vuelve más

sencillo con CSS, ya que los cambios realizados en un archivo de estilo afectarán a todas
las páginas que lo utilizan.
Sintaxis de un estilo CSS dentro de un elemento HTML
 Los estilos CSS se pueden aplicar a un elemento HTML a través de su atributo style
siguiendo esta sintaxis:
Autor: Porfirio Álvarez Arango | Pág. 1

Ilustración 1 – Sintaxis de estilos CSS aplicados a un elemento
Fuente: construcción propia
Las declaraciones están conformadas por el par "propiedad: valor de la propiedad;"

separado por dos puntos (:), varias declaraciones se deben separar por punto y coma(;) y el
punto y coma de la última declaración es opcional.
Algunos valores de propiedad pueden ser multivaluados como se muestra en el ejemplo de la

sintaxis anterior: "border: 1px solid red;" que para este ejemplo indica que el borde será
de 1 pixel de grosor, trazado sólido y color rojo, en este caso los valores se separan por espacio
en blanco.
Nota1: Estos estilos sólo afectarán al elemento sobre el cual se aplican.
 Para aplicar estilos a un grupo de elementos dentro de la misma página, se agrega el

elemento <style></style> dentro del elemento <head> y se declaran reglas CSS siguiendo
esta sintaxis:
Ilustración 2 – Sintaxis de estilos CSS utilizando reglas CSS

El selector define sobre que elemento o tipo de elemento se aplica el bloque de reglas CSS.
Existen diferentes tipos de selectores, por ejemplo, todos los elementos de HTML son un tipo
de selector.
La declaración: Una sola regla como font-family: 'Times New Roman', Times, serif;
especifica a cuál de las propiedades del elemento quieres dar estilo. Para este ejemplo, se
está especificando el tipo de fuente, para tener en cuenta:
El valor es multivaluado y separado por comas (,) en caso de no encontrar en el sistema la

primera fuente ('Times New Roman'), buscará la segunda y así sucesivamente.

Cuando el nombre de una fuente tiene varias palabras se deberá encerrar entre comillas
simples o dobles, por ejemplo 'Times New Roman'.
Existen otras tres declaraciones en la definición de esta regla CSS:
font-size: 1.5em; declara el tamaño de la fuente, la unidad de medida es el em que

significa: tamaño de la letra del elemento padre o del propio elemento, en este ejemplo el
tamaño será uno y medio (1.5) del tamaño actual de la fuente.
color: #ab10f5; el color de la letra (fuente).
width: 300px; el ancho en pixeles del (los) elemento(s) al (los) que se aplica la regla CSS.
Nota importante: no se debe dejar espacio entre el valor y la unidad de medida: 1.5em o
300px...
La propiedad: Es la forma en la cual se le asigna un estilo a un elemento HTML, por ejemplo,

color, font-size, width, font-family son propiedades del elemento <p> del ejemplo.
El valor de la propiedad, separado del nombre de la propiedad por dos puntos (:), le permite
elegir una de muchas posibles apariencias para una propiedad determinada, por ejemplo el
valor de color es #ab10f5, es un valor de color hexadecimal que comienza con el signo de
número (#) y seis (6) dígitos: los dos primeros indican la cantidad de rojo ( ab), los dos
siguientes indican la cantidad de verde (10) y los dos últimos indican la cantidad de azul (f5)
de allí el nombre RGB (red, green, blue).
Además de la forma hexadecimal, existen otras maneras de representar colores.
 Los estilos CSS también pueden ser aplicados a elementos HTML de distintas páginas, para
ello, se crean reglas de estilo en archivos independientes con extensión .css y siguiendo el
mismo formato de regla CSS de la ilustración anterior, estos archivos luego se vinculan a los
documentos HTML mediante el elemento <link> del elemento <head> siguiendo esta sintaxis:
<link rel="stylesheet" href="archivo.css">
El atributo rel="stylesheet" indica la relación que tendrá el archivo .css con este documento
HTML será de "hoja de estilos".
El atributo href="archivo.css" apunta al archivo que contiene las reglas de estilo. Tener en
cuenta la ruta absoluta o relativa de la ubicación del archivo.css.
Ejercicio: Demostración de aplicación de estilos a un solo elemento HTML.
Cree el archivo introduccion_css.html en la carpeta del html con el siguiente código: 
html\introduccion_css.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Introducción a CSS</title>
</head>
<body>
<h1 style="width: 600px; text-align: center; border-bottom: 1px solid
grey;">
Introducción a CSS</h1>
</body>
</html>
Guarde y abra el archivo desde el navegador.
Salida:
Ilustración 3 – Aplicación de estilo CSS a un elemento con el atributo style

Análisis del código anterior:
Se ha creado el encabezado <h1> con el atributo style y los siguientes estilos:
width: 600px; ancho 600 pixeles.

text-align: center; alineación de texto centrado.
border-bottom: 1px solid grey; borde inferior de un píxel de grosor, sólido y color gris.
En el ejemplo anterior, los estilos se aplicarán únicamente al elemento <h1>.
Ejercicio: Demostración de aplicación de estilos a varios elementos HTML desde el elemento

<style> de <head>.
En el archivo introduccion_css.html agregue el siguiente código: 
<title>Introducción a CSS</title>
<style>
/* un comentario CSS */
h2 {
font-family: Calibri;
background-color: mediumpurple;
box-shadow: 5px 5px 5px rgb(224, 228, 229);
padding-left: 10px;
color: white;
}
p {
border: 1px solid mediumaquamarine;
padding: 5px;

}
</style>
</head>
<body>
<h1 style="width: 600px; text-align: center; border-bottom: 1px solid
grey;">
Los navegadores web</h1>
<h2>Definición de navegador web</h2>

<p>Un navegador web o explorador de internet (del inglés web browser) es un
software, aplicación o programa que permite el acceso a los diferentes
recursos de la Web (Wikipedia).</p>
<h2>Listado de navegadores web</h2>

<p>A continuación se relacionan algunos de los navegadores web más
famosos:</p>
<h2>Cuota de uso de navegadores web más usados</h2>

</body>
Guarde y actualice la página.
Salida:
Al contenido se han agregado tres encabezados <h2> y tres párrafos <p> con diferente
contenido y sin el atributo style en sus etiquetas de apertura.
Además, dentro del elemento <head> se ha agregado el elemento <style> y dentro de este,
dos reglas CSS, una para aplicar estilos a todos los encabezados <h2> y otra para definir los
estilos de todos los párrafos <p>.

Los estilos para los <h2>:
font-family: Calibri;  tipo de letra Calibri

background-color: mediumpurple;  color de fondo púrpura
box-shadow: 5px 5px 5px rgb(224, 228, 229);  sombra con profundidad de 5 pixeles,
gris
padding-left: 10px;  margen interno izquierdo de 10 pixeles
color: white;  color de letra blanco
Los estilos para los <p>:
border: 1px solid mediumaquamarine;  borde de un pixel de grosor, trazado sólido y

color verde
padding: 5px;  margen interno o de relleno a todos los lados de 5 pixeles
font-family: Calibri;  tipo de fuente Calibri
En el ejemplo anterior, los estilos se aplicarán a todos los <h2> y a todos los <p>.
Observe el formato de comentario utilizado en CSS: /* un comentario CSS */
Ejercicio: Demostración de aplicación de estilos desde un archivo .css externo. Estas reglas
CSS podrán ser aplicadas a varios archivos HTML.
En el archivo introduccion_css.html agregue el siguiente código: 
<p>A continuación se relacionan algunos de los navegadores web más

famosos:</p>
<ul>
<li>Chrome de Google</li>
<li>Safari de Apple</li>
<li>Edge de Microsoft</li>
<li>Opera de Opera Software</li>
<li>Firefox de Mozilla</li>
<li>Samsung de Samsung Electronics</li>
</ul>
<h2>Cuota de uso de navegadores web más usados</h2>

<div>
<img src="navegadores.png">
<br>
<small>Según StatCounter, en mayo de 2023</small>
</div>
</body>
La imagen navegadores.png ha sido tomada (recortada) de la dirección

https://es.wikipedia.org/wiki/Navegador_web
Guarde y actualice la página antes de proceder a aplicar los estilos.
Salida:

Observe que se ha agregado la lista no ordenada de los navegadores y una imagen con una
leyenda debajo.
Primero, se cambiarán los estilos por defecto de la lista no ordenada.
Para aplicar estilos desde un archivo .css externo, cree el archivo estilos.css en la carpeta del
html con el siguiente código: 
html\estilos.css
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
padding: 8px 16px;
border-bottom: 1px solid #ddd
}
Guarde el archivo.
Se han creado dos reglas CSS, una para la lista no ordenada <ul> y otra regla para cada uno
de los ítems <li>.

Los estilos del <ul>:
list-style-type: none;  el valor none quita las viñetas de la lista

padding: 0;  elimina el margen interno que viene por defecto
margin: 0;  elimina el margen externo que viene por defecto
Los estilos de los ítems <li>:
padding: 8px 16px;  agrega un margen interno de 8 pixeles el eje Y y 16 pixeles en el eje
X
border-bottom: 1px solid #ddd  define un borde inferior para cada item de color gris
Importante:
Es necesario vincular el archivo .css con el documento HTML. En el <head> de

introduccion_css.html agregue la siguiente línea:
html\introduccion_css.html
</style>
<link rel="stylesheet" href="estilos.css">
</head>
Guarde los archivos y actualice la página desde el navegador.
Salida:
Observe los cambios en la lista no ordenada.
Ahora se aplicarán los estilos en el <div> que contiene la imagen y el texto <small> de la
leyenda o texto descriptivo de la imagen.
En el archivo introduccion_css.html agregue el siguiente código al final del documento: 
html\estilos.css
div {
width: 600px;

box-shadow: 0 2px 15px 0 rgb(233, 219, 219);
background-color: rgb(249, 249, 249);
padding: 10px;
}
small {
font-style: italic;
display: block;
text-align: right;
padding-right: 20px;
}
Guarde el archivo.
Se han creado dos reglas CSS, una para el <div> contenedor y otra regla para el texto
del<small>.
Los estilos del <div>:
width: 600px;  ancho del elemento, 600 pixeles.

box-shadow: 0 2px 15px 0 rgb(233, 219, 219);  borde con sombra
se recomienda el sitio https://www.cssmatic.com/es/box-shadow para estudiar este
tema.
background-color: rgb(249, 249, 249);  color de fondo del <div> contenedor.
padding: 10px;  margen interno de 10 pixeles a todos los lados
Los estilos del <small>:
font-family: Calibri;  tipo de letra del texto, Calibri

font-style: italic;  estilo de letra, cursiva o itálica
display: block;  se cambia la forma o tipo a un elemento en bloque
text-align: right;  alineación del texto a la derecha
padding-right: 20px;  margen interno derecho de 20 pixeles
Observe los cambios, verá la imagen y el texto de la leyenda dentro de un marco o panel y el
texto de la leyenda en un tipo de letra diferente y alineado a la derecha.
Tener en cuenta que <small> por defecto es un elemento en línea pero en el ejemplo se le
está cambiando ese comportamiento para que se muestre como un bloque y así poder
desplegar la leyenda a la derecha del contenedor.
Consejo: Queda a discreción del estudiante experimentar con otras formas de aplicar los
estilos vistos y consultar otros de su preferencia. También, el editor VS Code le irá sugiriendo
otros estilos y valores, uno de los mejores retos de esta profesión está en realizar este tipo de
pruebas, pierda cuidado, su código no se va a estropear, en el peor de los casos presione
Ctrl + Z

Números, longitudes y porcentajes
CSS utiliza varios tipos de datos numéricos:
integer (entero): es un valor entero usado para algunas propiedades CSS que no tiene
unidades, ejemplo: 37, -67.
number (número): representa un número decimal o entero, ejemplo: 3.15, -5.3, 0.34.
dimension (dimensión): es un number con una unidad asociada (sin espacio entre ambos),
ejemplo: 10px, 15s, 120deg. dimension es una categoría general que incluye:
▪ length para medidas de distancia.

▪ angle para valores de ángulos.
▪ time representa un valor de tiempo expresado en segundos o milisegundos.
▪ resolution usado en media queries, define la densidad de píxeles de un dispositivo de
salida, su resolución.
El tipo de dato de uso más frecuente es length, por ejemplo, 10px (píxeles) o 30em, se utilizan
dos longitudes diferentes: relativa y absoluta. Es importante conocer la diferencia para
entender qué dimensiones van a tener las cosas.
 Las unidades de longitud absoluta en general se consideran que siempre tienen el mismo
tamaño:
Unidad Nombre Equivale a

cm Centímetros 1cm = 96px/2,54
mm Milímetros 1mm = 1/10 de 1cm
Q Cuartos de milímetros 1Q = 1/40 de 1cm
in Pulgadas 1in = 2,54cm = 96px
pc Picas 1pc = 1/6 de 1in
pt Puntos 1pt = 1/72 de 1in
px Píxeles 1px = 1/96 de 1in
La mayoría de estos valores son más útiles cuando se usan en una salida en formato impreso
que en la salida de pantalla. Por ejemplo, normalmente no usamos cm (centímetros) en
pantalla. El único valor que usarás de forma frecuente es px (píxeles).
 Las unidades de longitud relativa son relativas con respecto a algo más, por ejemplo, al
tamaño de letra del elemento principal o al tamaño de la ventana gráfica. La ventaja de usar
unidades relativas es que con una planificación cuidadosa puedes lograr que el tamaño del
texto u otros elementos escalen en relación con todo lo demás en la página:
Unidad Relativa a
Tamaño de letra del elemento padre, en el caso de propiedades tipográficas como font-size, y
em
tamaño de la fuente del propio elemento en el caso de otras propiedades, como width.
ex Altura x de la fuente del elemento.
ch La medida de avance (ancho) del glifo "0" de la letra del elemento.

Unidad Relativa a
rem Tamaño de la letra del elemento raíz.
lh Altura de la línea del elemento.
vw 1% del ancho de la ventana gráfica.
vh 1% de la altura de la ventana gráfica.
vmin 1% de la dimensión más pequeña de la ventana gráfica.
vmax 1% de la dimensión más grande de la ventana gráfica.
Ejercicio: Demostración de uso de unidades de longitud absoluta y relativa.
Cree el archivo unidades_medida_1.html en la carpeta del html con el siguiente código: 
html\unidades_medida_1.html.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Práctica unidades de medida</title>
</head>
<body>
<div style="font-size: 1em;">
<p style="width: 300px; border: 1px solid gray">Párrafo con 300px de ancho</p>
<p style="width: 15vw; border: 1px solid gray">Párrafo con 15vw de ancho</p>
<p style="width: 10em; border: 1px solid gray">Párrafo con 10em de ancho</p>
</div>
</body>
</html>
Salida:
Ilustración 4 – Demostración de uso de unidades de medida absolutas y relativas

El primer párrafo tiene un ancho ("width") establecido en píxeles. Como px es una unidad
absoluta, este ancho será siempre el mismo aunque lo demás cambie.

El segundo párrafo tiene un ancho establecido en unidades vw (ancho de ventana). Este valor
es relativo al ancho de la ventana gráfica, por lo que 15vw es el 15 por ciento del ancho de la
ventana gráfica. Al cambiar el ancho de la ventana del navegador, el tamaño de la caja también
cambiará.
El tercer párrafo utiliza unidades em. Son unidades relativas al tamaño de la letra. En el <div>
se ha ha establecido el tamaño de la fuente de 1em, si se cambia este valor a 1.5em, verá que
el tamaño de letra de todos los elementos aumenta, pero solo se amplía el ancho del marco
del último párrafo, porque el ancho es relativo a ese tamaño de letra.
Unidades em y rem
Estas son dos de las unidades relativas más comunes para temas de tamaño, por ejemplo, de
cajas de texto. Por eso, un ejemplo adicional.
Ejercicio: Demostración de uso de unidades de longitud relativa em y rem.
html\unidades_medida_2.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Unidades de medida em y rem</title>
</head>
<body>
<div style="font-size: 16px">
<ul>
<li style="font-size: 1.5em">Uno</li>
<li style="font-size: 1.5em">Dos</li>
<li style="font-size: 1.5em">Tres
<ul>
<li style="font-size: 1.5em">Tres (A)</li>
<li style="font-size: 1.5em">Tres (B)
<ul>
<li style="font-size: 1.5em">Tres (B)(1)</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li style="font-size: 1.5rem">Uno</li>
<li style="font-size: 1.5rem">Dos</li>
<li style="font-size: 1.5rem">Tres
<ul>

<li style="font-size: 1.5rem">Tres (A)</li>
<li style="font-size: 1.5rem">Tres (B)
<ul>
<li style="font-size: 1.5rem">Tres (B)(1)</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Salida:
Observe que el contendor <div> tiene un estilo de tamaño de fuente de 16px.
En la primera lista <ul>, todos los elementos <li> tienen un tamaño de fuente de 1.5em no
importa en qué nivel de anidamiento se encuentran dentro de las listas <ul>.
La diferencia con la segunda lista <ul>, es que todos los <li> tienen un tamaño de fuente de
1.5rem.
Según la tabla de unidades de longitud relativa vista anteriormente, la unidad em indica

"tamaño de letra del elemento padre". Los elementos <li> dentro de un elemento <ul> con
una unidad de medida em toman el tamaño con respecto a su elemento padre. Por eso, en
cada nivel de anidamiento sucesivo, el tamaño de letra aumenta progresivamente, porque en
cada uno el tamaño de letra está establecido en 1.5em, esto es, 1.3 veces el tamaño de letra
de su elemento padre.

Y según esa misma tabla, la unidad rem significa "tamaño de letra del elemento raíz". Todos
los <li> dentro de un elemento <ul> con una unidad de medida rem toman su tamaño del
elemento raíz que en este caso es el <div>. Esto significa que el tamaño de letra no aumenta
en cada nivel sucesivo de anidamiento.
Valores sin unidad de medida
Algunas propiedades CSS utilizan números sin ninguna unidad asociada, por ejemplo, es
atributo opacity indica cuan transparente puede ser la representación de un elemento en el
navegador, cero (0) para trasparente y uno (1) para opaco.
Ejemplo:
div {
opacity: 0.5;
}
Indica que todos los elementos <div> de la página tendrán un nivel de opacidad medio.
Unidad de medida porcentual
Esta unidad de medida se establece en relación con otro valor, por ejemplo, un atributo font-
size o width de un elemento como porcentaje, será un porcentaje del font-size o del width
del elemento padre.
Ejercicio: Demostración de uso de la unidad de longitud porcentual.
html\unidades_medida_3.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Unidades de medida porcentual</title>
<style>
p {
border: 1px red dotted;
}
</style>
</head>
<body>
<p style="width: 300px;">Párrafo con 300px de ancho</p>
<p style="width: 40%;">Párrafo con 40% de ancho</p>
<div style="width: 600px; border: 2px green solid;">
<p style="width: 300px;">Párrafo con 300px de ancho</p>
<p style="width: 40%;">Párrafo con 40% de ancho</p>
</div>

</body>
</html>
Salida:
En el ejemplo anterior se crean dentro del <body> dos párrafos <p> con el tamaño indicado en
unidades de 300 pixeles y 40% de porcentaje respectivamente, también se crea un <div> y
dentro de él nuevamente se ponen dos párrafos similares a los anteriores. El <div> tiene un
ancho de 600 pixeles.
Los párrafos tienen borde establecido desde el elemento <style> y el <div> tiene borde
establecido desde su propia etiqueta de apertura.
Tenga en cuenta que los dos últimos párrafos <p> están dentro de un <div> contenedor que
tiene 600 pixeles de ancho.
Cuando se muestra la página en el navegador los párrafos <p> que tienen el tamaño en pixeles
tienen el mismo ancho pero los párrafos <p> que tienen el tamaño en porcentaje (%) cambian
de tamaño, el último párrafo tiene un tamaño del 40% de 600 pixeles de su contenedor,
mucho mas pequeño que su homólogo del <body>.
Ejercicio: en el archivo unidades_medida3.html agregue el siguiente código: 
...
li {
font-size: 80%;
}
</style>
...
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres
<ul>

<li>Tres (A)</li>
<li>Tres (B)
<ul>
<li>Tres (B)(1)</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
Guarde y actualice la página en el navegador.
Salida:
En <style> se ha creado una regla CSS para los <li> con un font-size: 80%; Observe que
en el navegador los elementos de la lista anidada se vuelven progresivamente más pequeños
en los niveles más internos de la anidación a medida que heredan del padre.
1.1.1.2 Selectores CSS
En las reglas CSS los selectores se utilizan para indicar con precisión a que elementos HTML o
partes de estos se le quiere aplicar un estilo. Existe una amplia gama de selectores CSS, esto
permite exactitud a la hora de seleccionar a que se partes de la página se van a aplicar los
estilos.
En todos los ejemplos anteriores los selectores de las reglas CSS han sido los mismos
elementos HTML pero el grupo de selectores va más allá de ser sólo elementos.
Grupos de selectores
Si dos o más reglas CSS describen el mismo bloque de declaraciones, se podrán agrupar en
una sola regla CSS separando sus selectores con coma (,).
Ejemplo: Si se tienen estas dos reglas con las mismas declaraciones:
div {
color: yellow;
font-family: Verdana;
}

p {
color: yellow;
}
Se pueden agrupar como:
div, p {
color: yellow;
}
Selectores de tipo, id y clase
 Los selectores de tipo incluyen todos los elementos HTML como <li>, <table>, <img>,
<main>, etc. vistos en los ejemplos anteriores.
 Los selectores id representan los elementos que tienen el atributo id de la siguiente forma:
Código HTML:
<p class="clase">Un párrafo con un atributo class</p>
Regla CSS: Los atributos id son representados por un signo de número (#) en CSS.
#marca {
color: green;
}
También podría escribirse como p#marca {...} con el nombre del elemento precediendo el
#.
 Los selectores clase representan los elementos que tienen el atributo class de la siguiente
forma:
Código HTML:
<p class="clase">Un párrafo con un atributo class</p>
<div class="clase">Y una sección con el mismo valor de class</div>
Regla CSS: Los atributos class son representados por un signo de punto (.) en CSS.
.clase {
background-color: azure;
}
En este ejemplo , se está aplicando el mismo color de fondo a un <p> y a un <div>, ambos
tienen el mismo valor del atributo class.
Ejercicio: Demostración de uso de selectores CSS de tipo, id y clase.
Cree el archivo selectores_css_1.html en la carpeta del html con el siguiente código: 

Consejo: Digite primero el código HTML y pruébelo, luego vaya creando cada una de las reglas
CSS y pruébelas una a una para que observe que cambios ocurre en presentación en el
navegador.
html\selectores_css_1.html
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="styles.css">
<title>Ejemplo de Selectores CSS - parte 1</title>
<style>
body {
font-family: Calibri, sans-serif;
}
#titulo-principal {
color: mediumturquoise;
text-align: center;
}
.parrafo {
color: green;
font-style: italic;
}
.derecha {
text-align: right;
padding-right: 20px;
}
</style>
</head>
<body>
<h1>Selectores de tipo, id y class</h1>
<header id="titulo-principal">
<h2>Mi Página Web</h2>
</header>
<section>
<p class="parrafo">Este es un párrafo con clase.</p>
<p>Otro párrafo sin clase.</p>
<p class="parrafo derecha">¡Un tercer párrafo con clase!</p>
</section>
</body>
</html>
Salida final:

Al elemento <header> se ha asignado el atributo id="titulo-principal" mediante el cual se

aplican los estilos:
#titulo-principal {  selector de id
color: mediumturquoise;  color azul turquesa
text-align: center;  texto alineado al centro
}
Al primer párrafo se ha asignado el atributo class="parrafo" con el cual se aplican los estilos:
.parrafo {  selector de class

color: green;  color de fuente verde
font-style: italic;  estilo de letra cursiva o itálica
}
El tercer párrafo tiene el atributo class="parrafo derecha" por lo que se aplican los estilos
del primer párrafo y adicionalmente los estilos:
.derecha {  selector de class

text-align: right;  texto alineado a la derecha
padding-right: 20px;  margen interno derecho de 20 pixeles
}
Por último, toda la página tiene un tipo de letra Calibri o sans-serif por el estilo aplicado
al <body>:
body {  selector de tipo o elemento

font-family: Calibri, sans-serif;  tipo de fuente Calibri o sans-serif
}
Selectores de atributo
 Este grupo de selectores proporcionan diferentes formas de seleccionar elementos según

la presencia de un atributo determinado en un elemento.
Ejercicio: Demostración de uso de selectores CSS de atributo.

navegador.
<!DOCTYPE html>
<html lang="es">
<head>
<style>
body {
font-family: Calibri, sans-serif;
}
[title] {
border: 1px solid brown;
}
li[alt] {
background-color: lightyellow;
}
li[title="tres"] {
color: tomato;
}
</style>
</head>
<body>
<h1>Selectores de atributo</h1>
<ul>
<li title="uno">Opción uno</li>
<li alt="alterno">Opción dos</li>
<li title="tres">Opción tres</li>
</ul>
</body>
</html>
Salida final:

Se ha creado una lista <ul> con tres elementos <li> con atributos title y alt.
El código HTML:
<ul>
<li title="uno">Opción uno</li>
<li alt="alterno">Opción dos</li>
<li title="tres">Opción tres</li>
</ul>
Dentro del elemento <style> de <head> Se han creado tres reglas de estilo CSS para aplicar
estilos a los <li> según su tipo de atributo.
Regla CSS:
[title] {  para cualquier elemento con el atributo title
border: 1px solid brown;  borde de un pixel de grosor, trazado sólido y color café
}
En este ejemplo , se aplicará un estilo de borde color café a cualquier elemento que tenga el
atributo title. Observar que se aplica al primer y tercer <li>.
Regla CSS:
li[alt] {  todos los elementos <li> con el atributo alt
background-color: lightyellow;  color de fondo amarillo claro
}
En este ejemplo , se aplicará un estilo de color de fondo amarillo claro a los elementos <li>
que tenga el atributo alt. Observar que se aplica sólo al segundo <li>.
Regla CSS:
li[title="tres"] {  todos los elementos <li> con el atributo title y valor igual a
"tres"
color: tomato;  color de letra rojo tomate
}
En este ejemplo , se aplicará un estilo de color de fuente a los elementos <li> que tenga el
atributo title con el valor "tres". Sólo el tercero de los tres <li> tiene ese valor en su
atributo title.

Otros selectores de atributo.
Ejercicio: Demostración de uso de otros selectores CSS de atributo.
navegador.
<!DOCTYPE html>
<html lang="es">
<head>
<style>
[title~="fruta"] {
background-color: bisque;
}
[title|="verdura"] {
border-bottom: 1px solid red;
}
[title^="verd"] {
padding-left: 20px;
list-style-type: circle;
}
li[title*="frut"] {
color: green;
font-weight: bold;
}
[title$="escencia"] {
text-align: center;
}
</style>
</head>
<body>
<h1>Otros selectores de atributo</h1>
<h2 title="fruta verdura">Diferencias frutas y verduras</h2>

<p>Algunos ejemplos</p>
<ul>
<li title="infrutescencia">Fresa</li>
<li title="verde fruta">Aguacate</li>
<li title="verdura fruta">Pepino</li>
<li title="verdura">Espárrago</li>
<li title="una fruta">Tomate</li>
<li title="verdura-roja">Rábano</li>

<li title="inflorescencia">Brócoli</li>
</ul>
</body>
</html>
Salida final:
Se ha creado una lista <ul> con varios elementos <li> y diferentes atributos para estos. Los
estilos aplicados:
Tipo de atributo Descripción Ejemplo Resultado

Selecciona los elementos cuyo
[title~="fruta"] {
atributo tenga por valor una Se han seleccionado el
background-color:
[atributo ~= valor] lista de palabras separadas por <h2> y los <li> aguacate,
bisque;
espacios, una de las cuales sea pepino y tomate.
}
valor.
Selecciona elementos cuyo Se han seleccionado los
[title|="verdura"] {
valor puede ser exactamente el <li> de espárrago y
border-bottom: 1px solid
[atributo|= valor] valor especificado, o el valor rábano pero no el <h2> ni
red;
especificado seguido de un pepino porque no son
}
guion (-). palabras exactas.
[title^="verd"] { Se han seleccionado los
Selecciona los elementos cuyo
padding-left: 20px; <li> que comienzan con
[atributo ^= valor] atributo tenga un valor
list-style-type: circle; verdura pero también el
prefijado o que inicie por valor.
} que comienza con verde.
Selecciona los elementos cuyo li[title*="frut"] { Se han seleccionado sólo
atributo tenga un valor que color: green; los <li> de tipo fruta pero
[atributo *= valor]
contenga valor en cualquier font-weight: bold; también la fresa que es
parte de la cadena. } una infrutescencia.
Se han seleccionado los
Selecciona los elementos cuyo [title$="escencia"] {
<li> de fresa que es una
[atributo $= valor] atributo tenga un valor sufijado text-align: center;
infrutescencia y brócoli
o que finalice con valor. }
que es una inflorescencia.

Selectores combinados (combinadores)
Un combinador es algo que explica la relación entre los selectores.
Un selector CSS puede contener más de un selector simple. Entre los selectores simples
podemos incluir un combinador. Hay cuatro combinadores diferentes en CSS:
▪ selector descendiente (espacio)

▪ selector de niños (>)
▪ selector de hermanos adyacentes (+)
▪ selector de hermanos general (~)
 Selector de descendientes (espacio), coincide con todos los elementos que son
descendientes de un elemento específico.
Ejercicio: Demostración de uso de otros selectores CSS combinados.
Cree el archivo selectores_css_4a.html en la carpeta del html con el siguiente código: 
Sugerencia: instale la extensión Lorem ipsum para generar texto de prueba y ahorrar tiempo
digitando.
Ilustración 5 – Instalación de la extensión Lorem Ipsum en VS Code

1. seleccione el ícono de extensiones.

2. digite la palabra lorem
3. seleccione e instale Lorem Ipsum de Daniel Imms.
La forma de uso:
Seleccione el menú View > Command Palette… o la combinación de teclas .Shift. + .Ctrl. + .P. y
en la caja de texto digite .>lorem... y seleccione la opción que más se ajuste a sus necesidades.

html\selectores_css_4a.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de Selectores CSS - parte 4a</title>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Selector de descendientes</h2>
<p>Amet adipisicing eiusmod voluptate adipisicing sunt duis laboris id
mollit nostrud.</p>
<div>
<p>Párrafo 1. Aliquip qui enim cillum anim ex cupidatat.</p>
<p>Párrafo 2. Laboris velit et do consectetur pariatur laborum in.</p>
<section>
<p>Párrafo 3. Reprehenderit cillum culpa proident excepteur
reprehenderit
incididunt occaecat qui commodo eiusmod commodo.</p>
</section>
</div>
<p>Párrafo 4. No está dentro del div.</p>
</body>
</html>
Salida:

Ilustración 6 – Representación del uso de selectores CSS combinadores
Código CSS:
div p {
}
Indica que todos los elementos <p> dentro de un <div> (no importa a que nivel) tendrán color
de fondo amarillo.
 Selector de hijos (>), selecciona todos los elementos que son hijos directos de un elemento
específico.
Cree el archivo selectores_css_4b.html en la carpeta del html con el siguiente código: 
html\selectores_css_4b.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de Selectores CSS - parte 4b</title>
<style>
div > p {
}
</style>
</head>
<body>
<h2>Selector de hijos</h2>
<p>Amet et pariatur sunt proident et commodo.</p>
<div>

<p>Párrafo 1. Eu pariatur dolor anim ullamco anim laboris esse tempor
magna ut commodo.</p>
<p>Párrafo 2. Est aliqua ea sunt in.</p>
<section>

<p>Párrafo 3. En el div (dentro de un elemento de section).</p>
</section>
<p>Párrafo 4. Dentro del div</p>
</div>
</body>
</html>
Salida:
Código CSS:
div > p {
}
Indica que todos los elementos <p> dentro de un <div> (hijos o de primer nivel) tendrán color
de fondo amarillo.
 Selector de hermanos adyacentes (+), se utiliza para seleccionar un elemento que está
directamente después de otro elemento específico. Los elementos hermanos deben tener el
mismo elemento padre y "adyacente" significa "inmediatamente siguiente".
El siguiente ejemplo selecciona el primer elemento <p> que se coloca inmediatamente

después de los elementos <div>:
Cree el archivo selectores_css_4c.html en la carpeta del html con el siguiente código: 

html\selectores_css_4c.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ejemplo de Selectores CSS - parte 4c</title>
<style>
div + p {
}
</style>
</head>
<body>
<h2>Selector de hermanos adyacentes</h2>
<p>El selector + se utiliza para seleccionar un elemento que está
directamente después de otro elemento específico.</p>
<div>
<p>Párrafo 1. Dentro de un div.</p>
</div>
<p>Párrafo 3. Después de un div.</p>
<div>
</div>
</body>
</html>
Salida:

Código CSS:
div + p {
}
Selecciona el primer elemento <p> que se coloca inmediatamente después (no dentro) de los
elementos <div>.
 Selector general de hermanos (~), selecciona todos los elementos que son hermanos
próximos de un elemento específico.
El siguiente ejemplo selecciona todos los elementos <p> que son hermanos próximos de los
elementos <div>:
Cree el archivo selectores_css_4d.html en la carpeta del html con el siguiente código: 
html\selectores_css_4d.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de Selectores CSS - parte 4d</title>
<style>
div ~ p {
}
</style>
</head>
<body>
<h2>Selector general de hermanos</h2>

<p>El selector de hermanos general (~) selecciona todos los elementos que
son hermanos próximos de un elemento
específico.</p>
<p>Párrafo 1.</p>
<div>
<p>Párrafo 2. Dentro del div</p>
</div>
<p>Párrafo 3. Después del div</p>
<code>Algún código adicional.</code>
<p>Párrafo 4. después del code, después del div</p>
</body>
</html>
Salida:
Código CSS:
div ~ p {
}
Selecciona el todos los elemento <p> que se coloca inmediatamente después (no dentro) de
los elementos <div>, no importa si hay otro tipo de elemento de por medio.
Pseudoclases
Sintaxis:
selector:pseudoclase {  observe los dos puntos (:) de separación
propiedad: valor;
}
Se utilizan para definir un estado especial de un elemento. por ejemplo, para:

▪ Aplicar estilo a un elemento cuando un usuario pasa el ratón sobre él
▪ Mostrar los enlaces visitados y no visitados de manera diferente
▪ Aplicar estilo a un elemento cuando recibe el foco
Ejercicio: Demostración de uso de otros selectores CSS de tipo pseudoclase.
Cree el archivo selectores_css_5a.html en la carpeta del html con el siguiente código: 
html\selectores_css_5a.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de Selectores CSS - parte 5a</title>
<style>
/* enlace no visitado */
a:link {
color: red;
}
/* enlace visitado */
a:visited {
color: green;
}
/* pasar el ratón sobre el enlace */

a:hover {
color: hotpink;
}
/* enlace seleccionado, clic presionado */

a:active {
color: blue;
}
/* los párrafos que hay dentro de div */

div p {
display: none;
padding: 20px;
}
/* los párrafos dentro de div cuando pase el ratón por encima del div */
div:hover p {
display: block;
}
</style>

</head>
<body>
<h2>Pseudoclases(:) - Mostrar un enlace según el estado</h2>
<p><b><a href="https://www.nasa.gov" target="_blank">Sitio de la

NASA</a></b></p>
<p><b>Nota:</b> a:hover DEBE aparecer después de a:link y a:visited en la
definición de CSS para que sea efectivo.</p>
<p><b>Nota:</b> a:active DEBE aparecer después de a:hover en la definición
de CSS para que sea efectivo.</p>
<div><b style="color: chocolate">Pase el cursor sobre este elemento div

para mostrar el elemento p</b>
<p>Holaaa! por acá estoy !!</p>
</div>
</body>
</html>
Guarde y abra el archivo desde el navegador, pruebe a pasar el ratón por el párrafo
sugerido.
Salida:
Código CSS:
Se crean diferentes selectores de tipo pseudoclase para mostrar el enlace en sus diferentes
estados:
a:link no visitado
a:visited visitado
a:hover cuando pasa el ratón por encima
a:active cuando hace clic sobre el enlace sin haber soltado el botón del ratón
Para el manejo del <div> y su párrafo <p> interno:
div p {  seleccionar el <p> dentro del <div>.

display: none;  inicialmente el <p> no será mostrado
background-color: yellow;  tendrá color de fondo amarillo y
padding: 20px;  margen de relleno interno de 20 pixeles
}
Cuando se pase el ratón por encima del <div>:
div:hover p {  seleccionar el <p> dentro del <div> cuando se pase el ratón por encima
del <div>.
display: block;  muestre el <p> en bloque (su forma natural).
}
Pseudoelementos
Sintaxis:
selector::pseudoelemento {  observe los doble dos puntos (::) de separación
propiedad: valor;
}
Un pseudoelemento CSS se utiliza para diseñar y mostrar partes específicas de un elemento.

Por ejemplo, se puede usar para:
▪ Aplicar un estilo a la primera letra o línea de un elemento

▪ Insertar contenido antes o después del contenido de un elemento
▪ Ejercicio: Demostración de uso de otros selectores CSS de tipo pseudoelemento.
Cree el archivo selectores_css_5b.html en la carpeta del html con el siguiente código: 
html\selectores_css_5b.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ejemplo de Selectores CSS - parte 5b</title>
<style>
/* primera línea del párrafo */
p::first-line {
color: mediumvioletred;
font-style: oblique;
}
/* primer caracter del párrafo */

p::first-letter {
font-size: 2em;
font-weight: bold;
font-style: normal;

font-family: Ananda;
}
</style>
</head>
<body>
<h2>Pseudoelementos(::) - Aplicar estilo a partes específicas de un
elemento</h2>
<p>Puede utilizar el pseudoelemento ::first-line para agregar un efecto
especial a la primera línea de un texto y al primer caracter.
Un poco más de texto. Adipisicing eiusmod sunt laborum enim velit
reprehenderit mollit mollit sint quis id irure.
</p>
</body>
</html>
Guarde y abra el archivo desde el navegador, prueba a cambiar el tamaño de la ventana del
navegador y observe el comportamiento de la primera línea del párrafo.
Salida:
Se crean dos selectores de tipo pseudoelemento para el comportamiento de la primera línea

y primer carácter del párrafo:
El selector universal
El selector universal (*) selecciona todos los elementos HTML de la página.
Código CSS:
* {
text-align: center;
color: blue;
}
Código HMTL:
<h1>Hola a todos!</h1>

<h4>Cada elemento de esta página se verá afectado por el estilo
universal.</h4>
<p id="identificador">Yo también me veré afectado!</p>
<span>Y yo!</span>
En el ejemplo anterior, se está aplicando un estilo de alineación de texto centrado y color de

fuente a todos los elementos de la página. Se sugiere realizar la prueba en un nuevo archivo.
Salida:
1.1.1.3 El modelo de caja CSS
En HTML y CSS todo tiene una caja alrededor, y comprender estas cajas es clave para poder
crear diseños con CSS o para alinear elementos con otros elementos.
Cabe recordar que en general hay dos tipos de cajas: cajas en bloque y cajas en línea. Estas
características se refieren al modo cómo se comporta la caja en términos de flujo de página y
en relación con otras cajas de la página:
 Una caja que se define como bloque, se comportará así:
▪ La caja fuerza un salto de línea al llegar al final de la línea.

▪ La caja se extenderá en la dirección de la línea para llenar todo el espacio disponible que
haya en su contenedor. En la mayoría de los casos, esto significa que la caja será tan ancha
como su contenedor, y llenará el 100% del espacio disponible.
▪ Se respetan las propiedades width y height.
▪ El relleno, el margen y el borde mantienen a los otros elementos alejados de la caja.
A menos que se decida cambiar el tipo de visualización a en línea (inline), elementos como
los encabezados <h1>…<h6> y los párrafos <p> usan por defecto en bloque (block) como tipo
de visualización externa.
 Una caja tiene una visualización externa de tipo inline, si:
▪ La caja no fuerza ningún salto de línea al llegar al final de la línea.

▪ Las propiedades width y height no se aplican, no funcionan.
▪ Se aplican relleno, margen y bordes verticales, pero no mantienen alejadas otras cajas en
línea.
▪ Se aplican relleno, margen y bordes horizontales, y mantienen alejadas otras cajas en
línea.

El elemento <a> y los elementos <span>, <em> y otros elementos de formatos son ejemplos de
elementos que se muestran en línea por defecto.
El tipo de caja que se aplica a un elemento está definido por los valores de propiedad display,
como block y inline, y se relaciona con el valor externo (outer) de visualización (display).
 La representación básica del modelo de cajas se basa en varios conceptos importantes:
▪ borde (border), es el límite que separa el interior del exterior del elemento. Se modifica
su tamaño y estilo mediante la propiedad border.
▪ márgen (margin), es la parte exterior del elemento, por fuera del borde, encierra el
contenido, el relleno y el borde. Se modifica su tamaño mediante la propiedad margin.
▪ relleno (padding), es la parte interior del elemento, entre el contenido y el borde. Se
modifica mediante la propiedad padding.
▪ contenido, es la parte interior del elemento, excluyendo el relleno. Su tamaño puede
cambiarse utilizando propiedades como width y height.
Ilustración 7 – El modelo de caja HTML/CSS

Se recomienda revisar los siguientes sitios (y ojalá otros de su propia búsqueda) para
profundizar un poco más sobre el concepto y practica del modelo de caja:
▪ https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/The_box_model
(texto)
▪ https://lenguajecss.com/css/modelo-de-cajas/que-es/ (texto)
▪ https://www.youtube.com/watch?v=4CMOII_oiU0 (video)

Estilos Con CSS

Cargado por

Copyright:

Formatos disponibles

Estilos Con CSS

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

Estilos Con CSS

Cargado por

Copyright:

Formatos disponibles

1.1.

1 Tema 3 Estilos con CSS

1.1.1.1 Conceptos básicos de CSS

Las ventajas de utilizar CSS:

▪ Separación de funcionalidades: CSS permite separar el contenido (HTML) de la

▪ Reutilización de código: Puedes definir estilos en un archivo CSS y luego aplicarlos a

▪ Consistencia visual: CSS proporciona un control preciso sobre la apariencia de los

▪ Facilita la accesibilidad: Al separar la presentación del contenido, se facilita la creación de

▪ Adaptabilidad a diferentes dispositivos: CSS permite el diseño responsivo, lo que significa

▪ Fácil actualización y mantenimiento: Cambiar el diseño de un sitio web se vuelve más

Sintaxis de un estilo CSS dentro de un elemento HTML

Autor: Porfirio Álvarez Arango | Pág. 1

Las declaraciones están conformadas por el par "propiedad: valor de la propiedad;"

Algunos valores de propiedad pueden ser multivaluados como se muestra en el ejemplo de la

Nota1: Estos estilos sólo afectarán al elemento sobre el cual se aplican.

 Para aplicar estilos a un grupo de elementos dentro de la misma página, se agrega el

Ilustración 2 – Sintaxis de estilos CSS utilizando reglas CSS

El valor es multivaluado y separado por comas (,) en caso de no encontrar en el sistema la

Autor: Porfirio Álvarez Arango | Pág. 2

Existen otras tres declaraciones en la definición de esta regla CSS:

font-size: 1.5em; declara el tamaño de la fuente, la unidad de medida es el em que

La propiedad: Es la forma en la cual se le asigna un estilo a un elemento HTML, por ejemplo,

Además de la forma hexadecimal, existen otras maneras de representar colores.

<link rel="stylesheet" href="archivo.css">

Ejercicio: Demostración de aplicación de estilos a un solo elemento HTML.

Cree el archivo introduccion_css.html en la carpeta del html con el siguiente código: 

Autor: Porfirio Álvarez Arango | Pág. 3

Guarde y abra el archivo desde el navegador.

Ilustración 3 – Aplicación de estilo CSS a un elemento con el atributo style

Análisis del código anterior:

Se ha creado el encabezado <h1> con el atributo style y los siguientes estilos:

width: 600px; ancho 600 pixeles.

En el ejemplo anterior, los estilos se aplicarán únicamente al elemento <h1>.

Ejercicio: Demostración de aplicación de estilos a varios elementos HTML desde el elemento

En el archivo introduccion_css.html agregue el siguiente código: 

Autor: Porfirio Álvarez Arango | Pág. 4

<h2>Definición de navegador web</h2>

<h2>Listado de navegadores web</h2>

<h2>Cuota de uso de navegadores web más usados</h2>

Guarde y actualice la página.

Análisis del código anterior:

Autor: Porfirio Álvarez Arango | Pág. 5

font-family: Calibri;  tipo de letra Calibri

Los estilos para los <p>:

border: 1px solid mediumaquamarine;  borde de un pixel de grosor, trazado sólido y

Observe el formato de comentario utilizado en CSS: /* un comentario CSS */

En el archivo introduccion_css.html agregue el siguiente código: 

<p>A continuación se relacionan algunos de los navegadores web más

<h2>Cuota de uso de navegadores web más usados</h2>

La imagen navegadores.png ha sido tomada (recortada) de la dirección

Guarde y actualice la página antes de proceder a aplicar los estilos.

Autor: Porfirio Álvarez Arango | Pág. 6

Primero, se cambiarán los estilos por defecto de la lista no ordenada.

Autor: Porfirio Álvarez Arango | Pág. 7

list-style-type: none;  el valor none quita las viñetas de la lista

Los estilos de los ítems <li>:

Es necesario vincular el archivo .css con el documento HTML. En el <head> de

Guarde los archivos y actualice la página desde el navegador.

Observe los cambios en la lista no ordenada.

En el archivo introduccion_css.html agregue el siguiente código al final del documento: 