Working with Text

 Chapter: 7

Font-family

The font-family Property

The font-family property specifies the font for an element.
There are two types of font family names:
- font family: a specific font family (like Times New Roman or Arial)
- generic family: a group of font families with a similar look (like Serif or Monospace)

Here is an example of different font styles:The HTML:

<p class="serif">
This is a paragraph shown in serif font.
</p>
<p class="sansserif">
This is a paragraph shown in sans-serif font.
</p>
<p class="monospace">
This is a paragraph shown in monospace font.
</p>
<p class="cursive">
This is a paragraph shown in cursive font.
</p>
<p class="fantasy">
This is a paragraph shown in fantasy font.
</p>

HTML

The CSS:

p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Helvetica, Arial, sans-serif;
}
p.monospace {
font-family: "Courier New", Courier, monospace;
}
p.cursive {
font-family: Florence, cursive;
}
p.fantasy {
font-family: Blippo, fantasy;
}

CSS

Result:

Separate each value with a comma to indicate that they are alternatives.
If the name of a font family is more than one word, it must be in quotation marks: "Times New Roman".

Drag and drop from the options below to make the font of the paragraph "Arial":

p

{

font-family

:

Arial

;

The font-family Property

The font-family property should hold several font names as a "fallback" system. When specifying a web font in a CSS style, add more than one font name, in order to avoid unexpected behaviors. If the client computer for some reason doesn't have the one you choose, it will try the next one.

It is a good practice to specify a generic font family, to let the browser pick a similar font in the generic family, if no other fonts are available.

body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

CSS

If the browser does not support the font Arial, it tries the next fonts (Helvetica Neue, then Helvetica). If the browser doesn't have any of them, it will try the generic sans-serif.

Let's Set The Font

Fill in your contact information, then specify the font for the whole resume.

Remember to use quotation marks if the font name consists of more than one word.

The font-family Property

Why is the name of one of the fonts put in quotes?

it is a rarely used font

to support "fallback"

it shows a font family

it consists of two or more words

Chapter: 8

Font-size

The font-size Property

The font-size property sets the size of a font. One way to set the size of fonts on the web is to use keywords. For example xx-small, small, medium, large, larger, etc.

The HTML:

<p class="small">
Paragraph text set to be small
</p>
<p class="medium">
Paragraph text set to be medium
</p>
<p class="large">
Paragraph text set to be large
</p>
<p class="xlarge">
Paragraph text set to be very large
</p>

HTML

The CSS:

p.small {
font-size: small;
}
p.medium {
font-size: medium;
}
p.large {
font-size: large;
}
p.xlarge {
font-size: x-large;
}

CSS

Result:

Keywords are useful if you do not want the user to be able to increase the size of the font because it will adversely affect your site's appearance.

Rearrange the code to create a style rule:

p {

font-size:large;

}

The font-size Property

You can also use numerical values in pixels or ems to manipulate font size.
Setting the font size in pixel values (px) is a good choice when you need pixel accuracy, and it gives you full control over the text size.
The em size unit is another way to set the font size (em is a relative size unit). It allows all major browsers to resize the text. If you haven't set the font size anywhere on the page, then it is the browser default size, which is 16px.

To calculate the em size, just use the following formula: em = pixels / 16

For example:

h1 {
font-size: 20px;
}

CSS

h1 {
font-size: 1.25em;
}

CSS

Both of the examples will produce the same result in the browser, because 20/16=1.25em.

Font Size

Set font sizes for the content of different sections of your resume.

Try different combinations of text size and page zooming in a variety of browsers to ensure that the text remains readable.

The font-size Property

Set the font-size of the paragraph to 15px:

p { font-size:

;}

Chapter: 9

Font-style

The font-style Property

The font-style property is typically used to specify italic text.

The HTML:

<p class="italic">This is a paragraph in italic style.</p>

HTML

The CSS:

p.italic {
font-style: italic;
}

CSS

Result:

Run the code and see how it works!

The font-style Property

Make the text italic:

#styled {font-style:

;}

The font-style Property

