Conceptos HTML

y JavaScript
CSS

Bloque 2
CSS

Contenido del bloque 2

1. ¿Qué significa CSS? 12. Definir la posición de un elemento
2. Sintaxis de las reglas CSS. 13. Otras propiedades interesantes.
3. Selectores en CSS. 14. Pseudoclases.
4. Cómo insertar CSS en HTML. 15. ¿Qué es una ‘web responsive’?
5. Colores en CSS. 16. Media queries.
6. Alto y ancho de los elementos CSS.
7. Propiedades para los bordes.
8. Margin y padding en CSS.
9. Funciones matemáticas como valor.
10. El modelo de cajas en CSS.
11. Modelo flexbox
3 Editeca.com ® Todos los Derechos Reservados 2021
CSS

¿Qué significa CSS?

CSS son las siglas de hojas de estilo en cascada. Siempre acompañado de HTML, es un lenguaje que describe
cómo se muestran sus elementos, y ahorra mucho trabajo al programador ya que una sola hoja de estilos basta para
un proyecto entero.

CSS nos permite que podamos presentar el mismo contenido de formas muy variadas, es la clave para conseguir
portabilidad tan apreciada en este tiempo.

Un lenguaje de hoja de estilos se define como aquel que es utilizado para estructurar el diseño de un lenguaje de
marcado.

Una hoja de estilos se compone de reglas, cada regla está compuesta por un selector y un bloque de declaración.

4 Editeca.com ® Todos los Derechos Reservados 2021

CSS

Sintaxis de las reglas en CSS

Las reglas en CSS están compuestas de un selector y un bloque para declarar los estilos.

Selector: Selecciona el elemento HTML al que se quiere aplicar un estilo.

Bloque de declaración: Contiene una o más declaraciones referentes al estilo del elemento seleccionado,
separadas por “;”. Cada declaración está compuesta por un nombre y un valor. Los bloques de declaración deben
estar contenidos entre “{ }”.

5 Editeca.com ® Todos los Derechos Reservados 2021

CSS

Selectores en CSS
Los selectores nos dicen a qué elemento HTML debemos aplicar el estilo declarado en su bloque. Hay muchas
formas de seleccionar estos elementos, vamos a ver algunas de las más importantes:

Selector de elemento: Selecciona el elemento basándose en el tipo de su etiqueta

Selector de ID: Selecciona el elemento mediante su atributo id, que es un identificador único. Para seleccionarlo se
utiliza la sintaxis “#nombreID”

Selector de clase: Selecciona el elemento mediante su atributo class. Se utiliza la sintaxis “.class“.
Se puede combinar con el selector de elemento declarando “elemento. class”

Selector universal: Aplica a todos los elementos de la página, se define con “*”.

Selector en grupo: Se puede aplicar el mismo estilo a varios elementos distintos, agrupando sus selectores.

6 Editeca.com ® Todos los Derechos Reservados 2021

CSS

Como insertar CSS a un archivo HTML

Como ya hemos visto, hay tres formas de añadir código CSS a nuestros archivos HTML:

Externos: Se llama a una hoja de estilos mediante a etiqueta <link> para que sea importado en el archivo HTML.

Internos: Se declara código CSS que será aplicado al documento HTML dentro de la etiqueta <style>.

Como atributo: Se declara como atributo “style” del elemento HTML, dándole como valor el código CSS que le
queremos aplicar.

7 Editeca.com ® Todos los Derechos Reservados 2021

CSS

Colores en CSS
Los colores pueden ser definidos de varias formas, las más comunes son:

• Palabra predefinida: Hay muchos colores que tienen una palabra asociada, como puede ser Orange, LightGray,
Tomato, Green,…

• RGB: Con el formato rgb(red, green, blue). Podemos añadir transparencia añadiendo un cuarto valor, por
ejemplo, si queremos elegir el naranja con una transparencia del 50% usaremos rgb(255,165, 0, 0.5)

• HEX: Cada color tiene un código en la codificación hexadecimal, de la forma #rrggbb, por ejemplo el naranja
que hemos visto es #ffa500

Estos valores pueden ser aplicados a multitud de propiedades, como puede ser background-color, color, border,…

8 Editeca.com ® Todos los Derechos Reservados 2021

CSS

Propiedades para fondos

Los backgrounds, o fondos, nos sirven para añadir efectos o estilos al fondo de los elementos HTML.

Hay distintas propiedades, como puede ser background-color, background-image, background-position,…

La propiedad background-image toma un valor del tipo background-image: url(“ruta_a_la_imagen”).

Mediante background-repeat podemos definir de qué forma se repite una imagen si no se ajusta al elemento
donde está contenida como fondo.

Mediante background-attachment definimos si la imagen debe poder ser desplazada al mover nuestro viewport, o
por el contrario debe ser fija.

También podemos añadir opacidad al elemento mediante la propiedad opacity, que puede tomar un valor de 0 a 1.

