CS142 Project 1 - HTML and CSS - Bai Thuc Hanh 1
CS142 Project 1 - HTML and CSS - Bai Thuc Hanh 1
If the HTML file links to styleA.css , then it should appear like this ("Version A"):
If the HTML file links to styleB.css , then it should appear like this ("Version B"):
Note: The D in the screenshot is highlighted to show you what space the text should occupy. Your
solution should not style the D with a blue background.
https://web.stanford.edu/class/cs142/project1.html 1/3
2/17/25, 6:42 PM CS142 Project 1: HTML and CSS
Style A Specifications
There should be six box elements, lined up vertically.
All boxes are centered horizontally and equally spaced vertically. When the browser window is
resized, the spacing between the boxes should change (they should be equally spaced vertically
across the page). However, the boxes themselves should never overlap or change size.
Each box is 100x100 pixels, with a 1px line (color: #687291) on top. Text is centered horizontally.
Boxes alternate colors (colors: #dfe1e7, #eeeff2).
The final element (color: #687291) has a 4px, black border and the text is centered vertically.
The font in all elements is Tahoma, 40 pixels.
Style B Specifications
Five box elements, lined up horizontally in the top left corner.
Boxes do not wrap with window resizing (i.e., boxes A through E should stay on the same line even
if your browser window is too small to display them all).
The last box is positioned in the bottom right corner of the window and stays there even when the
window resizes.
Each box is 100x150 pixels (color: #eeeff2), with a 10px dotted line (color: #D0D0FF) on the left.
Boxes are separated by 10 pixels of space.
When hovering over a box, the cursor changes to a hand and the box and font colors change
(colors: yellow, goldenrod, respectively).
The font in all elements is Tahoma, 40 pixels.
There are 10 pixels of space between the letters and the edge of the box.
If a property is not outlined in these specifications (e.g., space between elements in style B and edge of
window) you should choose something reasonable.
https://web.stanford.edu/class/cs142/project1.html 2/3
2/17/25, 6:42 PM CS142 Project 1: HTML and CSS
Resources
Use the Chrome browser for this project, and for all projects in this class. This will eliminate
browser compatibility issues.
You will need basic knowledge of Unix in order to submit your assignments. Click here
(https://web.stanford.edu/class/archive/cs/cs107/cs107.1194/resources/) for an introduction to
browsing and manipulating the UNIX file system.
You may not use any JavaScript or external libraries/stylesheets. You must write your own code.
Hints
You may find some of the following CSS style attributes useful for this project (do a Google search
for the documentation for exact usage details):
display: inline-block;
height: 100%;
white-space: nowrap;
Deliverables
Use the standard class submission mechanism (submit.html) to submit all of the files needed for Problem
1, including index.html , styleA.css , styleB.css , and (optionally) styleC.css .
https://web.stanford.edu/class/cs142/project1.html 3/3