Using color and fonts in HTML and XHTML

This code will be centered This code will be centered

This gives me a large font This gives" src="https://present5.com/presentation/bcfa5d65ccd0fff0b885c1fa4e1b1314/image-5.jpg" alt="

This gives me a large font This gives" />

This code will be centered This is not" src="https://present5.com/presentation/bcfa5d65ccd0fff0b885c1fa4e1b1314/image-8.jpg" alt=" This code will be centered This is not" />

This gives me a large font

<body> <h 1>This code will be centered</h 1> <h 3>This is not centered</h 3>

body { background: ffffee; } p { font-family: "Book Antiqua"; } div" src="https://present5.com/presentation/bcfa5d65ccd0fff0b885c1fa4e1b1314/image-19.jpg" alt=" 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 Web Page has a non white background because the background color was set to FFFFC 2. Note that #FFFFFF is pure white and #000000 is pure black. I randomly put in 000 BBB 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 00 dd 00 which gave me a shade of green.

<body> <h 1 style= This code will be centered This is not" src="https://present5.com/presentation/bcfa5d65ccd0fff0b885c1fa4e1b1314/image-8.jpg" alt=" This code will be centered This is not" /> 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. 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 code is applied to the specific tag. The style uses the code of CSS where text-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).

<div style= This gives me a large font

This gives me a large font

This gives me red text

I have broken this code into divisions. This div will have a font-size of 22 pt. 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 14 pt 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, 14 pt etc and find that it is supported in more browsers.

<!DOCTYPE html PUBLIC Using color and font 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 gives me a large font

This gives me red text

<? xml version= Using color and font 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 gives me a large font

This gives me red text

<? xml version= Using color and font All divisions will be 16 pt and brown.

<body> <h 1>This code will be centered</h 1> <h 3>This is not centered</h 3> 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 FFFFC 2. Note that #FFFFFF is pure white and #000000 is pure black. I randomly put in 000 BBB 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 00 dd 00 which gave me a shade of green.

<!DOCTYPE html PUBLIC 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, 99 AA 00, HELV FONT 3, 99 AA 00, TIMES FONT 4, 99 AA 00, BOOK ANTIQUA

body { background: ffffee; } p { font-family: "Book Antiqua"; } div" src="https://present5.com/presentation/bcfa5d65ccd0fff0b885c1fa4e1b1314/image-19.jpg" alt="

<!DOCTYPE html PUBLIC And. . . 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> <h 3>DEFAULT SETTINGS with BODY</h 3> In HTML, default setting can be including DEFAULT SETTINGS with BODY

COLOR

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!

div 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. { font-size: 14 pt; 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 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 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 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.

This shows a horizontal line with a height, width and alignment.

<!DOCTYPE html PUBLIC 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.

This shows a horizontal line with a height, width and alignment.