The font-style property has three values: normal, italic, and oblique.
Oblique is very similar to italic, but less supported.

The HTML:

<p class="normal">This paragraph is normal.</p>
<p class="italic">This paragraph is italic.</p>
<p class="oblique">This paragraph is oblique.</p>

HTML

The CSS:

p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}

CSS

The HTML <i> tag will produce exactly the same result as the italic font style.

The font-style Property

What value is NOT used with the font-style property?

italic

slant

oblique

normal

Chapter: 10

Font-weight

The font-weight Property

The font-weight controls the boldness or thickness of the text. The values can be set as normal (default size), bold, bolder, and lighter.

The HTML:

<p class="light">This is a font with a "lighter" weight.</p>
<p class="bold">This is a font with a "bold" weight.</p>
<p class="bolder">This is a font with a "bolder" weight.</p>

HTML

The CSS:

p.light {
font-weight: lighter;
}
p.bold {
font-weight: bold;
}
p.bolder {
font-weight: bolder;
}

CSS

Result:

Run the code and see how it works!

The font-weight Property

Which CSS property is used for bolding the text?

font-variant

font-size

font-weight

font-style

The font-weight Property

You can also define the font weight with a number from 100 (thin) to 900 (thick), according to how thick you want the text to be.
400 is the same as normal, and 700 is the same as bold.

The HTML:

<p class="light">This is a font with a "lighter" weight.</p>
<p class="thick">This is a font with a "bold" weight.</p>
<p class="thicker">This is a font with a "700" weight.</p>

HTML

The CSS:

p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 700;
}

CSS

Result:

Font-Weight Property

Set font weights for your name & surname, profession and subheadings.

The HTML <strong> tag also makes the text bold.

The font-weight Property

What numeric values are used for the font-weight property?

10-90

1000-9000

1-10

100-900

Chapter: 11

Font-variant

The font-variant Property

The CSS font-variant property allows you to convert your font to all small caps. The values can be set as normal, small-caps, and inherit.

The HTML:

<p class="normal">Paragraph font variant set to normal.</p>
<p class="small">Paragraph font variant set to small-caps.</p>

HTML

The CSS:

p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}

CSS

Result:

Not every font supports CSS font-variant, so be sure to test before you publish.

The font-variant Property

Make the text of the paragraph small capitals:

p {font-variant:

;}

Chapter: 12

Color

The color Property

The CSS color property specifies the color of the text.
One method of specifying the color of the text is using a color name: like red, green, blue, etc.
Here's an example of changing the color of your font.

The HTML:

<p class="example">The text inside the paragraph is green.</p>
The text outside the paragraph is black (by default).

HTML

The CSS:

p.example {
color: green;
}

CSS

Result:

Run the code and see how it works!

The color Property

Drag and drop from the options below to make the text of the "colored" class green:

p.

colored

{

color

:

green

;

}

The color Property

