Using color and fonts in HTML and XHTML Please use speaker notes for additional information!
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Using color and fonts in HTML and XHTML
Please use speaker notes for additional information!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Using color and font</title></head><body bgcolor="#ffffc2" text="#000bbb"><h1 align="center">This code will be centered</h1><h2>This is not centered</h2><h2><center>This is another way to center - the command has been depricated</center></h2><h2 align="left">You can use left to align as well although left is the default.</h2><h2 align="right">You can also right align using the align clause.</h2><p>This Web Page has a non white background because the background color was set toFFFFC2. Note that #FFFFFF is pure white and #000000 is pure black. I randomly put in 000BBB for the text and got a blue coloring.<br />For the list of different codes and colors, go to my Web site and look for a listing under colors. NOTE: The # in front of the color code is not required in HTML.</p><p><font size="5">This gives me a large font</font><br /><font size="3" color="red">This gives me red text</font><br /><font size="4" color="#00dd00">Note that for standard colors, I can assign the color red to the font. For more subtle shades, I need to use the code for that color. Read about how colors are treated by browsers and true colors. In this example I used 00dd00 which gave me a shade of green.</font></p></body></html>
<body bgcolor="#ffffc2" text="#000bbb"><h1 align="center">This code will be centered</h1><h2>This is not centered</h2><h2><center>This is another way to center - the command has been depricated</center></h2><h2 align="left">You can use left to align as well although left is the default.</h2><h2 align="right">You can also right align using the align clause.</h2><p>This Web Page has a non white background because the background color was set toFFFFC2. Note that #FFFFFF is pure white and #000000 is pure black. I randomly put in 000BBB for the text and got a blue coloring.<br />For the list of different codes and colors, go to my Web site and look for a listing under colors. NOTE: The # in front of the color code is not required in HTML.</p>
<p><font size="5">This gives me a large font</font><br /><font size="3" color="red">This gives me red text</font><br /><font size="4" color="#00dd00">Note that for standard colors, I can assign the color red to the font. For more subtle shades, I need to use the code for that color. Read about how colors are treated by browsers and true colors. In this example I used 00dd00 which gave me a shade of green.</font></p></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Using color and font</title><style type="text/css">body { background: "ffffc2"; color: "0000bb"; }</style></head><body><h1 style="text-align: 'center'">This code will be centered</h1><h2>This is not centered</h2><h2 style="text-align: 'center'">Now I am centering again</h2><h2 style="text-align: 'left'">You can use left to align as well although left is the default.</h2><h2 style="text-align: 'right'">You can also right align using the align clause.</h2><p>This Web Page has a non white background because the background color was set toFFFFC2. Note that #FFFFFF is pure white and #000000 is pure black. I randomly put in 000BBB for the text and got a blue coloring.<br />For the list of different codes and colors, go to my Web site and look for a listing under colors. NOTE: The # in front of the color code is not required in HTML.</p><div style="font-size: '22pt'">This gives me a large font</div><div style="font-size: '14pt'; color: 'red'">This gives me red text</div><div style="font-size='18pt'; color: '#00dd00'">Note that for standard colors, I can assign the color red to the font. For more subtle shades, I need to use the code for that color. Read about how colors are treated by browsers and true colors. In this example I used 00dd00 which gave me a shade of green.</div></body></html>
The style is inside the head and it is of a type text/css which means it is text written following the rules of css.
This is style that will apply to the body. Hence the use of the word body. All of the style related to the body is enclosed in { }. In later examples, I eliminate the quotes around the specific color and it works in more browsers.
The specific elements are background and color which specifies the default color for text.
<body>
<h1 style="text-align: 'center'">This code will be centered</h1><h2>This is not centered</h2><h2 style="text-align: 'center'">Now I am centering again</h2><h2 style="text-align: 'left'">You can use left to align as well although left is the default.</h2><h2 style="text-align: 'right'">You can also right align using the align clause.</h2>
<h1 style="text-align: 'center'">
This code is applied to the specific <h1> tag. The style uses the code of CSS where text-align aligns text. Note that after writing style =, the whole style is enclosed in double quotes. After the text-align, you must place a colon. Then the alignment shown here is placed in single quotes. The single quotes are used because we are already using double quotes to enclose the entire text-align property. Again, see the next example for an alternative that does not use the quotes around center and is supported by more browsers.
The style is enclosed within the <h1> tag (note that the > does not occur until the style is complete).
The style property information is enclosed in double quotes and the elements are enclosed in single quotes in this example. What I have found is that eliminating these quotes is the better option with most browsers. See next example.
<div style="font-size: '22pt'">This gives me a large font</div><div style="font-size: '14pt'; color: 'red'">This gives me red text</div><div style="font-size='18pt'; color='#00dd00'">Note that for standard colors, I can assign the color red to the font. For more subtle shades, I need to use the code for that color. Read about how colors are treated by browsers and true colors. In this example I used 00dd00 which gave me a shade of green.</div>
<div style="font-size: '22pt'">
I have broken this code into divisions. This div will have a font-size of 22pt. Again note the use of single quotes around the actual size and double quotes around the entire style. In this case the font-size property is being used.
<div style="font-size: '14pt'; color: 'red'">
In this example I am using the font-size property and the color property to set both the font and the color within the division. Notice again that the entire style is enclosed in single quotes while the particular size of 14pt and the particular color of red - the values - are enclosed in single quotes.
Looking ahead, you will see that I eliminate the single quotes around the red, 14pt etc and find that it is supported in more browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Using color and font</title><style type="text/css">body { background: #ffffc2; color: #0000bb; }</style></head><body><h1 style="text-align: center">This code will be centered</h1><h2>This is not centered</h2><h2 style="text-align: center">Now I am centering again</h2><h2 style="text-align: left">You can use left to align as well although left is the default.</h2><h2 style="text-align: right">You can also right align using the align clause.</h2><p>This Web Page has a non white background because the background color was set toFFFFC2. Note that #FFFFFF is pure white and #000000 is pure black. I randomly put in 000BBB for the text and got a blue coloring.<br />For the list of different codes and colors, go to my Web site and look for a listing under colors. NOTE: The # in front of the color code is not required in HTML.</p><div style="font-size: 22pt">This gives me a large font</div><div style="font-size: 14pt; color: red">This gives me red text</div><div style="font-size=18pt; color: #00dd00">Note that for standard colors, I can assign the color red to the font. For more subtle shades, I need to use the code for that color. Read about how colors are treated by browsers and true colors. In this example I used 00dd00 which gave me a shade of green.</div></body></html>
The code that does not put quotes around the specific color or the specific size seems to be supported in more browsers.
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr"><head><title>Using color and font</title><style type="text/css">body { background: #ffffc2; color: #0000bb; }</style></head><body><h1 style="text-align: center">This code will be centered</h1><h2>This is not centered</h2><h2 style="text-align: center">Now I am centering again</h2><h2 style="text-align: left">You can use left to align as well although left is the default.</h2><h2 style="text-align: right">You can also right align using the align clause.</h2><p>This Web Page has a non white background because the background color was set toFFFFC2. Note that #FFFFFF is pure white and #000000 is pure black. I randomly put in 000BBB for the text and got a blue coloring.<br />For the list of different codes and colors, go to my Web site and look for a listing under colors. NOTE: The # in front of the color code is not required in HTML.</p><div style="font-size: 22pt">This gives me a large font</div><div style="font-size: 14pt; color: red">This gives me red text</div><div style="font-size=18pt; color: #00dd00">Note that for standard colors, I can assign the color red to the font. For more subtle shades, I need to use the code for that color. Read about how colors are treated by browsers and true colors. In this example I used 00dd00 which gave me a shade of green.</div></body></html>
All h1 headers will be centered and red.
All h2 headers will be right aligned and will use the default color specified in body.
All paragraphs will be 18pt and green.
All divisions will be 16pt and brown.
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr"><head><title>Using color and font</title><style type="text/css">body { background: #ffffc2; color: #0000bb; }h1 { text-align: center; color: red; }h2 { text-align: right; }p { font-size: 18pt; color: #00dd00; }div { font-size: 16pt; color: brown; }</style></head>
<body><h1>This code will be centered</h1><h3>This is not centered</h3><h2>You can use left to align as well although left is the default.</h2><h2>You can also right align using the align clause.</h2><div>This is a division.<br />This Web Page has a non white background because the background color was set toFFFFC2. Note that #FFFFFF is pure white and #000000 is pure black. I randomly put in 000BBB for the text and got a blue coloring.<br />For the list of different codes and colors, go to my Web site and look for a listing under colors. NOTE: The # in front of the color code is not required in HTML.</div><p>This is a paragraph.</p><div>This gives me brown text because it is a div.</div><p>Back to a paragraph. Note that for standard colors, I can assign the color red to the font. For more subtle shades, I need to use the code for that color. Read about how colors are treated by browsers and true colors. In this example I used 00dd00 which gave me a shade of green.</p></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml/.DTD/xhtml1-strict.dtd"><html><head><title>And...</title></head><body bgcolor="#FFFFEE"><h3>DEFAULT SETTINGS with BODY</h3><p>In HTML, default setting can be including in the BODY statement and can includebackground color done with BGCOLOR and text color done with TEXT. You can also change the color of links - LINK changes the color of the link, VLINK changes the color of the visited links - ALINK changes the color of theactive link. We will see more on these when we have looked at links.</p><h3>COLOR</h3><p>Let's talk about color - there is 6 digit hexadecimal code that is used to express color. Remember hex is the numberingsystem that goes from 0 to F. The first two digits stand forred, the next two green and the last two blue.of red, yellow, and blue.</p><p><font color="#FF0000">THIS IS RED</font><font color="#00FF00">THIS IS GREEN</font><font color="#0000FF">THIS IS BLUE</font><font color="#FFFFFF">THIS IS WHITE</font><font color="#000000">THIS IS BLACK</font>Mixing and matching these results in different colors. For exampleif I lower the amount of red, but still use no green or blue, I get this:<br /><font color="#DD0000">THIS IS REDish</font><br />If I lower the amount of blue, but still use no red or green, I get this:<br /><font color="#0000AA">THIS IS BLUEish</font><br />Play with the combinations and see what you get!Other things you can do with FONT include SIZE and FACE (which means fonttype).<font size="2" color="#99AA00" face="Helevitica">FONT 2, 99AA00, HELV</font><br /><font size="3" color="#AA0099" face="Times New Roman">FONT 3, 99AA00, TIMES</font><br /><font size="4" color="#00AA99" face="Book Antiqua">FONT 4, 99AA00, BOOK ANTIQUA</font></p></body></html>
<style type="text/css">body { background: ffffee; }p { font-family: "Book Antiqua"; }div { font-size: 14pt; color: brown; font-family: sans-serif; font-weight: bold; }</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml/.DTD/xhtml1-strict.dtd"><html><head><title>And...</title><style type="text/css">body { background: ffffee; }p { font-family: "Book Antiqua"; }div { font-size: 14pt; color: brown; font-family: sans-serif; font-weight: bold; }</style></head>
The font-family defines the type of font to use. You can list more than one choice so that if your first choice is not supported by the browser being used, the second choice will be used. The choices are separated by a comma.
The font-weight can be used to make the text bold.
<body><h3>DEFAULT SETTINGS with BODY</h3><p>In HTML, default setting can be including in the BODY statement and can includebackground color done with BGCOLOR and text color done with TEXT. You can also change the color of links - LINK changes the color of the link, VLINK changes the color of the visited links - ALINK changes the color of theactive link. We will see more on these when we have looked at links.</p><h3>COLOR</h3><p>Let's talk about color - there is 6 digit hexadecimal code that is used to express color. Remember hex is the numberingsystem that goes from 0 to F. The first two digits stand forred, the next two green and the last two blue.of red, yellow, and blue.</p><div>Mixing and matching these results in different colors. For exampleif I lower the amount of red, but still use no green or blue, I get this:<br /></div><div style="color: #dd0000">THIS IS REDish<br /></div><div>If I lower the amount of blue, but still use no red or green, I get this:<br /></div><div style="color: #0000aa">THIS IS BLUEish<br /></div><div>Play with the combinations and see what you get!</div></body></html>
The red and the blue were visible because the inline style applied to the line (using division). Again note that the entire style is in double quotes so the individual color code uses single quotes.
div { font-size: 14pt; color: brown; font-family: sans-serif; }This is part of the code that appears in the head on theprevious slide. Even though the red and blue are in a <div>, this code (which calls for brown) gets overridden by the inline style which take precedence.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml/.DTD/xhtml1-strict.dtd"><html><head><title>Horizontal line</title></head><body><h2>Now lets look at Horizontal lines</h2><hr /><p>It is interesting - like the BR for break, the horizontal line does not havea closing /HR. Therefore we use the same code we used for br with the / included withthe hr.</p><p>If I don't want the line to go all the way across the page, I can do a widthon my horizontal line. And if I want it to be wider I can change the thicknessby using the SIZE clause. To make the size a solid line, I also needthe noshade clause. Notice that the line is centered. However to be safein a variety of browsers, it is probably better to use ALIGN=CENTER.</p><hr noshade width="100" size="5" /><p>If I want the line to start at the LEFT, I need to align it to the left.</p><hr noshade width="100" size="5" align="left" /><p>If I want the line to always go across 25% of the screen without worryingabout the number of characters, I can use percent to set the width.</p><hr noshade width="25%" size="5 align="left" /></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Horizontal line</title><style type="text/css">hr { height: 8pt; background-color: black; width: 25%; align: center; }</style></head><body><h2>Now lets look at Horizontal lines</h2><hr /><p>It is interesting - like the BR for break, the horizontal line does not havea closing /HR. Therefore we use the same code we used for br with the / included withthe hr.</p><p>This shows a horizontal line with a height, width and alignment.</p><hr /></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Horizontal line</title><style type="text/css">hr { height: 8pt; background-color: black; width: 25%; align: center; }</style></head><body><h2>Now lets look at Horizontal lines</h2><hr /><p>It is interesting - like the BR for break, the horizontal line does not havea closing /HR. Therefore we use the same code we used for br with the / included withthe hr.</p><p>This shows a horizontal line with a height, width and alignment.</p><hr style="width: 100%" /></body></html>
Related Documents
