Ejercicios básicos de CSS

Estos ejercicios son para practicar con CSS a un nivel básico. Puedes hacerlos todos en una misma página para obtener al final una página completa con todas las respuestas.

En algunos ejercicios se trata de escribir estilos en el propio código HTML, aunque esto no va a ser lo habitual ni recomendable, debes conocer como funciona.

Las reglas vas a definirlas en la sección HEAD de la página web. Las soluciones puedes verla en el código fuente de la página abierta con el botón resultado

Las soluciones las tienes en el código fuente de la página resultado en el navegador (CTRL-U o menú contextual). Si tienes dudas o sugerencias o quieres ejercicios de algún tema concreto envía tu mensaje

 

Estilos en linea.

Crea una página web donde aparezca un titular o encabezado de nivel 1 dentro de un bloque tipo header. El titular deberá verse en color rojo y centrado

Tabla simple

Definir reglas

Crea una página web con el aspecto puedes ver en la imagen o en la página de resultado. La primera linea está escrita usando un bloque div, el texto que le sigue está escrito en tres párrafos. Ningún elemento usa atributos id o class. Debes crear las reglas de estilo necesarias para que el bloque div y los párrafos aparezcan como los ves en la página: titular en aul centrado y párrfos en rojo con margen izquierdo a 100px.

Tabla simple

Redefinir etiquetas

Crea esta página web que puedes ver en la imagen o en la página resultado. Son tres párrafos donde las etiquetas de datos (nombre, edad, estudios) están encerrados entre las etiquetas html de negrita (<b></b>). Usando las reglas de estilo debes hacer que esas eiquetas aparezcan en azul y cursiva, y sin negritas. No debes usar atributos id o class.

Tabla simple

Selectores

Crea una página web como la imagen o la página resultado. En esta ocasión el títular, Reglas con selectores, es un bloque div cuyo atributo class es titulo mientras que las líneas restantes son párrafos con atributo class igual a lineas. Especificaciones para el título

  • Tamaño de la fuente 24px;
  • Fuente: Arial, sans-serif
  • Centrado
  • Azul

Especificaciones de las lineas

  • Fuente arial, sans-serif
  • Color rojo
  • Margen izquierdo 80px

Define las reglas CSS para estos selectores

Tabla simple

Selectores individuales

Crea una página web que se vea como la imagen o la página resultado. El títular, Selectores individuales, es un bloque div cuyo atributo id es titulo. Cada párrafo lleva un id cuyos valores son p1, p2 respectivamente. El título será

  • Tamaño de la fuente 24px;
  • Fuente: Arial, sans-serif
  • Centrado
  • Azul y subrayado

Los párrafos usan como fuente arial, sans-serif y están en negrita.. El primer párrafo es rojo y alineado a la derecha y el segundo será azul y alineado a la izquierda.

Tabla simple

Tabla con bordes

En los ejercicios sobre tablas éstas quedaban algo difíciles de leer. Vamos a mejorarlos. Crea una tabla como la de la figura, es decir que las celdas tengan un borde, con un ancho de 200px (excepto la cabecera). La tabla debe quedar centrada con los bordes de las celdas fundidos unos con otros (collapse). Solo debes añadir las reglas de estilo, sin usar ni id ni class.

Si has seguido los jercicios de tablas puedes usarlos como punto de partida.

Tabla simple

Celdas centradas

En la tabla del ejercicio anterior añade los atributos necesaios al código y define las reglas necesarias para que las celdas de temperaturas queden centradas, además la fila de titulos de cada columna can a quedar con fondo negro y letras blancas. La tabla seuirá mostrando los bordes de celdas y quedará centrada en la página.

Tabla simple

Cards

Las cards (tarjetas) son una construcción casi standard por su uso. Vas consturir la card de la imagen. La página, de título Elemento Card, usa como fuente [Arial, sans-serif] y el tamaño por defecto será 14px (ponlo como propìedades de html). Como ves la card tiene tres parte cuyas class son: titulo, body, foot. las características son:

titulo: blacno sobre fondo gris, con un padding de 8pixels y centrado. La fuente es 1,5 veces el tamaño por defecto (unidades rem)

body: itálica, texto justificado, y paddign de 8px

pie: blanco sobre fondo gris claro, centrado y con padding de 8px.

El card lleva una sombra alrededor sin desplazamiento vertical ni horizontal y con el raidus y spread a 4px, el color gris claro.

Tabla simple

Cajas posicionadas

Usando bloques div con posicionamientos absolutos trata de definir las reglas de estilo necesarias para lograr que estos bloques se vean como en la imagen o en la página modelo. Vas a usar tres bloques con los coleres rojo, verde y azul. Están situados uno sobre otro se indica. Todos los bloques comparten tipo de posición (absolute) y tamaño (ancho y alto 200px ). Las posiciones top y left en pixesl para el primero (100, 100), el segundo (150,150) y el tercero (200,200). Utiliza una class común para los estilos comunes a todos y luego un id para los estilos con las propiedades diferentes.

Tabla simple

Combinar selectores

Crea la página de la imagen en la que tienes una tabla con cabecera y pie. Todas las celdas del cuerpo de la tabla tienen el mismo aspecto: fondo blanco texto arial y azul, con borde y paddign 8px en vertical y 4 en lo laterales. Las celdas que tengan la clase destacar deben tener el fondo rojo y las letras blancas. El pie de la tabla usa un texto centrado de tamaño 12px. El ancho de las columnas lo debes fijar con las celdas th en 170px. El titular (caption) de la tabla tiene un texto de tamaño 18px y está en negrita
Tabla simple