Home > Chapter Review and Exercises > Chapter 12 Formatting Text

Summary

This dense chapter covers the properties related to manipulating the appearance of text, including fonts, text color, text line alignment, decorations (like underlines) and list styles. In addition, we’ll add Descendant, ID, and Class Name selectors to our selector toolkit, and take a more detailed look at specificity.

Takeaways

In Chapter 12, you will learn the following:

• The properties related to specifying the font for a text element, primarily font-family, font-size, font-weight, font-style, font-variant, and the shorthand font property.

• That fonts must be installed on the user’s machine or downloaded as a web font in order to be used. You can specify a list of preferred fonts, ending with a generic font family, to be used as backups.

• The most widely used units for text size are rem and em. Pixels are also used, but are less flexible.

• An introduction to some of the advanced font features introduced in the CSS Font Module Level 3.

• Changing text color with the color property.

• New selector types: descendant selectors (targeting elements only when they are contained within certain elements), ID, class, and universal selectors.

• How to calculate specificity by totaling up the number of IDs, classes, and elements in the selector.  More specific selectors will override less specific selectors when there are conflicting styles applied to an element.

• Properties that affect whole lines of text, including line height (line-height), indents (text-indent), horizontal alignment (text-align).

• Other text properties such as underlining (text-decoration), changing capitalization (text-transform), letter spacing (letter-spacing), word spacing (word-spacing), and adding shadows (text-shadow).

• Properties for changing the presentation of bulleted and numbered lists (list-style-type, list-style-position, list-style-image).

Key terms in Chapter 12

typeface

A particular design of glyphs (characters) that share common design features, for example Baskerville. Also known as a font family.

font

One particular instance of a typeface that has a specific weight, style, condensation, slant, and so on. For example, Baskerville Bold Italic is one font of the typeface Baskerville. On computers, fonts are usually stored in different files.

rem

Root em unit; it is equivalent to the font size of the html element.

em

Em unit; it is equivalent to the font size of the current element.

posture

Whether the font is vertical or slanted (italic or oblique).

contextual selector

Selects elements based on their relationship to other elements (includes descendant, child, next-sibling, and subsequent-sibling selectors).

id selector

