Skip to Content

Basics of Web Design
HTML5 & CSS3 Third Edition


Chapter 4 – Cascading Style Sheets Basics

Web designers use CSS to separate the presentation style of a web page from the information on the web page. CSS can configure text, color, and page layout. CSS first became a W3C Recommendation in 1996. Additional properties for positioning web page elements were introduced to the language with CSS level 2 (CSS2) in 1998.

CSS level 3 (CSS3) properties support features such as embedding fonts, rounded corners, and transparency. The W3C continues to evolve CSS, with proposals for CSS level 4 (CSS4) currently in draft form. This chapter introduces you to the use of CSS on the Web as you explore configuring color on web pages. Resource websites and chapter links are listed below.

Selecting Colors for your Website

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 not only provides color options but 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).
  • ColorJack offers color schemes, a color sphere generator, and a wealth of other resources including articles, software, a blog, etc.
  • 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.
  • 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.
  • WellStyled.com offers a handy color scheme generator that will create a variety of color schemes including monochromatic, contrasting, triad, tetrad, and analogic.
  • Hypergurl.com offers a color scheme generator that shows a quick preview of text and background colors.
  • The color selector at Colors4WebMasters offers point and click color choosing options, immediately shows you the results, and generates CSS to configure the 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:

Chapter Updates

  • Page 114
    The first sentence in the third paragraph should be:
    "A style rule to configure the web page displayed in Figure 4.5 with dark blue text (#000066) on a light aqua background (#CCFFFF)"

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.

Web Design Tips

  • Choosing colors for a website can be a difficult task. One method is to use the colors found on the corporate logo or main image of the website.
  • Choosing colors used in a central image usually results in color combinations that are pleasing. By repeating the colors found in the central image on other places in the page, a sense of unity is created.

Inspiration

CSS Documentation & Validation

CSS References

Accessibility

HSL Color Resources


Share |