Web Development & Design Foundations with HTML5

Skip to Content 7th Edition

Chapter 3 CSS Basics

Let’s explore Cascading Style Sheets (CSS). Web designers use CSS to separate the presentation style of a web page from the information on the web page. CSS is used to configure text, color, and page layout. CSS is not new—it was first proposed as a standard by the W3C in 1996. In 1998, additional properties for positioning web page elements were introduced to the language with CSS level 2 (CSS2), which was used for over a decade before reaching official "recommendation" status in 2011. CSS continues to evolve, with proposals for CSS level 3 (CSS3) properties that support features such as embedding fonts, rounded corners, and transparency. This chapter introduces you to the use of CSS on the Web as you explore how to configure color and text.

Resources & Chapter Links

Choosing Fonts for Your Website

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. Explore comparable Windows and Mac fonts at the Web-Safe Font Chart. Visit TinyType for a list of fonts commonly installed on mobile devices.

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. Google Web Fonts offers a solution to these issues and provides an easy way to use their collection of fonts on your web pages.Visit http://www.google.com/webfonts for more information on Google Web Fonts.

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.

Selecting Colors for Your Web Site

If you are new to design, it can be a tough decision to select colors for your web site. Here are some sites that can help you with the process:

  • Color Scheme Designer not only provides color options but shows example pages with the color scheme you have chosen.
  • ColorJack offers color schemes, a color sphere generator, and a wealth of other resources including articles, software, a blog, etc.
  • Enter a hex color value at Color-Hex.com and you'll useful color information such as color models (RGB,HSL,HSV and CMYK) and color schemes (triadic, monochromatic, and analogous).
  • The Color Wizard offers a variety of ways to choose and compare a variety of color schemes related to a chosen starting color.
  • Eric Meyer's Color Blender is very useful when you want to create site with a monochromatic color scheme.
  • Select a color at 0to255.com and view it in a range from light to dark variations.
  • Sometimes designers choose colors based on a photograph. Visit colr.org to select a image from the Web and choose colors from from the image for use in your site.
  • Hypergurl.com offers a color scheme generator that shows a quick preview of text and background colors.
  • Use the RGB sliders to choose a color and Lee Street Management's QuickColor Flash animation will display a selection of coordinating colors.
  • Color Wheel Pro - a program that allows you to see color theory in action: you can create harmonious color schemes and preview them on real-world examples.
  • Adobe's Kuler offers an easy way to browse color schemes or search for a color scheme based on a keyword or theme, such as desert.
  • Bruce Clay offers an overview of using color in web design focusing on the the hidden meanings of color, branding, and the power of color.
  • Colorcombos.com offers a collection of color combinations for your choice and even provides a method to quickly grab the color palette of a web site.
  • COLOURlovers is a self-proclaimed "resource that monitors and influences color trends" — it's a good place to visit to generate ideas.

Color Contrast

When you choose colors for text and background, verify that there is sufficient contrast between them for easy reading. The following tools can be helpful:

Review Activities

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

Chapter Updates

  • Page 85: The chapter3/fonts.html file is available here.

  • Hands-On Practice 3.7, Page 106
    Use this updated services.html file when you complete Hands-On Practice 3.7

Questions or Comments?

The author would like to hear from you! Send an e-mail to webdevfoundations@gmail.com