introduce color sensibly to your pages n.
Skip this Video
Loading SlideShow in 5 Seconds..
Introduce Color Sensibly to Your Pages PowerPoint Presentation
Download Presentation
Introduce Color Sensibly to Your Pages

Loading in 2 Seconds...

play fullscreen
1 / 36

Introduce Color Sensibly to Your Pages - PowerPoint PPT Presentation

  • Uploaded on

Introduce Color Sensibly to Your Pages. Day 5. You will learn to:. Specify colors by name Specify Colors by code Create a color comparison page Use Style Sheets for Better control Choose Pleasing Colors. World of color. The Web has more than 16 million colors

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Introduce Color Sensibly to Your Pages' - zanna

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
you will learn to
You will learn to:
  • Specify colors by name
  • Specify Colors by code
  • Create a color comparison page
  • Use Style Sheets for Better control
  • Choose Pleasing Colors
world of color
World of color
  • The Web has more than 16 million colors
  • Can select from the 16 million with mathematical precision
  • The figure 16 million comes from the 256 possible “settings” for red, green, and blue.
  • If you multiply 256 by 256 by 256 you arrive at the figure of 16.7 million
specify colors by name
Specify colors by name
  • The basic palette, called the HTML or Windows palette is a range of 16 colors.
  • Same as ones we covered already.
  • Open template.htm
  • Save as: COLOR.HTM
In BODY element type the following:

<body bgcolor=“blue”>

Save and refresh in your browser

understand browser safe colors
Understand Browser-Safe Colors
  • Have very specific mixture of red, green, and blue light.
  • To be browser safe, a color can be made up of combinations of RGB on in the following amounts:

0%, 20%, 40%, 60%, 80%, and 100%

r ed g reen b lue
  • Remember that the individual colors you will mix are always red, green, and blue and they are always listed in that order.
  • To mix a shade of red:

Red-ff (100%), green-33 (20%),blue-33(20%)

Then add the # symbol in front to get


define page colors globally
Define Page Colors Globally
  • You will be choosing the default colors throughout a Web page unless you specify otherwise.
  • Generally, you set these colors inside the <body> element
specify background color with the bgcolor attribute
Specify Background Color with the bgcolor Attribute
  • To specify the background color of a page, use the bgcolor=“ “ attribute inside the <body> tag.

<body bgcolor=“white>

set text colors with the text attribute
Set text colors with the text Attribute
  • You can set the color for all the text in your page by using the text=“ “ attribute inside the opening body tag.

<body text=“maroon”>

  • To have a page with yellow background and maroon text:

<body bgcolor=“yellow” text=“maroon”>

set text colors with basefont
Set text colors with <basefont />
  • You can also specify text characteristics with the <basefont /> element

<basefont color=“purple” />

  • All the text will display in purple
set link colors with link vlink and alink
Set link colors with link, vlink, and alink
  • A Web browser normally displays hypertext links as blue with an underline.
  • When you click on the link, it turns red momentarily; this is called an active link
  • After you have visited the link, usually it will display as purple; this is a visited link
  • Using link, vlink, and alink you can choose whatever colors you want.
  • If you want to set the link to red, the active link to yellow, and the visited link to blue, write the body tag this way:

<body link=“red” vlink=“yellow” alink=“white”>

Type the following code in color.htm



<head><title>Color Comparison Table</title></head>

<body bgcolor=“blue” link=“white” vlink=“red” alink=“yellow">

<table border=“0” cellpadding=“100”>


<td bgcolor=“green”>Sample Color</td>



<a href=“olist.htm”>Sample link to ordered list.</a>



choose local colors
Choose Local Colors
  • You might find that there are certain places where you would like to substitute different colors.
  • You can override the global color choices you made and select colors for certain “spots” or locations on you page.
  • Sometimes this is called spot color.
use font color to change text color
Use <font color=“ “> to change text color

<p><h2>This line will have one <font color=“red”> red</font> word. </h2></p>

