Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
More on Styles: Font, Text & Color CSCI N241: Fundamentals of Web Design 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 size, weight and color of elements. • … 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: – – – – Typeface Style Color Text Decoration • 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. • 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 … 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." • On monitors, sansserif 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. • 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. • 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. • 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. • Like 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; } • 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. • 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 The preferred font, Verdana, use code like this: will appear if it is installed. p { } This is a typical Windows font. A B font-family: Verdana, Helvetica, C "Bitstream Vera Sans", sans-serif; D The secondThe choice, third Helvetica, choice, Bitstream a Vera Sans, a sans-serif, tells the MacintoshLinux font, will font,appear willThe appear iflast it ischoice, if neither Verdana or useitthe default sans-serif installed, but Helvetica Verdana isbrowser installed is not. toand is installed. 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"? • Any time you have a font name with spaces in it (e.g. "Times New Roman"), you need to put doublequotes 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). • An excellent place to determine likely fonts the Code Style Font Sampler: http://www.codestyle.org/css/font-family/ N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Let's Try One! • Download and open the file n241MoreOnStyles_ examples.zip • 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: 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. • 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). • 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 •Absolute size keywords are in line with a table of sizes that each browser keeps. The keywords are: • xx-small • x-small • small • medium • large • x-large • xx-large 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; 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). • 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. • Like absolute keywords, relative keywords use a scaling factor of between 1.2 and 1.5. • Example: The word <span style = "font-size:bigger">bigger</span> is larger than the word <span style="font-size: smaller"> smaller</span>. 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. • 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%; } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Absolute Length Measurements • 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. N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Absolute Length Measurement Example • 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: • em ("distance from baseline to baseline with no extra line space" (Niederst-Robbins)) • 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. N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Relative Length Units • 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 %; • 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%; } 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 … 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; } medium h1 { font-size: 170%; Now, Let's try medium here … } h2 { font-size: 130%; } 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. • The font-weight property can take either normal or bold as a value. • You can also use bolder, lighter and a numeric reference (100-900; 400 is normal weight; a value between 600 and 700 is bold). These values are not wellsupported. 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; } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Font Style • We can update a font's style using the fontstyle 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. 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; } 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: – – – – Using Using Using Using a color name a hexadecimal value RGB decimal values RGB percentages N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Using 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; } 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: 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: #DEB887 • STEP ONE: Separate the triplet into Red, Green and Blue components: #DEB887 DE B8 87 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: – Take the first digit of the component, convert it to its decimal value and multiply it by 16: D16 = 1310 13 * 16 = 208 – Next, convert the second digit of the component to its decimal value and ADD it to the result of the previous multiplication: E16 = 1410 208 +14 = 222 N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Hex to Decimal #DEB887 DE B8 87 222 184 135 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); } 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%); } 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 color to the body: color: rgb(50%, 0, 0); • 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: http://en.wikipedia.org/wiki/Web_colors 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. • 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: – – – – – underline overline line-through blink (never, ever use!) none • Specify underline as a textdecoration 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; } 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; • More on borders later … N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Questions? N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science References • Freeman, Elisabeth and Eric Freeman. Head First HTML with CSS & XHTML. Sebastopol, CA: 2006. • Neiderst-Robbins, Jennifer. Web Design in a Nutshell, Third Edition. Sebastopol, CA: 2006. N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science