Scribd
Upload
18 views3 pages

CS142 Project 1 - HTML and CSS - Bai Thuc Hanh 1

The CS142 Project 1 requires students to create an HTML document with two different CSS stylesheets, styleA.css and styleB.css, to demonstrate different visual appearances. Style A consists of six vertically aligned boxes, while Style B features five horizontally aligned boxes with specific spacing and hover effects. Additional points can be earned by creating a third stylesheet, styleC.css, that incorporates advanced CSS features like gradients or animations.

Uploaded by

vuvanvuonglqm
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views3 pages

CS142 Project 1 - HTML and CSS - Bai Thuc Hanh 1

The CS142 Project 1 requires students to create an HTML document with two different CSS stylesheets, styleA.css and styleB.css, to demonstrate different visual appearances. Style A consists of six vertically aligned boxes, while Style B features five horizontally aligned boxes with specific spacing and hover effects. Additional points can be earned by creating a third stylesheet, styleC.css, that incorporates advanced CSS features like gradients or animations.

Uploaded by

vuvanvuonglqm
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

2/17/25, 6:42 PM CS142 Project 1: HTML and CSS

CS142 Project 1: HTML and CSS


Due: Thursday, April 13, 2023 at 11:59 PM

Problem 1 (20 points)


Create a single HTML document that presents two different appearances, determined by the document's
CSS stylesheet. Your HTML file should be called index.html and the document's title should be “CS142
Project 1”. Along with this HTML document, you should also create two stylesheets called styleA.css and
styleB.css .

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.

Style Points (5 points)


Your HTML file must be a valid XHTML 1.0 document that passes validation at http://validator.w3.org
(http://validator.w3.org/#validate_by_input+with_options). In addition, your HTML and CSS must be clean,
readable, properly indented, and well-structured.

https://web.stanford.edu/class/cs142/project1.html 2/3
2/17/25, 6:42 PM CS142 Project 1: HTML and CSS

Extra Credit (2 points)


Create a third stylesheet styleC.css that utilizes 2 of the following:
gradients
transitions
animations
web fonts
shadows

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;

You will need to use the CSS Flexbox layout (https://developer.mozilla.org/en-


US/docs/Web/CSS/CSS_Flexible_Box_Layout) for at least one portion of the assignment.

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 .

Designed by Raymond Luong for CS142 at Stanford University


Powered by Bootstrap (http://getbootstrap.com/) and Jekyll (https://jekyllrb.com) – learn more (website.html)

https://web.stanford.edu/class/cs142/project1.html 3/3

You might also like