Introducción a CSS

CSS (Cascading Style Sheets) es un lenguaje utilizado para describir la presentación de un documento HTML. Permite separar el contenido de una página web de su diseño, facilitando la personalización de colores, tipografías, tamaños y disposición de los elementos. Esto mejora la experiencia del usuario y el mantenimiento del código.

Efecto Glitch

EFECTO CREADO CON CSS

Historia y evolución de CSS

1996 Se lanzó la primera versión de CSS (CSS1).

1998 CSS2 agregó funcionalidades como posicionamiento absoluto y relativo.

2000 Los navegadores comenzaron a adoptar más características de CSS2.

2011 CSS3 se introdujo como un conjunto modular, añadiendo transiciones, animaciones y flexbox.

CSS sigue evolucionando, con nuevas propiedades y herramientas que mejoran el diseño web.

Reglas de estilo y sintaxis de CSS

Una regla CSS está compuesta por un selector y un bloque de declaraciones:

🔹 Sintaxis:

				
					selector {
    propiedad: valor;
}

🔹 Ejemplo:

				
					h1 {
    color: blue;
    font-size: 24px;
}

Lectura recomendada

Link de Compra en Amazon: 
🛒  https://amzn.to/3ZW6Yv5

Contenido del libro:

En la primera parte del libro encontrarás una explicación de ambos lenguajes de programación junto con una introducción al entorno de programación que se utiliza en el libro.

En la segunda parte del libro encontrarás la parte práctica, con 70 ejercicios de dificultad progresiva en los que, además de guiarte paso a paso, te explicamos todos los conceptos teóricos de programación que necesitas conocer para poder llevarlos a cabo.

Esto aplica color azul y tamaño de fuente 24px a todos los elementos <h1>.

Cuestionario HTM y CCS

Selección de elementos mediante selectores CSS

Un selector en CSS es una parte del código que identifica qué elementos del documento HTML serán estilizados. Es la primera parte de una regla CSS, antes de las llaves { }, donde se define el estilo que se aplicará. Los selectores son fundamentales en CSS porque permiten aplicar estilos a los elementos de manera específica o general.

Su estructura básica sería la siguiente:

Selector + Declaración

Y dentro de la declaración podemos diferenciar entre Propiedad y Valor:

Selector { Propiedad: Valor }

Las propiedades son los atributos que caracterizan al selector (por ejemplo que el color de su texto), mientras que el valor es la propiedad exacta que recibe (Por ejemplo rojo).

Los selectores identifican qué elementos HTML serán estilizados:

🔹Selector de etiqueta: Aplica a todas las etiquetas específicas (h1, p).

🔹Selector de clase: Aplica a elementos con una clase definida (.clase).

🔹Selector de ID: Aplica a un elemento con un ID único (#id).

				
					p {
    color: green;
}
.clase {
    font-weight: bold;
}
#id {
    text-align: center;
}

Selectores Básicos

Selector Universal

Se utiliza para seleccionar todos los elementos de la página. Se indica mediante un asterisco y, a pesar de su sencillez, no se utiliza habitualmente ya que es raro que un mismo estilo se pueda aplicar a todos los elementos de una página.

El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML:

				
					*{
   margin: 0;
   padding: 0;
 }

Selector de Tipo o Etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin los caracteres < y >) correspondiente a los elementos que se quieren seleccionar.

El siguiente ejemplo selecciona todos los párrafos de la página:

				
					p { 
      … declaraciones…
  }

Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se puede aplicar un selector múltiple a una sola regla. Para esto, se incluyen todos los selectores, separados por una coma. Por ejemplo:

				
					h1, h2, h3 {
             color: #8A8E27; /* Color del Texto */
             font-weight: normal; /* El peso del texto Nomal/Negrita/Fina  */
             font-family: Arial, Helvetica, sans-serif; /* La Fuente del texto */
           }

En las hojas de estilos complejas es habitual agrupar las propiedades comunes de varios elementos en una única regla CSS y, posteriormente, definir las propiedades específicas de esos mismos elementos. Por ejemplo, tras el código anterior, podemos escribir:

				
					h1 {font-size: 2em}
h2 {font-size: 1.5em}
h3 {font-size: 1.2em}

🔹`h1 { font-size: 2em; }`

Aplica un tamaño de fuente de 2 veces el tamaño de la fuente base (que normalmente es definido por el navegador o un estilo global).

