Embed Size (px)
Citation preview
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
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.
Expressing Colors in CSS
• Color Names:
Aqua Black Blue Fuchsia
Gray Green Lime Maroon
Navy Olive Purple Red
Silver Teal White Yellow
• There are now 140 named colors in HTML– http://
www.html-color-names.com/color-chart.php
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.
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)
Rest of Today
• You need to choose a color scheme for your web site. You need to set the following colors: Elemen
tCSS Attributes
div background-color
h1 color
h2 color
a color
body colorbackground-color orbackground-image
p background-colorcolor
• Use Color Scheme Designer to create a color scheme.
• See the homework for additional instructions.
Other CSS Settings
Element
CSS Attributes
body margin-left: 10%;margin-right: 10%;
div padding: 1em; margin: 1em;border: 1px solid black;
p padding: 1em; margin: 1em;
• Consider adding these settings to your CSS file:
