Download More on Styles: Font, Text & Color

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