Skip to Content

Basics of Web Design
HTML5 & CSS3 First Edition


Chapter 7 – 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, and configure color with opacity.

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

Flash Box Model Demo 
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. Find out which fonts are most commonly installed at Code Style.

Looking forward, CSS 3 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 Font in your face for a comprehensive explanation of @font-face.

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

CSS3 Gradients

Syntax for Gradients

Resources for Gradients

Auto-generate CSS3 Gradients

Chapter Updates

  • Page 155 - #2 The code sample should be:
    li, p { font-size: 90%; }
  • Page 167 - #1 Create a folder named borderch7 instead of bordersch7.
  • Page 167 - #2 Change "20px of top padding" to "30px of top padding".
  • Page 168 - In the last paragraph: launch the file named index.html instead of the file named starter.html.
  • Page 171 - The last sentence in the second bullet point should be:
    Negative value configures a shadow above.
  • Page 177 - At the end of the first full paragraph: (#8FA5CE)L: should be (#8FA5CE):
  • Page 180 - The code sample for Step 2, 7th bullet point should be:
    #content img { float: left; padding-right: 20px; }
  • Page 180 - In Step 2, 9th bullet point, the word "address" should be "contact"

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

Play a review game to check your understanding.

Flash Cards
Crossword Puzzle
Pick a Letter
Fill in the Blank
Matching

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 |