Another way of defining colors is using hexadecimal values and RGB.
Hexadecimal form is a pound sign (#) followed by at most, 6 hex values (0-F).
RGB defines the individual values for Red, Green, and Blue.

In the example below, we use hexadecimal value to set the heading color to blue, and RGB form to make the paragraph red.

The HTML:

<h1>This is a heading</h1>
<p class="example">This is a paragraph</p>

HTML

The CSS:

h1 {
color: #0000FF;
}
p.example {
color: rgb(255,0,0);
}

CSS

Result:

Just Add Some Colors

Define the text colors for each section.

Run the code and see how it works!

Chapter: 13

Aligning Text Horizontally

The text-align Property

The text-align property specifies the horizontal alignment of text in an element. By default, text on your website is aligned to the left. However, at times you may require a different alignment.

text-align property values are as follows: left, right, center, and justify.

The HTML:

<p class="left">This paragraph is aligned to <strong>left.</strong></p>
<p class="right">This paragraph is aligned to <strong>right.</strong></p>
<p class="center">This paragraph is aligned to <strong>center.</strong></p>

HTML

The CSS:

p.left {
text-align: left;
}
p.right {
text-align: right;
}
p.center {
text-align: center;
}

CSS

Result:

Career Path

Describe your work experience and/or education and then design it.

When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (as in magazines and newspapers).

The text-align Property

Which of the values below is NOT applicable for the text-align property?

even

left

right

center

Chapter: 14

Aligning Text Vertically

The vertical-align Property

The vertical-align property sets an element's vertical alignment. Commonly used values are top, middle, and bottom.

The example below shows how to vertically align the text between the table.

The HTML:

<table border="1" cellpadding="2" cellspacing="0" style="height: 150px;">
<tr>
<td class="top">Top</td>
<td class="middle">Middle</td>
<td class="bottom">Bottom</td>
</tr>
</table>

HTML

The CSS:

td.top {
vertical-align: top;
}
td.middle {
vertical-align: middle;
}
td.bottom {
vertical-align: bottom;
}

CSS

Result:

Run the code and see how it works!

The vertical-align Property

Fill in the blanks to set the vertical alignment of all elements having class="test" to bottom:

{

vertical-

:

;

}

The vertical-align Property

The vertical-align property also takes the following values: baseline, sub, super, % and px (or pt, cm).
The example below shows the difference between them.

The HTML:

<p>This is an <span class="baseline">inline text</span> example.</p>
<p>This is a <span class="sub">sub line text</span> example.</p>
<p> This is a <span class="super">super line text</span> example.</p>
<p> This is a <span class="pixel">pixel</span> example.</p>

HTML

The CSS:

span.baseline {
vertical-align: baseline;
}
span.sub {
vertical-align: sub;
}
span.super {
vertical-align: super;
}
span.pixel {
vertical-align: -10px;
}

CSS

Result:

Instead of px values, you can use pt (points), cm (centimeters) and % (percentage) values.

The vertical-align Property

Negative values can be used with the vertical-align property.

False

True

The vertical-align Property

Vertical align property does not act the same way for all elements.
For example, some additional CSS styling is needed for div elements.

The HTML:

<div class="main">
<div class="paragraph">
This text is aligned to the middle
</div>
</div>

HTML

The CSS:

.main {
height: 150px; width: 400px;
background-color: LightSkyBlue;
display: inline-table;
}
.paragraph {
display: table-cell;
vertical-align: middle;
}

CSS

Result:

display: inline-table; and display: table-cell; styling rules are applied to make the vertical-align property work with divs.

The vertical-align Property

Does the vertical-align property act the same way for all elements?

No

Yes

Chapter: 15

Text-decoration

The text-decoration Property

The text-decoration property specifies how the text will be decorated.

Commonly used values are:
none - The default value, this defines a normal text
inherit - Inherits this property from its parent element
overline - Draws a horizontal line above the text
underline - Draws a horizontal line below the text
line-through - draws a horizontal line through the text (substitutes the HTML <s> tag)

The example below demonstrates the difference between each value.

The HTML:

<p class="none">This is default style of the text (none).</p>
<p class="inherit">This text inherits the decoration of the parent.</p>
<p class="overline">This is overlined text.</p>
<p class="underline">This is underlined text.</p>
<p class="line-through">This is lined-through text.</p>

HTML

The CSS:

p.none {
text-decoration: none;
}
p.inherit {
text-decoration: inherit;
}
p.overline {
text-decoration: overline;
}
p.underline {
text-decoration: underline;
}
p.line-through {
text-decoration: line-through;
}

CSS

Result:

You can combine the underline, overline, or line-through values in a space-separated list to add multiple decoration lines.

The text-decoration Property

What value of the text-decoration property substitutes the HTML S tag?

blink

underline

overline

line-through

The text-decoration Property

Fill in the blanks to make the text underlined:

#mystyle

: underline;

Chapter: 16

Indenting the Text

The text-indent Property

The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text. Property values are length (px, pt, cm, em, etc.), %, and inherit.

The HTML:

<p>This is an example of
<strong>text-indent </strong> property.
First line of our text is indented to the right in 60px.
Besides pixels you can also use other measurement units,
like pt, cm, em, etc. </p>

HTML

The CSS:

p {
text-indent: 60px;
}

CSS

Result:

Negative values are allowed. The first line will be indented to the left if the value is negative.

The text-indent Property

The position of which block is specified by the text-indent property?

The whole text block except the first line

The first line of the text block

The whole text block

Chapter: 17

Text-shadow

The text-shadow Property

The text-shadow property adds shadow to text.
It takes four values: the first value defines the distance of the shadow in the x (horizontal) direction, the second value sets the distance in the y (vertical) direction, the third value defines the blur of the shadow, and the fourth value sets the color.

The HTML:

<h1>Text-shadow example</h1>

HTML

The CSS:

h1 {
color: blue;
font-size: 30pt;
text-shadow: 5px 2px 4px grey;
}

CSS

In the example above, we created a shadow using the following parameters:
5px – the X-coordinate
2px – the Y-coordinate
4px – the blur radius
grey – the color of the shadow

Result:

To add more than one shadow to the text, add a comma-separated list of shadows.

The text-shadow Property

What is the format of the value for the text-shadow property?

width height depth color

horizontal position vertical position blur color

upper-left position down-right position blur color

text-shadow with Blur Effect

When working with shadows, you can use any CSS-supported color format.

For the x and y offsets, various types of units can be used (like px, cm, mm, in, pc, pt, etc).
Negative values are also supported.

The example below creates a blue drop-shadow, two pixels higher than the main text, one pixel to the left of it, and with a 0.5em blur:

The HTML:

<h1>Text-shadow with blur effect</h1>

HTML

The CSS:

h1 {
font-size: 20pt;
text-shadow: rgba(0,0,255,1) -1px -2px 0.5em;
}

CSS

Result:

Internet Explorer 9 and earlier do not support the text-shadow property.

text-shadow with Blur Effect

Create a text shadow with horizontal and vertical distance of 5px and blur radius of 2px:

p {

: 5px

;

}

Chapter: 18

Text-transformation

The text-transform Property

The text-transform CSS property specifies how to capitalize an element's text. For example, it can be used to make text appear with each word capitalized.

The HTML:

<p class="capitalize">
The value capitalize transforms the first
character in each word to uppercase;
all other characters remain unaffected.
</p>

HTML

The CSS:

p.capitalize {
text-transform: capitalize;
}

CSS

Result:

Run the code and see how it works!

The text-transform Property

Drag and drop from the options below to make each word capitalized in the paragraph:

p.capfirst {

text-transform

:

capitalize

;

}

text-transform Values

Using text-transform property you can make text appear in all-uppercase or all-lowercase. Here is an example:

The HTML:

<p class="uppercase">This value transforms all characters to uppercase.</p>
<p class="lowercase">This value transforms all characters to lowercase.</p>

HTML

The CSS:

p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}

