Week 9: Box Model, Text/Fonts

In this lesson you'll learn about the CSS Box Model, which allows you to add borders and spacing in/around elements. You'll also learn a few of the more common properties used to customize text and fonts.

Box Model

Notes

• Box Model

Text/Fonts

Notes

• Styling Text and Fonts

Resources

• References
  • MDN: The Box Model
  • Terminal Learning: CSS Property Values
  • MDN Borders article - all about borders (and backgrounds, which is optional).
  • MDN: Padding shorthand property
  • MDN: Margin shorthand property
• Tools
  • HTML Validator - always validate all of your HTML.
  • CSS Validator - always validate all of your CSS.
  • Lorum Ipsum Text Generator - there are other ones, I like this one. Feel free to use a different one. Generates filler text for web pages. There are even some funny ones.
• Tutorials and Articles
  • MDN: Sizing Items in CSS
  • Tips and tricks for sizing boxes: CSS Tricks: Box Sizing
  • MDN: Fundamentals of Text and Font Styling

Homework

Practice/Study Questions

• Complete this week's worksheet. Note that worksheets can be completed during class or after class. They can be completed using your own lecture notes or from the provided materials. Worksheets are not directly graded, but the questions might appear on exams and other evaluations. Ask the professor if you would like feedback on your worksheet (you must make an attempt on the worksheet in order to receive feedback).
• Answer the following questions where you take your class notes (form your answers using YOUR OWN WORDS; you might have to search for answers in the resources above). Feel free to DISCUSS the answers with your classmates.
  1. What is the "Box Model"? Draw a diagram of the box model.
  2. What's the difference between margins and padding? Where is an element's border in relation to its margin and padding?
  3. When an item is rendered in the browser, how is its height and width calculated?
  4. What is a "Serif" font? What is a "Sans-Serif" font? What is a "Monospace" font?
  5. What's the difference between a generic family and a font family?

Practice Exercises

For each exercise, validate the HTML using the HTML Validator. Fix all problems until you get no errors.

1. If you haven't already done so, create a sub-directory in your local workspace and in your server workspace (off /syst10049) called "week9". Feel free to add an extra level for all of your practice exercises (e.g. /exercises).
   • For each practice exercise in each lesson, you'll usually be asked to create an exercise directory for that project, such as "/exercise1".
   • It is assumed that you will create the exercise project directory in both your local workspace and in your server workspace using the appropriate and standard directory structure discussed in class.
2. Create a new project directory called exercise1. Create an index page. Add a /css directory and add a CSS file to it. Add the <link> element in your index page to the css file.

   Copy the HTML from the codepen for Week 9 Exercise 1 and paste it into the body of your index page.

   Copy the small amount of CSS from the CodePen's CSS tab into your css file.

   All measurements should use relative units, unless specified otherwise.

   In the CSS file, add the following styling (note that when a portion "of the font size" or "of the base font size" is referenced, it's referring to the document's base font size unless it says otherwise):

   • The header element should have a background colour of your choice and a margin that is half the base font size on top/bottom and 100% of the base font size on the right/left. There should also be padding inside the element around its child elements that is half the base font size.
   • The footer element should have the same background, border, margin, and padding as the header.
   • Article elements should have the same margin and padding as the header and footer elements.
   • All level-1 and level-2 headings should be in "title case".
   • Level 1 headings should have a top and bottom border (you choose the style, thickness and colour).
   • Level 2 headings should have a thin dashed, bottom border in whatever colour you like.
   • The navigation elements should have a margin of .3 of the base font size on all sides and .25 of the base font size for padding on all sides. The items inside the nav elements should be centered.
   • The links that are inside navigation elements should have no underline, and they should look like buttons. Tip: to style only links inside a nav, use the selector nav a
3. Create a new project directory called /exercise2. Add an HTML index page and give it the minimal HTML. In the body of the document, paste the HTML from this CodePen. Add an external CSS file and in an appropriate directory and link to it in your HTML. Add the following styles to your CSS:
   • The table element should have a solid border that is .2em, in green (#388E3C), and a margin on all sides that is half the base font.
   • The table caption's text should be bold, 1.2 times the base font size, and have a light green background (#E8F5E9).
   • All table cells should have a .1em solid border in green (#388E3C). They should also have inner spacing that is .2 times the base font size.