Generalmente, h1 es el encabezado más importante y grande en una página.

🔹`h2 { font-size: 1.5em; }`

Aplica un tamaño de fuente de 1.5 veces el tamaño de la fuente base.

h2 suele ser un subtítulo o una sección secundaria.

🔹`h3 { font-size: 1.2em; }`

Aplica un tamaño de fuente de 1.2 veces el tamaño de la fuente base.

h3 normalmente representa un encabezado terciario o subsección.

Unidades em

La unidad em es relativa al tamaño de fuente del elemento padre. Si el elemento padre tiene un tamaño de fuente de 16px (por defecto en la mayoría de los navegadores), entonces:

🔹2em será 32px.

🔹1.5em será 24px.

🔹1.2em será 19.2px.

Si el tamaño de fuente del elemento padre cambia, los valores definidos con em se ajustarán proporcionalmente. Esto hace que em sea útil para diseños escalables y responsivos.

Selectores Descendentes

Un selector descendiente es aquél que permite seleccionar elementos que se encuentran dentro de otros elementos.

El selector del ejemplo siguiente selecciona todos los elementos <span> de la página que se encuentren dentro de un elemento <p>:

				
					p span { color: red; }

Si éste se aplica al siguiente código HTML de una página:

				
					<p>
    <span>Texto1</span>
    …
    <a href=" ">… <span> Texto2 </span></a>
</p>

El selector p span seleccionará tanto texto1 como texto2. El motivo es que en el selector descendiente, un elemento no tiene que ser “hijo directo” de otro, sino que basta con que se encuentre dentro de él.

Al resto de los elementos <span> de la página que no están dentro de un elemento <p>, no se les aplica la regla CSS anterior.

La sintaxis formal del selector descendente se muestra a continuación:

				
					elemento1 elemento2 elemento3 … elementoN

donde elementoN indica el elemento sobre el que se aplican los estilos y el resto indica el lugar en que se tiene que encontrar elementoN para que los estilos se apliquen realmente.

En el siguiente ejemplo, el selector descendente contiene cuatro elementos:

				
					p a span em {text-decoration: underline; }

El estilo subrayado de esta regla se aplicará a los elementos de tipo <em> que se encuentren dentro de elementos de tipo <span> que, a su vez, estén contenidos en elementos de tipo <a> que estén dentro de elementos de tipo <p>.

Selector de Clases

Este selector permite aplicar estilo a uno o varios elementos de una página. Por ejemplo, si en el siguiente código HTML queremos que los textos del primer y tercer párrafo se muestren en rojo:

				
					<body>
  <p>Párrafo número 1…</p>
  <p>Párrafo número 2…</p>
  <p>Párrafo número 3…</p>
</body>

Únicamente tendremos que especificar el atributo class de HTML sobre el elemento para indicar directamente la regla CSS que se le debe aplicar:

				
					<body>
  <p class=”destacado”>Párrafo número 1…</p>
  <p>Párrafo número 2…</p>
  <p class=”destacado”>Párrafo número 3…</p>
</body>

Crear, en el archivo CSS, una nueva regla cuyo selector es el valor del atributo class, precedido por el carácter punto y con todos los estilos que se quieren asignar. En nuestro ejemplo:

				
					.destacado {color: red; }

El selector .destacado se interpreta como “cualquier elemento de la página cuyo atributo class sea igual a destacado”.

La principal característica de este selector es que, en una misma página HTML, varios elementos diferentes pueden utilizar el mismo valor en el atributo class.

Por el contrario, a veces, es necesario restringir el alcance del selector de clase. Para ello, escribiremos el selector de tipo o etiqueta y el de clase. Supongamos que en el ejemplo anterior, sólo queremos aplicar el estilo al párrafo que lleve el atributo class con valor destacado. Para ello, utilizaremos el selector:

				
					p.destacado {color: red; }

Hay que distinguir, por tanto, entre estas expresiones:

🔹 p.destacado {…} (Todo junto) Todos los elementos de tipo “p” con atributo class=”destacado”.

🔹 p .destacado {…} (Un espacio) Todos los elementos con atributo class=”destacado” que estén dentro de cualquier elemento de tipo “p”.

🔹 p, .destacado{…} (Coma y espacio) Todos los elementos “p” de la página y todos los elementos con atributo class=”destacado” de la página.

Selector por identificador

