Ejercicios CSS Resueltos

IMPORTANTE: el estilo debería ir en un archivo aparte. Yo por comodidad lo incluyo todo en el mismo archivo .html
<link rel="stylesheet" href="style.css">

Ejercicio 1. Estilos a textos.

Realiza lo siguiente en CSS.

css

Explicación:

Tamaño de la fuente – font-size
Unidades Absolutas: valor exacto(cm, mm, in, px, pt, pc).
Unidades Relativas:

  • rem –> del elemento raíz del documento (se toma como referencia letra “M”).
  • em  –> del elemento (se toma como referencia letra “M”).
  • %    –> del padre.
 

Ejercicio 2. Estilos a textos.

Realiza lo siguiente en CSS.

textos en CSS

 

Ejercicio 3. Menú.

Realiza el siguiente menú.

menu_css

 

Ejercicio 4. Menú con Flex.

Realiza el siguiente menú con Flex.

menu_css

 

Ejercicio 5. Tablas.

Realiza la siguiente tabla.

CSS Tablas

  • Debemos evitar las tablas y los frames para maquetar. Para eso están los div.
  • Las tablas se utilizan para datos tabulados.
 

Ejercicio 6. Dar estilo a la maqueta de una página web.

Dado el siguiente código HTLM5 y las siguientes orientaciones, obtén el siguiente diseño de página con CSS.

css

Codigo HTML5:

 

Orientaciones:

  1. Los estilos deben ir en el archivo css
  2. Contenedor: tiene un ancho del 80% con un ancho máximo de 950 píxeles.
  3. Cabecera: tamaño de fuente 2 em. Margen de abajo 0,5 em.
  4. Menú: definir el margen de abajo con una cantidad relativa, 2 veces el tamaño de la letra.
  5. Enlaces del menú: aparecen en la misma línea, sin subrayar, de color azul y al pasar por encima se cambia a color negro.
  6. Contenido: tiene un color de fondo gris, borde rojo y color de texto blanco.
  7. Etiqueta H2 clase artículo: son de tipo Verdana, de color rojo.

Código CSS Hoja de estilos – style6.css:

 

Ejercicio 7. Float.

Según el código HTML5 siguiente, aplicando CSS obtén el siguiente diseño.

Ejercicio 7 CSS

Código HTML5:

 

Código CSS:

 

Deja un comentario

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies ACEPTAR

Aviso de cookies