CSS

Result:

Uppercase

Make the text of your heading and subheadings appear all-uppercase.

The value none will produce no capitalization effect at all.

text-transform Values

Which option is NOT supported by the text-transform property?

small-caps

none

uppercase

capitalize

Chapter: 19

Letter-spacing

The letter-spacing Property

The letter-spacing property specifies the space between characters in a text. The values can be set as:
- normal defines the default style with no extra space between characters
- length defines an extra space between characters using measurement units like px, pt, cm, mm, etc.;
- inherit inherits the property from its parent element;

The HTML:

<p class="normal">This paragraph has no additional letter-spacing applied.</p>
<p class="positive ">This paragraph is letter-spaced at 4px.</p>

HTML

The CSS:

p.normal {
letter-spacing: normal;
}
p.positive {
letter-spacing: 4px;
}

CSS

Result:

Run the code and see how it works!

The letter-spacing Property

Drag and drop from the options below to set the letter spacing of the paragraph:

p {

letter

-

spacing

: 4px;

}

Using Negative Values

For defining an extra space between characters, negative values are also permitted.
Here is an example demonstrating the difference between positive and negative values:

The HTML:

<p class="positive">This paragraph is letter-spaced at 4px.</p>
<p class="negative">This paragraph is letter-spaced at -1.5px</p>

HTML

The CSS:

