CSS stands for Cascading Style Sheets. Basic HTML uses tags to identify what things are. CSS provides properties for how things should be positioned and displayed.

Things to learn:

• How to create a CSS file and how to reference that style sheet from inside of an HTML file.
• How to create CSS style definitions directly inside of your HTML file without referencing an external style sheet.
• How to put style information into a tag directly
• How the above three concepts all work together
• CSS selectors for ids, classes and tags. Know how to style things based on each of these ideas.
• How to give some tag a colored background or an image background
• The box layout model. Be able to use this to style blocks of content in various ways.
• How to control borders, margin spacing and padding.
• How to give colors, widths, styles and rounding to various borders.

> CSS Colors > CSS Introduction > CSS Syntax > CSS Selectors > CSS How To > CSS Backgrounds > CSS Box Model > CSS Border > CSS More Borders > CSS Margins > CSS Padding

Create a CSS file called "style.css" in the same folder as the files "first.html" and "second.html". Links to the source of first.html and second.html are given below. You can look at the source using your browser's view source option. If you are not sure what this is, you can quickly find it on Google by typing "browser name view html source".

Your CSS file should make each of these files appear like the pictures with each file. Note that you cannot change either html file. They must be exactly as they are given. You should copy them into your own site folder and then build your CSS file so that they appear to match the pictures.

first.html

second.html

The fonts are all Arial

The lines around each of the boxes are brown and 1 pixel.

The texture can be found at "http://icie.cs.byu.edu/images/background2.jpg"

The text inside of the boxes is 15 pixels high and 20 pixels from the right edge of the box.

The boxes are 30 pixels from the left edge and 30 pixels apart.

The curved corners are 20 pixels.

The shadow in the second page is dark gray.

It is 250 pixels from the right edge to the left edge of each box.

This is not all the information you will need, but it is enough that you should be able to produce the necessary style sheet. You will also need to dig around a bit to find all of the settings that you need. That is normal. Note that my style sheet was only 22 lines long.

Submission instructions