CSCI N241: Fundamentals of Web Design Copyright ©2006  Department of Computer & Information Science More on Styles: Font, Text & Color

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Goals By the end of this unit you should … … be able to update the font typeface of elements.… be able to update the font typeface of elements. … be able to update the size, weight and color of elements.… be able to update the size, weight and color of elements. … be able to use font variants and text decorations.… be able to use font variants and text decorations.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Styles and Text We can use CSS to control many text properties, including:We can use CSS to control many text properties, including: –Typeface –Style –Color –Text Decoration Let's start our discussion by examining the font-family property …Let's start our discussion by examining the font-family property …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The font-family Style We can use the font-family property to specify a desired typeface for our text.We can use the font-family property to specify a desired typeface for our text. In addition, we can also specify substitute fonts, in case the user doesn't have our desired font installed.In addition, we can also specify substitute fonts, in case the user doesn't have our desired font installed.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Font Families CSS divides fonts into five groups called families. The families include serif, sans-serif, monospace, cursive and fantasy …CSS divides fonts into five groups called families. The families include serif, sans-serif, monospace, cursive and fantasy …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The Sans-serif Family We characterize sans-serif fonts as those fonts lacking serifs – the "decorative barbs and hooks on the ends of the letters."We characterize sans-serif fonts as those fonts lacking serifs – the "decorative barbs and hooks on the ends of the letters." On monitors, sans- serif fonts are easy to read for large amounts of text.On monitors, sans- serif fonts are easy to read for large amounts of text.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The Serif Family We characterize serif fonts as those fonts that include serifs, similar to the print we see in newspapers.We characterize serif fonts as those fonts that include serifs, similar to the print we see in newspapers. You should restrict your use of serif fonts to titles and larger text.You should restrict your use of serif fonts to titles and larger text.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The Monospace Family We characterize monospace fonts as those fonts whose characters, both UPPERCASE and lowercase, have the same width.We characterize monospace fonts as those fonts whose characters, both UPPERCASE and lowercase, have the same width. The letter " i " in a monospace font will take the same amount of width as the letter " W."The letter " i " in a monospace font will take the same amount of width as the letter " W."

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The Cursive Family We characterize cursive fonts as those fonts that look handwritten.We characterize cursive fonts as those fonts that look handwritten. Cursive and fantasy fonts (next slide) are not widely available across different machines.Cursive and fantasy fonts (next slide) are not widely available across different machines.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The Fantasy Family We characterize fantasy fonts as those fonts that with decorative designs.We characterize fantasy fonts as those fonts that with decorative designs. Like cursive fonts, fantasy fonts are often specialized and not common across machinesLike cursive fonts, fantasy fonts are often specialized and not common across machines

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Specifying Fonts via CSS The simplest way to specify a font in CSS is to use the font family name, like this: body { font-family: sans-serif; }The simplest way to specify a font in CSS is to use the font family name, like this: body { font-family: sans-serif; } This will use the browser's default font for that family. However, it doesn't give you a lot of control over text appearance.This will use the browser's default font for that family. However, it doesn't give you a lot of control over text appearance.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Giving the Browser Choices Carefully consider the fonts that you want to use and make certain that you choose good alternatives.Carefully consider the fonts that you want to use and make certain that you choose good alternatives. Pay close attention that you choose fonts that span across the three major operating systems!Pay close attention that you choose fonts that span across the three major operating systems!

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Specifying Multiple Alternatives To specify multiply fonts, we would use code like this: p { font-family: Verdana, Helvetica, "Bitstream Vera Sans", sans-serif; }To specify multiply fonts, we would use code like this: p { font-family: Verdana, Helvetica, "Bitstream Vera Sans", sans-serif; } AB C D The preferred font, Verdana, will appear if it is installed. This is a typical Windows font. The second choice, Helvetica, a Macintosh font, will appear if it is installed, but Verdana is not. The third choice, Bitstream Vera Sans, a Linux font, will appear if neither Verdana or Helvetica is installed and it is installed. The last choice, sans-serif, tells the browser to use the default sans-serif font, configured by the browser.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Specifying Fonts with a Multi-Word Name In the previous example, did you notice the quotes around the font "Bitstream Vera Sans" ?In the previous example, did you notice the quotes around the font "Bitstream Vera Sans" ? Any time you have a font name with spaces in it (e.g. "Times New Roman"), you need to put double- quotes around the name!Any time you have a font name with spaces in it (e.g. "Times New Roman"), you need to put double- quotes around the name!

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Which fonts should I use? Given that we can't predict, with certainty, which fonts our users will have installed. Therefore, we need to specify at least one font for each of the three major operating systems (Windows, Macintosh, Linux).Given that we can't predict, with certainty, which fonts our users will have installed. Therefore, we need to specify at least one font for each of the three major operating systems (Windows, Macintosh, Linux). An excellent place to determine likely fonts the Code Style Font Sampler: excellent place to determine likely fonts the Code Style Font Sampler:

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try One! Download and open the file n241MoreOnStyles_ examples.zipDownload and open the file n241MoreOnStyles_ examples.zip Open journal.html and add a link to the journal.css file (in the css folder).Open journal.html and add a link to the journal.css file (in the css folder).

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Keep Goin' Now, edit the journal.css file and add the following style:Now, edit the journal.css file and add the following style:body{ font-family: Verdana, Geneva, "Bitstream Vera Sans", sans-serif; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Changing Font Size CSS allows us to use a variety of mechanisms for specifying font sizes by using the font-size property.CSS allows us to use a variety of mechanisms for specifying font sizes by using the font-size property. We can use absolute size keywords, relative size keywords, relative measurements, absolute measurements, or a combination.We can use absolute size keywords, relative size keywords, relative measurements, absolute measurements, or a combination.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Relative vs. Absolute When considering font sizes, absolute sizes have "predefined meanings or an understood real-world equivalent" (Niederst-Robbins).When considering font sizes, absolute sizes have "predefined meanings or an understood real-world equivalent" (Niederst-Robbins). Relative sizes are sizes compared to something else, like a parent element or an em measurement.Relative sizes are sizes compared to something else, like a parent element or an em measurement.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Absolute Size Keywords xx-smallxx-small x-smallx-small smallsmall mediummedium largelarge x-largex-large xx-largexx-large Absolute size keywords are in line with a table of sizes that each browser keeps. The keywords are:Absolute size keywords are in line with a table of sizes that each browser keeps. The keywords are:

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Absolute Size Keyword Example Examples: body { font-size: medium; } h1 { font-size: x-large; }Examples: body { font-size: medium; } h1 { font-size: x-large; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The Scaling Factor With most compliant web browsers, the medium keyword represents the default font size (Microsoft Internet Explorer 5.0/5.5 use small as the default).With most compliant web browsers, the medium keyword represents the default font size (Microsoft Internet Explorer 5.0/5.5 use small as the default). The browser will scale other sizes between 1.2 (CSS 2.1 specification) and 1.5 (CSS 1.5 specification) larger or smaller than the next smaller/larger size.The browser will scale other sizes between 1.2 (CSS 2.1 specification) and 1.5 (CSS 1.5 specification) larger or smaller than the next smaller/larger size.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Relative Size Keywords We can use two relative keywords, larger and smaller, to change the appearance relative to their parent element.We can use two relative keywords, larger and smaller, to change the appearance relative to their parent element. Like absolute keywords, relative keywords use a scaling factor of between 1.2 and 1.5.Like absolute keywords, relative keywords use a scaling factor of between 1.2 and 1.5. Example: The word bigger is larger than the word smaller.Example: The word bigger is larger than the word smaller.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Percentage Measurements We can use percentage measurements to display text size, relative to a parent element.We can use percentage measurements to display text size, relative to a parent element. Using percentages is a fairly reliable way to re-size text, except for a few minor problem areas (like nested lists).Using percentages is a fairly reliable way to re-size text, except for a few minor problem areas (like nested lists). Example: h2 { font-size: 125%; }Example: h2 { font-size: 125%; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Absolute Length Measurements The absolute length measurements include the following units:The absolute length measurements include the following units: –pt (points; 1/72 of an inch in CSS 2.1) –pc (picas; 1 pica = 12 points) –mm (millimeters) –cm (centimeters) –in (inches) Generally, we should stay away from using absolute measurements, except when we create pages that people will print.Generally, we should stay away from using absolute measurements, except when we create pages that people will print.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Absolute Length Measurement Example Example: p.toPrint { font-size: 12pt; }Example: p.toPrint { font-size: 12pt; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Relative Length Units CSS also supports three relative length units:CSS also supports three relative length units: em ("distance from baseline to baseline with no extra line space" (Niederst-Robbins))em ("distance from baseline to baseline with no extra line space" (Niederst-Robbins)) ex (in the particular font, the height of the letter "x")ex (in the particular font, the height of the letter "x") px (pixels; relative in CSS because the size can vary due to differences in display resolutions.px (pixels; relative in CSS because the size can vary due to differences in display resolutions.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Relative Length Units Example: blockquote { font-size: 1.5em; }Example: blockquote { font-size: 1.5em; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Recommendations When you specify font-size, be certain that any unit name or % sign immediately follows your measurement, like this: font-size: 120%; NOT this: font-size: 120 %;When you specify font-size, be certain that any unit name or % sign immediately follows your measurement, like this: font-size: 120%; NOT this: font-size: 120 %; The former example will render correctly; the latter will cause an error.The former example will render correctly; the latter will cause an error.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Recommendations It is a good idea to use a combination of measurements by first configuring the body font-size, using an absolute size keyword (like small or medium ) and then specifying nested elements by using measurements relative to the body, like this: body { font-size: small; } h1 { font-size: 150%; } h2 {font-size: 125%; }It is a good idea to use a combination of measurements by first configuring the body font-size, using an absolute size keyword (like small or medium ) and then specifying nested elements by using measurements relative to the body, like this: body { font-size: small; } h1 { font-size: 150%; } h2 {font-size: 125%; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try One! Edit the journal.css file. Add the style rules on the next slide …Edit the journal.css file. Add the style rules on the next slide …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Keep Goin' body { font-family: Verdana, Geneva, "Bitstream Vera Sans", sans-serif; font-size: small; } h1 { font-size: 170%; } h2 { font-size: 130%; } Now, Let's try medium here … medium

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Editing the Font Weight We can change the font weight by updated the font-weight property.We can change the font weight by updated the font-weight property. The font-weight property can take either normal or bold as a value.The font-weight property can take either normal or bold as a value. You can also use bolder, lighter and a numeric reference ( ; 400 is normal weight; a value between 600 and 700 is bold). These values are not well- supported.You can also use bolder, lighter and a numeric reference ( ; 400 is normal weight; a value between 600 and 700 is bold). These values are not well- supported.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try One! Write a rule to make all h1 elements and all h2 elements normal weight: h1, h2 { font-weight: normal; }Write a rule to make all h1 elements and all h2 elements normal weight: h1, h2 { font-weight: normal; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Font Style We can update a font's style using the font- style property, which takes one of the following values:We can update a font's style using the font- style property, which takes one of the following values: –normal –italic –oblique italic and oblique differ in that italic uses a special set of the font designed specifically with slanted characters; oblique slants the text, but uses the normal font set. Recommendation: use italic.italic and oblique differ in that italic uses a special set of the font designed specifically with slanted characters; oblique slants the text, but uses the normal font set. Recommendation: use italic.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try One! Write a rule to make all blockquote elements use italic text: blockquote { font-style: italic; }Write a rule to make all blockquote elements use italic text: blockquote { font-style: italic; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Specifying Color We can adjust the foreground color ( color ) or the background color ( background-color ) of an element using one of four methods:We can adjust the foreground color ( color ) or the background color ( background-color ) of an element using one of four methods: –Using a color name –Using a hexadecimal value –Using RGB decimal values –Using RGB percentages

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Using Color Names CSS supports 17 color names:CSS supports 17 color names: Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Orange Purple Red Silver Teal White Yellow

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Using Hexadecimal Values We can use hexadecimal value to specify a color: body { color: #000080; }We can use hexadecimal value to specify a color: body { color: #000080; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science REVIEW: Converting to Hex Convert the following color to its Hexadecimal Equivalent. Use the format #RRGGBB in your answer:Convert the following color to its Hexadecimal Equivalent. Use the format #RRGGBB in your answer: RED: 219 GREEN: 112 BLUE: 147 HEX EQUIVALENT: #DB7093

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science What about Converting Hex to Decimal? Convert the following triplet to its decimal equivalent: #DEB887Convert the following triplet to its decimal equivalent: #DEB887 STEP ONE: Separate the triplet into Red, Green and Blue components:STEP ONE: Separate the triplet into Red, Green and Blue components:#DEB887 DEB887

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science What about Converting Hex to Decimal? STEP TWO: Convert each component to its decimal equivalent:STEP TWO: Convert each component to its decimal equivalent: –Take the first digit of the component, convert it to its decimal value and multiply it by 16: D 16 = * 16 = 208 –Next, convert the second digit of the component to its decimal value and ADD it to the result of the previous multiplication: E 16 = = 222

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Hex to Decimal #DEB887 DE B8 87 DE B

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Using RGB Decimal Values Finally, we can use RGB decimal values to specify a color (values between 0 and 255): body { color: rgb(0, 0, 128); }Finally, we can use RGB decimal values to specify a color (values between 0 and 255): body { color: rgb(0, 0, 128); }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Using RGB Percentages We can use RGB percentage values to specify a color: body { color: rgb(0%, 0%, 50%); }We can use RGB percentage values to specify a color: body { color: rgb(0%, 0%, 50%); }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try One! Add the following background-color to the body : background-color: #FFE4C4;Add the following background-color to the body : background-color: #FFE4C4; Add the following color to the body : color: rgb(50%, 0, 0);Add the following color to the body : color: rgb(50%, 0, 0); Add the following color to the h1 and h2 elements: color: rgb(210, 105, 30);Add the following color to the h1 and h2 elements: color: rgb(210, 105, 30);

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Suggested Reading You can find a great article (including color examples) on Web colors using Wikipedia:You can find a great article (including color examples) on Web colors using Wikipedia:

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Using font-variant We can use the font-variant property to enable small caps in our text.We can use the font-variant property to enable small caps in our text. Add small caps to your h1 element in journal.css : font-variant: small-caps;Add small caps to your h1 element in journal.css : font-variant: small-caps;

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Using text-decoration We can use text-decoration with the following values:We can use text-decoration with the following values: –underline –overline –line-through –blink (never, ever use!) –none Specify underline as a text- decoration for your h1 and h2 elements.Specify underline as a text- decoration for your h1 and h2 elements.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try Another! Add the following to journal.css : a:link, a:visited { text-decoration: none; } a:active, a:hover { text-decoration: underline overline; }Add the following to journal.css : a:link, a:visited { text-decoration: none; } a:active, a:hover { text-decoration: underline overline; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Yuck! Get rid of the underline! Okay, so you don't like the underline for your h1 and h2 elements. Update the rule by replacing the text-decoration property with a border-bottom property: border-bottom: thin dotted #333333;Okay, so you don't like the underline for your h1 and h2 elements. Update the rule by replacing the text-decoration property with a border-bottom property: border-bottom: thin dotted #333333; More on borders later …More on borders later …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Questions?

References Freeman, Elisabeth and Eric Freeman. Head First HTML with CSS & XHTML. Sebastopol, CA: 2006.Freeman, Elisabeth and Eric Freeman. Head First HTML with CSS & XHTML. Sebastopol, CA: Neiderst-Robbins, Jennifer. Web Design in a Nutshell, Third Edition. Sebastopol, CA: 2006.Neiderst-Robbins, Jennifer. Web Design in a Nutshell, Third Edition. Sebastopol, CA: 2006.