p.positive {
letter-spacing: 4px;
}
p.negative {
letter-spacing: -1.5px;
}

CSS

Result:

Always test your result, to ensure the text is readable.

Using Negative Values

Fill in the blank to make the letter spacing -1cm:

letter-spacing:

;

Chapter: 20

Word-spacing

The word-spacing Property

The word-spacing property specifies the space between words in a text. Just like the letter-spacing property, you can set the word-spacing values as normal, length, and inherit.

The HTML:

<p class="normal">This paragraph has no additional word-spacing applied.</p>
<p class="px">This paragraph is word-spaced at 30px.</p>

HTML

The CSS:

p.normal {
word-spacing: normal;
}
p.px {
word-spacing: 30px;
}

CSS

Result:

When a weird spacing is used, and it is necessary to keep the selected paragraph with normal word spacing, the normal option is usually used.

The word-spacing Property

The word-spacing property specifies the space between words in a text. Just like the letter-spacing property, you can set the word-spacing values as normal, length, and inherit.

The HTML:

<p class="normal">This paragraph has no additional word-spacing applied.</p>
<p class="px">This paragraph is word-spaced at 30px.</p>

HTML

The CSS:

p.normal {
word-spacing: normal;
}
p.px {
word-spacing: 30px;
}

CSS

Result:

When a weird spacing is used, and it is necessary to keep the selected paragraph with normal word spacing, the normal option is usually used.

Measurement Units

To define an extra space between words, you can use positive measurement values like px, pt, pc, cm, mm, inches, em, and ex.
Negative values are also permitted. Here is an example to show the difference.

The HTML:

<p class="positive">This paragraph is word-spaced at 20px.</p>
<p class="negative">This paragraph is word-spaced at -5px.</p>

HTML

The CSS:

p.positive {
word-spacing: 20px;
}
p.negative {
word-spacing: -5px;
}

CSS

Result:

Run the code and see how it works!

Measurement Units

Which measurement units cannot be used with the word-spacing property?

points

pixels

cm, mm, inches

feet, yards

Chapter: 21

White-spacing

The white-space Property

The white-space property specifies how white-space inside an element is handled. The values can be set as normal, inherit, nowrap, etc.

The nowrap value makes the text continue on the same line until a <br> tag is encountered, and also collapses all sequences of whitespace into a single whitespace.

The HTML:

<p>
This paragraph has multiple spaces and
a line break, but it will be ignored, as we used the nowrap value.
</p>

HTML

The CSS:

p {
white-space: nowrap;
}

CSS

Result:

The text will continue on the same line until a <br /> tag is encountered.

The white-space Values

The white-space property also supports other values:
pre - text will only wrap on line breaks and white space
pre-line - text will wrap where there is a break in code, but extra white space is still ignored
pre-wrap - text will wrap when necessary, and on line breaks

Here is an example in which all three values are used:

The HTML:

<p class="pre">
In the markup we have multiple spaces
and a line break.
</p>
<p class="preline">
In the markup we have multiple spaces
and a line break, but in the result multiple spaces are ignored.
</p>
<p class="prewrap">
In the markup we have multiple
spaces and a line break.
</p>

HTML

The CSS:

p.pre {
white-space: pre;
}
p.preline {
white-space: pre-line;
}
p.prewrap {
white-space: pre-wrap;
}

CSS

Result:

Pre-wrap value behaves as the pre value, except that it adds extra line breaks to prevent the text breaking out of the element's box.

The white-space Values

What is the difference between the "pre" and "pre-line" options?

"pre-line" accepts all line-breaks and whitespace, while "pre" ignores the line-breaks

"pre" accepts all line-breaks and whitespace, while "pre-line" ignores the whitespace

There is no difference

Chapter: 22

Model 2 Quiz

What is the correct CSS syntax for making all p elements bold?

p {font-weight:bold;}

<p style="font-size:bold">

p {text-size:bold;}

<p style="text-size:bold">

Fill in the blanks to make the paragraph red and bold:

p {

: red;

: bold;

text-decoration:none;

font-size: 16px;

}