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 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 how to configure color and text.
External Style Sheet Introduction
Resources & Chapter Links
CSS Resources
CSS Browser Support
Color Syntax
Accessibility & Usability
Inspiration
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 Typography
- A Command of Headings: Usage and Styling provides a collection of design ideas (with CSS code) for configuring a headings on your web pages.
- Text/Typographical Layout introduces considerations for text alignment, margins, line length, and text decoration.
- CSS Typography: Contrast Techniques Tutorials and Best Practices
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 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 Color CC 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:
Psychology of Color
Review Activities
Review game activities are available for this chapter.
Check your knowledge of chapter terms and concepts.
Chapter Updates
- No Updates for this Chapter
Questions or Comments?
The author would like to hear from you! Send an e-mail to webdevfoundations@gmail.com