Chapter 3 Configuring Color & Text with CSS
Now that you have been introduced to XHTML, you are ready to explore Cascading Style Sheets (CSS). CSS is not new — it was first proposed as a standard by the W3C in 1996. However, browsers and other user agents have only supported this technology consistently for the past few years.
Now that there is fairly steady support, Web developers have begun to use CSS to separate the presentation style of a Web page from the information on the Web page itself. CSS is used to configure text, color, and page layout. This chapter introduces you to the use of CSS on the Web as you explore configuring color and text.
Resources & Chapter Links
- Inspiration
- CSS Documentation
- W3C CSS Validator
- CSS References
- Eric Meyer's CSS Mastergrid
- WestCiv CSS Reference
- Sitepoint CSS Reference
- CSS2 Quick Reference Guide (pdf)
- CSS3 Quick Refernce Guide (pdf)
- When Can I Use CSS Compatibility Table
- Eric Meyer's CSS Mastergrid
- Accessibility
- Usability: WebAIM Text Layout Techniques
- TheCounter.com Site Statistics
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. A chart of websites that provide font hosting services is available at http://sprungmarker.de/wp-content/uploads/webfont-services.
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.
- 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.
Putting It All Together — Text Color and Background Color
The SAP Design Guild offers a handy guide to using color on web pages that discusses color combinations with specific examples. Check it out and make more informed color choices when designing web pages.
Chapter Updates
- Page 87, Last full sentence: Replace "font face attribute" with "font-family property".
- Page 97, Figure 3.15 Note that the font listed as "Geogria" should be "Georgia" — View New Figure 3.15
- JavaJam Coffeehouse Case Study, page 113, #4
Configure an id named container — refer back to Hands-On Practice 3.8 for an example. - Pasha the Painter Case Study, page 117 #2
Associate the web page with the CSS file named painter.css
Questions or Comments?
The author would like to hear from you!
Send an e-mail to webdevfoundations@gmail.com