Taller Programación web I (primer corte)

Tema: Hojas de estilo en cascada

Docente: Carlos M. Pineda Pertuz
Estudiante(s): Luis Antonio Montes Benavides
Romario Ramos Avendaño

1. Realizar una línea de tiempo sobre la historia de las hojas de estilo en cascada.
2. Explique para que sirven las siguientes declaraciones de hojas de estilo y de un ejemplo
de su uso:

 text-align: valor;
La propiedad text-align permite establecer la alineación horizontal de un
bloque de texto. Los posibles valores de text-
align son left (izquierda), right (derecha), center (centro) y justify (justificado a
derecha e izquierda).
Ejemplo:
text-align: right;

 background-color: valor;
La propiedad background-color permite establecer el color de fondo del
elemento.
background-color: lightblue;

 color:valor;
La propiedad color permite establecer el color del texto
color: blue;

 float:valor;
ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo
a los elementos de texto y en línea aparecer a su costado.
float: left;

 padding:valor;
El padding de un elemento es la cantidad de espacio entre el borde y el
contenido del elemento. Se dan entre uno y cuatro valores, donde cada valor
puede ser una longitud o un porcentaje. Los valores en porcentaje se refieren
al ancho del elemento padre. No se permiten los valores negativos.
padding: 10px 50px 20px;

 margin:valor;
establece el margen para los cuatro lados. Es una abreviación para evitar tener
que establecer cada lado por separado con las otras propiedades de margen:
margin-top (en-US), margin-right, margin-bottom y margin-left (en-US).

margin: 1em;
  font-weight: valor:
especifica el peso o grueso de la letra. Algunos tipos de letra sólo están
disponibles en normal y bold.
font-weight: normal;

 font-size: valor;
La propiedad font-size especifica la dimensión de la letra. Este tamaño puede, a
su vez, alterar el aspecto de alguna otra cosa, ya que se usa para calcular la
longitud de las unidades em y ex.
h1 { font-size: 250% }

 border: valor;
la propiedad border permite definir de golpe todos los bordes en una única
regla de la hoja de estilos. Se puede utilizar border para definir el o los valores
siguientes: border-width, border-style, border-color.

 clear: valor;
especifica si un elemento puede estar al lado de elementos flotantes que lo
preceden o si debe ser movido (cleared) debajo de ellos. La propiedad clear
aplica a ambos elementos flotantes y no flotantes.
clear: right;

3. Construya un blog básico con HTML5 y CSS como el de la siguiente imagen. Modifique
el código con información e imágenes de su interés:
 Páginas de apoyo

https://code.tutsplus.com/es/tutorials/the-30-css-selectors-you-must-memorize--
net-16048
https://codigofacilito.com/articulos/selectores-de-css
https://uniwebsidad.com/libros/css/capitulo-2
https://uniwebsidad.com/libros/css/capitulo-3
https://www.youtube.com/watch?v=yD9-2zyQhdo