Hojas de Estilo CSS I

Leonardo Esteban Yáñez Melo

Programación HTML II

Instituto IACC

08 de julio de 2020
 Desarrollo

Primeramente, se deberá hacer la elección del método más apropiado para la inclusión de CSS en
las páginas web (la página del formulario y la respuesta de confirmación generada con PHP),
luego de lo cual se deberá hacer uso del modelo de cajas de CSS a fin de estructurar las mismas,
utilizando los distintos tipos de selectores con el objetivo de ofrecer una interfaz organizada y
profesional.
El documento resultante que deberá generar como entrega de la actividad de la semana 4 deberá
incluir el código CSS requerido y un documento anexo detallando las consideraciones de diseño
que se tomaron en cuenta para hacer la elección y el desarrollo del código CSS.

Como primer paso que podemos demostrar es el método con el que se decidió trabajar la hoja de

estilo CSS, es el método de tipo incrustado, se refiere principalmente a que el estilo CSS se

realiza al interior del código HTML utilizando <STYLE TYPE="text/css"> </STYLE>

permitiéndonos así darle el estilo que se pretende sin necesidad de crear una hoja de estilo

externa.
A continuación, se describen los elementos con los que se dio el estilo a este formulario, los que
serán explicados por apartado:
Comenzamos empleando estilo al BODY dándole un
color de fondo a través de BACKGROUND y se
agrega un PADDING esta sirve para establecer el
ancho del relleno de lo que cubre, en este caso, el
BODY.

Procedemos a darle estilo al FORM, dándole un

MARGIN 0 AUTO, lo que me permite dejarlo en el
centro de la página, todo el formulario, esto se hace
automáticamente. WIDTH de 400 pixeles que nos
permite dar un ancho fijo al elemento (en este caso el
formulario). Se le da COLOR y un borde redondeado
a través de BORDER_RADIUS.

La etiqueta H2 corresponde al título del formulario,

se le asigna un color un ancho de relleno un fondo y
un borde, con los elementos PADDING, COLOR y
BACKGROUND.

Al LEGEND se le da un color grisáceo, y al

FIELDSET se le determina el mismo ancho de
elemento que el FORM, a travpes de WIDTH y un
borde redondeado con BORDER-RADIUS.

Proseguimos con los INPUT les asignamos color y

borde una fuente a través de FONT de tipo y tamaño,
en este caso CALIBRI. Se le da un PADDING y un
WIDTH.

Las etiquetas SELECT, se le atribuye un color, un

fondo, al igual que el caso anterior una fuente por
medio de la etiqueta FONT, un PADDING y
BORDER_RADIUS.

La TEXTAREA recibe los mismos estilos

mencionados anteriormente a excepción de una
fuente y color de esta.

Por último, tenemos la etiqueta BUTTON que nos

permite enviar y resetear la información que se
pretendía enviar, se le da un color a través de
BACKGROUND al botón, en este caso azul, con
fuente blancas por medio de COLOR, se agrega un
borde redondeado con color a través de
BORDER_COLOR y BORDER_RADIUS.
En este apartado se entrega el código designado en la hoja CSS, además de la prueba de envío

entre el formulario modificado en el estilo y la recepción de la información en la Base de Datos.

Código CSS

El código inserto en el HTML:

Apariencia del formulario después de la hoja de estilos CSS

Información enviada.
Datos recibidos por la Base de Datos.

Se envía en archivo rar adjunto al control.

Bibliografía
Instituto Profesional IACC 2020. Hojas de Estilo CSS. Semana 4