• Brackets (Windows, Mac, Linux; http://brackets.io/). Spearheaded by Adobe, this free, open-source text editor has many tools for working with HTML and CSS. It’s written specifically for web designers and developers.

• Atom (Windows, Mac, Linux; https://atom.io/). Another free, open-source text editor created by the people behind GitHub, the hugely popular code sharing and collaboration site. Like Brackets, this new text editor is aimed at web developers.

• jEdit (Windows, Mac, Linux; http://jedit.org). This free, Java-based text editor works on almost any computer and includes many features that you’d find in commercial text editors, like syntax highlighting for CSS.

• Notepad++ (Windows; http://notepad-plus.sourceforge.net). A lot of people swear by this fast text editor. It even has built-in features that make it ideal for writing HTML and CSS, like syntax highlighting—color-coding tags and special keywords to make it easier to identify the page’s HTML and CSS elements.

• EditPlus (Windows; www.editplus.com) is an inexpensive ($35) text editor that includes syntax highlighting, FTP, autocomplete, and other wrist-saving features.

• skEdit (Mac; www.skedit.com) is an inexpensive ($30) web page editor, complete with FTP/SFTP, code hints, and other useful features.

• Coda2 (Mac; www.panic.com/coda) is a full-featured web development toolkit ($99). It includes a text editor, page preview, FTP/SFTP, and graphic CSS-creating tools for creating CSS.

• Sublime Text (Mac, Windows, Linux; www.sublimetext.com) is a powerful text editor ($70) beloved by many web coders. You’ll find it frequently used in web design companies.

• Dreamweaver (Mac and Windows; www.adobe.com/products/dreamweaver) is a visual web page editor (from $19.99 per month). It lets you see how your page looks in a web browser. The program also includes a powerful text editor and excellent CSS creation and management tools. Check out Dreamweaver CC: The Missing Manual for the full skinny on how to use this powerful program.

• Part 1, shows you how to create style sheets and provides an overview of key CSS concepts like inheritance, selectors, and the cascade. Along the way, you’ll learn the best HTML writing practices when working with CSS. Tutorials reinforce the part’s main concepts and give you a good taste of the power of CSS.

• Part 2, takes you into the real world of web design. You’ll learn the most important CSS properties and how to use them to format text, create useful navigation tools, and enhance your page with graphics. You’ll learn how to create simple animations with CSS. This section also provides advice on how to make attractive tables and forms.

• Part 3, helps you with one of the most confusing, but most rewarding, aspects of CSS—controlling the layout of your web pages. You’ll learn how to create common designs (like two- and three-column layouts) and how to add sidebars, and you’ll learn about floats and positioning—two common CSS techniques for controlling page layout. You’ll also learn how to craft websites that adapt to look good on desktop, tablet, and mobile browsers, as well as how to use flexbox, a powerful new way of laying out web pages.

• Part 4, delves into professional tips for improving your CSS, It also provides an introduction to Sass—a powerful and efficient way of authoring your style sheets.

• Part 5, includes two sets of resources. The CSS Property Reference summarizes each CSS property in small, easy-to-digest chunks so you can quickly learn about useful CSS properties you may not have seen before or brush up on what you already know. The second appendix covers tools and resources for creating and using CSS.

The <div> and <span> tags have been around for much of the life of the Web. They’ve traditionally been used to organize and group content that doesn’t quite lend itself to other HTML tags. Think of them as like empty vessels that you fill with content. A div is a block, meaning it has a line break before it and after it, while a span appears inline, as part of a paragraph. Otherwise, divs and spans have no inherent visual properties, so you can use CSS to make them look any way you want. The <div> (for division) tag indicates any discrete block of content, much like a paragraph or a headline. But more often it’s used to group any number of other elements, so you can insert a headline, a bunch of paragraphs, and a bulleted list inside a single <div> block. The <div> tag is a great way to subdivide a page into logical areas, like a banner, footer, sidebar, and so on. Using CSS, you can later position each area to create sophisticated page layouts (a topic that’s covered in Part 3).

The <span> tag is used for inline elements: words or phrases that appear inside a larger paragraph or heading. Treat it just like other inline HTML tags, such as the <a> tag (for adding a link to some text in a paragraph) or the <strong> tag (for emphasizing a word in a paragraph). For example, you could use a <span> tag to indicate the name of a company, and then use CSS to highlight the name by using a different font, color, and so on. Here’s an example of these tags in action, complete with a sneak peek of a couple of attributes—id and class—frequently used to attach styles to parts of a page.

<div id="footer">
  <p>Copyright 2015, <span class="bizName">SuperCo.com</span></p>
  <p>Call customer service at 555-555-5501 for more information.</p>
</div>

This brief introduction isn’t the last you’ll see of these tags. They’re used frequently in CSS-heavy web pages, and in this book you’ll learn how to use them in combination with CSS to gain creative control over your web pages.

The <div> tag is rather generic—it’s simply a block-level element used to divide a page into sections. One of the goals of HTML5 is to provide other, more semantic tags for web designers to choose from. Making your HTML more semantic simply means using tags that accurately describe the content they contain. As mentioned earlier in this section, you should use the <h1> (heading 1) tag when placing text that describes the primary content of a page. Likewise, the <code> tag tells you clearly what kind of information is placed inside—programming code.

HTML5 includes many different tags whose names reflect the type of content they contain, and can be used in place of the <div> tag. The <article> tag, for example, is used to mark off a section of a page that contains a complete, independent composition, like a blog post, an online magazine article, or simply the page’s main body of text. Likewise, the <header> tag indicates a header or banner: the top part of a page, usually containing a logo, sitewide navigation, page title and tagline, and so on.

Many HTML5 tags are intended to expand upon the generic <div> tag. Here are a few other HTML5 tags frequently used to structure the content on a page:

There are other HTML5 elements, and many of them simply provide a more descriptive alternative to the <div> tag. This book uses both the <div> tag and the new HTML5 tags to help organize web-page content. The downside of HTML5 is that Internet Explorer 8 and earlier don’t recognize the new tags without a little bit of help (see the box on Getting IE8 to Understand HTML5).

In addition to letting you feel like you’re keeping up with the latest web design trends, using HTML5 tags provides you with clues about a page’s content, and may boost the site’s search engine ranking. For example, using the <article> tag to hold the main story on a web page can highlight what’s inside that tag, and is more descriptive (that is, semantic) than a plain old <div>. Even so, many web designers still use <div> tags even in places where an HTML5 tag makes sense, so there’s no harm in continuing to use the <div> tag and avoiding the HTML5 sectioning elements if you like.

In addition, even with the HTML5 tags, sometimes you still need use <div> tags simply to group other HTML tags. You’d do this to provide a way to move that group to another spot on a page, to give the group a consistent background color, or to draw an outline and add a drop shadow.

• Ditch <font> for controlling the display of text. CSS does a much better job with text. (See Chapter 6 for text-formatting techniques.)

• Don’t use the <b> and <i> tags to emphasize text. If you want text to really be emphasized, use the <strong> tag, which browsers normally display as bold. For a slightly less emphatic point, use the <em> tag, which browsers display as italic. You can use CSS to make any text on a page italicized, bolded, or both.

  While HTML 4 tried to phase the <b> and <i> tags out, HTML5 has brought them back. In HTML5 the <b> tag is meant to merely make text bold without adding any meaning to that text (that is, you just want the text to be bold looking but you don’t want people to treat that text like you’re shouting it). Likewise, the <i> tag is used for italicizing text, but not emphasizing its meaning.

  Note

  To italicize a publication’s title, the <cite> tag kills two birds with one stone. It puts the title in italics and tags it as a cited work for search engines’ benefit. Of course, CSS lets you do anything you want with the tag, so if you want to reference a publication and not italicize it, you can still use the <cite> tag.

• Skip the <table> tag for page layout. Use tables only to display information like spreadsheets, schedules, and charts. As you’ll see in Part 3, you can do all your layout with CSS for much less time and code than the table-tag tango.

• Don’t abuse the <br> tag. If you grew up using the <br> tag to insert a line break without creating a new paragraph, then you’re in for a treat. (Browsers automatically—and sometimes infuriatingly—insert a bit of space between paragraphs, including between headers and <p> tags. In the past, designers used elaborate workarounds to avoid paragraph spacing they didn’t want, like replacing a single <p> tag with a bunch of line breaks and using a <font> tag to make the first line of the paragraph look like a headline.) Using CSS’s margin controls, you can easily set the amount of space you want to see between paragraphs, headers, and other block-level elements.

• Use headings to indicate the relative importance of text. Again, think outline. When two headings have equal importance in the topic of your page, use the same level header on both. If one is less important or a subtopic of the other, then use the next-level header. For example, follow an <h2> with an <h3> tag (see Figure 1-5). In general, it’s good to use headings in order and try not to skip heading numbers. For example, don’t follow an <h2> tag with an <h5> tag.

  

  Figure 1-5. Use the headline tags (<h1>, <h2>, and so on) as you would if you were outlining a school report: Put them in order of importance, beginning with an <h1> tag, which should shout “Listen up! This is what this whole page is about.”

• Use the <p> tag for paragraphs of text.

• Use unordered lists (<ul>) when you’ve got a list of several related items, such as navigation links, headlines, or a set of tips like these.

• Use numbered lists (<ol>) to indicate steps in a process or define the order of a set of items. The tutorials in this book are a good example, as is a list of rankings like “Top 10 websites popular with monks.”

• To create a glossary of terms and their definitions or descriptions, use the <dl> (definition list) tag in conjunction with the <dt> (definition term) and <dd> (definition description) tags. (For an example of how to use this combo, visit http://htmldog.com/guides/html/intermediate/definitionlists/.)

• If you want to include a quotation like a snippet of text from another website, a movie review, or just some wise saying of your grandfather’s, try the <blockquote> tag for long passages or the <q> tag to place a short quote within a longer paragraph, like this:

  <p>Mark Twain is said to have written <q>The coldest winter I ever spent
  was a summer in San Francisco</q>. Unfortunately, he never actually wrote
  that famous quote.</p>

• Take advantage of obscure tags like the <cite> tag for referencing a book title, newspaper article, or website, and the <address> tag to identify and supply contact information for the author of a page (great for a copyright notice).

• As explained in full on HTML: Past and Present, steer clear of any tag or attribute aimed solely at changing the appearance of a text or image. CSS, as you’ll see, can do it all.

• When there isn’t an HTML tag that fits the bill, but you want to identify an element on a page or a bunch of elements on a page so you can apply a distinctive look, use the <div> and <span> tags (see Understanding the <div> and <span> Tags). You’ll get more advice on how to use these in later chapters.

• Don’t overuse <div> tags. Some web designers think all they need are <div> tags, ignoring tags that might be more appropriate. For example, to create a navigation bar, you could add a <div> tag to a page and fill it with a bunch of links. A better approach would be to use a bulleted list (<ul> tag), After all, a navigation bar is really just a list of links. As discussed on Additional Tags in HTML5, HTML5 provides several new tags that can take the place of the <div> tag, like the <article>, <section>, and <footer> tags. For a navigation bar, you could use the HTML5 <nav> tag.

• Remember to close tags. The opening <p> tag needs its partner in crime (the closing </p> tag), as do all other tags, except the few self-closers like <br> and <img>.

• Validate your pages with the W3C validator (see Figure 1-4 and the box on Validate Your Web Pages). Poorly written or typo-ridden HTML causes many weird browser errors.

1. In your web page-editing program, open the file 02 →index.html.

   This simple-but-elegant HTML5 file contains a couple of different headings, a few paragraphs, and a copyright notice inside an <address> tag. You’ll start by creating an inline style for the <h1> tag.

2. Click inside the opening <h1> tag and type style="color: #6A94CC;".

   The tag should look like this:

   <h1 style="color: #6A94CC;">

   The style attribute is HTML, not CSS, so you use the equal sign after it and enclose all of the CSS code inside quotes. Only the stuff inside the quotes is CSS. In this case, you’ve added a property named color—which affects the color of text—and you’ve set that property to #6A94CC, a hexadecimal code for defining a color that’s blue. (You’ll learn more about coloring text on Adding Color to Text.) The colon separates the property name from the property value that you want. Next, you’ll check the results in a web browser.

3. Open the index.html page in a web browser.

   For example, start up your favorite web browser and choose File→Open File (or press Ctrl+O [⌘-O] and select the index.html file in the 02 tutorial folder from your computer; or just drag the file from the desktop—or wherever you’ve saved the tutorial files—into an open browser window). Many HTML editors also include a “Preview in Browser” function, which, with a simple keyboard shortcut or menu option, opens the page in a web browser. It’s worth checking your program’s documentation to see if it includes this time-saving feature.

   When you view the page in a browser, the headline is now blue. Inline styles can include more than one CSS property. You’ll add another property next.

4. Return to your HTML editor, click after the semicolon following #6A94CC, and then type font-size: 3em;.

   The semicolon separates two different property settings. The <h1> tag should look like this:

   <h1 style="color: #6A94CC; font-size: 3em;">

5. Preview the page in a web browser. For example, click your browser window’s Reload button (but make sure you’ve saved the HTML file first).

   The headline is now much larger. And you’ve had a taste of how labor-intensive inline styles are. Making all the <h1> headings on a page look like this one could take days of typing and add acres of code to your HTML files.

6. Return to your page editor and delete the entire style property, which returns the heading tag back to its normal <h1>.

   Next, you’ll create a style sheet within a web page. (You’ll find a finished version of this part of the tutorial in the 02_finished folder in a file named inline-style.html.)

1. With the file index.html open in your text editor, click directly after the closing </title> tag. Then hit Enter and type <style>.

   The HTML should now look like the following (the stuff you’ve added is in bold):

   <title>CSS:The Missing Manual -- Chapter 2</title>
   <style>
   </head>

   The opening <style> tag marks the beginning of the style sheet. It’s always a good idea to close a tag right after you type the opening tag, since it’s so easy to forget this step once you jump into writing your CSS. In this case, you’ll close the <style> tag before adding any CSS.

2. Press Enter twice and type </style>.

   Now, you’ll add a CSS selector that marks the beginning of your first style.

3. Click between the opening and closing <style> tags and type h1 {.

   The h1 indicates the tag to which the web browser should apply the upcoming style.

   The weird bracket thingy after the h1 is called an opening brace, and it marks the beginning of the CSS properties for this style. In other words, it says, “The fun stuff comes right after me.” As with closing tags, it’s a good idea to type the closing brace of a style before actually adding any style properties.

4. Press Enter twice and type a single closing brace: }.

   As the partner of the opening brace you typed in the last step, this brace’s job is to tell the web browser, “This particular CSS rule ends here.” Now time for the fun stuff.

5. Click in the empty line between the two braces. Hit the Tab key, and type color: #6A94CC;.

   You’ve typed the same style property as the inline version—color—and set it to #6A94CC;. The final semicolon marks the end of the property declaration.

   Note

   Technically, you don’t have to put the style property on its own line, but it’s a good idea. With one property per line, it’s a lot easier to quickly scan a style sheet and see all the properties for each style. Also, the tab is another helpful visual organizing technique (you can also insert a few spaces instead). The indentation makes it easy to discern all of your rules at a glance, since the selectors (like h1 here) line up along the left edge, with the properties spaced a bit out of the way.

6. Press Enter again and add two additional properties, like so:

   font-size: 3em;
   margin: 0;

   Make sure you don’t leave off the semicolon at the end of each line; otherwise, the CSS won’t display correctly in a browser.

   Each of these properties adds a different visual effect to the headline. The first assigns a size and font to the text, while the second removes space from around the headline. Part 2 of this book covers all these properties in detail.

   Congratulations—you’ve just created an internal style sheet. The code you’ve added should look like the bolded text:

   <title>CSS: The Missing Manual -- Chapter 2</title>
   <style>
   h1 {
    color: #6A94CC;
    font-size: 3em;
    margin: 0;
   }
   </style>
   </head>

7. Save the page and preview it in a web browser.

   You can preview the page by opening it in a web browser as described in step 3 on Creating an Inline Style, or, if the page is still open in a browser window, just click the Reload button.

   Next you’ll add another style.

   Note

   Always remember to add the closing </style> tag at the end of an internal style sheet. When you don’t, a web browser displays the CSS style code followed by a completely unformatted web page—or no web page at all.

8. Back in your text-editing program, click after the closing brace of the h1 style you just created, press Enter, and then add the following rule:

   p {
     font-size: 1.25em;
     color: #616161;
     line-height: 150%;
     margin-top: 10px;
     margin-left: 60px;
   }

   This rule formats every paragraph on the page. Don’t worry too much right now about what each of these CSS properties is doing; later chapters cover these properties in depth. For now, just practice typing the code correctly and get a feel for how to add CSS to a page.

9. Preview the page in a browser.

   The page is starting to shape up and should look like Figure 2-3. You can see what stylistic direction the page is headed in. You can see a completed version of this tutorial by opening the 02_finished→internal-stylesheet.html file.

1. In your text-editing program, create a new file and save it as styles.css in the same folder as the web page you’ve been working on.

   External style sheet files end with the extension .css. The file name styles.css indicates that the styles contained in the file apply throughout the site. (But you can use any file name you like, as long as it ends with the .css extension.)

   Start by adding a new style to the style sheet.

2. Type the following rule into the styles.css file:

   html {
     padding-top: 25px;
     background-image: url(images/bg_page.png);
   }

   This rule applies to the HTML tag—the tag that surrounds all other HTML tags on the page. The padding-top property adds space between the top of the tag and the content that goes inside it. In other words, what you just typed will add 25 pixels of space between the top of the browser window and the page’s content. The background-image adds a graphic file to the page’s background. The CSS background-image property can display the graphic in many different ways—in this case, the graphic will tile seamlessly from left to right and top to bottom, covering the entire browser window. You can read more about background image properties on Adding Background Images.

3. Add a second rule following after the rule you just typed to the styles.css file:

   body {
     width: 80%;
     padding: 20px;
     margin: 0 auto;
     border-radius: 10px;
     box-shadow: 10px 10px 10px rgba(0,0,0,.5);
     background-color: #E1EDEB;
   }

   This rule applies to the <body> tag—the tag that holds all the content visible in a web browser window. There are a lot of different things going on in this style, and each of these properties is covered in-depth later in the book. But in a nutshell, this style creates a box for the page’s content that’s 80 percent the width of the browser window, has a little bit of space inside that moves text from the edge of the box (that’s the padding property), and centers the box on the page (that’s the margin property, and the particular trick of centering a page’s content is discussed in the tutorial starting on Finishing Touches). Finally, the box gets a light blue background color and a transparent black drop shadow.

   Instead of recreating the work you did earlier, just copy the styles you created in the previous section and paste them into this style sheet.

4. Open the index.html page that you’ve been working on and copy all of the text inside the <style> tags. (Don’t copy the <style> tags themselves.)

   Copy the style information the same way you’d copy any text. For example, choose Edit→Copy or press Ctrl+C (⌘-C).

5. In the styles.css file, paste the style information by selecting Edit→Paste or pressing Ctrl+V (⌘-V).

   An external style sheet never contains any HTML—that’s why you didn’t copy the <style> tags.

6. Save styles.css.

   Now you just need to clean up your old file and link the new style sheet to it.

7. Return to the index.html file in your text editor and delete the <style> tags and all the CSS rules you typed in earlier.

   You no longer need these styles, since they’re in the external style sheet you’re about to attach. In this tutorial, you’ll take a dip into the exciting world of web fonts. You’ll learn all about web fonts starting on Additional Fonts to Consider, but the basic idea is that you can use nearly any font you want in a web page—even a font that your site’s visitors don’t have installed on their own computers—simply by providing a link to that font file. There are many different ways to use web fonts, but in this example, you’ll use Google’s web font service.

8. In the space where the styles used to be (between the closing </title> tag and the closing </head> tag), type the following:

   <link href='http://fonts.googleapis.com/css?family=Varela+Round'
   rel='stylesheet'>

   Again, don’t worry about the details yet. All you need to know for now is that when a web browser encounters this link, it downloads a font named Varela Round from a Google server, and your CSS styles can freely use it.

   Next, you’ll link to the external style sheet you created earlier.

9. After the <link> tag you added in the previous step, type:

   <link href="styles.css" rel="stylesheet">

   The <link> tag specifies the location of the external style sheet. The rel attribute simply lets the browser know that it’s linking to a style sheet.

   Note

   In this example, the style sheet file is in the same folder as the web page, so using the file’s name for the href value provides a simple “document-relative” path. If it were in a different folder from the page, then the path would be a bit more complicated. In either case, you’d use a document- or root-relative path to indicate where the file is. The routine is the same as when you create a link to a web page or set a path to an image file when using the HTML <img> tag. (For a brief primer on document- and root-relative links, visit www.kirupa.com/html5/all_about_file_paths.htm.)

10. Save the file and preview it in a web browser.

    You’ll see the same text styles for the <h1> and <p> tags that you created in the internal style sheet on Creating an Internal Style Sheet. In addition, there’s now a speckled, tan background (the background image you applied on the <html> tag), as well as a light-colored, greenish-blue box. That box is the <body> tag, and its width is 80 percent that of the browser window. Try resizing the browser window and notice that the box changes width as well. There’s also a drop shadow on the box; you can see through the drop shadow to the speckled background. That’s thanks to a special color type—rgba color—that includes a transparency setting (you’ll read about it on Rgba). Also notice that the corners of the box are rounded, thanks to the border-radius property.

    Note

    If the web page doesn’t have any formatting (for example, the top headline isn’t big, bold, and dusty brown), then you’ve probably mistyped the code from step 6 or saved the styles.css file in a folder other than the one where the index.html file is. In this case, just move the styles.css into the same folder.

    Now, you’ll use the web font you linked to in step 8.

11. In your text editor, return to the styles.css file. For the h1 style, add the following two lines:

    font-family: 'Varela Round', 'Arial Black', serif;
    font-weight: normal;

    The finished style should look like this (additions in bold):

    h1 {
      font-family: 'Varela Round', 'Arial Black', serif;
      font-weight: normal;
       color: #6A94CC;
       font-size: 3em;
       margin: 0;
    }

    If you preview the page now, you’ll see the new font, Varela Round, for the headline.

    Note

    If you don’t see the new font—it should have rounded tips on the ends of all the letters as pictured in Figure 2-4—then one of a couple of things could be wrong. If you’re not connected to the Internet, you won’t be able to download the font from Google; second, you may have mistyped either the <link> tag (see step 8 on the previous page), or the font-family declaration (line 2 above).

    To demonstrate how useful it can be to keep your styles in their own external file, you’ll attach the style sheet to another web page.

12. Open the file 02→another_page.html.

    This page contains some of the same HTML tags—h1, h2, p, and so on—as the other web page you’ve been working on.

13. Click after the closing </title> tag and press Enter.

    You’ll now link to both the web font and the external style sheet.

14. Type the same <link> tags you did in steps 8 and 9.

    The web page code should look like this (the code you just typed appears in bold):

    <title>Another Page</title>
      <link href='http://fonts.googleapis.com/css?family=Varela+Round'
    rel='stylesheet'>
      <link href="styles.css" rel="stylesheet">
    </head>

15. Save the page and preview it in a web browser.

    Ta-da! Just two lines of code added to the web page is enough to instantly transform its appearance. To demonstrate how easy it is to update an external style sheet, you’ll do so by editing one style and adding another.

16. Open the styles.css file and add the CSS declaration font-family: "Palatino Linotype", Baskerville, serif; at the beginning of the p style.

    The code should look like this (the bold text is what you’ve just added):

    p {
      font-family: "Palatino Linotype", Baskerville, serif;
      font-size: 1.25em;
      color: #616161;
      line-height: 150%;
      margin-top: 10px;
      margin-left: 60px;
    }

    In this case, you’re not using a web font, but relying on the site visitor to already have one of the fonts listed on his machine (you’ll learn all about using fonts on Using Fonts). Next, create a new rule for the <h2> tag.

17. Click at the end of the p style’s closing } , press Enter, and add the following rule:

    h2 {
      color: #B1967C;
      font-family: 'Varela Round', 'Arial Black', serif;
      font-weight: normal;
      font-size: 2.2em;
      border-bottom: 2px white solid;
      background: url(images/head-icon.png) no-repeat 10px 10px;
      padding: 0 0 2px 60px;
      margin: 0;
    }

    Some of these CSS properties you’ve encountered already. Some are new—like the border-bottom property for adding a line underneath the headline. And some—like the background property—provide a shortcut for combining several different properties—in this case, the background-image and background-repeat—into a single property. Don’t worry about the specifics of these properties; you’ll learn them all in great detail in upcoming chapters (Chapter 6 covers font properties; Chapter 8 covers backgrounds; Chapter 7 covers padding and margins).

    The styles you’ve created so far affect mainly tags—the h1, h2, and p—and they affect every instance of those tags. In other words, the p style you created formats every single paragraph on the page. If you want to target just one paragraph, you need to use a different kind of style.

18. Click at the end of the h2 style’s closing } , press Enter, and add the following rule:

    .intro {
      color: #666666;
      font-family: 'Varela Round', Helvetica, sans-serif;
      font-size: 1.2em;
      margin-left: 0;
      margin-bottom: 25px;
    }

    If you preview the index.html page in a web browser, you’ll see that this new style has no effect…yet. This type of style uses a class selector, which formats only the specific tags you apply the class to. In order for this new style to work, you need to edit some HTML.

19. Save the file styles.css and switch to the index.html file in your text editor. Locate the opening <p> tag following the <h1> tag and add class=“intro” so the opening tag looks like this:

    <p class="intro">

    You don’t have to add a period before the word intro as you did when you created the style in step 18 (you’ll learn why in the next chapter). This little extra HTML applies the style to the first paragraph (and only that one paragraph).

    Repeat this step for the another_page.html file—in other words, add class=“intro” to the first <p> tag on that page.

20. Save all the files and preview both the index.html and another_page.html files in a web browser.

    Notice that the appearance of both pages changes, based on the simple edits you made to the CSS file. Close your eyes and imagine your website has a thousand pages. Aaaahhhhhhh, the power.

    You’ve got one last change to make. If you look at the very bottom of the page in your browser, you’ll see the copyright notice. It’s a little small, and it isn’t lined up with the paragraphs above. Also, it would look better if it shared the same formatting as the other paragraphs.

21. In your text editor, return to the styles.css file. Locate the style that has the p selector. Type a comma, a space, and address.

    The style looks like this:

    p, address {
      font-family: "Palatino Linotype", Baskerville, serif;
      font-size: 1.25em;
      color: #616161;
      line-height: 150%;
      margin-top: 10px;
      margin-left: 60px;
    }

    You haven’t changed any of the style’s properties—you’ve just changed the selector. In fact, you’ve just created a group selector. A group selector is a very efficient way to apply the same styling to a bunch of different page elements, and you’ll learn more about them on Styling Groups of Tags. In this case, the style applies to two tags: the <p> tag and the <address> tag.

22. Close styles.css file and reload the index.html file in your web browser.

    The finished page should now look like Figure 2-4. (You’ll find a completed version of this tutorial in the 02_finished folder.)

    For added practice, spend a few minutes playing around with the styles.css file. Try different values for the style sheet properties. For example, try a different number for the width property of the body style, or try different numbers for the font sizes.

• Ancestor. As explained at the beginning of this chapter, an HTML tag that wraps around another tag is its ancestor. In Figure 3-4, the <html> tag is an ancestor of all other tags, while the <body> tag is an ancestor for all of the tags inside of it—the <h1>, <p>, and <strong> tags.

• Descendant. A tag inside one or more tags is a descendant. In Figure 3-4, the <body> tag is a descendant of the <html> tag, while the <p> tag is a descendant of both the <body> and <html> tags.

• Parent. A parent tag is the closest ancestor of another tag. In Figure 3-4, a parent is the first tag directly connected to and above another tag. Thus, the <html> tag is the parent of the <head> and <body> tags, but of no other tags. And in this diagram, the <p> tag is the parent of the <strong> tag.

• Child. A tag that’s directly enclosed by another tag is a child. In Figure 3-4, both the <h1> and <p> tags are children of the <body> tag, but the <strong> tag isn’t. Since the <strong> tag is directly wrapped inside the <p> tag, it’s a child of the <p> tag.

• Sibling. Tags that are children of the same tag are called siblings, just like brothers and sisters. In an HTML diagram, sibling tags are next to each other and connected to the same parent. In Figure 3-4, the <head> and <body> tags are siblings, as are the <h1> and <p> tags.

• a:link selects any link that your guest hasn’t visited yet, while the mouse isn’t hovering over or clicking it. This style is your regular, unused web link.

• a:visited is a link that your visitor has clicked before, according to the web browser’s history. You can style this type of link differently than a regular link to tell your visitor, “Hey, you’ve been there already!” (See the box on Limits on Visitation for the limitations surrounding this selector.)

• a:hover lets you change the look of a link as your visitor passes the mouse over it. The rollover effects you can create aren’t just for fun—they can provide useful visual feedback for buttons on a navigation bar.

  You can also use the :hover pseudo-class on elements other than links. For example, you can use it to highlight text in a <p> or <div> when your guests mouse over it. In that case, instead of using a:hover (which is for links) to add a hover effect, you can create a style named p:hover to create a specific effect when someone mouses over any paragraph. If you just want to style tags with a specific class of highlight applied to them, then create a style named .highlight:hover.

• a:active lets you determine how a link looks as your visitor clicks. In other words, it covers the brief nanosecond when someone’s pressing the mouse button, before releasing it.

The :focus pseudo-class works much like the :hover pseudo-class. While :hover applies when a visitor mouses over a link, :focus applies when the visitor does something to indicate her attention to a web page element—usually by clicking or tabbing into it. In programmery lingo, when a visitor clicks in a text box on a web form, she puts the focus on that text box. That click is a web designer’s only clue as to where the visitor is focusing her attention.

The :focus selector is mostly useful for giving your visitor feedback, like changing the background color of a text box to indicate where she’s about to type. (Single-line text fields, password fields, and multi-line <textarea> boxes are common targets for the :focus selector.) This style, for example, adds a light yellow color to any text box a visitor clicks or tabs into:

input:focus { background-color: #FFFFCC; }

The :focus selector applies only while the element is in focus. When a visitor tabs into another text field or clicks anywhere else on the page, she takes the focus—and the CSS properties—away from the text box.

The :before pseudo-element does something no other selector can: It lets you add content preceding a given element. For example, say you wanted to put “HOT TIP!” before certain paragraphs to make them stand out, like the boxes in this book that say “UP TO SPEED” and “POWER USERS’ CLINIC.” Instead of typing that text in your page’s HTML, you can let the :before selector do it for you. This approach not only saves on code, but also if you decide to change the message from “HOT TIP!” to, say, “Things to know,” then you can change every page on your site with one quick change to your style sheet. (The downside is that this special message is invisible to browsers that don’t understand CSS or don’t understand the :before selector.)

First, create a class (.tip, say) and apply it to the paragraphs that you want to precede with the message, like so: <p class=“tip”>. Then, add your message text to the style sheet:

.tip:before {content: "HOT TIP!" }

Whenever a browser encounters the tip class it dutifully inserts the text “HOT TIP!” just before the tag with that class.

The technical term for text you add with this selector is generated content, since web browsers create (generate) it on the fly. In the page’s HTML source code, this material doesn’t exist. Whether you realize it or not, browsers generate their own content all the time, like the bullets in bulleted lists and numbers in ordered lists. If you want, you can even use the :before selector to define how a browser displays its bullets and numbers for lists.

Internet Explorer 8 and up as well as all other major browsers support the :before selector (and the :after selector coming up next).

Exactly like the :before selector, the :after pseudo-element adds generated content—but after the element, not before. You can use this selector, for example, to add closing quotation marks (”) after quoted material.

This CSS3 selector refers to items that a visitor has selected on a page. For example, when a visitor clicks and drags over text, the browser highlights that text, and the visitor can then copy the text. Normally, browsers add a blue background behind the text. Internet Explorer changes the text color to white. However, you can control the background color and text color by defining this selector. For example, if you wanted to make selected text white with a violet background you could add this style to a page’s style sheet:

::selection {
    color: #FFFFFF;
    background-color: #993366;
}

The only properties you can set with this selector are color and background-color, so you can’t go wild and change the font size, fonts, margins, or other visual changes that would surely drive your site visitors crazy. (Thanks for protecting us from ourselves, CSS!)

This selector doesn’t work in Internet Explorer 8, Firefox, or iOS Safari, but it does work in all other current browsers. You can, however, add support for Firefox by adding what’s called a vendor prefix to the selector, like this:

::-moz-selection {
    color: #FFFFFF;
    background-color: #993366;
}

To get this to work in Firefox and the other browsers, you need to have both styles in your style sheet—just place one after the other. (You’ll learn more details about vendor prefixes are and why you need them in the box on Vendor Prefixes.)

If you really want to go crazy, you can specify a different background color just for text selected inside a particular element. For example, to make only text inside paragraphs red with a pink background, just add the p element selector before ::selection, like this:

p::selection {
    color: red;
    background-color: pink;
}

Going back to the HTML family tree analogy for a moment, recall what a child tag is: any tag directly enclosed by another tag. (For example, in Figure 3-6, <h1>, <div>, <h2>, and <ul> are all children of the <body> tag.) The :first-child pseudo-element lets you select and format just the first of however many children an element may have.

In Figure 3-6, if you want to select the first <h1> tag on the page, create a selector like this:

h1:first-child

This selector applies to any <h1> tag that is a first child. In Figure 3-6, the results are obvious: There’s only one <h1> tag, and it’s the first tag on the page. Therefore, it’s a child of the <body> element. However, :first-child can be confusing. For example, if you change the <h2> tag inside the <div> pictured in Figure 3-6 to an <h1> tag, then h1:first-child would select both the <h1> directly inside the <body> tag and the <h1> inside the div (since that <h1> is the first-child of the div).

This is like :first-child discussed earlier, but just with the last child of an element. For example, to style the last item in a list, you use the li:last-child selector (see Figure 3-7).

Figure 3-7. CSS’s wide range of child selectors gives you a variety of ways to select child elements. These selectors are great when you want to highlight the first, last, or an alternating number of items in a list.

There’s also a selector for an element that’s the only child of another element. For example, say you have this style in your style sheet:

p:only-child {
  color: red;
}

This style sets the text color to red, but only if there’s a single paragraph inside the element. For example, if you have a <div> tag with three paragraphs inside it, then this style wouldn’t apply—because there are three children inside that div. However, if you deleted two of the paragraphs, leaving just one paragraph in the div, that paragraph would then be red.

To make things more confusing, however, this style only works when the specific tag is the only child inside another tag. In other words, it’s not enough that the tag is the only one of its kind. If there’s another tag that’s a sibling to the specified tag, this selector won’t work. If you added a <ul> tag inside <div> along with the <p>, then the paragraph is no longer an only child. That <ul> tag is also a child, so the p:only-child would no longer apply!

This complex selector is very useful. With it, you can easily style every other row in a table, every third list item, or any combination of alternating child elements (see Figure 3-7). This selector requires a value to determine which children to select. The easiest option is a keyword—either odd or even—which lets you select alternating odd or even child elements. For example, if you want to provide one background color for each even row in a table and another color in the background of each odd-numbered row, you can write two styles like this:

tr:nth-child(odd) { background-color: #D9F0FF; }
tr:nth-child(even) { background-color: #FFFFFF; }

Now that’s a really simple way to color alternating table rows (see Figure 3-8). But :nth-child() has even more power up its sleeve.

You can pinpoint a specific child by supplying a number. For example, if you want to style the fifth item in a list, you’d provide the number 5 to the :nth-child selector, like this:

li:nth-child(5)

That style selects only a single child. If you want to select, say, every third item in a list, use the number (3, in this case) followed by the letter n, like this:

li:nth-child(3n)

Then n indicates a multiplier, so 3n is every third child beginning with the third child (see Figure 3-7).

But what if you want to select every third child element in a series, starting with the second child element? For example, suppose you want to highlight every third table cell (<td> tag) inside a row, starting with the second table cell (see Figure 3-8). Here’s a style to achieve that:

td:nth-child(3n+2) { background-color:#900; }

The number before the n represents a multiple: 3n means every third element, 4n means every fourth element, and so on. The plus sign followed by a number (+2 in this example) indicates which element to start at, so +2 means start at the second child element, while +5 means start at the fifth child element. So :nth-child(5n+4) selects every fifth child element starting at the fourth child element.

You can even use a negative n value, which will cycle through the child elements backwards. For example the last list in Figure 3-7 uses the following selector:

li:nth-child(-n+3)

which translates to “start at the third list item, then select every list item before it.” As you can see, the nth-child selector is confusing, but powerful enough to let you select an endless variety of child elements.

Figure 3-8. Table-striping the easy way: with child selectors. You can even stripe alternating columns by targeting every other <td> tag within a row, or, as in this case, every third column beginning with the second one. Now that’s precision!

This selector works just like :first-child, but applies to a child that has a particular tag. For example, say you have a sidebar element with the class sidebar. To style the first paragraph in that sidebar, use this selector:

.sidebar p:first-of-type

Notice the p in p:first-of-type. It indicates the tag you’re going to format.

This selector works like :last-child, but applies to the last instance of a particular type of tag. For example, if you want to format the last paragraph in the sidebar div in a particular way, but you’re not sure whether there are other tags coming after the paragraph (like a bulleted list, headline, or image). Here’s the style:

.sidebar p:last-of-type

Works like :nth-child(), but it applies to alternating children that have a specific tag. You may find this selector handy if you have something like a big paragraph of text that’s peppered with photos. The <img> tag is an inline tag, so you can have a <p> tag with a bunch of <image> tags inside it. And say you want to alternately float the images left and right, as shown in Figure 3-9. You can do so with these two styles:

img:nth-of-type(odd) { float: left; }
img:nth-of-type(even) { float: right; }

Figure 3-9. With the :nth-of-type() selector, you can easily select every other image inside a tag, alternating between left and right alignment.

As you can see, you use the same keywords (odd or even) and formula (here, 2n+1) for :nth-of-type() as you do for :nth-child().

In fact, you can use :nth-of-type() to select alternating table rows as well:

tr:nth-of-type(odd) { background-color: #D9F0FF; }

tr:nth-of-type(even) { background-color: #FFFFFF; }

In the case of CSS selectors, there’s always more than one way to skin an HTML tag—there are usually five or more!

1. Return to your text editor and the selector_basics.html file.

   Let’s add a new style below the <p> tag style you just created.

2. Click at the end of the closing brace of the p tag selector, press Enter to start a new line, and add the following code:

   h1, h2, h3 {
   
   }

   As explained earlier in this chapter, a group selector is simply a list of selectors separated by commas. This rule applies the same formatting, which you’ll add next, to all <h1>, <h2>, and <h3> tags on the page.

3. Click in the empty line between the opening { and closing } and add five CSS properties:

   color: rgb(255,255,255);
   font-family: Arial, "Palatino Linotype", Times, serif;
   border-bottom: 2px solid rgb(87,185,178);
   padding-top: 10px;
   padding-bottom: 5px;

   There’s a lot going on here, but basically you’re setting the color and font type for the headlines, adding a border line below the headlines for visual interest, and controlling the top and bottom spacing by using the padding property. The padding property adds space from the edges of an element without affecting a background or border—you’re adding a bit of space above the headline, and inserting a bit of space between the bottom of that text and the border line below it.

4. Save the file, and preview it in a web browser.

   The <h1> heading near the top of the page and the <h2> and <h3> headings lower on the page all have the same font and font color as well as a greenish-blue border below them (see Figure 3-11). The <h1> tag looks a bit small, but you can easily bump up its size.

5. Go back to your text editor and the selector_basics.html file. Add another style below the group selector style you just created:

   h1 {
     font-size: 2em;
   }

   This style increases the size of the font. An em is the default browser font-size, so 2em is twice the normal text size. Notice, as well, that it’s possible to have more than one style apply to an element at the same time—the h1, h2, h3 rule and the h1 rule in this case. Both the group selector and this new type selector apply to h1 tags on this page. This process is the cascade in Cascading Style Sheets. You’ll learn all about how styles interact in Chapter 5.

1. Return to your text editor and the selector_basics.html file.

   You’ll add a new style below the h1 class style you created before.

2. Click after the previous style’s closing bracket (} ), hit Enter to create a new line, and then type #logo {.

   ID selectors always begin with the pound symbol (#). The style’s name indicates that you’ll apply this to a page element that’s considered the site’s logo.

3. Hit Enter again, and then type:

   font-family: Baskerville, Palatino, sans-serif;
   font-size: 2em;
   color: rgba(255,255,255,.8);
   font-style: italic;
   text-align: center;
   margin-bottom: 30px;
   background-color: rgb(191,91,116);
   border-radius: 0 0 10px 10px;
   padding: 10px;

   It looks like a long list of properties, but all it does it set some font properties, background color, and spacing for the logo text.

4. Finish the style by typing the closing brace. The whole thing should look like this:

   #logo {
     font-family: Baskerville, Palatino, sans-serif;
     font-size: 2em;
     color: rgba(255,255,255,.8);
     font-style: italic;
     text-align: center;
     margin-bottom: 30px;
     background-color: rgb(191,91,116);
     border-radius: 0 0 10px 10px;
     padding: 10px;
   }

   If you save the file and preview it in a web browser, you won’t see any difference. That’s because this style doesn’t do anything until you apply it. So you’ll add an ID attribute to the page’s HTML, indicating where you want the ID style to apply.

5. Find the <div> tag near the opening <body> tag—it has the text “CSS: The Missing Manual” in it. Add id=“logo” to the opening div so the HTML looks like this:

   <div id="logo">
     CSS: The Missing Manual
   </div>

   The <div> tag now reflects the formatting defined in the #logo style. As with all things CSS, there are many ways to arrive at the same destination: You could instead use a class style and apply it to the <div> tag. But in this case you’re using an ID selector, since the point of this style—identifying the logo on the page—is in keeping with the general notion of ID selectors.

6. Save the page, and preview it in a browser.

   Now the “CSS: The Missing Manual” text is centered, light-colored, and inside a small box at the top of the page (Figure 3-12).

1. Return to your text editor and the selector_basics.html file.

   Add a new style below the ID selector style you just created.

2. Click at the end of the closing brace of the #logo selector, press Enter, and then type

   .note {
   
   }

   This style’s name, .note, indicates its purpose: to highlight paragraphs that contain extra bits of information for your site’s visitors. Once you create a class style, you can apply it wherever these notes appear—like the third paragraph in this page.

3. Click in the empty line between the opening { and closing } and add the following list of properties to the style:

   color: black;
   border: 2px solid white;
   background-color: rgb(69,189,102);
   margin-top: 25px;
   margin-bottom: 35px;
   padding: 20px;

   Notice that you’re not using the rgb() color values to color the font and border. CSS has several different ways to specify a color, including keywords like white, black, or orange. You’ll learn about those on Adding Color to Text.

   If you preview the page now, you see no changes. Like ID selectors, class selectors don’t have any effect on a web page until you apply the style in the HTML code.

4. In the page’s HTML, there are two <p> tags that begin with the word “Note” inside <strong> tags.

   To apply a class style to a tag, simply add a class attribute, followed by the class selector’s name—in this case, the note style you just created.

5. Click just after the p in the first <p> tag, and then type a space followed by class=“note” . The HTML should now look like this (what you just typed is in bold):

   <p class="note"><strong>NOTE:</strong>

   Be sure not to type class=“.note”. In CSS, the period is necessary to indicate a class style name; in HTML, it’s verboten. Repeat this step for the second paragraph (it’s just above the <h3> tag with the text “Not Me!”).

   Note

   There’s no reason you can’t add this class to other tags as well, not just the <p> tag. If you happen to want to apply this formatting to an <h2> tag, for example, then your HTML would look like this:

   <h2 class="note">

6. Save and preview the web page in a browser.

   The note paragraph is nicely highlighted on the page (see Figure 3-13).

   

   Figure 3-13. You can make detailed formatting changes with class selectors. A class style gives selected paragraphs different formatting from all other paragraphs on the page. The distinctive note box pictured here uses a class style to stand out from the crowd.

1. Return to your text editor and the selector_basics.html file. Create a new empty line for the descendant selector style.

   If you just completed the previous steps, click after the closing brace of the .note style, and then hit Enter.

2. Type .note strong {.

   The last tag in the selector—strong—is the element you ultimately want to format. In this case, the style formats the <strong> tag only when it’s inside another tag with the class note applied to it. It has no effect on <strong> tags inside other paragraphs, lists, or heading tags, for example.

3. Hit Enter, type color: #FC6512; , and then hit Enter again to create another blank line. Finish the style by typing the closing brace character.

   The finished style should look like this:

   .note strong {
     color: #FC6512;
   }

4. Save the page and preview it in a web browser.

   The word “Note:” should appear in orange in each of the note boxes on the page.

1. Return to your text editor and the selector_basics.html file. Create a new empty line for a new style.

   If you just completed the previous steps, click after the closing brace of the .note strong descendant selector style, and then hit Enter.

2. Add another style:

   article {
     max-width: 760px;
   }

   This is another type selector. It applies to the HTML5 <article> tag, which is used to define the content that makes up an article like a blog post, or the content on this page.

   The max-width property sets the maximum width for the tag, meaning that the article tag will never get wider than 760 pixels. Save the file and preview it in a browser. If you widen the browser window, you’ll notice that past 760 pixels, the window gets wider and the blue background of the page appears, but the text no longer expands.

   On the other hand, if you make the browser window smaller than 760 pixels, the text lines do get shorter. That’s the power of the max-width property, which sets a maximum width, but no minimum. This property is extremely useful when you’re designing sites that need to work on a variety of screen sizes—desktop computers, laptops, tablets, and smart phones. It’s an important part of responsive design, which you’ll learn about in Chapter 17.

   Now that you’ve limited how far the text can expand, it would be nice to keep the content centered on the screen instead of sticking to the left edge as the browser window expands.

3. Add one more property to the article style so it looks like this (addition in bold):

   article {
     max-width: 760px;
     margin: 0 auto;
   }

   The margin property sets the space between an element and other elements around it. You’ll read more about margins on Controlling Space with Margins and Padding, but here this line sets the left and right margins to auto, which tells the web browser to automatically figure out how much space to add to the left and right sides of the article tag. Once the browser window gets past 760 pixels, the article element gets no wider, so the browser basically adds empty space to both the left and right of the tag, in essence centering it in the middle of the browser window.

   For fun, you’ll add one more advanced style—an adjacent sibling selector discussed on Siblings—to format the paragraph immediately following the first headline on the page. (You can achieve the same effect by creating a class style and applying it to that paragraph, but the adjacent sibling selector requires no changes to your HTML.)

4. Add one last style:

   h1+p {
    color: rgb(255,255,255);
    font-size: 1.2em;
    line-height: 140%;
   }

   This style will apply to any paragraph that immediately follows an <h1> tag—in other words, the first paragraph after the top headline on the page. It won’t apply to the second or any subsequent paragraphs. This selector provides an easy way to create a unique look for an introductory paragraph to set it off visually and highlight the beginning of an article.

   The style changes the font color and size. The line-height property (which you’ll read about on Line Spacing by Number) controls the space between lines in a paragraph (also known as leading).

   If you preview the page now, you’ll see that the top paragraph is white and its text is larger, and there’s more space between each line of text (see Figure 3-14). If you actually deleted this paragraph in the HTML, you’d see that the remaining paragraph would suddenly be white with larger text, since it would be the new adjacent sibling of the <h1> tag.

1. Open the file inheritance.html in your favorite text editor.

   This file already has an internal style sheet, with one type selector giving the <body> tag a background color.

   Note

   In general, it’s better to use external style sheets for a website, for reasons discussed in Chapter 2 (External Style Sheets). But for a simple tutorial like this, it’s easier to just work with one file.

2. Add another style after the <body> style in the style sheet:

   p {
     color: rgb(92,122,142);
   }

   As you’ve seen in the previous tutorials, the color property sets the color of text. Your style sheet is complete.

3. Open the page in a web browser to preview your work.

   The color of the page’s four paragraphs has changed from black to a slate blue color (see Figure 4-3).

1. Return to your text editor and the inheritance.html file.

   You’ll add a new style below the <p> tag style you created.

2. Click at the end of the closing brace of the p selector. Press Enter to create a new line, and then type .content { . Hit Enter twice, and type the closing brace: }.

   You’re about to create a new class style that you’ll apply to the <body> tag, which surrounds the other tags on this page.

3. Click between the two braces, and then add the following list of properties to the style:

   font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
   font-size: 18px;
   color: rgb(194,91,116);
   max-width: 900px;
   margin: 0 auto;

   The whole thing should look like this:

   .content {
     font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
     font-size: 18px;
     color: rgb(194,91,116);
     max-width: 900px;
     margin: 0 auto;
   }

   This completed class style sets a font, font size, and color. It also sets a width and centers the style on the page (you saw this trick in the previous tutorial on Finishing Touches for creating a fixed, centered area for a page’s content).

   

   Figure 4-3. Inheritance in action! Tags inside of a styled tag—the bold, italicized text—display the same color applied to the <p> tag surrounding them. But what’s that? The link at the end of the first paragraph is still blue (circled). You’ll learn why in the next chapter.

4. Find the opening <body> tag (just below the closing </head> tag), and then type class=“content”.

   The tag should now look like this: <body class=“content”>. It applies the class to the <body> tag. Thanks to inheritance, all tags inside of the <body> tag (which are also all the tags visible inside a browser window) inherit this style’s properties and therefore use the same font.

5. Save and preview the web page in a browser.

   As you can see in Figure 4-4, your class style has created a seamless, consistent appearance throughout all text in the body of the page. Both headings and paragraphs inside the <body> tag have taken on the new font styling.

1. Return to your text editor and the inheritance.html file.

   You’ll expand on the p tag style you just created.

2. Locate the p style, click at the end of the color property (color: rgb(50,122,167);), and then press Enter (Return) to create a new line.

   You’ll indent the paragraphs on the page by adding a left margin.

3. Add two properties to the style so it looks like this:

   p {
     color: rgb(50,122,167);
     padding-left: 20px;
     border-left: solid 25px rgba(255,255,255,.5);
   }

   These changes add a border to the left side of every paragraph, and move the text so that it doesn’t touch the border: The padding property indents the paragraph text 20 pixels from the border.

4. Save the file and preview it in a web browser.

   Notice that all of the <p> tags have a thick light border on the left. However, the tags inside the <p> tag (for example, the <em> tag) don’t have any additional indentation or border (see Figure 4-5). This behavior makes sense: It would look weird if there were an additional thick border and 20px of space to the left of each <em> and each <strong> tag inside of a paragraph!

   To see what would happen if those properties were inherited, edit the p selector so that it looks like this: p, p *, which makes it into a group selector (Styling Groups of Tags). The first part is just the p selector you already created. The second part—p *—means “select all tags inside of a <p> tag and apply this style to them.” (The *, or universal selector, is described on Styling Groups of Tags.)

   

   Figure 4-5. While most properties are inherited (like color), there are plenty—like margins, padding, and borders—that don’t pass on to nested tags. The CSS Property Reference in Appendix A indicates which properties are and are not inherited.

   Note

   You can find a completed version of the page you created in this tutorial in the 04_finished folder.

• The tag has both a tag selector and a class style applied to it. For example, a tag style for the <h2> tag, a class style named .leadHeadline and this HTML:

  <h2 class="leadHeadline">Your Future Revealed!</h2>

  Both styles apply to this <h2> tag.

  Note

  Hold onto your hat if you’re worried about what happens when these multiple styles conflict; details to follow.

• The same style name appears more than once in the style sheet. For example, you might have two styles—a group selector (Styling Groups of Tags), like .leadHeadline, .secondaryHeadline, .newsHeadline and a class style .leadHeadline—in the same style sheet. Both of these rules define how any element with a class of leadHeadline looks.

• A tag has both a class and an ID style applied to it. Maybe it’s an ID named #banner, a class named .news, and this HTML: <div id=“banner” class=“news”>. Properties from both the banner and news styles apply to this <div> tag.

• There’s more than one style sheet containing the same style name attached to a page. The same-named styles can arrive in an external style sheet and an internal style sheet. Or the same style can appear in multiple external style sheets that are all linked to the same page.

• There are complex selectors targeting the same tag. This situation is common when you use descendant selectors (Styling Tags Within Tags). For example, say you have a <div> tag in a page (like this: <div id=“mainContent”>), and inside the div is a paragraph with a class applied to it: <p class=“byline”>. The following selectors apply to this paragraph:

  #mainContent p
  #mainContent .byline
  p.byline
  .byline

1. In a web browser, open the file 05→cascade.html (Figure 5-5).

   The page doesn’t look like much—two columns, one with a blue background and a lot of same-looking text. There are a few styles already applied to this file, so open the CSS up in a text editor and have a look.

2. Using your favorite text or web page editor, open the file 05→styles.css.

   This file is the external style sheet that the cascade.html file uses. It has several styles already in it—the first group is the CSS reset styles discussed on the previous page. They eliminate the basic browser styles, which is why all of the text currently looks the same. (You’ll create your own styles to make this page look great soon.)

   The last two styles—the class styles .main and .sidebar—create the two columns you see in Figure 5-5. The HTML is divided into two <div> tags, each with its own class. The class styles here essentially position the two divs so they appear side by side as columns (you’ll learn how to control page layout and create columns in Part 3).

   You’ll first add a couple of styles to improve the page’s basic appearance and its top headline.

   

   Figure 5-5. The basic “CSS reset” styles on this page eliminate the subtle differences in how different browsers display basic HTML tags. They also eliminate any difference between how the tags look. Your job is to take this empty canvas and style the tags so they look the way you want them to.

3. In the styles.css file, add these two styles at the bottom of the style sheet following the last } of the .sidebar style:

   body {
     color: #B1967C;
     font-family: "Palatino Linotype", Baskerville, serif;
     padding-top: 115px;
     background: #CDE6FF url(images/bg_body.png) repeat-x;
     max-width: 800px;
     margin: 0 auto;
   }
   h1 {
     font-size: 3em;
     font-family: "Arial Black", Arial, sans-serif;
     margin-bottom: 15px;
   }

1. In the styles.css file, add the following style to the end of the style sheet:

   h2 {
     font-size: 2.2em;
     color: #AFC3D6;
     margin-bottom: 5px;
   }

   This style simply changes the text color and increases the size of the <h2> tag and adds a little bit of space below it. If you view the file in a web browser, you’ll see that the <h2> tags in the main column and the one <h2> tag in the right sidebar now look alike.

   Next, you’ll create a style to format just the second-level headlines in the main column.

2. Return to your web page editor and the styles.css file. Click directly after the end of the new <h2> tag style, and then press Enter to create an empty line. Add the following style:

   .main h2 {
     color: #E8A064;
     border-bottom: 2px white solid;
     background: url(images/bullet_flower.png) no-repeat;
     padding: 0 0 2px 80px;
   }

   You’ve just created a descendant selector that formats all <h2> tags that appear inside a tag with a class of main applied to it. The two columns of text on this page are enclosed in <div> tags with different class names applied to them. The larger, left-hand column has the class main, so this particular style will only apply to the <h2> tags in that div.

   This style is similar to the one you created in the tutorial for Chapter 2 in Step 17 on Creating an External Style Sheet—it adds an underline and a simple flower icon to the headline. This style also specifies an orange color for the text.

3. Save the style sheet and preview the page once again in a web browser (Figure 5-7).

   You’ll notice that all of the heading 2 tags (the two in the main column and one in the sidebar) are the same size, but the two in the main column also have the underline and flower icon.

   Because the .main h2 style is more specific than the simple h2 style, if there are any conflicts between the two styles—the color property, in this case—the .main h2 properties win out. So, although the second-level headlines in the main column get a blue text color from the h2 style, the orange color from the more specific .main h2 style wins out.

   However, since the .main h2 style doesn’t specify a font size or bottom margin, the headlines in the main column get those properties from the h2 style.

1. Return to your web page editor and the styles.css file.

   You’ll now create a new style to format just the paragraphs in the main column of the page.

2. Add the following style to the end of the style sheet:

   .main p {
     color: #616161;
     font-family: "Palatino Linotype", Baskerville, serif;
     font-size: 1.1em;
     line-height: 150%;
     margin-bottom: 10px;
     margin-left: 80px;
   }

   Preview the page in a web browser and you’ll see that this new style changes the color, size, and font of the text, spreads the lines of text out (the line-height property), and adjusts the bottom and left margins of the paragraphs.

   Next, you’ll make the first paragraph bigger and bolder so that it makes a more powerful message. One way to style just that one paragraph is to create a class style and apply it to that paragraph.

3. Add one last style to the end of the style sheet:

   .intro {
     color: #6A94CC;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 1.2em;
     margin-left: 0;
     margin-bottom: 15px;
   }

   This style changes the color, font, and size, and adjusts the margins a bit. All you have to do is apply the class to the HTML.

4. Open the cascade.html file in your web page editor. Locate the <p> tag that appears after <h1>CSS: The Missing Manual</h1> and directly below <div class=“main”>, and then add the following class attribute:

   <p class="intro">

5. Preview the page in a web browser.

   And…the paragraph is completely unchanged. What gives? Following the rules of the cascade, .intro is a basic class selector, while the .main p is a descendant selector composed of both a class and a tag name. These add up to create a more specific style, so its style properties overrule any conflict between it and the .intro style.

   In order to make the .intro style work, you need to give it a little juice by making its selector more powerful.

6. Return to the styles.css file in your web page editor and change the name of the style from .intro to p.intro.

   Make sure there’s no space between the p and .intro. You’ve basically created a tie—.main p—is one class and one tag selector, and p.intro is one tag and one class. They both have a specificity value of 11, but because p.intro appears after .main p in the style sheet, it wins the battle, and its properties apply to the paragraph. (You could have created an even more specific style—.main .intro—to overcome the conflict.)

7. Preview the page in a web browser (see Figure 5-8).

   Voila! The paragraph changes to blue, with bigger text, a different font, and no left margin. If you didn’t have a clear understanding of the cascade, you’d be scratching your head wondering why that class style didn’t work the first time around.

Serif fonts are best for long passages of text, as it’s widely believed that the serifs—those tiny “feet” at the end of a letter’s main strokes—gently lead the eye from letter to letter, making text easier to read. Examples of serif fonts are Times, Times New Roman, and Georgia.

Examples of these fonts are in Figure 6-2.

Figure 6-2. Fonts don’t always display the same on Mac (left) and Windows (right). The two systems come with different built-in fonts. In addition, antialiasing, which makes onscreen text look smoother, is better on the Mac than on Windows. Windows includes a technology called ClearType, which can improve the look of text on a screen. The quality of text on Windows depends on which ClearType settings your Windows computer has. You can learn more about ClearType at www.microsoft.com/typography/cleartype.

Sans-serif fonts are often used for headlines, thanks to their clean and simple appearance. Examples of sans-serif fonts include Arial, Helvetica, and Verdana. The text in this book is set in a sans-serif font.

Examples of sans-serif fonts are shown in Figure 6-3.

Figure 6-3. Sans-serif fonts on Mac (left) and Windows (right). Some people believe that you should use only sans-serif fonts on web pages because they think the delicate decorative strokes of serif fonts don’t display well on the coarse resolution of a computer screen. However, high-density screens—newer screens that pack more pixels in per inch—don’t have that problem. Their ultra-tiny pixels do an excellent job displaying small details like serifs. In the end, your aesthetic judgment is your best guide. Pick the fonts you think look best.

Monospaced fonts are often used to display computer code like the CSS snippets you see throughout this book. Each letter in a monospaced font is the same width (like the ones manual typewriters used).

Examples of these font lists are pictured in Figure 6-4.

Figure 6-4. Monospaced fonts on Mac (left) and Windows (right). Courier New is the most common monospaced font, but you’re far from limited to it. Lucida Console is very common on Windows, and Monaco is installed on every Mac.

There are literally thousands of fonts, and every operating system ships with many more fonts than are listed here. However, a few fonts are very common on both Macs and PCs, so you might want to give these a go:

Be careful with Arial Black and Impact: They only have a single weight and don’t include an italic version. Accordingly, if you use these fonts, make sure to set the font-weight and the font-style (coming up on Formatting Words and Letters) to normal. Otherwise, if the text is bolded or italicized, the browser will make its best (read: ugly) guess at what the text should look like.

• EOT. Embedded OpenType fonts work only in Internet Explorer. You need a special tool to convert a regular font to EOT format, but sites like FontSquirrel (Finding Web Fonts) can do this for you.

• TrueType and OpenType. If you look in your computer’s Fonts folder, you’ll probably find fonts in .ttf (TrueType) or .otf (OpenType), the most common formats for computer fonts. You can use them for word processing and desktop publishing as well as for web pages. This font type was once the most common font type used for web fonts and is still supported by most browsers. However, it’s been passed by a leaner font format—WOFF.

• WOFF. Web Open Font Format was designed specifically for the Web. WOFF fonts are basically compressed versions of TrueType or OpenType fonts, which means they’re generally smaller in file size and download more quickly than other fonts. WOFF format has wide browser support as well, including IE9 and later, Firefox, Chrome, Safari, Opera, BlackBerry Browser, iOS Safari version 5 and later, and Android Browser 4.4 and later.

  Note

  WOFF2 is a newer version of WOFF with up to 30 percent better compression, for even smaller, faster-loading fonts. However, at the time of this writing, it’s not supported by Internet Explorer, Firefox, or Safari: http://caniuse.com/#search=woff2.

• SVG. Scalable Vector Graphic format isn’t a font format, per se. It’s actually a way to create vector graphics—graphics that can scale without losing quality. Support for SVG fonts is very limited: Internet Explorer, Chrome, Opera, and Firefox don’t support SVG fonts. Another problem with SVG is that it produces files that are often twice the size of TrueType and three times the size of WOFF fonts. The only real benefit of SVG is that it’s the only font format understood by older versions of iOS running Safari version 4.1 or earlier, as well as Android Browser 4.3 and 4.1. If you’re not targeting those older mobile devices, then you can skip SVG fonts.

• The League of Moveable Type (www.theleagueofmoveabletype.com). Composed of a group of designers, this site was one of the first to offer free, handcrafted fonts for web use. Their font, League Gothic, is widely used on the Web.

• Exljbris font foundry (www.exljbris.com). Provides classic, free fonts: Museo, Museo Sans, and Museo Slab.

• The Open Font Library (http://openfontlibrary.org). Over 400 free fonts (at the time of this writing) are available and all of them can be used on your websites (just don’t use all 400 at once).

• Font Squirrel (www.fontsquirrel.com). A landmark site in the web font world offering more than a thousand fonts. In addition, Font Squirrel offers an online tool for converting a TrueType or OpenType font to other font formats including EOT, SVG, WOFF, and even WOFF2. You’ll learn how to use this tool in the next section.

• Google Fonts (www.google.com/fonts). Google provides a simple and free way to include web fonts on your sites. You’ll learn how to use this service on Discovering Google Web Fonts.

1. Locate a TrueType (.ttf) or OpenType (.otf) font.

   Use one of the sites listed in the previous section, or find a font from another site. Just make sure that the font is licensed for use as a web font. If it’s not, or you’re not sure, then skip it and find another font.

2. Go to the Web font Generator at www.fontsquirrel.com/tools/webfont-generator.

   It’s a simple page with just a few options (see Figure 6-5).

3. Click the Upload Fonts button (#1 in Figure 6-5).

   Your browser opens a “Select files” dialog box.

4. Select one or more fonts from your computer, and then click the Open button.

   Your browser uploads the file or files to the Font Squirrel server.

5. Select a conversion option (#2 in Figure 6-5).

   • Basic simply converts the font to EOT, WOFF, and SVG formats.

   • Optimal is a better choice, since it not only converts the font but also makes other enhancements to improve the performance and speed of the fonts.

   • Expert lets you tweak every last setting for the conversion. For example, it lets you create a subset of the font—that is, just a handpicked set of characters. In other words, you could exclude from the font file certain characters you’re not using, like the semicolon, exclamation mark, or letters that use diacritical marks such as ü, é, or õ. In addition, you can use Expert to get just certain formats, like WOFF or WOFF2.

6. Turn on the “Yes, the fonts I’m uploading are legally eligible for web embedding” checkbox (#3 in Figure 6-5).

   As mentioned on Legal Issues with Web Fonts, fonts are intellectual property, and just slapping one up on a web server promotes software piracy. Make sure your fonts can be used on the Web; most of the ones listed in this section can.

7. Click the Download Your Kit button (#4 in Figure 6-5).

   Depending on the number of fonts you’re converting and their complexity, the download process may take a while. The Font Squirrel server needs to take the font and perform its magic to generate each font format. When it’s done, you’ll download a folder containing the various font format files, a demo file, a CSS file, and a few other miscellaneous files. The most important are the font files you want to use (for example, .eot, .ttf, .woff, or .svg files).

• Line 2 is the same as before. The font-family property supplies the name of the font—the same name you’ll use when applying the font to your CSS styles.

• Line 3 is for Internet Explorer 9, but only when it’s in Compatibility mode—a mode where IE9 acts like it’s IE8. This weird feature was added to IE9 so that websites designed to correctly accommodate the bugs in IE 8 and earlier would look okay in IE9. A user has to purposely switch to compatibility mode in IE9, so you’re probably safe leaving this out.

• Line 4 begins a second src property, which according to the rules of the @font-face directive, can have multiple font types specified. The first font is the .eot font again, but this time you’ll see that at the end of the .eot file, you need to add ?#iefix. This is to accommodate yet more IE bugs—this time for IE6-8. If you don’t add that little bit to the URL following the .eot, then the font may not display in IE8 or earlier correctly.

  You’ll also notice that after the URL there’s some new code:

  format('embedded-opentype')

  This indicates the font format, and you add this after each URL for a different font format.

• Lines 5-8 simply identify additional font formats. This is actually just one property—the src property—split over several lines for greater readability. For each font type you specify for the src property, you add a URL, a format, and a comma (for all but the last font):

  url('fonts/League_Gothic-web font.woff') format('woff'),

The easiest way to add bold and italic variants of your fonts is to add font-weight and font-style properties to the @font-face directive. Normally, the CSS font-weight property (Formatting Words and Letters) tells a browser to display a font in bold, normal, or one of several other weights, while the font-style property (Formatting Words and Letters) tells a browser to display a font as italic or normal. However, when used within the @font-face directive, font-style tells a browser to apply the font when the style asks for a particular variant of the font.

Say you have a font named PTSans. You start with the normal, non-bold, non-italic version of the font. The various font formats begin with PTSansRegular. In your style sheet, you’d add this @font-face directive:

 @font-face {
  font-family: 'PTSans';
  src: url('PTSansRegular.woff2') format('woff2'),
       url('PTSansRegular.woff') format('woff'),
  font-weight: normal;
  font-style: normal;

}

Notice the following:

Now, say you had an italicized version of the font—the file name begins with PTSansItalic. You’d then add this to your style sheet:

@font-face {
  font-family: 'PTSans';
  src: url('PTSansItalic.woff2') format('woff2'),
       url('PTSansItalic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

You use the same font-family name in line 2—PTSans. However, you change the font-style to italic (line 6). This tells the browser that the font you’re specifying is the italic version of the PTSans font. You’d add similar @font-face directives for the bold and the bold/italic versions like this:

@font-face {
  font-family: 'PTSans';
  src: url('PTSansBold.woff2') format('woff2'),
       url('PTSansBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'PTSans';
  src: url('PTSansBoldItalic.woff2') format('woff2'),
       url('PTSansBoldItalic.woff') format('woff');
 font-weight: bold;
 font-style: italic;
}

In other words, you need four @font-face directives to cover all variants of bold, italic, and regular text. Notice that the font-family name is the same in each case; only the src properties change (to point to the different files) and the font-weight and font-style properties change.

The benefit of this method is that you can apply the regular font to text, apply <em> and <strong> tags to your HTML, and let the browser worry about which font file to load and use. In this example, if you want to use the PTSans font on all your paragraphs, you’d simply add this style to your style sheet:

p {
  font-family: PTSans;
}

Then you can mark up your paragraph tags with HTML. For example, you might have a paragraph like this:

<p>When I was younger, I could remember <em>anything</em>, whether it had hap-
pened or <strong>not</strong> -- <strong><em>Mark Twain</em>
</strong></p>

When the web browser reads the style sheet (with the four @font-face directives and the p tag style), it would display most of the paragraph using the PTSansRegular font. However, the word “anything” contained inside the <em> tags would use the PTSansItalic font; the word “not” inside the <strong> tags would use the PTSansBold font; and “Mark Twain” inside both <strong> and <em> tags would use the PTSansBoldItalic font.

These directives even work for headlines. If you created a style to format all h1 tags with PTSans, you could create this style:

h1 {
  font-family: PTSans;
}

With this style in place, a web browser would actually use the bold version of PTSans, since headlines are normally displayed in bold. (When you use this technique involving multiple variations of a font, you should not add font-weight: normal;, as described on The Easy Way to Add Bold and Italic.)

Unfortunately, Internet Explorer 8 and earlier don’t understand this method and will use the PTSansRegular font for all of the text. IE will create faux-italic and faux-bold for the <em> and <strong> tags; that is, it will slant the PTSansRegular font on screen for italic, and make the PTSansRegular font thicker for bold. The resulting computer-generated bold and italic usually look pretty bad.

If you’re still supporting Internet Explorer 8 (or earlier), the previous solution to bold and italic won’t work. You can get font variants to work in IE8, but it requires a bit more work. To begin with, you still create four @font-face directives, one for each variant of the font. However, instead of giving them the same font-family name (PTSans, for example), you give each one its unique name (PTSansRegular, PTSansItalic, and so on). In other words, you’d rewrite the four @font-face directives like this:

@font-face { font-family: 'PTSansRegular';
  src: url('PTSansRegular.eot?#iefix') format('embedded-opentype'),
       url('PTSansRegular.woff2') format('woff2'),
       url('PTSansRegular.woff) format('woff');
}

@font-face { font-family: 'PTSansItalic';
  src: url('PTSansItalic.eot?#iefix') format('embedded-opentype'),
       url('PTSansItalic.woff2') format('woff2'),
       url('PTSansItalic.woff) format('woff');
}

@font-face { font-family: 'PTSansBold';
  src: url('PTSansBold.eot?#iefix') format('embedded-opentype'),
       url('PTSansBold.woff2') format('woff2'),
       url('PTSansBold.woff') format('woff');
}

@font-face { font-family: 'PTSansBoldItalic';
  src: url('PTSansBoldItalic.eot?#iefix') format('embedded-opentype'),
       url('PTSansBoldItalic.woff2') format('woff2'),
       url('PTSansBoldItalic.woff') format('woff');
}

Notice that each @font-face directive has its one family name—one that matches the font variant: PTSansRegular, PTSansItalic, PTSansBold, and PTSansBoldItalic.

In addition, notice that the font-weight and font-style properties used in the examples on pages 136-138 are gone. You don’t need them here.

The hard part comes when it’s time to apply the font. In the example on The Easy Way to Add Bold and Italic, you merely applied the font-family to the style like this:

p {
  font-family: PTSans;
}

Now, unfortunately, you have to apply the different font names to the various tags—p for regular, em for italic, strong for bold, and a descendant selector to handle the case of bold and italic. So to get the different variants of the PTSans font to work, you need to create four styles, involving many lines of code, like this:

p {
  font-family: PTSansRegular;
  font-size: 48px;
  font-style: normal;
  font-weight: normal;
}

p em {
  font-family: PTSansItalic;
  font-style: normal;
  font-weight: normal;
}

p strong {
  font-family: PTSansBold;
  font-style: normal;
  font-weight: normal;
}

p strong em, p em strong {
  font-family: PTSansBoldItalic;
  font-weight: normal;
  font-style: normal;
}

First, notice there are four styles: the p style applies the PTSansRegular font; p em is a descendant selector that applies to an <em> tag that’s inside a <p> tag—that style applies the PTSansItalic font; p strong is another descendant selector, which applies the PTSansBold font to the <strong> tag when it appears inside a paragraph; and finally, there’s a group selector composed of two descendent selectors. The first descendant selector applies to an <em> tag that’s inside a <strong> tag that’s inside a <p> tag, whereas the second applies to a <strong> tag inside an <em> that’s inside a <p>. You need both because you can nest <em> tags inside of <strong> tags and vice versa. You could end up with HTML like this:

<p>
  <em><strong>Hey!</strong></em>
  I'm talking to
  <strong><em>you</em></strong>
</p>

The single p strong em selector won’t work for the “Hey!” above, since it’s a <strong> tag inside an <em> tag.

<i>CSS: The Missing Manual</i>

Another thing to notice is that you have to set the font-weight and font-style to normal for all these styles. If you don’t, many browsers (not just Internet Explorer) will try to bold the already bolded font, and italicize the already italic version of the font.

This second technique for supporting bold and italic variants is obviously a lot of work. It becomes even more work if you use more than one font with bold and italic versions on the same site. Which technique you use really depends on how important Internet Explorer 8 support is for you. At the time of this writing, IE 8 is still quite popular, ranging from 3.71% (http://gs.statcounter.com/#browser_version_partially_combined-ww-monthly-201401-201501) to 19% (http://www.netmarketshare.com) of web browsers in use.

• Search by name. If you know the name of the font you’re interested in, then just type the name (or part of the name) in the Search field (#1 in Figure 6-7). The page then filters the list of fonts to show you the ones that match.

• Filter by category. The category menu (#2 in Figure 6-7) lets you show fonts that match one, two, three, four, or five categories: Serif, Sans Serif, Display, Handwriting, and Monospace. Just uncheck a box to hide that type of font, or turn on the box to show it. Display fonts are generally bold and stylish; they’re not really good for long passages of text, but can make short headlines really jump out of the page. Handwriting fonts, or script fonts, look like someone wrote the text with a pen. They vary from elegant, wedding invitation-like scripts, to a hand-scrawled, “Give me the money if you want your cat back” ransom-note look.

• Physical style. Three sliders let you identify physical characteristics of fonts (#3 in Figure 6-7). The thickness slider lets you find fonts made of very thin lines (delicate lines that are often hard to read unless displayed at a large font size) to very thick lines (bold and chunky). The Slant slider identifies fonts with a “lean” to them: Generally this means italic versions of fonts, but also is relevant for handwritten fonts, which generally have a pronounced lean toward the right. Finally, use the Width slider to find fonts that are either narrower or more spread out. With wider fonts, you fit fewer letters on a single line but often make a bold statement in a headline.

• Alphabet. Lastly, the Script menu (#4 in Figure 6-7) lets you specify fonts for use with other languages. English and many European languages use the Latin alphabet, but if you need a font for Russian text, for example, you would choose Cyrillic. Pick the one that matches the language your text will appear in.

1. At the bottom right of the Google Fonts screen (#1 in Figure 6-9), click the Use button.

   A page opens with several options as well as the code you need to copy.

2. Choose the style you want to use (#2 in Figure 6-9).

   Some fonts include italic, bold, and other variants of the regular font. For body text, you’ll usually want at least regular, italic, and bold. In the case of a headline, you can usually get away with just one font. You’ll notice also that there’s a “speed dial” on the right of this page. As you add more styles and fonts, the speed dial rotates clockwise indicating that it will take more time to download the fonts.

   That’s one drawback of web fonts. Since your site’s visitors need to download them (as well as the web page, external style sheets, graphics, and other elements that make up your page), be careful not to go crazy and use too many fonts. Otherwise, people will have to wait a long time for the fonts to appear. The number on the dial indicates the number of milliseconds (on average) it will take to download the font files.

3. Optionally, choose the character sets you want.

   This step isn’t required and may not be available for all fonts. In addition, if you selected a character set other than Latin (see the last bullet point on Finding and Selecting Fonts), then you may see other options besides Latin and Latin Extended. Latin Extended is a good choice if your text contains words in a language that uses particular accent characters like Turkish, Welsh, and Hungarian. For most Latin-based languages like French and Spanish, the normal Latin alphabet is all you need. You’re better off not using the extended Latin if you don’t need it, since using it adds file size and download time to the font.

   Note

   To see a list of the extra characters available in Latin Extended visit http://en.wikipedia.org/wiki/Latin_Extended-A.

4. Copy the code in the “Add this code to your website” box (#3 in Figure 6-9).

   You have three options here.

   • Standard provides a <link> tag that points to an external style sheet (this is the same as linking to any external style sheet, as described on External Style Sheets). However, this is actually a special link that points to Google’s web server and provides the information Google needs to deliver the proper fonts. For instance:

     <link href='http://fonts.googleapis.com/css?family=Lato:300,400,300ital
     ic, 400italic|Oswald:400,700' rel='stylesheet' type='text/css'>

     Notice that at the end of the href attribute, the fonts and their styles are listed. In this example, the fonts are Lato and Oswald. And Google will load several styles of Lato: 300, 400, 300italic and 700italic.Those numbers are a way of indicating the weight (or thickness) of the font and are discussed in step 6 on Adding Color to Text. In addition, a number plus “italic” (for example, “300italic”) indicates an italicized version of that weight for that font.

     Note

     Even though the Google Fonts site suggests using “type=‘text/css’” as part of the <link> tag, you can leave it out. It’s not needed in HTML5.

   • Another option is @import. Click the @import tab under step 3 on the web page (see Figure 6-9) to see the code needed to use the @import directive. The benefit of this approach is that you can add @import to the beginning of another style sheet. For example, say you have a single external style sheet for your site, and you’ve linked all the pages in your site to it. The standard <link> method requires you to add that code to every page on your site. However, with the @import method, you can add the code to your single external style sheet and you’re done.

     

     Figure 6-9. When you’re ready to use the Google fonts that you’ve added to your collection, click the Use button in the bottom right (#1), and then choose the styles you want (#2) and the method you’d like to use to attach those fonts to a page (#3). The most common way is to simply link to a style sheet that loads the fonts from Google’s servers.

   • Finally, you can choose a JavaScript approach. This book doesn’t cover this method, since it requires a lot of code, and unless you know JavaScript really well, it’s easy to make a mistake. In addition, it doesn’t offer much benefit over the other options.

5. Paste the code on your site’s web pages.

   In the case of the <link> method described in the previous step, you must paste the code onto every page you wish to use the fonts on. If you’re just beginning the process of building your site, this isn’t such a big deal, but if you already have lots of pages, this may end up being quite a bit of work. In that case, consider the @import method: You can place the @import code at the top of your site’s external style sheet, and then all the pages that link to that style sheet will also download the proper fonts.

   Note

   The @import method can have a slight effect on your website’s performance; that is, it can slow download speed.

6. Create styles using the fonts.

   Now that the fonts are loading, you can use them much like any other font. Just create a style, add the font-family property, and list the font. Google’s Web Fonts page shows the font’s name at the bottom of the Use page (#4 in Figure 6-9).

   If you’re using multiple styles of a font, then you also need to add the font-weight and font-style properties to the style. Google doesn’t use the regular normal or bold keywords to indicate a font’s weight. Instead, it uses a numeric scale from 100 to 900. A value of 700 is bold, 400 is normal, and the other numbers indicate variations in thickness. For example, say you want to apply the regular italic version of the Gentium Book Basic font to the <em> tag. You can write this style:

   em {
     font-family: "Gentium Book Basic", Palatino, serif;
     font-weight: 400;
     font-style: italic;
   }

You can also use the RGB—red, green, blue—method used in computer graphics programs. The color value consists of three numbers representing either percentages (0-100 percent) or numbers between 0-255 for each hue (red, green, and blue). So when you want to set the text color to white (perhaps to set it off from an ominous dark page background), you can use this:

color: rgb(100%,100%,100%);

or

color: rgb(255,255,255);

To add depth to a page, consider one of the newer color methods. RGBA stands for Red, Green, Blue, Alpha, and it works just like the RGB colors, with the addition of an alpha channel. That is, you can specify a level of opacity so that the color isn’t solid, but see-through (see Figure 6-10). To the RGB colors, you add one last number: a value between 0 and 1. A value of 0 makes the color invisible, while 1 renders the color totally opaque (that is, you can’t see through it):

color: rgba(255, 100, 50, .5);

You can create interesting visual effects by placing RGBA colored text over background images. For example, you can make the images seep through the color of the text a little (by using a high value like .9) or a lot (by using a low value like .1).

The downside? Internet Explorer 8 and earlier don’t understand RGBA color. One solution is to declare a solid color first using hexadecimal notation, and then a second color property with RGBA color, like this:

color: rgb(255,100,50); /* for IE8 */

color: rgba(255,100,50,.5); /* for newer browsers */

All browsers interpret the first line; the second line overrides the first line, but only for browsers that understand RGBA color. In other words, IE8 applies the first color declaration and ignores the second, while IE9 and other browsers apply the RGBA color. You just won’t get the transparency effect in IE8.

Figure 6-10. RGBA colors aren’t just for text. You can use RGBA color with any CSS property that accepts a color value, like the background color of the search box in the top-right of this image, or the color of the navigation buttons: Home, Archives, Authors, and so on.

HSL stands for hue, saturation, and lightness (also sometimes labeled luminance). It’s yet another way to specify color. It’s not supported by Internet Explorer 8 or earlier, but works in all other browsers. If you’re used to RGB or hex colors, you may find the HSL syntax a bit unusual. Here’s an example of a bright red color:

color: hsl(0, 100%, 50%);

You supply three values inside hsl(). The first is a degree value from 0 to 360, which maps to a circle of hues. If you remember the order of the colors in a rainbow—red, orange, yellow, green, blue, indigo, and violet (ROYGBIV)—then you’ve got a basic idea of the values you’ll need to specify a color. Red is 0 (it’s also 360, since that’s one full rotation around a circle), yellow is around 50, orange around 100, green around 150, and so on. Each color is separated by about 51 degrees.

The second is the saturation, or how pure the color is. You specify saturation in a percentage from 0% to 100%. A value of 0% is no saturation at all, or a dull gray. In fact, no matter what hue you specify, 0% will produce the same gray hue. A value of 100% is the pure color—bright and vibrant. The third value is the lightness value, specified in a percentage from 0% (completely black) to 100% (completely white). If you want to have a pure color, then you use a value of 50%.

HSL is supposed to be more intuitive then RGB or hexadecimal color values, but if you don’t find it easy to understand, you don’t have to use it. Instead, use a program like Fireworks or Photoshop or an online color picker to make picking an RGB or hex value easy.

Just as RGB has its companion format, RGBA, HSL supports opacity with the HSLA format. It works similarly to RGB, described on Hexadecimal Color Notation. You specify an opacity value from 0 (invisible) to 1 (totally opaque) to set the opacity value. This will create a bright red color with 50% opacity:

color: hsla(0, 100%, 50%, .5);

The examples in this book mostly stick with RGB and RGBA, but if you find HSL easier to understand, then use it!

CSS provides seven keywords that let you assign a size that’s relative to the base text size: xx-small, x-small, small, medium, large, x-large, and xx-large. The CSS looks like this:

font-size: large;

The medium option is the same as the browser’s base font size. Each of the other options decreases or increases the size by a different factor. In other words, while each size change is supposed to be a consistent increase or decrease from the previous size, it isn’t. Basically, xx-small is the equivalent of 9 pixels (assuming you haven’t adjusted the base font size in your browser); x-small is 10 pixels, small is 13 pixels, large is 18 pixels; x-large is 24 pixels, and xx-large is 32 pixels.

Keywords are pretty limited: You have only seven choices. When you want more control over the size of your text, turn to one of the other font-sizing options discussed next.

Like keywords, percentage values adjust text in relationship to the font size defined by the browser, but they give you much finer control than just large, x-large, and so on. Every browser has a preprogrammed base text size, which in most browsers is 16 pixels. You can adjust this base size in your browser’s preferences. Whatever setting has been chosen, the base text size for a particular browser is equivalent to 100%. In other words, for most browsers, setting the CSS percentage to 100% is the same as setting it to 16 pixels.

Say you want to make a particular headline appear two times the size of average text on a page. You simply set the font size to 200%, like so:

font-size: 200%;

Or, when you want the text to be slightly smaller than the default size, use a value like 90% to shrink the font size down a bit.

The above examples are pretty straightforward, but here’s where it gets a little tricky: Font size is an inherited property (as discussed in Chapter 4), so any tags inside of a tag that has a font size specified inherit that font size. So the exact size of 100% can change if a tag inherits a font-size value.

For example, at the lower left of Figure 6-11, there’s a <div> tag that has its font size set to 200%. That’s two times the browser’s base text size, or 32 pixels. All tags inside that <div> inherit that text size and use it as the basis for calculating their text sizes. In other words, for tags inside that <div>, 100% is 32 pixels. So the <h1> tag inside the <div> that has a font size of 100% displays at two times the base-text size for the page, or 32 pixels.

Figure 6-11. The three most common units for sizing text are pixels, ems, and percentages. Watch out for inherited text sizes when using ems or percentages, as explained on the next page. If you notice that some text on a page looks unusually large or small, then check to see if the offending text isn’t inside a tag that inherits a font size from another tag. Also consider using the rem value described on the next page.

Once you understand percentages, you know everything you need to understand ems. The two work exactly the same way, but many web designers use ems because of its roots in typography.

The word em comes from the world of printed (as in paper) typography, where it refers to the size of a capital letter M for a particular font. As it’s worked its way into the Web world, an em in CSS no longer means the same thing as in typography. Think of it as referring to the base text size. That is, a value of 1em means the same thing as a value of 100 percent, as described in the previous section. You can even say it the opposite way: A percentage value is just an em multiplied by 100: .5em is 50 percent, .75em is 75 percent, 3em is 300 percent, and so on.

For example, this CSS does the exact same thing as font-size: 200%;:

font-size: 2em;

When it comes to inheritance, ems also work just like percentage values (see the top-right of Figure 6-11 for an example). The bottom paragraph is set to .75em, which, since the <p> tag inherits the 2em (32px) setting from the <div> tag, works out to .75 x 32, or 24 pixels. Inside the <p> tag are two other tags that also have a font-size setting of .75em. The innermost tag, a <strong> tag, is set to .75em or, in essence, 75 percent of its inherited size. There’s a lot of math to this one: 32 pixels (inherited from the <div> tag) x .75 (inherited from the <p> tag) x .75 (inherited from the <em> tag) x .75 (the <strong> tag’s own font size). The result of this brainteaser is a text size of roughly 14 pixels.

Inherited font-size values can cause problems for nested lists. You can see an example in the bottom-right square of Figure 6-11. If you create a style like ul { font-size: 75% }, then a nested list (a <ul> tag inside of another <ul> tag) is set to 75 percent of 75 percent—making the text in the nested list smaller than the rest of the list.

To get around this conundrum, create an additional descendant selector style like this: ul ul {font-size: 100%}. This style sets any ul tag inside of a ul to 100 percent; in other words, 100 percent of the surrounding ul tag’s font size. In this example, it keeps any nested lists to 75 percent of the base text size. There’s another way to prevent this hall-of-mirrors, shrinking-text effect: the rem unit (discussed next).

CSS includes another measurement unit called rem. No, it’s not named after sleep patterns or a band. It stands for root em—meaning its value is based on the text size of the root element. In most cases this just means the base text size, so you can change the .75em shown in Figure 6-11 to this:

font-size: .75rem;

This style makes the font size .75 of the base text size, not the inherited font size (as is the case with ems). The root element in HTML is actually the html element you find at the beginning of a web page. When using rem values, you can set the base text size of the html element and then use rem units to set text to a size relative to that. For example, you can set the base text size to 20 pixels like this:

html {
  font-size: 20px;
}

Then use rem units to create fonts in relation to that 20-pixel base text size. For example, to then make all paragraphs 15 pixels in size, add this style:

p {
  font-size: .75rem;
}

The rem unit avoids the problems associated with inherited percentage and em font sizes. Percentages and ems are based on the font size of their parent element. A percentage font size applied to multiple nested elements will compound, making each successive font size a percentage of the previous element’s font size. However, rem units are always based on the font size of the html element; in other words, a rem is always the same value even when nested inside elements that inherit different font sizes.

You should be aware, however, that while most browsers now understand the rem unit, Internet Explorer 8 and earlier don’t.

For more typographic sophistication, you can also turn to the font-variant property, which lets you set type as small-caps. In small cap style, lowercase letters appear as slightly downsized capital letters, like so: pomp and circumstance. While difficult to read for long stretches of text, small caps lend your page an old-world, bookish gravitas when used on headlines and captions. To create small-cap text:

font-variant: small-caps;

Just as with the font-size property, you can use pixels, ems, or percentages to set the size of line height:

line-height: 150%;

In general, percentages or ems are better than pixels, because they change according to, and along with, the text’s font-size property. If you set the line height to 10 pixels and then later adjust the font size to something much larger (like 36 pixels), because the line height remains at 10 pixels, your lines then overlap. However, using a percentage (150% percent, say) means the line-height spacing adjusts proportionally whenever you change the font-size value.

The normal line-height setting for a browser is 120%. So, when you want to tighten up the line spacing, use a value less than 120%; to spread lines apart, use a value greater than that.

CSS offers another measurement method specific to line height, which is simply a number. You write it like this:

line-height: 1.5;

There’s no unit (like em or px) after this value. The browser multiplies this number by the font size to determine the line height. So if the text is 1em and the line-height value is 1.5, then the calculated line height is 1.5em. In some cases, the effect may be no different from specifying a value of 1.5em or 150%.

However, because nested tags inherit the line-height value of their parent, you can often run into problems using an em or percentage value.

For example, say you set the line-height property of the <body> tag to 150%. All tags inside the page would inherit that value. However, it’s not the percentage that’s inherited; it’s the calculated line height. So, say the font size for the page is set to 10 pixels; 150 percent of 10 is 15 pixels. Every tag would inherit a line height of 15 pixels, not 150 percent. So if you happened to have a paragraph with large, 36 pixel text, then its line height—15 pixels—would be much smaller than the text, making the lines squish together in a hard-to-read mess.

In this example, instead of using a line-height of 150% applied to the <body> tag, you could have all tags share the same basic proportional line height by setting the line-height to 1.5. Every tag, instead of inheriting a precise pixel value for line height from the body style, simply multiplies its font size by 1.5. So in the above example of a paragraph with 36-pixel text, the line height would be 1.5 x 36 or 54 pixels.

In other words, it’s best to skip the ems and percentages for line heights and just use a simple numeric value.

You can use pixel and em values to set the first-line indent like this:

text-indent: 25px;

or

text-indent: 5em;

A pixel value is an absolute measurement—a precise number of pixels—while an em value specifies the number of letters (based on the current font size) you want to indent.

You can also use a percentage value, but with the text-indent property, percentages take on a different meaning than you’ve seen before. In this case, percentages aren’t related to the font size; they’re related to the width of the element containing the paragraph. For example, if the text-indent is set to 50%, and a paragraph spans the entire width of the web browser window, then the first line of the paragraph starts half the way across the screen. If you resize the window, both the width of the paragraph and its indent change. (You’ll learn more about percentages and how they work with the width of elements in the next section.)

font: italic bold small-caps 18px/1.5
Arial, Helvetica, sans-serif;

font: italic bold small-caps 1.5em Arial;
font: bold small-caps italic 1.5em Arial;

font: 1.5em Arial;

font: normal normal normal 1.5em/normal
Arial;

Many designers hate the space that every browser throws in between paragraphs. Before CSS, there was nothing you could do about it. Fortunately, you can now tap into the margin-top and margin-bottom properties to remove (or, if you wish, expand) that gap. To totally eliminate a top and bottom margin, write this:

margin-top: 0;
margin-bottom: 0;

To eliminate the gaps between all paragraphs on a page, create a style like this:

p {
  margin-top: 0;
  margin-bottom: 0;
}

As with text-indent, you can use pixel or em values to set the value of the margins. You can also use percentages, but as with text-indent, the percentage is related to the width of the paragraph’s containing element. Because it’s confusing to calculate the space above and below a paragraph based on its width, it’s easier to stick with either em or pixel values.

For a special effect, you can assign a negative value to a top or bottom margin. For example, a -10px top margin moves the paragraph up 10 pixels, perhaps even visually overlapping the page element above it. (See step 4 on Adding the Finishing Touches for an example.)

1. Launch your web browser and open the file 06→text.html (see Figure 6-19).

   It’s not much to look at—just a collection of headlines, paragraphs and a lone bulleted list—but you’ll turn it into something far better looking.

2. Open the file text.html in your favorite text editor.

   You’ll use a Google font as well as your own font files for this project. Start by adding a link to a Google font.

   

   Figure 6-19. The page begins with nothing but basic, drab, HTML.

3. In the <head> of the web page, click directly after the closing</title> tag. Hit Enter (Return), and then type:

   <link href="http://fonts.googleapis.com/css?family=Slabo+27px"
   rel="stylesheet">

   This line tells Google to send you a font named Slabo 27px—a serif display font. Next, you’ll link to an external style sheet that will hold the styles for this tutorial.

4. After the <link> tag you just added, type the following line of code:

   <link href="css/styles.css" rel="stylesheet">

   You’ve linked to an external style sheet in a folder named css. That folder holds an external style sheet and your web fonts.

5. Open the file css→styles.css. This style sheet has a basic set of reset styles (see Starting with a Clean Slate).

   If you preview the text.html file in a web browser now, you’ll see that all of the text on the page (headlines, paragraphs, and so on) looks nearly the same—in other words, all the basic HTML formatting the browser applied has been removed, so you can start with a clean slate.

   Next, you’ll add the necessary @font-face directives to load four web fonts. Actually, they are all the same font—PTSans—but include the bold, italic, and bold-italic variants.

6. Add the following code to the top of the styles.css file (before the reset styles). (If you’d rather not type all this code, you can open the at-font-face.css file in the tutorial folder and just copy and paste that code into the styles.css file.)

   @font-face {
     font-family: 'PTSans';
     src: url('fonts/PTSansRegular.woff2') format('woff2'),
          url('fonts/PTSansRegular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
   }
   @font-face {
     font-family: 'PTSans';
     src: url('fonts/PTSansItalic.woff2') format('woff2'),
          url('fonts/PTSansItalic.woff') format('woff');
     font-weight: normal;
     font-style: italic;
   }
   @font-face {
     font-family: 'PTSans';
     src: url('fonts/PTSansBold.woff2') format('woff2'),
          url('fonts/PTSansBold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
   }
   @font-face {
     font-family: 'PTSans';
     src: url('fonts/PTSansBoldItalic.woff2') format('woff2'),
          url('fonts/PTSansBoldItalic.woff') format('woff');
     font-weight: bold;
     font-style: italic;
   }

   In a nutshell, you’ve created a new font family named PTSans. You’ll be able to use it in any new styles you create. You’re using the method described on The Easy Way to Add Bold and Italic to add the bold-italic variants of the font. This method means that whenever you apply a normal bolded tag to text (like a headline, or the <strong> tag), the browser will automatically swap in the bold version of the font.

   You placed the @font-face directive at the beginning of the external style sheet. That’s not a requirement, though—it just feels neater to put all the fonts at the top and all of the regular styles after.

   Next, you’ll create a style that defines some general properties for all text on the page.

7. At the bottom of the style sheet, after the reset styles, add a new line and type html {.

   This is a basic tag selector that applies to the <html> tag. As discussed in Chapter 4, other tags inherit the properties of this tag. You can set up some basic text characteristics like font, color, and font size for later tags to use as their starting point.

8. Press Enter again, and then add the following two properties:

   font-family: PTSans, Arial, sans-serif;
   font-size: 62.5%;

   These two instructions set the font to PTSans (or Arial if the browser can’t download PTSans), and the font size to 62.5 percent.

   Note

   Why set the page’s base font to 62.5 percent? It just so happens that 62.5 percent times 16 pixels (the normal size of text in most web browsers) equals 10 pixels. With 10 pixels as a starting point, it’s easy to compute what other text sizes will look like on the screen. For example, 1.5em would be 1.5 x 10 or 15 pixels. 2em is 20 pixels, and so on—easy multiples of ten. You can also use the rem unit (see Rems), which is similar to the em, but avoids the problem associated with nested inherited em units.

9. Complete this style by pressing Enter and typing a closing bracket to mark the end of the style.

   At this point, your completed style should look like this:

   html {
     font-family: PTSans, Arial, sans-serif;
     font-size: 62.5%;
   }

   Your style sheet is complete.

10. Save the styles.css file, and open the text.html file in a web browser to preview your work.

    The text on the page changes font…it also gets really small. Don’t worry, that’s the 62.5 percent font size you set in step 8. That’s just the starting point for all text, and you’ll easily increase the size of text by defining em sizes for the other tags.

1. Return to your text editor and the styles.css file. Click at the end of the closing brace of the HTML tag selector, add a new line, and then type .main h1 {.

   This is a descendant selector (Styling Tags Within Tags). It provides more specific direction than a basic HTML tag selector. In this case, the selector tells the web browser “apply the following formatting to any <h1> tag inside another tag with the class name main.” If you look at the page’s HTML, you’ll see that there’s a <div> tag with a class of main (<div class=“main”>). As you’ll learn later, it’s very common in CSS-based designs to group HTML tags inside of <div> tags. You can then position individual <div> tags to create columns and other complex page layouts. It’s also common to use descendant selectors like this one to pinpoint your formatting choices by affecting just the tags in certain areas of the page.

2. Hit Enter, and then type these three CSS properties:

   color: rgb(249,212,120);
   font-family: "Arial Black", Arial, Helvetica, sans-serif;
   font-size: 4em;

   You’ve just changed the color of the <h1> tag as well as the font. This time, instead of using a web font, you’re specifying a font that visitors must have installed on their computers. Many computers have Arial Black, but if the one visiting this page doesn’t, it will fall back to Arial or Helvetica or just a generic sans serif. You’ve also set the font size to 4em, which for most browsers (unless the visitor has tweaked his browser’s font settings) comes out to 40 pixels tall. That’s all thanks to the 62.5% size you set for the body back at step 7. That smooth move made the base font size 10 pixels tall, so 4 x 10 comes out to 40 pixels. Next you’ll add a text shadow to the headline.

3. Complete this style by hitting Enter, adding the code in bold below (don’t forget the closing brace):

   .main h1 {
     color: rgb(249,212,120);
     font-family: "Arial Black", Arial, Helvetica, sans-serif;
     font-size: 4em;
     text-shadow: 4px 4px 6px rgba(0,0,0,.75);
   }

   Here, you’ve added a text shadow (Adding Text Shadow), which is offset 4 pixels to the right, 4 pixels below, and is feathered out 6 pixels. In addition, you’re using the RGBA color (Rgba) to set the shadow to black with 75 percent transparency.

4. Save the file and preview the text.html file in a web browser.

   Next, spruce up the appearance of the other headings and paragraphs.

   Note

   Once a browser opens a file, it saves it in a type of easily accessible storage called a cache. If the browser needs that same file again, it plucks the cached version instead of wasting time downloading the file a second time. However, the cache can be a pain when designing locally. The browser may load the old version of your external style sheet from the cache instead of loading the one with your new changes. If the web page doesn’t seem to get updated when you update an external style sheet, pressing F5 or Ctrl-Shift-R (⌘-Shift-R) will usually force the browser to load the new version of the file.

5. Return to your text editor and the styles.css file. Click after the closing brace of the .main h1 tag, hit Enter, and add the following style:

   .main h2 {
     font: normal 3.5em "Slabo 27px", Garamond, Times, serif;
     color: rgb(37,76,143);
     border-bottom: 1px solid rgb(200,200,200);
     margin-top: 25px;
   }

   Here you have another descendant selector that only applies to <h2> tags inside another tag with the class main (you’re probably getting the hang of these now). The font property used here is shorthand that combines the more long-winded font-weight, font-size, and font-family (see the box on A Shorthand Method for Text Formatting). In other words, this one line makes the headline bold, 3.5ems tall, and specifies the Google font you linked to earlier.

   In addition, this style adds a decorative border below the headline and a bit of space between the headline and the tag above it (in other words, it adds some space between the “CSS The Missing Manual” and the “Exploring Typographic Possibilities” headlines). You’ll read more about borders and margins in the next chapter.

   Time to tackle more headlines.

6. Add another style below the one you added in the last step:

   .main h3 {
     color: rgb(241,47,6);
     font-size: 1.9em;
     font-weight: bold;
     text-transform: uppercase;
     margin-top: 25px;
     margin-bottom: 10px;
   }

   This style dishes out some of the usual formatting—color, size, boldness—and also uses the text-transform property (Capitalizing) to make all of the text in the <h3> headlines uppercase. Finally, it adds a bit of space above and below the headlines by using the margin properties.

   Next, you’ll improve the look of the paragraphs.

7. Add one more style to the page:

   .main p {
     font-size: 1.8em;
     line-height: 1.5;
     margin-left: 150px;
     margin-right: 50px;
     margin-bottom: 10px;
   }

   This style introduces the line-height property, which sets the spacing between lines. The number 1.5 is a multiplier: It calculates the line height by multiplying the font size (1.75em) and 1.5. Basically, it sets the line height to 1.5x or 150 percent of the font size. This adds a little more space between lines in a paragraph than you’d normally see in a web browser. This extra breathing room gives the text a lighter, airier quality and makes the sentences a little easier to read (but only if you speak Latin).

   The style also increases the font size to 1.8em (18 pixels for most browsers) and indents the paragraph from the left and right edges of the page. You’ll notice that there’s a lot of typing going on for the margin properties—fortunately, as you’ll read on Margin and Padding Shorthand in the next chapter, there’s a margin shortcut property that requires much less typing to control the four margins of an element.

   Time to try out a more advanced selector type.

8. Add the following style to your style sheet:

   .main p::first-line {
     font-weight: bold;
     color: rgb(153,153,153);
   }

   The ::first-line pseudo-element (Styling Paragraph Parts) affects just the first line of a paragraph. In this case, just the first line of text for each of the paragraphs inside the main div will be bold and gray.

9. Save the styles.css file and open the text.html file in a web browser to preview your work.

   At this point, the page should look like Figure 6-20.