use the color attribute with horizontal rules
Use the color=“ “ Attribute with Horizontal Rules

<hr color=“yellow” width=“50%” size=7>

use bgcolor to set colors for table cells
Use bgcolor=“ “ to set colors for table cells
  • Add underneath first data cell the following:

<tr><td bgcolor=“#0000ff”> <font color=“white”> <h1>Sample Two</h1> </font> </td> </tr>

there has to be an easier way
There has to be an easier way!!!
  • Is there a better way? Yes CSS.
  • Don’t worry about understanding it yet, just do it.
  • We will go in detail way down the road, but we need to get used to using it.
open template htm
Open template.htm
  • Save as: CSSCOLOR.HTM
  • This will be an embedded style sheet
  • Then in between the <head></head> tags, insert the following lines:
set background colors with css
Set background colors with CSS
  • Setting background colors with CSS is a simple process.
  • Instead of using the bgcolor attribute inside the <body> element, you place a rule(CSS instruction) inside the <style> element.
To use CSS to set an aqua background for a page, insert the following line between the <style> tags:

Body {background-color: aqua;}

  • Save the page and display it in you browser. The background will be aqua.
  • Recall you used a property (background-color) combined with a value (aqua)
  • In this case you added another item a selector(body)
  • The selector is the HTML element you with to be affected by your style rule.
create headings with colored backgrounds
Create Headings with Colored Backgrounds
  • One nice thing about style sheets is that you can apply you styles to any element.
  • Try adding the following lines in between the <style></style> tags on you page:

h1 {font-family: arial; color: navy;} {font-family: Times-New-Roman; color: red; background-color: black;}

h1.white {font-family: Times-New-Roman; color: white; background-color: green;}

h1.lime {font-family: Arial; font-style: italic; color: lime; background-color: olive;}


<p><h1>This is my basic headline.</h1></p>

<p><h1 class="red"> This is my red headline.</h1></p>

<p><h1 class="white">This is my white headline.</h1></p>

<p><h1 class="lime">This is my lime headline.</h1></p>


  • When using embedded style sheets, always remember to enclose properties and values inside curly braces { }.
  • For inline style sheets, the properties and values are enclosed in quotation marks.
Properties should be separated from their values by a colon (:), and from other properties by a semicolon (;).
  • Selectors (the elements you wish to set a style for) should be outside and to the left of the curly braces.
proper style sheet syntax
Proper style sheet syntax

Selector {property: value; property: value;}


Selector {

property: value;

property: value;


set paragraph colors with css
Set paragraph Colors with CSS
  • If you want several different paragraph styles on a page you would have a tough time creating this in HTML.
  • CSS make it much easier.
  • Insert the following code between the <style> </style> tags right after h1. Lime …

p.blackback {font-family: arial;

font-style: italic;

font-weight: bold;

color: powderblue;

background-color: black;}

p.yellowbk {background-color: yellow; font-size: 16pt;} {font-weight: light; color: #ff0000;

text-align: center; font-size: 32pt;}

you have three paragraph styles
You have three paragraph styles
  • Blackback an arial italic font, displaying powder blue with a black background
  • Yellowbk a 16-point font with a yellow background
  • Red A light, 32-point font which will be centered and displayed in red
  • Type the following code underneath your last paragraph.

<p class="blackback">This is a sample of the blackback style.</p>

<p class="yellowbk">Here is how yellowbk looks.</p>

<p class="red">I enjoy this red, centered font.</p>

<p>An unmodified paragraph looks like this.</p>

downside of css
Downside of CSS
  • The support of CSS is so varied it doesn’t take long to find a browser that does not support style sheets.
  • Netscape Navigator will display the page we just created differently.
  • We are introducing CSS because you will need to know it in the future.
learn good web design
Learn Good Web Design
  • Use Gentle Colors in Pleasing Combinations
  • Put at least as much thought into your color scheme as you do your site’s layout
  • Compare colors side by side before you construct you page.
  • Choose soft colors rather than deep, bright, or garish shades
  • Make your color scheme consistent.