La sintaxis de los selectores por identificador es igual a la de los selectores de clase, salvo porque se utiliza el símbolo almohadilla ( # ), en vez del punto ( . ), como prefijo del nombre de la regla CSS.

En el siguiente ejemplo, el selector #destacado solamente selecciona el segundo párrafo:

				
					#destacado {color: red; }

<p>Primer párrafo</p>
<p id=”destacado”>Segundo párrafo</p>
<p>Tercer párrafo</p>

En general, se recomienda usar el selector por identificador cuando se quiere aplicar un estilo a un solo elemento específico de una página y el selector de clase cuando se quiere aplicar un estilo a varios elementos diferentes de la misma.

Cuando se trabaja sobre varias páginas suele resultar útil restringir el alcance de un selector por identificador. En el siguiente ejemplo se aplica la regla CSS sólo al elemento de tipo <p> que tenga un atributo id igual al indicado:

				
					p#destacado {color: red; }

En este caso, algunas páginas pueden disponer de elementos con un atributo id igual a destacado y que no sean párrafos, por lo que la regla anterior no se aplicará sobre esos elementos.

No debe confundirse el selector por identificador con los selectores anteriores:

🔹 p#destacado {…} : Todos los elementos de tipo “p” con atributo id=”destacado”

🔹 p #destacado {…} : Todos los elementos con atributo id=”destacado” que estén dentro de cualquier elemento de tipo “p”

🔹 p, #destacado{…}: Todos los elementos “p” de la página y todos los elementos con atributo id=”destacado” de la página.

Aunque con los selectores básicos es posible diseñar prácticamente cualquier página web, tenemos la opción de utilizar los selectores avanzados para simplificar las hojas de estilos.

Selectores Avanzados

Selectores Hijos

Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el signo mayor que ( > ). Veamos un ejemplo:

				
					 p > span {color: blue; }

<p><span>texto1</span></p>
<p><a href=”#”><span>Texto2</span></a></p>

El selector p > span se interpreta como “cualquier elemento <span> que sea hijo directo de un elemento <p>”. Por ello, el primer elemento <span> cumple la condición del selector, pero el segundo no la cumple porque es descendiente pero no es hijo directo de <p>.

Selector Adyacente

El selector adyacente utiliza el signo + y su sintaxis es la siguiente:

				
					elemento1 + elemento2 { …}

Con él se seleccionan todos los elementos de tipo elemento2 que cumplan las dos siguientes condiciones:

🔹Condición 1: elemento1 y elemento2 deben ser hermanos, por lo que su padre debe ser el mismo.

🔹Condición 2: elemento2 debe aparecer inmediatamente después de elemento1 en el código HTML de la página.

				
					h1 + h2  {color: red; }

<body>
  <h1>Título1</h1> 
  <h2>Subtítulo</h2> /* Solo se aplicará a este h2 */
  …
  <h2>Otro subtítulo</h2>
</body>

Los estilos del selector h1 + h2 se aplican al primer elemento h2 de la página, pero no al segundo <h2>, ya que:

El elemento padre de <h1> es <body>, el mismo que el de los dos elementos <h2>. Así, los dos elementos <h2> cumplen la primera condición del selector adyacente.

El primer elemento <h2> aparece en el código HTML, justo después del elemento <h1>, por lo que este elemento <h2> también cumple la segunda condición del selector adyacente.

Por el contrario, el segundo elemento <h2> no aparece justo después del elemento <h1>, por el que no cumple la segunda condición del selector adyacente y, por tanto, no se aplican los estilos h1 + h2.

En el ejemplo anterior, podemos ver como al especificar los selectores spam + spam, se aplica tanto a la primera etiqueta spam (ya que delante tiene una igual) y a la siguiente ya que el proceso se repite al volver a tener en este caso la segunda etiqueta span delante.

Selector de Atributos

Permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.

Existen estos cuatro tipos de selectores de atributos:

🔸[nombre_atributo] Selecciona los elementos, que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor.

Ejemplo:

				
					a[class] {color: blue;}

🔸[nombre_atributo=valor] Selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con valor igual a valor.

Ejemplo:

				
					a[class=”externo”] {color: blue;}

🔸[nombre_atributo~=valor] Selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con valor igual a valor, siendo valor un texto de entre varios que tiene el atributo.

Ejemplo:

				
					a[title~=”externo”] {color: blue;}

🔸[nombre_atributo|=valor] Selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas por guiones, pero que comienza por valor.

Ejemplo:

				
					*[lang|=”es”] {color: blue;}

Propiedades de estilo: color, posición, tamaño, fuente, etc.

CSS incluye propiedades para personalizar el diseño, como por ejemplo:

🔹color: Define el color del texto.

🔹background-color: Color de fondo del elemento.

🔹font-size: Tamaño de la fuente.

🔹margin: Espacio exterior del elemento.

🔹padding: Espacio interior del elemento.

				
					h1 {
    color: red;
    background-color: yellow;
    padding: 10px;
}

Unidades de medida

Las medidas en CSS se emplean, entre otras cosas, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto. Todas las medidas se expresan con un valor numérico entero o decimal seguido de una unidad de medida, sin ningún espacio en blanco entre ellos.

Las unidades de medida CSS pueden ser de dos tipos:

🔹Relativas: definen su valor en relación con otra medida por lo que, para obtener su valor, se debe realizar alguna operación con el valor indicado.

🔹Absolutas: establecen de forma completa el valor de una medida, por lo que su valor real es exactamente el especificado.

Unidades relativas

Estas unidades son más flexibles que las unidades absolutas porque se adaptan más fácilmente a los diferentes medios. Son las siguientes:

em : Relativa al tamaño de letra empleado. Aunque no es una definición exacta, el valor 1em se puede aproximar por la altura de la letra “m” del tipo de letra que se esté empleando. Por ejemplo, h1 { font-size: 2em; } indica que el tamaño de letra para el texto referenciado por <h1> será el doble del tamaño que se esté usando.
ex : también es relativa al tamaño de la letra empleada pero, esta vez, respecto a la altura de la letra “x”.
px : Píxel, relativa respecto a la pantalla del usuario.
% : Porcentaje, hace referencia a otra medida.

Estas medidas se pueden utilizar en diferentes elementos de una misma página, como se puede ver en el siguiente ejemplo:

				
					body { font-size: 10px; }
h1 { font-size: 2.5em; }

En la primera línea se establece un tamaño de letra base de 10 pixeles para toda la página. En la segunda, se asigna el tamaño 2.5em al elemento <h1>, por lo que su tamaño de letra real será de 2.5 x 10px = 25px.

Unidades Absolutas

CSS permite utilizar las siguientes unidades absolutas:

in : pulgadas (en inglés, “inches”). Una pulgada equivale a 2.54 centímetros.
cm : centímetros.
mm : milímetros.
pt : Puntos. Un punto equivale a 1/72 pulgadas, es decir, a unos 0.35 milímetros.
pc : Picas. Una pica equivales a 1/12 puntos, es decir, unos 4.23 milímetros.

He aquí algunos ejemplos de utilización de estas unidades:

				
					body { margin: 0.5in; }
h1 {line-height: 2cm; }
p {word-spacing: 4mm; }
a { font-size: 12 pt; }
span { font-size: 1pc; }

Colores en CSS

Los colores en CSS se pueden indicar de cinco modos diferentes: palabras clave, colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual. De ellos, el más habitual es el RGB hexadecimal.

Palabras clave

CSS define 17 palabras clave para referirse a los colores básicos, que corresponden al nombre en inglés de cada color:

aqua, black, blue, fucsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow

Aunque es una forma muy sencilla de referirse a los colores básicos, este método apenas se utiliza porque permite representar una gama de colores muy limitada.

Además de esta lista básica, los navegadores modernos soportan muchos otros nombres de colores.

RGB decimal

El modelo RGB permite definir un color indicando las cantidades de las componentes rojo (Red), verde (Green) y azul (Blue) que se deben mezclar para obtenerlo. Estas cantidades pueden ir desde cero a un valor máximo. En concreto, en CSS, las componentes de los colores definidos mediante RGB decimal pueden tomar valores entre 0 y 255.

Si el valor de cada componente es cero, el color creado será el negro y, si es el máximo, se obtendrá el blanco. Por otro lado, para crear el color rojo puro se utilizará el máximo valor para la cantidad de rojo y valor cero para la cantidad de verde y azul.La sintaxis para indicar un color consiste en escribir rgb( ) y, dentro del paréntesis, los valores de las tres componentes separados por comas. En el siguiente ejemplo se establece el color del texto de un párrafo:

				
					p {color: rgb(71, 98, 176); }

RGB porcentual

El funcionamiento y la sintaxis de este método es el mismo que el del RGB decimal, excepto porque el valor de las componentes está comprendido entre 0% y 100%. El ejemplo anterior también se podría escribir así:

				
					p {color: rgb(27%, 38%, 69%); }

RGB hexadecimal

En este caso, el valor de cada componente se expresa mediante un número hexadecimal comprendido entre 0 y FF. Sin embargo, la sintaxis para indicar un color concreto varía ligeramente puesto que simplemente se escribirá el símbolo # seguido de dos dígitos hexadecimales para cada una de las componentes.El ejemplo de las secciones anteriores se escribe así:

				
					p {color: #4762B0; }

Una ventaja de este formato es que permite comprimir sus valores cuando las tres componentes contienen un mismo dígito repetido. Por ejemplo: El color #AA0066 puede expresarse como #A06.

En el siguiente ejemplo se establece el color de fondo de la página a blanco, el del texto a negro y el de los titulares a rojo:

				
					body {
    background-color: #FFF; 
    color: #000; 
}

h1, h2, h3, h4, h5, h6 {
    color: #C00;
}

Posicionamiento en CSS

Los navegadores crean y posicionan de forma automática todas las cajas que forman cada página HTML. No obstante, CSS permite al diseñador modificar la posición en la que se muestra cada caja. Normalmente, cuando se posiciona una caja también es necesario desplazarla respecto de su posición original o respecto de otro origen de coordenadas. CSS define cuatro propiedades para controlar este desplazamiento.

Desplazamientos

🔸top : Desplazamineto superior.

🔸right : Desplazamiento lateral derecho.

🔸bottom : Desplazamiento inferior.

🔸left : Desplazamiento lateral izquierdo.

Los valores de estas propias cuatro propiedades pueden ser : <medida> | <porcentaje> | auto | inherit

Top	Right	Bottom	Left
Desplazamiento superior	Desplazamiento lateral derecho	Desplazamiento inferior	Desplazamiento lateral izquierdo

Se aplica a	Valor Inicial	Descripción
medida, porcentaje, auto, inherit	Todos los elementos posicionados.	Auto

En CSS, la propiedad inherit se usa para indicar que un elemento debe heredar el valor de una propiedad específica de su elemento padre.

Esto puede aplicarse a cualquier propiedad CSS que sea heredable, o incluso a propiedades que no lo son de forma predeterminada, si se especifica explícitamente con el valor inherit.

El posicionamiento de una caja se establece mediante la propiedad position, y los valores que utilizan esta propiedad son static | relative |absolute | fixed | inherit.

Los tipos de posicionamiento son:

🔸Posicionamiento normal o estático (static): utilizado por defecto por los navegadores y en el que se ignoran los valores de las propiedades top, right, bottom y left.

🔸Posicionamiento relativo (relative): consiste en aplicar a una caja su posicionamiento normal y, después, desplazarla respecto a su posición original mediante las propiedades top, right, bottom y left.

🔸Posicionamiento absoluto (absolute): establece la posición de una caja de forma absoluta respecto a su elemento contenedor y el resto de los elementos de la página ignoran dicha posición.

🔸Posicionamiento fijo (fixed): convierte una caja en un elemento inmovible, de forma que su posición en la pantalla siempre es la misma, independientemente del resto de los elementos y de si el usuario sube o baja la página en la ventana del navegador.

🔸Posicionamiento flotante: desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la línea en que se encuentran, para lo cual se utiliza la propiedad float.

Creación de hojas de estilo

Existen distintas formas de incluir hojas de estilo en un documento HTML.

Estilos en línea, internos y externos

🔸Estilos en línea: Directamente en la etiqueta HTML:

				
					<style>
    body {
        font-family: Arial, sans-serif;
    }
</style>

🔸Estilos internos: Dentro de la etiqueta <style> en el <head>:

				
					<p style="color: blue;">Texto azul</p>

🔸Estilos externos: En un archivo CSS separado:

				
					/* Archivo styles.css */
body {
    background-color: greenyellow;
}

Enlazado en el HTML:

				
					 <!-- Archivo HTML -->
<link rel="stylesheet" href="styles.css">

También se puede llamar al archivo externo desde la etiqueta <style> poniendo @import «url», como primera línea:

				
					<style>
  @import “url”;
  Resto de definición de estilo …

Elementos y Etiquetas HTML

Diseño y Maquetación

Introducción a CSS