Lesson 4 - Styling Text Content
Topics Covered



Available Fonts
Font Types / Sans-Serif vs Serif
Font style Properties



Text style properties
The <span> and </span> tag element.
Pseudo-Elements
Available Fonts
Fonts come in basically five different categories, four of which are shown below. The Sans Serif font will
create block style fonts. This font is easy to read and good to use when there is a large amount of text
on your site that your visitor must read. The Serif style fonts are a bit more of a formal style of font.
The Script font style has the appearance of handwriting. The Monospace font style looks like a
typewriter. All the letters are evenly spaced. The final category is fancy font. This type of font is not
standard and is generally a font found on a website and installed. This font is almost guaranteed not to
show up for any of your visitors and should be avoided in web design.
Font Name
Sans-Serif
Serif
Script
monospace
fancy
Output
This font is Sans Serif
This font is Serif
This font is Script
This font is Monospace
Sans-Serif vs Serif
The term serif refers to the small embellishments on the letters that give them a fancier appearance.
The term sans means "without", which would refer to the fonts without the serif enhancements.
Serif
Sans-Serif
T
T
Font Styles
When selecting a font to use on a web page, it may be tempting to use a nice font that you found online
or that may even have come with your computer. Before you use the font, it is important to realize that
just because you have the font installed on your computer, if you us the font on your web page, you will
see the page display the text with your selected font; but unless your visitors also have the same font
installed, they will just see their browser's default font style, which is generally Times New Roman.
The table below displays some of the more common fonts that you can for the most part count on being
available on most computers. Arial is set as the default font for this page, so if your computer does not
have any of the fonts shown below installed, then you will the font will be rendered in Arial.
Common fonts
Times New Roman
Comic Sans MS
Impact
Courier New
Tahoma
Century Gothic
Haettenschweiler
Terminal
Wide Latin
Lucida Handwriting
Playbill
Algerian
Arial
Britannic Bold
Arial Black
Abadi MT Condensed Light
Verdana
Colonna MT
The Font Properties
The font properties allow you to define specific characteristics that affect the direct appearance of the
font itself. Each of the available font properties are described below.
Property
font-family:
Description
Accepted Values
The font-family style will accept
Defines the font of the text which
any specific font name, or the
the style is being applied to
generic name of the font.
The font-variant allows you to set
font-variant: a particular font to small caps, or
back to normal text.
font-weight:
normal
small-caps
The font-weight property defines lighter, normal, bold, bolder
the level of bold that is applied to 100, 200, 300, 400, 500, 600,
the text.
700, 800, 900
font-size:
Modifies the size of the font
Can be measured in:
pixels (px)
points (pt)
inches (in)
centimeters (cm)
font-style:
Sets a font to italics or back to
normal.
italic
normal
Because not all computers have the same fonts installed, there is a good chance that a font you specify
in your style sheet might not be available on every computer that visitors use to view your web site. By
keeping with general fonts, there is a much better chance of the defined font being available on your
visitors computer resulting in your web page being rendered in the way you designed it. The example
below will define the font for the paragraph element to be Arial which is a very standard font among
most systems.
p {font-family: Arial}
Property
textdecoration:
Description
Adds or removes a line above, below, or through
text
Specifies the vertical
vertical-align: alignment of text. This property will be useful when
we get to tables.
text-align:
text-indent:
Specifies the horizontal
alignment of text.
Specifies the first line
indention of a block of text.
Accepted
Values
none
underline
overline
line-through
baseline, sub
super, top
text-top,
middle
bottom
text-bottom
left
right
center
justify
Can be
measured in
pixels (px) or
percentage
texttransform:
Modifies the case of text,from upper case, to lower
case, or vice versa. Capitalize will make the first
letter of each word uppercase.
none
uppercase
(all text)
lowercase
(all text)
capitalize
(first letters
only)
letterspacing:
Specifies the spacing between letters. This process
is referred to as kerning.
normal
pixels (px)
Sets the space between
lines of text on a document.
normal
pixels (px)
Sets the amount of space
between words.
normal
Pixels (px)
line-height:
wordspacing:
horizontal
vertical
color blurradius
text-shadow: Adds a shadow behind text.
Text Shadows
Browser
10+
24+
29+
5+
12+
Compatible
Yes
Yes
Yes
Yes
Yes
The text-shadow: style property can be added to any container with text, such as a heading, span, div,
etc. There are four values required for the text-shadow style property. The horizontal offset, the vertical
offset, the shadow radius, and color of the shadow. The shadow radius is the shadow's blur. Each of the
values should be included with a single space separating them, no commas.
The text-shadow property is a CSS3 style property, so you will only be able to see it if you are using the
latest release of your browser. The table to the right shows the compatible browser versions for this
property.
text-shadow: horizontal vertical shadow-radius shadow-color
text-shadow: 10px 10px 5px #999999
Editable Content
The contenteditable attribute can be added to an element to allow the visitor to actually edit the content
in the element within their browser. Generally this attribute used with spellcheck attribute which will
activate the spell checking feature within your browser. To see how the contenteditable attribute works,
click on the text in this paragraph and start typing. You can modify the content of this paragraph directly
within your browser. This feature might be used to create a rich text editor within a web page. The
content can even be saved when used in conjunction with a scrip to create new web applications.
<p contenteditable="true" spellcheck="true"> </p>
Using the <span> Tag
There will likely be times when you need to apply formatting to areas of text without disrupting the
layout of your page. The <span> and </span> tag is an inline tag that can enclose a selection of text
which style formatting should be applied. The <span> tag in itself does not do anything. It is a generic
selection tag. In the example below, the we set the font styles in the opening <p> tag, but we formatted
the style of a few words using the <span> tag.
Sample Code
<p style="color: #336699; font-family: Arial; font-size: 12pt">The text in this
paragraph is set to Arial, but this text is set to <span style="font-family: 'Times
New Roman'; color: #ff0000">Times New Roman and Red</span>. The style is applied
inline thus the layout of the content is not impacted. </p>
Output
The text in this paragraph is set to Arial, but this text is set to Times New Roman and Red. The style
is applied inline thus the layout of the content is not impacted.
Pseudo-Elements
An element is a component that makes up your web page. A pseudo-element allows you to specify a
style for an element that will only be applied under specific conditions. We will show you several of these
throughout the course. In this lessen we will demonstrate the :first-letter pseudo-element. Pseudo-
elements can only be applied through an embedded style sheet, or external style sheet which will be
introduced in later. In the :first-letter example, we will define a different style for the first letter of our
paragraphs. The example below illustrates the use of the :first-letter pseudo-element. The first letter will
have all the styles defined for the paragraph tag, plus what we specify for in the :first-letter style.
definition.
Style Property
<style>
p {
color:
#009900;
font-family:
"Times New
Roman";
font-size:
12pt;
font-weight:
bold;
}
p:first-letter {
color:
#990000;
font-size:
18pt;
}
Paragraphs
Appearance in Browser
<p>This text is paragraph 1. It will
display the styles defined by the
paragraph style.<p>
<p>This text is paragraph 2. It will also
display the styles defined by the
paragraph style.<p>
This text is paragraph 1. It will
display the styles defined by the
paragraph style.
This text is paragraph 2. It will also
display the styles defined by the
paragraph style.
</style>
The table below describes some additional pseudo-class that might be used in defining content. These
pseud0-classes were introduced with HTML 5 and may not be compatible with older browsers.
pseudoelement
Description
Applies a the defined style to an element only when the mouse is over it.
:hover
div:hover {backgrund-color: #ff0000}
Applies a defined style to the first letter of an element.
:first-letter
p:first-letter {color: #ff0000}
Applies the defined style to first instance of the element where it is used
as the first child element to another element. In the example below, the
:first-child
style would only be applied to the first listed item.
{}
li:first-child {color: #ff0000}
:nthchild(n) {
}
:first-oftype { }
Allows you to define a style for multiple instances of an element where it
is the nth instance of that element, specific numbers, or odd or even can
be used as the n condition.
p:nth-child(odd) {color: #ff0000}
p:nth-child(even) {color: #ff0000}
p:nth-child(2) {color: #ff0000}
Applies the defined style to the first instance of the element where it is
used as a child to another element. The example here would apply the
style to the first instance of each paragraph where it is used as a child to
another element regardless of whether or not any other child elements
precede it.
p:first-of-type {color: #ff0000}
:before { }
Adds content before every instance of an element. The content that is to
be added must be defined in the style definition.
p:before {content: "Read this!"}
:after { }
Adds content after every instance of an element. The content that is to be
added must be defined in the style definition.
p:after {content: "Did you read this?"}
Web Design Curriculum - Web Design Curriculum