Selects an element by the value of its id attribute (indicated by the # symbol).

class selector

Selects an element or elements based on the value of their class attributes (indicated by the period [.] symbol).

universal selector

Selects any element, like a wildcard in programming languages.

Exercises in Chapter 12

12-1: Formatting a menu

A menu for the Black Goose Bistro will be embellished with text styles throughout the chapter as new properties are introduced. In this first exercise, all the text is set to the web-safe Verdana font, and the main heading is specified with a web font called Marko One.

12-2: Setting font size

In this step, the font size of the body text and headings is refined.

12-3: Making text bold and italic

This quick exercise formats list terms in bold and strong text in italic styles.

12-4: Using the shorthand font property

Here we merely convert a stack of font declarations into one declaration using the shorthand font property.

12-5: Using selectors

This exercise gives students a chance to try out descendent, ID, and class selectors to target specific elements in the bistro menu.

12-6: Finishing touches

Several more styles are added to the menu to practice using color, line-height, alignment, capitalization, shadow, as well as some new selector types.

Additional Supplemental Resources

1. The element sector, i.e. p { color:navy; }, applies the property to the p element only.

2. The grouped selectors, i.e., p, ul, td, th { color: navy; }, apply the properties to several elements at once.  The elements are separated by commas.

3. Contextual selectors targets an element based on its context or relation to another element.  Here are four of them.

• A descendant selector targets elements that are contained within (and therefore are descendants of) another element.  Descendant selectors are indicated in a list separated by a character space.  For example, 

li em { color: olive; } 

targets emphasized text (em) elements, but only when they appear in list items (li).

• Three more contextual selectors are the child selector, the next-sibling selector, and the subsequent-sibling selector.

• A great explanation and demonstration of these four contextual selectors is here:

https://www.w3schools.com/css/css_combinators.asp 

3. The id selectors use the id attribute to to apply a rule for just that list item using an id attribute.   

• The id attribute gives an element a unique identifying name (its id reference), for example: 

<li id="sleestak">Sleestak T-shirt</li>.

• You can write a style rule just for that list item using an ID selector, like so :

li#sleestak { color: olive; }.

• Notice the # preceding the id reference

4. Class selectors.  

• Previously we have learned that the the class identifier is used to classify elements into a conceptual group.  

• Unlike the id attribute, multiple elements may share a class name.  

• You can target elements belonging to the same class with a class selector.  

• Class names are indicated with a period (.) at the beginning of the selector. 

• For example,

p.special { color: orange; } 

targets all paragraphs with class="special".

2. Typography for Web Designers video

3. Placeholder Text Generator

4. In class exercise

(From 18 December 2018)

Using an online HTML and CSS demonstrator, enter this HTML:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Classes tied and not tied to an element</h1>

<p>Define a particular class for only one type of element<br>

p.special {<br>

}

<br>

</p>

<p>Define a class to be useable for more than one type of element<br>

.special {<br>}

</p>

<p>Apply CSS to multiple elements<br>

h1, h2, h3 {<br>

}

</p>

    <h1>Why I love Washington DC</h1>

    <h2>The sun is strong and the people are great.</h2>

    <p>DC is a large town in the East Coast. This text should be red. </p>

    <p class="important">Warning: We have no slow cars here.</p>

    <h2 class="typewriter">This heading is in typewriter text.</h2>

    <p class="typewriter">This paragraph is also in typewriter text.</p>

</body>

</html>

In the CSS portion of the online demonstrator, enter these styles:

p {

  font-family: Georgia, "Times New Roman", Times, serif;

  font-size: 1.2em;

  color: green;

}

p.important {

  font-size: 1.5em;

  color: red;

}

h1 {

  font-family: "Trebuchet MS", Helvetica, sans-serif;

  font-size: 2em;

}

.typewriter {

  font-family: "Courier New", Courier, monospace;

  color: blue;

 }

Look at the website this HTML and CSS creates:

5. Font Styling Video Example

The following are the web sites referenced in the video

• W3Schools CSS Web Safe Fonts - most web browsers will display these correctly

• CSS Font Stack - percentage of Windows and Mac users that have each font family on their PC's

  1. Click on the folder icon.

  2. The font-family: CSS code will be copied to your clipboard

  3. Paste the CSS code into your website's <style> section, i.e. p {font-family: "Arial Black","Arial Bold",Gadget,sans-serif}

• Google Fonts - select the special fonts that will be downloaded to users viewing your website

  1. Click on the + symbol to select the fonts you want

  2. On the bottom of the page, click on the Families Selected window

  3. Copy the <link> element into your <head> section

  4. Finally, copy the font-family code into your CSS

• Adobe Web Fonts

  1. Select your font(s)

  2. Copy the Javascript code it gives you into your <head> section

  3. Use the font-family declarations it gives you in your website's CSS

6. Six Part video series on font styling

CSS Zen Garden

CSS font-family property

CSS font-size property

CSS font styles and shorthand

More CSS text properties

CSS inheritance

7. W3Schools 3-part video series on font styling and selectors

8. Chapter 12 text accompanying slides

9. Centering Text

The CSS that is used is:

p { margin-left: auto; margin-right: auto; width: 8em }

or

p.blocktext { margin-left: auto; margin-right: auto; width: 8em } 

Enter this text in your text editor:

<!DOCTYPE html>

<html>

<head>

<style>

</style>

</head>

<body>

<h2>Center Text</h2>

<p>

This rather narrow block of text is centered. Note that the lines inside the block are not centered (they are left-aligned).</p>

</body>

</html>

Use the CSS to center the text.

Click here to check your work.

10. w3Schools page on CSS Fonts

Chapter Exercises

Carrie Dills Challenge #1