9 Editeca.com ® Todos los Derechos Reservados 2021

CSS

Alto y ancho de los elementos en CSS

Se pueden modificar con las propiedades height and width, y se puede modificar el máximo o mínimo valor que
pueden tomar con el prefijo min o max. Los tamaños en CSS pueden tomar los siguientes valores:

• auto: Por defecto, el explorador calcula ambas dimensiones.

• % : Define las dimensiones en porcentaje respecto al contenedor donde se encuentra el elemento.

• Initial: Fija las dimensiones en su valor por defecto.

• Inherit: Las dimensiones son heredadas de su elemento padre.

• cm, px, mm, in,… : Fija el valor de las dimensiones en unidades.

• vh y vw: Cada unidad de vh hace referencia a 1% de la altura del área visible de una web, y cada unidad de vw

hace referencia al ancho del mismo modo.

10 Editeca.com ® Todos los Derechos Reservados 2021

CSS

Propiedades para los bordes

Los bordes representan el límite de los elementos HTML. Podremos seleccionar qué borde queremos modificar
mediante border, border-bottom, border-top, border-left y border-right.

Se pueden crear bordes mediante la sintaxis “border: width color style”.

El estilo puede tomar diferentes valores, como solid, dotted, double, dashed,…

También podemos definir si las esquinas de los bordes son redondeadas, utilizando la propiedad border-radius,
que toma un valor en unidades de longitud.

11 Editeca.com ® Todos los Derechos Reservados 2021

CSS

Margin y padding en CSS

Las propiedades referentes al padding son utilizadas para generar espacio alrededor del contenido del elemento,
dentro de sus bordes.

Las propiedades referentes al margen crean espacio fuera de los bordes alrededor del elemento.

Se puede acceder a las distintas partes de ambas propiedades mediante el sufijo top, bottom, right y left.

Para declarar diferentes valores para cada lado utilizando solo padding o margin,
Utilizamos la sintaxis “nombre: top right bottom left;”

12 Editeca.com ® Todos los Derechos Reservados 2021

CSS

Estilos para texto

Hay muchas propiedades para definir el estilo de los textos.
• color: Define el color del texto
• text-align: Define el alineamiento horizontal de un texto. Puede tomar valores como center, right, left, justify,…
• text-decoration: Se usa para definir o borrar decorado de un texto. Se usa mucho en links con el valor none
para quitar el subrayado. Puede tomar valores como underline o line-through.
• text-transformation: Permite cambiar las letras a mayúsculas o minúsculas.
• font-family: Define la fuente de un texto. Debe agrupar varios tipos de fuentes con el objetivo de tener fuentes
de reserva si el navegador no adite el tipo que le hemos indicado.
• font-size: Indica el tamaño del texto

Existen muchas otras propiedades, como vertical-align, text-indent, text-shadow, line-height, font-weight…

13 Editeca.com ® Todos los Derechos Reservados 2021

CSS

Funciones matemáticas como valor

Podemos definir un valor mediante estas funciones:
• max (valor1, valor2,…): La propiedad toma el valor más alto entre los que se le pasa.
• min (valor1, valor2,…): La propiedad toma el valor más bajo entre los que se le pasa.
• calc (expresión): Se puede calcular el valor mediante un cálculo matemático.

14 Editeca.com ® Todos los Derechos Reservados 2021

CSS

El modelo de cajas en CSS

Todo en CSS tiene una caja alrededor, y comprender estas cajas es clave para poder crear diseños con CSS o para
alinear elementos con otros elementos. Hay que distinguir entre estos valores para la propiedad display:

• block: La caja fuerza un salto de línea, se extiende para llenar todo el espacio disponible y las propiedades de la
caja la mantendrán alejada de los demás elementos.

• inline: No fuerza un salto de línea, no se le aplican las propiedades de ancho y alto, no mantiene alejadas otras
cajas de forma vertical.

• flex: Método que pueda ayudar a distribuir el espacio entre los elementos y mejorar las capacidades de
alineación. Los elementos se estructuran en filas o columnas, pudiendo contraerse y ajustando sus dimensiones y
su posición para llenar el espacio disponible

15 Editeca.com ® Todos los Derechos Reservados 2021

CSS

Modelo flexbox
El modelo flexbox, es un método que ayuda a distribuir el espacio entre los elementos de forma dinámica al
cambiar sus propiedades de tamaño. Tiene las siguientes propiedades:
• flex-direction: Puede tomar los valores row, row-reverse- column y column-reverse. Se utiliza para definir hacia
que dirección están colocados los elementos en el contenedor.
• flex-wrap: Para definir si nuestros elementos se colocan en una sola línea o puede ocupar alguna más si es
necesario. Puede tomar los valores wrap o nowrap.
• flex-grow: Con esta propiedad se define como crecerá el tamaño de un elemento respecto a los demás de forma
proporcionada. Si un elemento tiene flex-grow: 1 y otro flex-grow: 2, el segundo crecerá el doble que el primero.
• flex-shrink: Similar a flex-grow, pero al contraerse.
• flex-basis: Especifica la longitud inicial de un elemento dentro de un contenedor flexible.
• flex: Nos permite juntar las tres propiedades anteriores en un único paso, flex: flex-grow flex-shrink flex-basis.
• justify-content: Alinea los elementos cuando no utilizan el máximo espacio disponible en un contenedor
flexible de forma horizontal. Valores start, end, center, space-around, space-between, …
• align-items: Define de qué forma se alinean verticalmente los elementos dentro de un contenedor flexible.
Valores flex-end, center, flex-start, calc (exp),..

