CSCI N241: Fundamentals of Web Design Copyright ©2006 Department of Computer & Information Science...

CSCI N241:CSCI N241: Fundamentals of Web DesignFundamentals of Web Design

Copyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science

More on Styles:More on Styles:Font, Text & ColorFont, Text & Color

N241: Fundamentals of Web DevelopmentN241: Fundamentals of Web DevelopmentCopyright Copyright ©2006 ©2006 Department of Computer & Information ScienceDepartment of Computer & Information Science

GoalsGoals

By the end of this unit you should By the end of this unit you should ……

• … … be able to update the font be able to update the font typeface of elements.typeface of elements.

• … … be able to update the size, be able to update the size, weight and color of elements.weight and color of elements.

• … … be able to use font variants and be able to use font variants and text decorations.text decorations.


Styles and TextStyles and Text

• We can use CSS to control many text We can use CSS to control many text properties, including:properties, including:– TypefaceTypeface– StyleStyle– ColorColor– Text DecorationText Decoration

• Let's start our discussion by examining Let's start our discussion by examining the the font-familyfont-family property … property …


The The font-familyfont-family Style Style

• We can use the We can use the font-familyfont-family property to specify a desired property to specify a desired typeface for our text. typeface for our text.

• In addition, we can also specify In addition, we can also specify substitute fonts, in case the user substitute fonts, in case the user doesn't have our desired font doesn't have our desired font installed.installed.


Font FamiliesFont Families

• CSS divides CSS divides fonts into five fonts into five groups called groups called familiesfamilies. The . The families include families include serif, sans-serif, serif, sans-serif, monospace, monospace, cursive and cursive and fantasy …fantasy …


The Sans-serif FamilyThe Sans-serif Family

• We characterize We characterize sans-serif sans-serif fonts as fonts as those fonts lacking those fonts lacking serifs – the serifs – the "decorative barbs "decorative barbs and hooks on the and hooks on the ends of the ends of the letters."letters."

• On monitors, sans-On monitors, sans-serif fonts are easy serif fonts are easy to read for large to read for large amounts of text.amounts of text.


The Serif FamilyThe Serif Family

• We characterize We characterize serif serif fonts as those fonts as those fonts that include fonts that include serifs, similar to serifs, similar to the print we see in the print we see in newspapers.newspapers.

• You should restrict You should restrict your use of serif your use of serif fonts to titles and fonts to titles and larger text.larger text.


The Monospace Family The Monospace Family

• We characterize We characterize monospace monospace fonts as fonts as those fonts whose those fonts whose characters, both characters, both UPPERCASE and UPPERCASE and lowercase, have the lowercase, have the same width.same width.

• The letter "The letter "ii" in a " in a monospace font will monospace font will take the same amount take the same amount of width as the letter of width as the letter ""WW."."


The Cursive FamilyThe Cursive Family

• We characterize We characterize cursive cursive fonts as fonts as those fonts that those fonts that look handwritten.look handwritten.

• Cursive and fantasy Cursive and fantasy fonts (next slide) fonts (next slide) are not widely are not widely available across available across different machines.different machines.


The Fantasy Family The Fantasy Family

• We characterize We characterize fantasy fantasy fonts as fonts as those fonts that those fonts that with decorative with decorative designs.designs.

• Like cursive fonts, Like cursive fonts, fantasy fonts are fantasy fonts are often specialized often specialized and not common and not common across machinesacross machines


Specifying Fonts via CSSSpecifying Fonts via CSS

• The simplest way to specify a font in CSS The simplest way to specify a font in CSS is to use the font family name, like this:is to use the font family name, like this:bodybody{{

font-family: sans-serif;font-family: sans-serif;}}

• This will use the browser's default font for This will use the browser's default font for that family. However, it doesn't give you a that family. However, it doesn't give you a lot of control over text appearance.lot of control over text appearance.


Giving the Browser ChoicesGiving the Browser Choices

• Carefully consider the fonts that Carefully consider the fonts that you want to use and make certain you want to use and make certain that you choose good alternatives.that you choose good alternatives.

• Pay close attention that you Pay close attention that you choose fonts that span across the choose fonts that span across the three major operating systems!three major operating systems!


Specifying Multiple AlternativesSpecifying Multiple Alternatives

• To specify multiply fonts, we To specify multiply fonts, we would use code like this:would use code like this:pp{{

font-family: Verdana, Helvetica, font-family: Verdana, Helvetica, "Bitstream Vera Sans", "Bitstream Vera Sans", sans-serif; sans-serif;

}}

A B

CD

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.


Specifying Fonts with a Specifying Fonts with a Multi-Word NameMulti-Word Name

• In the previous example, did you In the previous example, did you notice the quotes around the notice the quotes around the font font "Bitstream Vera Sans""Bitstream Vera Sans"??

