UNIVERSIDAD TECNOLÓGICA DE PANAMÁ

FACULTAD DE INGENIERÍA DE SISTEMAS COMPUTACIONALES
HERRAMIENTAS DE PROGRAMACIÓN APLICADA IV
GUÍA DE LABORATORIO
CASCADE STYLE SHEETS
NOMBRE: NIETO, ANA 8-892-1660

Objetivos:

Modificar una página web (.html) desde un archivo CSS (.css)
Observar los cambios que presenta la página web (.html) con las propiedades de
CSS (.css)

Enunciado:

Crear una regla para la etiqueta <p>
Crear reglas independientes para las etiquetas <h1>, <h2>,<h3>

Crear una página web que describa un objeto (auto, cama, casa, etc.) sin utilizar
propiedades dentro del .html, utilizando el siguiente formato:


Titulo con el nombre del objeto.
Imagen del objeto.
Párrafo que describa el objeto en cuestión.

Luego, crear un archivo .css (con el nombre de “propiedades.css”) que contenga el
siguiente código:

h1, h2, h3

serif;

margin-right: auto;

{

}

}

text-align: center;

img

p

color: black;

{

{

font-weight: normal;

display:block;

text-align: justify;

font-family: Arial,
Helvetica, sans-

margin-left: auto;

color: black;

Centre el título. . sans- serif. y proceda a hacer los siguientes cambios:     Cambie los colores del título y el párrafo a negro. Helvetica. Justifique el párrafo. utilice la etiqueta <link> y escriba el siguiente código dentro de la etiqueta <head>: <head> <link rel=”stylesheets” type=”text/css” href=”propiedades.css al HTML. Cambie la fuente del título a Verdana.css”> </head> Observe. } Nota: para importar el archive . font-family: Arial.font-weight: normal.

CSS (propiedades. } h3 { text-align: left. font-family: cursive.  Creación del archivo CSS que contiene las reglas para <p> y para <h1>. <h2>. silla). font-weight: 250. sofá. } img { display:block. <h3>). silla). font-family: fantasy. margin-right: auto. esto para efecto de las siguientes instrucciones que se crearan en el código CSS. <h3>. } h2 { text-align: left. margin-left: auto. color: blue. font-weight: 200. <h2>. font-family: monospace. esto nos servirá para que nuestro elemento tome el estilo del selector P#objeto (objeto=cama. h1 { text-align: center. color: Red.DESARROLLO DEL LABORATORIO  Creación de la página con el título. De igual manera se puede observar que para cada párrafo se le coloco una instrucción parecida a esta id=” objeto” (objeto=cama. que estará definido en el archivo . } p#Cama . imagen y la descripción del objeto Como se puede observar cada nombre de objeto tiene una etiqueta diferente (etiquetas <h1>. font-weight: 300.css). color: black. sofá.

} . } p#Sofa { text-align: justify. Resultado de la ejecución de la página “labcss. font-size: 12pt. color:green. font-size: 14pt. color:red. font-size: 16pt.html” font-family: "Homer Simpson". font-family: monospace. } p#Silla { text-align: justify. color:green. font-family: cursive.{ text-align: justify. cursive.

Cada elemento tomo los estilos correspondientes a los que se definieron en nuestro código CSS. .