Lesson 3: Formatting Text with CSS
In this lesson, you’ll learn how to control the appearance of text on your web pages using CSS styling.
What you’ll learn in this lesson:
- • Using the font-family property
- • Setting text size
- • Working with the em measurement
- • Changing text properties
- • Using HTML lists
Starting up
Although this lesson uses the TextWrangler text editor to create the markup, you can use any text editor and get the same results.
The importance of typography on the Web
Typography is two-dimensional architecture, based on experience and imagination, and guided by rules and readability. And this is the purpose of typography: The arrangement of design elements within a given structure should allow the reader to easily focus on the message, without slowing down the speed of his reading.
—Hermann Zapf
Typography has a starring role in graphic design, including web design. Most user interaction on the Web starts with text. Users spend a great deal of time on the web scanning, navigating, and reading text. As a result, it is extremely important that the web designer understands how to control the placement, appearance, and style of text.
For purposes of clarity, it is worth pointing out that the words typeface and font are mistakenly used interchangeably. A typeface is a more abstract term for the character design of an alphabet; it is a term that preceded the invention of computers and digital typesetting. An example of a common typeface is Helvetica, which also includes different styles including Bold, Condensed, and Light, among others. A font is the digital system file that resides on a computer and is used in print design to set text. In web design, web browsers use a font to display text on the screen (as well as when printing).
The challenges of fonts on the Web
When designing for the Web, you can format text in a way that is similar to desktop publishing and word processing applications, but there are important differences to keep in mind. When you specify that a specific font be used, that font needs to be installed on the user’s computer when the web page is rendered on the viewer’s computer or device. If the user does not have this font, the browser replaces it with another font.
Because you don’t know what fonts are installed on viewers’ computers, and because the web browser of a viewer might substitute fonts, your design intentions for text might not be faithfully reproduced. One option is to use fonts that you are sure will be found on most computers. Unfortunately, only a handful of fonts can reliably be found on virtually all computers around the world.
One of the solutions to the lack of fonts on the Web is to use a font stack. In CSS, a font stack is a list of multiple fonts that the web browser uses in an attempt to display text onscreen. The following CSS code shows an example of a font stack:
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
In this example, the browser first looks for the Helvetica Neue font on the user’s system. Notice the quotation marks in this example. In most cases, when specifying a font, quotation marks are unnecessary, but in some cases, the quotation marks are needed to help the user’s computer choose the right version of the font. If the user doesn’t have Helvetica Neue, then the browser looks for the more generic version of Helvetica. If Helvetica is absent, the browser uses Arial, which is a font that is extremely similar to Helvetica. If for some reason Arial is not on the system, the last choice is sans-serif, which allows the system to use any sans-serif font it can find on the system. Sans-serif is the generic definition for all fonts that do not have small strokes (called serifs) at the end of each character. Examples of serif fonts are Times New Roman and Georgia.
Setting a font-family
In this exercise, you will set your font-family for an entire page, and then set the font-family for your headings.
1 In your text editor, choose File > Open and navigate to the HTML5_03lessons folder. Locate the 03_fonts.html file and click OK. This file has four blocks of text: a heading 1 <h1>, a heading 2 <h2>, and two paragraphs <p>. Additionally, in the <style> section, empty style rules are added to save you time. In this exercise, you will add the CSS properties. You will start by adding the font-family property for the body element.
2 In the style rule for the body, type the following line:
body {
font-family:"Trebuchet MS", Tahoma, Arial, sans-serif;
}
3 Choose File > Save, and then preview your page in the browser. As noted above, your web browser renders Trebuchet if you have it on your system; if you do not, it displays Tahoma; and if you don’t have Tahoma, you still see a sans-serif font.
When you define the font family Trebuchet for the body rule, all your text is set in this font.
All of the text on your page is rendered in Trebuchet because the only style set is for the body. Remember that the HTML body tag defines all of the elements on the page. Now you will set a specific font family for the paragraph element.
4 In the style rule for the paragraph ( p ), type the following line:
p {
font-family:Georgia, "Times New Roman", Times, serif;
}
5 Save your document and preview it in your browser. Now that there is a specific rule for paragraphs, they are styled as Georgia. The two headings are still using Trebuchet, which you defined in the body style.
6 In the style rule for heading 2 (h2), type the following line:
h2 {
font-family:Zapfino;
}
7 Save your document and preview it in your browser.
Styling the heading 2 as Zapfino will only show up if that font is on a user’s system.
If you have the Zapfino font on your system, you see a calligraphic script for your heading. The Zapfino font is installed with Adobe applications such as Photoshop, so it is very likely that designers will have this font on their system. Because many web users do not have this font on their system, using it is not a good idea.
8 Select the entire font-family line in your h2 rule and delete it.
Sizing text with CSS
When using CSS to style text for the Web, you have a few options for the unit of measurement. The CSS property that controls the size of your text is named font-size.
You can control the font-size property in a few different ways:
- • Absolute-size: A set of keywords that indicate predefined font sizes. Named font sizes scale according to the user’s font setting preferences. Possible values include xx-small, x-small, small, medium, large, x-large, and xx-large.
- • Length: A number followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
- • Percentage: An integer followed by a percent sign (%). The value is a percentage of the font size of the parent object.
- • Relative-size: A set of keywords that are interpreted as relative to the font size of the parent object. Possible values include larger and smaller.
Choosing the unit of measurement for the font-size in a web page is an important decision and not as easy as it is in print design. The main difficulty in selecting a size has to do with monitor resolution. Text on smaller monitors looks different than text on larger monitors; with a bit of forethought, you can correct this. In addition to the monitor resolution issue, you must also consider the way that different web browsers interpret how text is rendered. For example, unlike print, the Web allows users to resize their text manually. Furthermore, there is a growing audience that browses the Web with mobile devices, which makes sizing your text even more important.
Pixels and points are not the best choices
Setting font size in points might come naturally to you if you have worked in print design, or if you have created web graphics, you might be comfortable measuring using pixels. The font-size property in CSS allows you to use both forms of measurement. In the following example, the first CSS selector shows you a paragraph rule for points, while the second one shows you a paragraph rule for pixels:
p {
font-size:12pt;
}
Points
p {
font-size:12px;
}
Pixels
Even though points are supported, it is bad practice to use them and not advised for web design. Points are a system of measurement designed for print, and although available for use, they indicate an absolute unit of measurement and they don’t translate well to the screen.
Pixels, on the other hand, are the unit of measurement often used for screen-based graphics. Monitor resolution sizes are measured in pixel units. In an ideal world, designers could reliably use pixel sizes for their fonts because they are relative units and are designed to scale natively. Unfortunately, web browsers such as Internet Explorer do not resize pixel-based text if the user chooses to override the default settings. However, Internet Explorer versions 7 and above do support zooming in on text effectively enlarging the font.
Web browsers include a text resize option. This option is often found in the View menu. In some modern browsers, the text-resize option is located in a submenu called Zoom. Many browsers also use the keyboard shortcut Ctrl + + (plus) and Ctrl + – (minus) to increase and decrease the text size, respectively. On the Mac OS, these shortcuts are Command + + [plus] (and Command + – [minus]).
Using a combination of percent and the em measurement
Here you will create reliable font sizing using a combination of percents and ems. To get a sense of how these work, you will apply some CSS styling to a page of text for the SmoothieWorld site.
1 In your text editor, choose File > Open and navigate to the HTML5_03lessons folder. Locate the 03_sizing.html file and click OK. This file has four blocks of text: a heading 1 <h1>, a heading 2 <h2>, and two paragraphs <p>. The font-family styles are included from the last exercise as well. You will start by setting different properties for the body to see their effect.
2 Before making any changes, you should know what the page looks like in its default state. Preview the page in your default browser. Browsers need to set some default size for the text if there is no rule defined; in most cases 16 pixels is the value used for the body (in this case, the paragraphs are inheriting the body’s value). Close your browser and return to your text editor.
Some browsers allow you to view the default font and font size and even to change it. In Firefox 3 and later, for example, this setting is found in the Content section of the preferences.
3 In the style rule for the body, type the following line:
body {
font-family:"Trebuchet MS", Tahoma, Arial, sans-serif;
font-size:10px;
}
4 Save your file and then preview your page in the browser. Note that all your text is smaller. This is because the body style defines the baseline size for text on your page.
Remember that the HTML body tag contains all the rendered content on the page, so this style is simply targeting your entire page.
5 Return to your text editor and change the following value in your font-size property:
font-size:small;
6 Again, save your file and preview the page in your browser. All your text is slightly larger than the 10-pixel value you set in step 3. As noted above, the value small is an absolute-size unit of measurement called a keyword. Web browsers have pre-defined sizes assigned to keywords, and though keywords can be useful because they avoid the whole issue of using units, they often don’t offer the level of control that designers prefer.
7 Return to the text editor and change the following value in your font-size property:
font-size:100%;
8 Save your file and preview the page in your browser. You might notice that there is no difference between this size and the size of the text at the beginning of the exercise (when no font-size was defined). This step explicitly defines the font-size for the body to be the same size as the browser-defined font-size.
You will have to take a small leap of faith here and realize that the technique you are learning addresses some particular resizing problems in two popular web browsers (IE6 and IE7). Taking care of these problems now will mean fewer problems in the future.
9 In the style rule for the paragraph, type the following line:
p {
font-size:1em;
}
The unit of measurement called an em is very similar to pixels in that it is designed to scale; the main difference is that ems are not tied to the monitor resolution, while pixels are related to the monitor resolution. Ems may not be intuitive at first, but understanding how to use them will pay off in the future.
10 Save your file and then preview the file in your browser. Depending on which browser you are using, you will probably not see any changes in your page. This is because an em value of 1 is tied to the font-size of 100% that you defined in the body.
It may help to understand this relationship in an equation form: 1 em = 100% = 16 pixels. Here, the paragraph size is the 1em value, the font-size for the body is 100%, and the default font-size for the web browser is 16 pixels. Once you understand this relationship, you can begin to change the value of the em in order to enlarge or reduce the size of your text.
11 Close your browser and return to the text editor. In the rule for the paragraph, change the following value:
font-size:0.875em;
12 Save your file and preview the page in your browser. Your paragraph text is now smaller. The reason for using the precise 0.875 value is because it is the font-size equivalent to 14 pixels.
If you’re starting to think that web design is all about math, don’t worry too much. It all gets easier from here. If you are interested in understanding the math more deeply, you multiply the em value (0.875) by the browser’s default pixel value (16) to arrive at the 14-pixel number.
13 You will now size your headings using ems as well. For the h1 property, add the following line:
h1 {
font-size:1.5em;
}
This scales the top heading to 1.5 times the size of your body text; in this case, it is the equivalent of 24 pixels. Save your file and preview the page in your browser to see the effect.
Your heading 1 element is set to 1.5em, the equivalent of 24 pixels.
Now the h1 is approximately the same size as the h2, which isn’t particularly logical, so you will reduce the size of the h2 heading as well.
14 For the h2 property, add the following line:
h2 {
font-size:1.25em;
}
This scales the top heading to 1.25 times the size of your body text, which is the equivalent of 20 pixels.
15 Save your file and preview it in the browser. You now have text proportioned as needed.
Remember that one of the main reasons why ems are used is to adjust for users who resize the text in their browser. You can simulate this by going into your browser and enlarging the text size. You can see that the text responds well to this enlarging and reducing. When you are finished, be sure to return the text size to the default setting. Most browsers have a command to allow you to do this.
The issue of browsers resizing text is a bit more complicated because some browsers use a zoom feature that increases or decreases magnification of the entire page. Zoom-enabled browsers may also have a text-only resize option.
There is another benefit of using ems, and this has to do with the scaling relationship between all elements that use ems.
16 In your body property, modify the following value:
font-size:85%;
17 Save your file and preview your page. All your text is now smaller, even though you just changed one value! This is because of the linked relationship the em has to the body element. Some designers adjust this base size if, for example, a client wants larger or smaller text across the entire site. Rather than modifying all the individual properties, having one rule control multiple font-sizes makes it easy to do.
18 Return the font-size value to the original 100% value:
font-size:100%;
Save your document.
|
Pixel font-size |
Em equivalent |
|
11 |
0.689 |
|
12 |
0.750 |
|
13 |
0.814 |
|
14 |
0.875 |
|
15 |
0.938 |
|
16 |
1.000 |
|
17 |
1.064 |
|
18 |
1.125 |
|
19 |
1.188 |
|
20 |
1.250 |
|
21 |
1.313 |
|
22 |
1.375 |
|
23 |
1.438 |
|
24 |
1.500 |
|
25 |
1.563 |
|
26 |
1.625 |
|
27 |
1.688 |
|
28 |
1.750 |
Using margins to modify the space between your text
In this exercise, you will work with the CSS margin property in order to change the amount of space between your various text elements. Understanding how the margin property works and how to control it is key to understanding CSS, and in fact is the first step toward CSS layout. In order to better understand all the effects of using margins for text, you will first add the margin property to your body style.
1 In the body style, add the following line:
body {
font-family:"Trebuchet MS", Tahoma, Arial, sans-serif;
font-size:100%;
margin:0 20%;
}
This margin property sets the margins of the page in shortcut form. The 0 value is for the top and bottom margins. The 20% value is for the left and right margins.
2 Save your page and preview it in your browser. You can see that your text is centered in your browser window. Change the width of your browser window and you see the text reflow.
The result of changing the left and right margins of the body to 20%.
Return to your text editor.
You will now work further with margins in order to begin controlling the space between your elements. First, you will add temporary borders to your text elements in order to better understand how margins work.
3 In the style for your paragraph element, add the following lines:
p {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:0.875em;
border:thin red solid;
}
This is the CSS border property, which allows you to add borders around your elements. You will eventually use borders as decoration in your layout, but here they are being used to help you understand how elements, such as headings and paragraphs, interact with each other. You will now add this same code to your h1 and h2 elements.
4 Select the border:thin red solid; code from your paragraph rule and press Ctrl + C (PC) or Command + C (Mac) to copy the code.
5 Click inside the h1 style and press Ctrl + V (PC) or Command + V (Mac) to paste the code. Repeat this step for the h2 style.
6 Save your file and preview it in your browser. With the red borders applied, you can now see the space between the elements more clearly.
Applying borders to your elements helps you see the default margins more clearly.
This space between your paragraphs and headings is a result of the default margins as defined by your web browser. You have learned about browser defaults before in the font-size exercise, and this is very similar. HTML elements have default styles associated with them that include properties such as pixel size, margins, bold styling, italic styling, and many others. You need to set specific rules to override the default styles for these properties. In this case, you will adjust the space between the heading 2 and the first paragraph.
7 Return to your text editor and add the following line to your h2 element:
h2 {
font-size:1.25em;
border:thin red solid;
margin-bottom:0em;
}
The margin-bottom property affects the margin spacing on the bottom of the h2 element only. This is not enough to affect the spacing between your heading and the paragraph. You also need to set the top margin of the paragraph.
8 Add the following code to your p element:
margin-top:0em;
9 Save your file and preview it in the browser.
With the bottom margin of the heading and the top margin of the paragraph set to 0, the space between them has collapsed.
You can now see that the space between your heading 2 and the first paragraph has collapsed. To increase space between elements, you can increase margin values. For example, you will now increase the space between your paragraphs.
10 Add the following code to your paragraph (p) element:
margin-bottom:1.5em;
Remember that 1 em in this style sheet is equal to 16 pixels, so setting a value of 1.5 ems is the same as adding 24 pixels.
11 Save your file and preview it in the browser.
You can now see the space between your paragraphs increase. At this point, the borders around the elements have served their purpose; you don’t want to lose them completely, so you will comment them out. Commenting is a process that deactivates a style without removing the code.
12 Add the following code to the border rule in your paragraph element:
/*border:thin red solid;*/
The forward slash and the asterisk at the beginning and end of the code will disable this rule. The original code is always available in case you want to enable these borders again.
13 Repeat step 12 by adding the commenting code to the two other border properties in your h1 and h2 styles.
14 Save your file and view the page in your browser to see your page without any borders.
The final result of modifying your margins by deactivating the borders.
Setting paragraph line-height
To improve readability of your text, you can change line-height, which is the amount of space between lines. In the world of print design this is called leading, but the concept here is the same: changing the amount of space between sentences can affect the readability of your text. A line-height that is too small results in cramped text, while a line-height that is too high risks losing the reader’s focus. Unfortunately, you can’t just set a universal line-height value and be done with it; line-height is connected to a number of factors, including the amount of text and the width of the text block, as well as the color, size, and choice of font. In this exercise, you will set the line-height of your current paragraphs.
1 Add the following code to your p element:
p {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:0.875em;
/*border:thin red solid;*/
margin-top:0em;
margin-bottom:1.5em;
line-height:1.75em;
}
2 Save your file and preview it in your browser. You now have extra space between the lines in your paragraph.
Increasing the line-height values will increase the amount of space between paragraph lines.
Line-height works on any multiple-line body of text. For example, if your heading 1 SmoothieCentral is your #1 destination for smoothie recipes is broken over multiple lines, you can set the line-height.
3 Add the following code to your h1 element:
line-height:1.5em;
4 Save your file and preview it in your browser.
Depending on your monitor resolution, you may need to narrow the width of your browser in order to force the heading to break. The type in the heading is much larger than the paragraph, so it wouldn’t do as well with the same line-height value.
You can feel free to override the browser defaults in order to control the look of your page.
Transforming text with CSS
As discussed earlier, the lack of choices when it comes to type (or text) on the Web is a bit constraining; fortunately, you have other options. There are a number of CSS properties that allow you to control the appearance of your text in visually interesting ways. In this exercise, you will work with several styling techniques to create unique headings for your page, including font-weight, text-transform, and letter-spacing.
The first setting you will modify is the font-weight for your main heading in order to decrease the thickness of the characters.
1 Add the following code to your h1 element:
h1 {
/*border:thin red solid;*/
font-size:1.5em;
line-height:1.5em;
font-weight:normal;
}
2 Save your file and preview the page in your browser.
By setting the font-weight to normal, you have decreased the thickness of the heading. The default browser styling for a heading 1 is actually bold, so you are essentially resetting this bold style to normal. The default browser styling for all headings is bold, and you can see this by comparing the styles of your heading 1 to your heading 2. The heading 2 has thicker letterforms and, even though it is smaller in size, it appears more dominant on the screen.
There are additional values for the font-weight property. Here, you’ll lighten the value for the heading 2, and then add a new text-transform property.
3 Add the following code to your h2 element:
font-weight:lighter;
text-transform:uppercase;
The value lighter for the font-weight reduces the thickness of the letterforms further, and the value for text-transform converts your text to uppercase.
4 Save your file and preview the page in your browser.
Your heading is now in uppercase. This is a good example of how CSS controls style. The HTML code shows that the source text is still lowercase; the display of the characters is controlled by the CSS.
5 Return to your text editor and add the following code to the same h2 style:
letter-spacing:0.2em;
Letter-spacing controls the amount of space between characters. In print design this is called kerning and tracking. Save your page and preview the page in your browser. By increasing letter-spacing, you can add a bit more space around the letters in condensed headlines. You should be careful about adding too much letter-spacing, as it can make headlines harder to read.
It is even possible to set negative values for most of these CSS properties (letter-spacing: –0.4em, for example), although you will not be doing this as often. Experiment with different combinations of fonts and styles, and you might be surprised with what you can come up with.
Often times, experimenting with styles such as text-transform and letter-spacing will require you to return to your initial font-size. In your heading 2, for example, using all capital letters makes the heading look bigger, so you will reduce the size a bit.
6 Modify the font-size value of your h2 style as follows:
font-size:1.125em;
7 Save and close your file.
Working with HTML lists
Lists are found on many web pages and it is important that you learn how to control their appearance. Examples of where you might find lists include recipes, frequently asked questions, and navigation menus. In this exercise, you will learn the three categories of lists and how to control their styles. The three categories are unordered lists, ordered lists, and definition lists.
Unordered lists are also called bulleted lists because the default style adds a bullet to the left of each item in the list. Ordered lists are also called numbered lists because the default style adds a number to the left of each item in the list. Definition lists have two default styles: a bold style for a definition term and an indented style for the definition description.
1 In your text editor, choose File > Open and navigate to the HTML5_03lessons folder. Locate the 03_lists.html file and click OK. This file has the styled text from the previous exercise, as well as three new paragraphs that you will be converting to lists.
Before starting on the exercise, note a few changes that are made to the new <h3> style. In this example, you want all the attributes of the h2 without having to write them again, so a comma and the code h3 are added to the h2 selector. Because the h3 element needs to be smaller, a new font-size property of 0.875em is set. To adjust the letter-spacing, this property is set to 0.1em. Because these are the only two properties for h3, they override the properties for h2.
2 Preview the page in your browser to see the default paragraph styling. Keep this formatting in mind as you begin converting the paragraphs to lists. Close your browser and return to your text editor.
You will convert the last three paragraphs to lists.
3 In the list of ingredients in the first paragraph, change the opening <p> and closing </p> paragraph tags to an opening <ul> and closing </ul> unordered list tag to change this element to an unordered list.
You now need to separate the ingredients into list items. The <ul> tag is rarely used by itself, as the whole purpose of lists is to have separate items.
4 Add an opening <li> tag at the beginning of the first line and a closing </li> tag at the end:
<ul>
<li>3 cups Honeydew Melon (seeded & chopped) </li>
2 tsp Lime Juice
1 cup Vanilla Yogurt
1 cup Ice Cubes
</ul>
Preview this page in your browser and note the bullet point on the first line. Close your browser.
5 Repeat step 4, and add the list tags to the next three ingredients. Each list item will have its own bullet point.
Now you’ll convert the next paragraph, which describes the steps for making the smoothie, into an ordered list.
6 In the next paragraph, change the opening <p> and closing </p> paragraph tags to opening <ol> and closing </ol> ordered list tags to change this element to an ordered list. Then, as in steps 4 and 5, add <li> tags to create three list items:
<ol>
<li>Take a blender, add honeydew melon and watermelon; blend until it smoothens.</li>
<li>Mix yogurt, ice and lime juice and blend it again.</li>
<li>Transfer it into tall glasses and drink it immediately.</li>
</ol>
7 Save your file and then preview it in the browser. The ordered list now displays numbers for each list item.
The second paragraph has been converted to an ordered (or numbered) list.
Close the browser and return to your text editor.
One of the advantages of ordered lists is that the numbers are rendered in the browser. This allows you to add or remove list items in your HTML and to not have to worry about keeping track of the numbers.
8 Add the following line between list items 2 and 3:
<li> Sample your smoothie and add honey or sugar if needed. Blend again.</li>
Save the file and preview it in your browser. Note that the steps have automatically been renumbered. Close your browser and return to your text editor. Now you’ll convert the last paragraph into a definition list.
9 In the last paragraph, change the opening <p> and closing </p> paragraph tags to opening <dl> and closing </dl> definition list tags to change this element to a definition list.
Definition lists are used less often than ordered and unordered lists. One way to think of them is to visualize a listing in a dictionary. A dictionary is just a big list of words; for any given word, there may be a number of different definitions. A definition list has two types of list items: the definition term <dt> and the definition description <dd>.
10 Add the following code to separate this list into terms and descriptions:
<dl>
<dt>Preparation time</dt>
<dd>10 Minutes</dd>
<dt>Number of servings (12 oz)</dt>
<dd>2</dd>
<dt>Calories per serving</dt>
<dd>250</dd>
<dd>295 if 1 tbs sugar added</dd>
<dd>315 if 1 tbs honey added</dd>
</dl>
Save the file and preview it in your browser. The definition terms act as a type of a heading with the definition description indented below. Note that you may have multiple descriptions, as you can see in the last definition term for Calories.
Styling HTML lists
You can easily modify the styling for lists with CSS. The indentation and spacing of a list (as well as the list items) are controlled by margins and padding. There are also a few CSS properties that are unique to lists; for example, later in this exercise, you will learn how to customize the bullet appearance in the unordered list. First, it’s important to understand the default styles of both the parent list and the list items. A specific goal of this exercise is to make you aware of the differences between margins and padding; these two properties are often confused by beginners and your future as a web designer will be much happier if you avoid this confusion!
One thing you may have noticed is that all your lists are bigger than your paragraphs, and they also have a different font family. This is because you have not set any rules for them yet, so they are inheriting their style from the body. As you go through styling each list, you will add font-size and other properties as needed.
1 Type the following code to add a font-size as well as a new background color to the unordered list style:
ul {
font-size:0.875em;
background-color:#E5DAB3;
}
2 Save the file and preview it in your browser. You can see that the background color defines the area of the unordered list. Although you can use background colors to make your lists more attractive, here you are using a background color to illustrate how lists work. Close your browser. You will now style the list items.
Using a background-color helps you see the boundaries of the ul element.
3 Add this code to the empty list item style:
li {
background-color:#AA6C7E;
}
Save the file and preview it in your browser.
You can see that the background color of the list items overrides the color of the unordered list, but it’s not a complete overlap; the list item background-color stops at the bullet points (and at the numbers in the ordered list). Equally important is the fact that both the unordered list and the ordered list use <li> tags, so they are all styled equally. If you want to specifically change the color of the list items in the unordered list, you must target them with a more specific rule.
4 Add this entire section of code to create a specific rule for list items in an unordered list only:
ul li {
background-color:#ABC8A5;
}
This rule is known as a descendant selector because the list item is a descendant of the unordered list in your HTML. Because this rule is more specific, the rules of CSS state that it will override the more general rule for the <li> element.
5 Save the file and preview it in your browser. The background color for the list items in the unordered list is green because of that ul li rule, while the background color for the ordered list is purple based on the li rule.
Only the list items in your unordered list are colored green.
6 Close your browser and return to your text editor. You’ll now focus on controlling the spacing of your lists. First you’ll correct the fact that your ordered list is bigger than your unordered list by adding a font-size property.
7 Add the following code to make the ordered list the same size:
ol {
font-size:0.875em;
}
In order to add space between the unordered list and the ordered list, you can add a bottom margin to the unordered list:
ul {
font-size:0.875em;
background-color:#E5DAB3;
margin-bottom:2em;
}
This works much like the earlier exercises where you controlled the space between your headings and paragraph. However, it is also important that you understand the role of padding when it comes to lists.
8 Add the following code to your ul style:
padding-left:0em;
Save the file and preview the page in your browser.
The unordered list with a left padding of 0 places the bullet points outside the box by default.
By zeroing-out the left padding, you collapse the default padding; all the list items shift to the left, and the bullet points are now hanging outside the unordered list! Close the browser and return to your text editor. Using a CSS rule, you can force the bullet points to be inside the unordered list.
9 Add the following code to your ul style:
list-style-position:inside;
This causes the bullets to be nested within the unordered list.
10 The spacing of lists is also determined by the margins and padding of the individual list items. Here you will modify both properties of the unordered list in order to see the difference. First you will add a top margin value:
ul li {
background-color:#ABC8A5;
margin-top:1em;
}
Save the file and preview it in your browser. Margin-top adds 1 em of space to the top of each list item. Because the margin value adds space on the outside of an element, you see the background-color of the unordered list.
Now you’ll add padding to the ordered list.
12 Add the following code:
ol li {
padding-top:10px;
}
13 Save the file and preview it in your browser.
The list items in the first list are spaced using margins, while the list items in the second list are spaced using padding.
Padding-top adds 1 em of space to the top of each list item, but because padding adds space to the inside of an element, you do not see the background color.
14 Return to your text editor and comment out all three of your background color properties.
15 Save the file and preview it in your browser.
Notice that without the background colors, it would be impossible to know that the spacing of the first list used margins and the spacing of the second list used padding. Using margins and padding indiscriminately can lead to problems, especially as your lists become more complicated.
In this lesson, you learned the different ways you can set the font-size of your text with an emphasis on using the em unit of measurement. You also learned how to control the appearance of your text with CSS properties, including margins, padding, line-height, text-transform, letter-spacing, and font-weight. Finally, you learned the three types of HTML lists and how to style them.
This lesson involved the most coding you have done up to this point. If you would like to compare your work with a finished version, open the final page, named 03_final.html, which is located in your HTML5_03lessons folder.
Self study
To practice styling lists, create new style rules for the definition list. Here are some ideas to help you get started:
1 Make the entire definition list smaller than the other two lists and create an italic style for the definition descriptions <dd>.
2 Experiment with some of the other properties you learned in this lesson, such as text-transform, letter-spacing, and so on.
3 Remember that with definition lists, you have an extra item to work with (the <dt> element).
Review
Questions
1 What is the em measurement when referring to font-size? What are its advantages?
2 Jennifer has defined the paragraph rule in her CSS the following way:
p {
font-family:Baskerville;
}
Is this the best way for her to define her paragraph style? Explain your answer.
3 What is the best way to increase or decrease space between two text blocks (for example, the space between a heading and a paragraph)?
Answers
1 The em as it applies to font-size in CSS is a relative unit of measurement. A unit of 1 em is equivalent to the default font-size of the web browser (traditionally 16 pixels). Because em units are relative, they scale well when resized in a browser. They also allow the designer to link elements such as paragraphs and headings to a specific value in the body. This allows for easy resizing of text if needed.
2 This is not the best way for Jennifer to define her paragraph style. Because fonts defined in a style sheet only appear on the user’s page if they have the font installed on their system, it is best to use a font-stack. A font-stack lists two or more fonts in the preferred order of display (based on their availability on the user’s system). Furthermore, this font-stack should include fonts that are generally accepted as being on most systems.
3 The best way to increase or decrease space between two text blocks is to use margins, padding, or some combination of the two. All CSS elements are based on a box model, and the space outside of the element is controlled by an invisible margin on all four sides. The space inside the element is controlled by invisible padding. In the case of a paragraph that is below a heading, you would only need to set the top or bottom values, not the right or left values.