Skip to Content

Web Development & Design Foundations with HTML5

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.

The CSS specification is divided into modules, each with a specific purpose. These modules move along the approval process independently.The W3C continues to evolve CSS, with proposals for many types of properties and functionality currently in draft form. This chapterer introduces you to the use of CSS on the Web as you explore how to configure color and text.

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.

CSS3 introduced @font-face, which is 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.

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:

  • Paletton.com provides color options and shows example pages with the color scheme you have chosen.
  • 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).
  • 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.

Chapter Updates

There are no updates for this chapter.
Web Development & Design Foundations with HTML5

Review Activities

Review Games

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

Resources

HTML Validator
HTML Reference

CSS Validator
CSS Reference

Color Chart
Design Checklist