CSS allows you to style the content of your webpage, for example by controlling the color and positioning of elements. The following videos describe the syntax of CSS and how to use many CSS properties, with a focus on page layout.
Here are a few exercises to help you get the hang of CSS. Some of them are quite challenging, but we tried to pick things you will actually encounter in web-programming. For each exercise, a link is provided to a page that has been styled with CSS. You will be given a pre-written HTML file. You are to write a separate CSS file to style the HTML so that it matches the page provided in the exercise.
You should set the id and class attributes of HTML elements however you wish, but you shouldn't need to add any additional HTML elements. You are finished when your HTML and CSS files produce a page identical to the one in the exercise. Have fun!
We start off with styling a single div element and its contents.
Hint
Making a table prettier. The font families used are "Trebuchet MS", Arial, Helvetica, sans-serif". The nice maroon color is #993738.
Hint
Turning a list into a navigation bar.
Hint
Help 6.470 make a sponsor page. Note that the content is always centered even when you resize the page; that's part of the exercise.
Hint
Remake the 6.470 home page. Feel free to re-use code from exercises 3 and 4.
Hint
Contact us at 6.470-staff@mit.edu or come to our Office Hours