• Any time you have a font name Any time you have a font name with spaces in it (e.g. "Times with spaces in it (e.g. "Times New Roman"), you need to put New Roman"), you need to put double-quotes around the name!double-quotes around the name!


Which fonts should I use?Which fonts should I use?

• Given that we can't predict, with Given that we can't predict, with certainty, which fonts our users will certainty, which fonts our users will have installed. Therefore, we need to have installed. Therefore, we need to specify at least one font for each of specify at least one font for each of the three major operating systems the three major operating systems (Windows, Macintosh, Linux).(Windows, Macintosh, Linux).

• An excellent place to determine likely An excellent place to determine likely fonts the Code Style Font Sampler:fonts the Code Style Font Sampler:http://http://www.codestyle.org/css/fontwww.codestyle.org/css/font-family/-family/


Let's Try One!Let's Try One!

• Download and Download and open the file open the file n241MoreOnStyles_n241MoreOnStyles_examples.zipexamples.zip

• Open Open journal.htmljournal.html and and add a link to the add a link to the journal.cssjournal.css file file (in the (in the csscss folder). folder).


Keep Goin'Keep Goin'

• Now, edit the Now, edit the journal.cssjournal.css file and file and add the following style:add the following style:

bodybody

{{

font-family: Verdana, Geneva,font-family: Verdana, Geneva, "Bitstream Vera Sans", "Bitstream Vera Sans", sans-serif; sans-serif;

}}


Changing Font SizeChanging Font Size

• CSS allows us to use a variety of CSS allows us to use a variety of mechanisms for specifying font sizes mechanisms for specifying font sizes by using the by using the font-sizefont-size property. property.

• We can use absolute size keywords, We can use absolute size keywords, relative size keywords, relative relative size keywords, relative measurements, absolute measurements, absolute measurements, or a combination.measurements, or a combination.


Relative vs. AbsoluteRelative vs. Absolute

• When considering font sizes, When considering font sizes, absolute sizes have "predefined absolute sizes have "predefined meanings or an understood real-meanings or an understood real-world equivalent" (world equivalent" (Niederst-RobbinsNiederst-Robbins).).

• Relative sizes are sizes compared to Relative sizes are sizes compared to something else, like a parent something else, like a parent element or an em measurement.element or an em measurement.


Absolute Size KeywordsAbsolute Size Keywords

• xx-smallxx-small• x-smallx-small• smallsmall• mediummedium

• largelarge• x-largex-large• xx-largexx-large

•Absolute size keywords are in line Absolute size keywords are in line with a table of sizes that each browser with a table of sizes that each browser keeps. The keywords are:keeps. The keywords are:


Absolute Size Keyword Absolute Size Keyword ExampleExample

• Examples:Examples:bodybody{{

font-size: medium;font-size: medium;}}

h1h1{{

font-size: x-large;font-size: x-large;}}


The Scaling FactorThe Scaling Factor

• With most compliant web browsers, With most compliant web browsers, the the mediummedium keyword represents the keyword represents the default font size (Microsoft Internet default font size (Microsoft Internet Explorer 5.0/5.5 use Explorer 5.0/5.5 use smallsmall as the as the default).default).

• The browser will scale other sizes The browser will scale other sizes between 1.2 (CSS 2.1 specification) between 1.2 (CSS 2.1 specification) and 1.5 (CSS 1.5 specification) larger and 1.5 (CSS 1.5 specification) larger or smaller than the next or smaller than the next smaller/larger size.smaller/larger size.


Relative Size KeywordsRelative Size Keywords

• We can use two relative keywords, We can use two relative keywords, largerlarger and and smallersmaller, to change the appearance , to change the appearance relative to their parent element.relative to their parent element.

• Like absolute keywords, relative keywords Like absolute keywords, relative keywords use a scaling factor of between 1.2 and 1.5.use a scaling factor of between 1.2 and 1.5.

• Example:Example:The wordThe word "font-size:bigger">biggerbigger is is larger than the wordlarger than the word style="font-size: smaller">smallersmaller..


Percentage MeasurementsPercentage Measurements

• We can use percentage measurements to We can use percentage measurements to display text size, relative to a parent display text size, relative to a parent element. element.

• Using percentages is a fairly reliable way to Using percentages is a fairly reliable way to re-size text, except for a few minor problem re-size text, except for a few minor problem areas (like nested lists).areas (like nested lists).

• Example:Example:h2h2{{

font-size: 125%;font-size: 125%;}}


Absolute Length Absolute Length MeasurementsMeasurements

• The absolute length measurements The absolute length measurements include the following units:include the following units:– ptpt (points; 1/72 of an inch in CSS 2.1) (points; 1/72 of an inch in CSS 2.1)– pcpc (picas; 1 pica = 12 points) (picas; 1 pica = 12 points)– mmmm (millimeters) (millimeters)– cmcm (centimeters) (centimeters)– inin (inches) (inches)

