Scribd
Cargar
27 vistas2 páginas

Estilos CSS para Páginas HTML

La guía complementaria enseña a los estudiantes a aplicar estilos CSS a páginas HTML, incluyendo la creación y vinculación de archivos .css. Proporciona ejemplos ilustrativos de cómo estructurar archivos HTML y CSS, así como ejercicios prácticos para estilizar listas, tablas, imágenes, formularios y un mini proyecto personal. Cada ejercicio requiere la modificación de múltiples atributos CSS para personalizar la presentación de los elementos.

Cargado por

Crisber Castillo
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
27 vistas2 páginas

Estilos CSS para Páginas HTML

La guía complementaria enseña a los estudiantes a aplicar estilos CSS a páginas HTML, incluyendo la creación y vinculación de archivos .css. Proporciona ejemplos ilustrativos de cómo estructurar archivos HTML y CSS, así como ejercicios prácticos para estilizar listas, tablas, imágenes, formularios y un mini proyecto personal. Cada ejercicio requiere la modificación de múltiples atributos CSS para personalizar la presentación de los elementos.

Cargado por

Crisber Castillo
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

Guía Complementaria: Aplicación de Estilos con CSS

Esta guía tiene como objetivo que los estudiantes apliquen estilos CSS a páginas HTML
previamente desarrolladas. Aprenderán a crear archivos .css, vincularlos correctamente y
utilizar múltiples propiedades para personalizar etiquetas HTML.

Ejemplo Ilustrativo: Cómo Vincular un Archivo CSS a HTML


Archivo HTML ([Link]):

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo CSS</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Bienvenidos</h1>
<p>Este es un ejemplo de página con estilos.</p>
</body>
</html>

Archivo CSS ([Link]):

body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
color: #333;
margin: 20px;
padding: 20px;
}

h1 {
color: navy;
text-align: center;
font-size: 36px;
text-transform: uppercase;
letter-spacing: 2px;
}

p{
font-size: 18px;
line-height: 1.6;
color: darkslategray;
border: 1px solid #ccc;
padding: 10px;
}

Ejercicios de Estilización con CSS

Ejercicio 1
Crear una página que contenga una lista ordenada y no ordenada. Aplica estilos CSS
diferentes a cada tipo de lista. Modifica al menos 5 atributos como: color, tipo de viñeta,
espaciado, alineación y márgenes.

Ejercicio 2
Crear una página que muestre una tabla de datos. Utiliza CSS para aplicar estilos a la tabla,
filas y celdas. Modifica atributos como bordes, colores, alineación de texto, ancho de
columnas y fuente.

Ejercicio 3
Generar una página con imágenes y enlaces. Aplica estilos a las imágenes y enlaces. Modifica
atributos como tamaño, borde, opacidad, hover en enlaces, y espaciado.

Ejercicio 4
Diseñar un formulario básico con campos de nombre, correo y botón enviar. Estiliza los
campos y el botón usando CSS. Modifica atributos como padding, margin, border-radius,
background-color y box-shadow.

Ejercicio 5 (Mini Proyecto)


Crear una página personal que contenga una cabecera, presentación personal, tabla de
hobbies, lista de libros favoritos y formulario de contacto. Aplica estilos CSS a cada
componente con al menos 5 atributos modificados por sección (cabecera, tabla, lista,
formulario, footer).

También podría gustarte