Project 2. Description.
Main assignment
In your second project you should apply CSS to your image input form you created in assignment
#2. Your styles need to do the following:
- Specify a desired width for the form element and make sure it's centered within the browser window. Set a new
background color for it and set a new default font for labels.
- Change borders, fonts (face, color, size) for all text input boxes
- In the Date and Time text boxes put the default values that illustrate what is the acceptable format forthese
fields. For example, for Date text box it can be mm/dd/yyyy
- For the area text element (Comments) redefine the border using other than default border style.
Also set the new font family and add a background picture (for example this or this).
- Define a new class my_button to define a style for your buttons. Make them to be of an equal size,
colorful, and change the default font.
- Make sure that your form is properly aligned and looks nice.
- Next to Date, Time, and File elements create an <span> element that contains an image (small red arrow pointing to the element and an error description. Make these elements hidden.) These elements will be activated later,
when JavaScript detects error in the input values.
All the styles have to be defined in a separate file form.css and your .html files should only include
the CSS file with the <link> tag.
Additional credits
For additional credits you can demonstrate all your abilities to use the CSS for the page design. If you decide to
do so, please write a short message to me at the end of the page to let me know what additional features I need to grade.
Abilities to demonstrate
Take into consideration that by building this page you should demonstrate the following abilities to use CSS for:
- setting different colors for text and background
- using different fonts
- controlling elements' borders
- using background images, setting their positions, how they repeat, etc.
- setting sizes of HTML elements and controlling the browser behavior if the element's content is bigger than the
specified size
- controlling the way your links look.
You design talent will not be graded. In other words, your page may look ugly, but if all the listed abilities are
demonstrated, you still get a good grade.
Note: Do not forget to place all your files into
your directory on the CIT-PROJECTS server and insert the link to the second project into
your index.html page.
