HW Assignment 2 – Chapter 1 – Fonts, Tables and the Box Model
In this assignment we learn
- How to choose the way our letters will look (font, size).
This is not hard and you should refer to your cheat sheet until you learn the common properties by heart. - How the Box Model works.
This is veryimportant, and is the basis for how to place elements on the page and how to style tables. You will do some important reading and work at home and then we will work on more difficult problems in class.
Read: The rest of Robin Williams’ book up to but not including the chapter on color.(The chapters are very short). You are welcome to go further in the book.
Remember what we learned in class about color-blind users!
Do: Look at the Fonts program in the CSS programs and style sheets folder so that you are
familiar with the common fonts.
Examine to find out which fonts your users are most likely to have on their computers. It is a good idea to stick to those fonts.
Be able to explain the difference between serif and sans-serif fonts, and which helps
readibility on-line and which for print.
Be able to explain the difference between oblique and italic. I never use oblique, but you may encounter it in someone else’s CSS.
Read: My CSS Notes Sections 4A, 4C and Section 5.
In your tutorial of choice, the sections on Text and Fonts.
For more detail, read the Eric Meyer book Ch. 3-7
In the folder for Chapter 1 of this course, read the short documents on Color,
Types of Graphic Files, Images’ Borders.
Do: Problem 1.3
Take the page you produced in Problem 1.1 (previous HW assignment) and re-style it twice -
once so that it looks elegant, and once so that it looks amateurish.
The page at has some “Try it yourself” links which
you may wish to play with.
Read: My CSS Notes on the Box Model, Section 4B
At least one of the tutorials on the Box Model (I suggest more than one):
- At this is lessons 9-12
- At is called Margins and Padding, and also Borders
- At there are 5 short pages in the CSS Box Model group.
Read: Section 8 of the CSS Notes – which expands on the uses of classes and ids.
Do: Problem 1.4 In this folder there is a document named CSS_Predicting_Style.
It has a number of examples of CSS styling.
They happen to be in XHTML, but the styling is the same as in HTML.
Read the first example, and write down/sketch what you think it will look like.
Check what you did by examining the PredictStyle1.html page in the css programs and
style sheets folder.
If you didn’t get all the details, go back to look at the code until you understand what
happens.
Repeat until you have finished all the examples. (There is no PredictStyle4 and you may
skip PredictStyle3a, which is about styling links.)
In class we will discuss the Box Model further (including for tables) and you will design more
pages using the box model.
You should know that there are many useful common layouts available – see Some CSS Layouts in the Chapter 1 folder, and also the Sample Layouts under
It is perfectly acceptable to use one of these sample layouts!
You should also know that which features (especially of CSS3) are supported by which browsers is a moving target. So far we have discussed only very common features, but
has up-to-date tables on this. Check the tables before you use something exotic! You can also search for a particular feature on