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" " Using color and font This code will be centered This is not centered This is another way to center - the command has been depricated You can use left to align as well although left is the default. You can also right align using the align clause. This Web Page has a non white background because the background color was set to FFFFC2. Note that #FFFFFF is pure white and # is pure black. I randomly put in 000BBB for the text and got a blue coloring. 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. This gives me a large font This gives me red text 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.
This code will be centered This is not centered This is another way to center - the command has been depricated You can use left to align as well although left is the default. You can also right align using the align clause. This Web Page has a non white background because the background color was set to FFFFC2. Note that #FFFFFF is pure white and # is pure black. I randomly put in 000BBB for the text and got a blue coloring. 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.
This gives me a large font This gives me red text 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Using color and font body { background: "ffffc2"; color: "0000bb"; } This code will be centered This is not centered Now I am centering again You can use left to align as well although left is the default. You can also right align using the align clause. This Web Page has a non white background because the background color was set to FFFFC2. Note that #FFFFFF is pure white and # is pure black. I randomly put in 000BBB for the text and got a blue coloring. 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. This gives me a large font This gives me red text 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. 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.
This code will be centered This is not centered Now I am centering again You can use left to align as well although left is the default. You can also right align using the align clause. This code is applied to the specific 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 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.
This gives me a large font This gives me red text 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. 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. 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" " Using color and font body { background: #ffffc2; color: #0000bb; } This code will be centered This is not centered Now I am centering again You can use left to align as well although left is the default. You can also right align using the align clause. This Web Page has a non white background because the background color was set to FFFFC2. Note that #FFFFFF is pure white and # is pure black. I randomly put in 000BBB for the text and got a blue coloring. 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. This gives me a large font This gives me red text 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. The code that does not put quotes around the specific color or the specific size seems to be supported in more browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Using color and font body { background: #ffffc2; color: #0000bb; } This code will be centered This is not centered Now I am centering again You can use left to align as well although left is the default. You can also right align using the align clause. This Web Page has a non white background because the background color was set to FFFFC2. Note that #FFFFFF is pure white and # is pure black. I randomly put in 000BBB for the text and got a blue coloring. 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. This gives me a large font This gives me red text 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.
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. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Using color and font 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; }
This code will be centered This is not centered You can use left to align as well although left is the default. You can also right align using the align clause. This is a division. This Web Page has a non white background because the background color was set to FFFFC2. Note that #FFFFFF is pure white and # is pure black. I randomly put in 000BBB for the text and got a blue coloring. 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. This is a paragraph. This gives me brown text because it is a div. 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " And... DEFAULT SETTINGS with BODY In HTML, default setting can be including in the BODY statement and can include background 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 the active link. We will see more on these when we have looked at links. COLOR Let's talk about color - there is 6 digit hexadecimal code that is used to express color. Remember hex is the numbering system that goes from 0 to F. The first two digits stand for red, the next two green and the last two blue. of red, yellow, and blue. THIS IS RED THIS IS GREEN THIS IS BLUE THIS IS WHITE THIS IS BLACK Mixing and matching these results in different colors. For example if I lower the amount of red, but still use no green or blue, I get this: THIS IS REDish If I lower the amount of blue, but still use no red or green, I get this: THIS IS BLUEish Play with the combinations and see what you get! Other things you can do with FONT include SIZE and FACE (which means font type). FONT 2, 99AA00, HELV FONT 3, 99AA00, TIMES FONT 4, 99AA00, BOOK ANTIQUA
body { background: ffffee; } p { font-family: "Book Antiqua"; } div { font-size: 14pt; color: brown; font-family: sans-serif; font-weight: bold; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " And... body { background: ffffee; } p { font-family: "Book Antiqua"; } div { font-size: 14pt; color: brown; font-family: sans-serif; font-weight: bold; } 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.
DEFAULT SETTINGS with BODY In HTML, default setting can be including in the BODY statement and can include background 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 the active link. We will see more on these when we have looked at links. COLOR Let's talk about color - there is 6 digit hexadecimal code that is used to express color. Remember hex is the numbering system that goes from 0 to F. The first two digits stand for red, the next two green and the last two blue. of red, yellow, and blue. Mixing and matching these results in different colors. For example if I lower the amount of red, but still use no green or blue, I get this: THIS IS REDish If I lower the amount of blue, but still use no red or green, I get this: THIS IS BLUEish Play with the combinations and see what you get! 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 the previous slide. Even though the red and blue are in a, 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" " Horizontal line Now lets look at Horizontal lines It is interesting - like the BR for break, the horizontal line does not have a closing /HR. Therefore we use the same code we used for br with the / included with the hr. If I don't want the line to go all the way across the page, I can do a width on my horizontal line. And if I want it to be wider I can change the thickness by using the SIZE clause. To make the size a solid line, I also need the noshade clause. Notice that the line is centered. However to be safe in a variety of browsers, it is probably better to use ALIGN=CENTER. If I want the line to start at the LEFT, I need to align it to the left. If I want the line to always go across 25% of the screen without worrying about the number of characters, I can use percent to set the width.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Horizontal line hr { height: 8pt; background-color: black; width: 25%; align: center; } Now lets look at Horizontal lines It is interesting - like the BR for break, the horizontal line does not have a closing /HR. Therefore we use the same code we used for br with the / included with the hr. This shows a horizontal line with a height, width and alignment.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Horizontal line hr { height: 8pt; background-color: black; width: 25%; align: center; } Now lets look at Horizontal lines It is interesting - like the BR for break, the horizontal line does not have a closing /HR. Therefore we use the same code we used for br with the / included with the hr. This shows a horizontal line with a height, width and alignment.