Skip to Content

Basics of Web Design
HTML5 & CSS3 Second Edition


Chapter 6 – More CSS Basics

You'll add to your CSS skill set in this chapter. In addition to configuring text with CSS, you'll be introduced to the CSS box model and the associated properties, including margin, border, and padding. You'll also explore new CSS3 properties to round corners, apply shadow, configure color with opacity, and configure HSLA color.

The Box Model

The Box Model

  • Content
    Text and web page elements in the container
  • Padding
    Area between the content and the border
  • Border
    Area between the padding and the margin
  • Margin
    Determines the empty space between the element and adjacent elements

Little Boxes 

Choosing Fonts for your Web Site

Not every computer is guaranteed to have the same font typefaces installed. If a web designer configures a font that is not present on the visitor's computer, the browser default (usually a serif font such as Times New Roman) will be displayed.

So ... the question is: What fonts are safe to use?
Explore comparable Windows and Mac fonts at the Web-Safe Font Chart. Visit TinyType for a list of fonts commonly installed on mobile devices.

CSS3 introduces @font-face, which can be used to "embed" fonts within web pages. Current browsers support @font-face but there are logistical (long downloads) and copyright issues. See https://developers.google.com/fonts/docs/getting_started for a overview of using free Google webfonts on your web pages.

Design Ideas for Headings

Check out A Command of Headings: Usage and Styling for a collection of design ideas (with CSS code) for configuring a headings on your web pages.

Text Layout Techniques

Check out the Text/Typographical Layout article at WebAim for tips on configuring text on web pages.

CSS3 @font-face

CSS3 introduces @font-face, which can be used to "embed" fonts within web pages, although you actually provide the location of the font and the browser downloads it. For example, if you own the rights to freely distribute the font named MyAwesomeFont and it is stored in a file named myawesomefont.otf in the same folder as your web page, the CSS to make it available to your web page visitors is @font-face { font-family: 'MyAwesomeFont';
src: url('myawesomefont.otf'); }

Current browsers support @font-face, but there are file size and copyright issues to consider. It takes time to download a font and this may delay the display of your web page. You also need to check your font license to determine whether you also have the right to freely distribute the font. See http://nimbupani.com/font-in-your-face.html for more information about @font-face. A chart of websites that provide font hosting services is available at http://sprungmarker.de/wp-content/uploads/webfont-services. Google offers a free web font library at http://google.com/webfonts. Keep in mind that if you just need a nonstandard font for a logo area or for an image on a web page, there's an easy solution. You are free to use any font that's available to you when you create an image with a graphics application.

CSS3 Code Generators

There are several handy CSS3 code generators that provide an easy way to quickly experiment with settings for CSS3 properties including border-radius, box-shadow, text-shadow, and more. Several are listed below:

CSS3 HSLA Color


You can use HSLA color right now if you follow the principle of progressive enhancement and also provide an RGB color.

CSS3 Gradients

Syntax for Gradients

Resources for Gradients

Auto-generate CSS3 Gradients

Chapter Updates

  • Page 161
    The code sample in #3 should be

    nav { font-weight: bold; }

Questions or Comments

The author would like to hear from you!
Feel free to complete the contact form with your questions or comments.

Book Cover

Review Games

Review activities are available for this chapter. Check your knowledge of chapter terms and concepts.

Design Ideas for Headings

Check out A Command of Headings: Usage and Styling for a collection of design ideas (with CSS code) for configuring a headings on your web pages.

Text Layout Techniques

Check out the Text/Typographical Layout article at WebAim for tips on configuring text on web pages.

Browser Support of CSS3 Properties

More CSS Resources



Share |