16 Editeca.com ® Todos los Derechos Reservados 2021

CSS

Definir la posición de un elemento

La propiedad position nos permite definir la posición de un elemento HTML en nuestra página web. Puede tomar
varios valores:
• relative: Es posicionado de forma normal respecto a su elemento padre, y puede ser desplazado mediante top,
right, bottom y left.
• absolute: No produce espacio para sí mismo respecto a los demás elementos, se posiciona de forma relativa al
documento en su totalidad, con propiedades top, right, bottom y left.
• sticky: El elemento se adhiere de forma fija a su elemento padre, y se desplaza en relación a él. Se posiciona
con las propiedades top, right, bottom y left.
• fixed: El elemento se mantiene fijo y no produce espacio alguno en el documento para sí mismo. Se establece su
posición con las propiedades top, right, left y bottom.
• static: Valor por defecto, posicionado de acuerdo al flujo normal del documento.

17 Editeca.com ® Todos los Derechos Reservados 2021

CSS

Otras propiedades interesantes

• overflow: Especifica si al excederse del contenido visible, se debe crear una barra para desplazarse por un
elemento HTML.
• z-index: Especifica qué elementos se superponen a otros al ocupar el mismo espacio. Cuanto mayor sea el valor,
de mayor orden es el elemento respecto a los demás.
• transform: Especifica una transformación sobre un elemento HTML, como puede ser rotarlo o cambiar su
escala.
• visibility: Define la visibilidad de un elemento, que puede esconderse mediante el valor hidden.

!important: Cuando se añade al valor de una propiedad esta palabra, se sobreescriben todos los estilos heredados
referentes a ella.

18 Editeca.com ® Todos los Derechos Reservados 2021

CSS

Pseudoclases
Las pseudoclases son palabras clave que se añaden a los selectores para definir un estilo en relación a un
determinado evento. Basta con añadir :pseudoclase después de selector para implementarlas. Algunas de las más
utilizadas son:
• :active: Representa un elemento (como un botón) que el usuario ha activado.
• :hover: Representa la interacción de señalar un elemento, sin necesidad de clickar.
• :link: Representa un elemento con una ruta externa que no se ha visitado.
• :visited: Representa un elemento con una ruta externa que se ha visitado.
• :focus: Representa un elemento que ha recibido el foco, como puede ser clickar en el campo de entrada de un
formulario.
• :enabled: Representa cualquier elemento habilitado, es decir, si puede ser activado o puede recibir un foco.
• :empty: Representa cualquier elemento sin hijos.
• :last-child: Representa el ultimo entre un grupo de elementos hermanos.
• :root: Representa el elemento raíz de un árbol que representa el documento.

19 Editeca.com ® Todos los Derechos Reservados 2021

CSS

¿Qué es una web ‘responsive’?

Una web responsive es aquella que es capaz de cambiar su aspecto en relación al dispositivo donde se ubica, de
forma que pueda ser visitada desde cualquier sitio.

Hoy en día es un concepto muy importante, y que debe ser tomado en cuenta en el diseño de cualquier aplicación
web.

20 Editeca.com ® Todos los Derechos Reservados 2021

CSS

Los media queries

Las media queries son una forma de modificar nuestra aplicación web en función de las dimensiones del
dispositivo donde se está ejecutando. Consisten en la palabra clave @media y una o más expresiones para describir
el dispositivo al que debe aplicarse el estilo.

21 Editeca.com ® Todos los Derechos Reservados 2021

CSS

Ejercicio final del bloque 2

En este ejercicio seguiremos el desarrollo de nuestra página web del bloque 1. Para ello, añadiremos estilos a la
página de la siguiente forma:
• Debemos añadir estilos vistos en el tema, es decir, texto, modelo de cajas, bordes, padding, márgenes, posición,
…
• Debemos utilizar diferentes selectores.
• Debemos añadir algún estilo provocado por pseudoclases.
• Aunque no es obligatorio, se valorará positivamente añadir estilo a alguno de los elementos con media queries
de forma que sea fácil de ver en móvil y ordenador.

La práctica debe ser entregada mediante Github, invitando al usuario RicardoCebrianGarcia a un repositorio creado
por el alumno, preferentemente actualizando el repositorio del ejercicio del bloque 1.

22 Editeca.com ® Todos los Derechos Reservados 2021

Gracias