• Generally, we should stay away from using Generally, we should stay away from using absolute measurements, except when we absolute measurements, except when we create pages that people will print.create pages that people will print.


Absolute Length Absolute Length Measurement ExampleMeasurement Example

• Example:Example:p.toPrintp.toPrint{{

font-size: 12pt;font-size: 12pt;}}


Relative Length UnitsRelative Length Units

• CSS also supports three relative length CSS also supports three relative length units:units:

• emem ("distance from baseline to baseline ("distance from baseline to baseline with no extra line space" (with no extra line space" (Niederst-Niederst-RobbinsRobbins))))

• exex (in the particular font, the height of the (in the particular font, the height of the letter "x")letter "x")

• pxpx (pixels; relative in CSS because the size (pixels; relative in CSS because the size can vary due to differences in display can vary due to differences in display resolutions.resolutions.


Relative Length UnitsRelative Length Units

• Example:Example:blockquoteblockquote{{

font-size: 1.5em;font-size: 1.5em;}}


RecommendationsRecommendations

• When you specify When you specify font-sizefont-size, be , be certain that any unit name or certain that any unit name or %% sign sign immediately follows your immediately follows your measurement, like this:measurement, like this:font-size: 120%;font-size: 120%;NOT this:NOT this:font-size: 120 %;font-size: 120 %;

• The former example will render The former example will render correctly; the latter will cause an correctly; the latter will cause an error.error.


RecommendationsRecommendations

• It is a good idea to use a combination It is a good idea to use a combination of measurements by first configuring of measurements by first configuring the the body font-sizebody font-size, using an , using an absolute size keyword (like absolute size keyword (like smallsmall or or mediummedium) and then specifying nested ) and then specifying nested elements by using measurements elements by using measurements relative to the relative to the bodybody, like this:, like this:body { font-size: small; }body { font-size: small; }h1 { font-size: 150%; }h1 { font-size: 150%; }h2 {font-size: 125%; }h2 {font-size: 125%; }



• Edit the Edit the journal.cssjournal.css file. Add the file. Add the style rules on style rules on the next slide …the next slide …


Keep Goin'Keep Goin'bodybody{{

font-family: Verdana, Geneva,font-family: Verdana, Geneva, "Bitstream Vera Sans", "Bitstream Vera Sans", sans-serif; sans-serif;

font-size: small;font-size: small;}}h1h1{{

font-size: 170%;font-size: 170%;}}h2h2{{

font-size: 130%;font-size: 130%;}}

Now, Let's try medium here …

medium


Editing the Font WeightEditing the Font Weight

• We can change the font weight by We can change the font weight by updated the updated the font-weightfont-weight property. property.

• The The font-weightfont-weight property can take property can take either either normalnormal or or boldbold as a value. as a value.

• You can also use You can also use bolderbolder, , lighterlighter and a numeric reference (and a numeric reference (100-900100-900; ; 400400 is normal weight; a value is normal weight; a value between between 600600 and and 700700 is bold). These is bold). These values are not well-supported. values are not well-supported.



• Write a rule to make all Write a rule to make all h1h1 elements and all elements and all h2h2 elements elements normalnormal weight: weight:h1, h2h1, h2{{

font-weight: normal;font-weight: normal;}}


Font StyleFont Style

• We can update a font's style using the We can update a font's style using the font-stylefont-style property, which takes one of property, which takes one of the following values:the following values:– normalnormal– italicitalic– obliqueoblique

• italicitalic and and obliqueoblique differ in that differ in that italicitalic uses a special set of the font designed uses a special set of the font designed specifically with slanted characters; specifically with slanted characters; obliqueoblique slants the text, but uses the slants the text, but uses the normal font set. Recommendation: use normal font set. Recommendation: use italicitalic..



• Write a rule to make all Write a rule to make all blockquoteblockquote elements use italic elements use italic text:text:blockquoteblockquote{{

font-style: italic;font-style: italic;}}


Specifying ColorSpecifying Color

• We can adjust the foreground We can adjust the foreground color (color (colorcolor) or the background ) or the background color (color (background-colorbackground-color) of an ) of an element using one of four element using one of four methods:methods:– Using a color nameUsing a color name– Using a hexadecimal valueUsing a hexadecimal value– Using RGB decimal valuesUsing RGB decimal values– Using RGB percentagesUsing RGB percentages


Using Color NamesUsing 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


Using Hexadecimal ValuesUsing Hexadecimal Values

• We can use hexadecimal value We can use hexadecimal value to specify a color:to specify a color:bodybody{{

color: #000080;color: #000080;}}


REVIEW: Converting to HexREVIEW: Converting to Hex

• Convert the following color to its Convert the following color to its Hexadecimal Equivalent. Use the Hexadecimal Equivalent. Use the format #RRGGBB in your format #RRGGBB in your answer:answer: RED: 219

GREEN: 112BLUE: 147HEX EQUIVALENT:#DB7093


What about Converting What about Converting Hex to Decimal?Hex to Decimal?

• Convert the following triplet to its Convert the following triplet to its decimal equivalent:decimal equivalent:#DEB887#DEB887

• STEP ONESTEP ONE: Separate the triplet into : Separate the triplet into Red, Green and Blue components:Red, Green and Blue components:

#DEB887#DEB887

DEDE B8B8 8787


What about Converting What about Converting Hex to Decimal?Hex to Decimal?

• STEP TWOSTEP TWO: Convert each component : Convert each component to its decimal equivalent:to its decimal equivalent:– Take the first digit of the component, convert it Take the first digit of the component, convert it

to its decimal value and multiply it by 16:to its decimal value and multiply it by 16:DD1616 = 13 = 131010

13 * 16 = 20813 * 16 = 208– Next, convert the second digit of the Next, convert the second digit of the

component to its decimal value and ADD it to component to its decimal value and ADD it to the result of the previous multiplication:the result of the previous multiplication:EE1616 = 14 = 141010

208 +14 = 222208 +14 = 222


Hex to DecimalHex to Decimal

#DEB887#DEB887

DEDE B8 B8 87 87

222222 184 184 135135


Using RGB Decimal ValuesUsing RGB Decimal Values

• Finally, we can use RGB decimal Finally, we can use RGB decimal values to specify a color (values values to specify a color (values between 0 and 255):between 0 and 255):bodybody{{

color: rgb(0, 0, 128);color: rgb(0, 0, 128);}}


Using RGB PercentagesUsing RGB Percentages

• We can use RGB percentage We can use RGB percentage values to specify a color:values to specify a color:bodybody{{

color: rgb(0%, 0%, 50%);color: rgb(0%, 0%, 50%);}}



• Add the following Add the following background-colorbackground-color to the to the bodybody::background-color: #FFE4C4;background-color: #FFE4C4;

• Add the following Add the following colorcolor to the to the bodybody::color: rgb(50%, 0, 0);color: rgb(50%, 0, 0);

• Add the following Add the following colorcolor to the to the h1h1 and and h2h2 elements: elements:color: rgb(210, 105, 30);color: rgb(210, 105, 30);


Suggested ReadingSuggested Reading

• You can find a great article You can find a great article (including color examples) on (including color examples) on Web colors using Wikipedia:Web colors using Wikipedia:

http://en.wikipedia.org/wiki/Web_colorshttp://en.wikipedia.org/wiki/Web_colors


Using Using font-variantfont-variant

• We can use the We can use the font-variantfont-variant property to enable small caps in property to enable small caps in our text. our text.

• Add small caps to your Add small caps to your h1h1 element in element in journal.cssjournal.css::font-variant: small-caps;font-variant: small-caps;


Using Using text-decorationtext-decoration

• We can use text-decoration with the We can use text-decoration with the following values:following values:– underlineunderline– overlineoverline– line-throughline-through– blinkblink (never, ever use!) (never, ever use!)– nonenone

• Specify Specify underlineunderline as a as a text-text-decorationdecoration for your for your h1h1 and and h2h2 elements.elements.


Let's Try Another!Let's Try Another!

• Add the following to Add the following to journal.cssjournal.css::a:link, a:visiteda:link, a:visited{{

text-decoration: none;text-decoration: none;}}

a:active, a:hovera:active, a:hover{{

text-decoration: underline overline;text-decoration: underline overline;}}


Yuck! Get rid of the Yuck! Get rid of the underline!underline!

• Okay, so you don't like the Okay, so you don't like the underlineunderline for your for your h1h1 and and h2h2 elements. Update the rule by elements. Update the rule by replacing the replacing the text-decorationtext-decoration property with a property with a border-bottomborder-bottom property:property:border-bottom: thin dotted #333333;border-bottom: thin dotted #333333;

• More on borders later …More on borders later …


Questions?Questions?


ReferencesReferences

•Freeman, Elisabeth and Eric Freeman, Elisabeth and Eric Freeman. Freeman. Head First HTML with Head First HTML with CSS & XHTMLCSS & XHTML. Sebastopol, CA: . Sebastopol, CA: 2006.2006.

•Neiderst-Robbins, Jennifer. Neiderst-Robbins, Jennifer. Web Web Design in a Nutshell, Third Design in a Nutshell, Third EditionEdition. Sebastopol, CA: 2006.. Sebastopol, CA: 2006.

Date post:	26-Dec-2015
Category:	Documents
Upload:	randolph-george
View:	220 times
Download:	0 times

CSCI N241: Fundamentals of Web Design Copyright ©2006 Department of Computer & Information Science...

Documents