1 / 8

Mastering Color Application in CSS for Web Design

This lesson focuses on applying color in CSS, adapted from the University of Washington’s "Web Design & Development I" course materials. Students will learn two methods for expressing color in CSS: named colors and hexadecimal codes. By the end, students will be able to identify basic colors, implement color schemes, and set background and font colors for HTML elements on their websites. Emphasizing the importance of color, this lesson provides tools for creating visually appealing web designs.

jerome
Télécharger la présentation

Mastering Color Application in CSS for Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Applying Color in CSS Web Design – Sec 4-5 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

  2. Objectives • The student will • be able to identify two methods for expressing color in CSS. • be able to identify a few basic colors, including black and white, by their hexadecimal codes • be able to implement a color scheme on a web site using CSS to define background and font colors for HTML elements.

  3. Expressing Colors in CSS • Color Names:

  4. There are now 140 named colors in HTML • http://www.html-color-names.com/color-chart.php

  5. Expressing Colors in CSS • Hex Triplet: • Using color names is handy and easy to understand, but most computer screens today are capable of displaying over 16 million colors. • We identify them using a hex triplet. A hex triplet is a six-digit number, where each pair of digits represents (in order) the value of red, green, and blue.

  6. Expressing Colors in CSS • Each pair of digits is a hexadecimal number (base 16), where 00 is the lowest value and FF is highest. • Here are some examples: • #FF0000 has the maximum amount of red, but no green or blue (result: red) • #800080 mixes a lot of red, no green, and a lot of blue (result: darkish purple) • #000000 has no color (result: black) • #FFFFFF has maximum amounts of all colors (result: white)

  7. Rest of Today • You need to choose a color scheme for your web site. You need to set the following colors: • Use Color Scheme Designer to create a color scheme. • See the homework for additional instructions.

  8. Other CSS Settings • Consider adding these settings to your CSS file:

More Related