Cascading Style Sheets—CSS for short—give you creative control over the layout and design of your web pages. Using CSS, you can dress up your site’s text with eye-catching headlines, drop caps, and borders, just like the ones in glossy magazines. You can also arrange images with precision, create columns and banners, and highlight your links with dynamic rollover effects. You can even make elements fade in or out of view, move objects around the page, or make a button slowly change colors when a visitor mouses over it.
Anything that can do all that must be pretty complicated, right? Au contraire! The whole idea behind CSS is to streamline the process of styling web pages. In the next few pages, you’ll learn about the basics of CSS. In Chapter 1, you’ll get right to work creating a CSS-powered web page.
CSS works with HTML, but it’s not HTML. It’s a different language altogether. While HTML provides structure to a document by organizing information into headers, paragraphs, bulleted lists, and so on, CSS works hand-in-hand with the web browser to make HTML look good.
For example, you might use HTML to turn a phrase into a top-level heading, indicating that it introduces the content on the rest of the page. However, you’d use CSS to format that heading with, say, big and bold red type and position it 50 pixels from the left edge of the window. In CSS, that text formatting comprises a style—a rule describing the appearance of a particular portion of a web page. A style sheet is a set of these styles.
You can also create styles specifically for working with images. For instance, a style can align an image along the right edge of a web page, surround the image with a colorful border, and place a 50-pixel margin between the image and the surrounding text.
Once you’ve created a style, you can apply it to text, images,
headings, or other elements on a page. For example, you can select a
paragraph of text and apply a style to instantly change the text’s size,
color, and font. You can also create styles for specific HTML tags, so, for example, all first-level headings
(<h1> tags) in your site are
displayed in the same style, no matter where they appear.
Before CSS, web designers were limited to the layout and styling options of HTML. And if you surfed the Web in 1995, then you understand the emphasis on limited. HTML still forms the foundation of all pages on the World Wide Web, but it’s simply not a design tool. Sure, HTML provides basic formatting options for text, images, tables, and other web page elements, and patient, meticulous webmasters can make pages look pretty good using only HTML. But the result is often sluggish web pages laden with clunky code.
CSS, in contrast, offers the following advantages:
Style sheets offer far more formatting choices than HTML. With CSS, you can format paragraphs as they appear in a magazine or newspaper (the first line indented and no space between each paragraph, for example) and control the leading (the space between lines of type in a paragraph).
When you use CSS to add a background image to a page, you get to decide whether and how it tiles (repeats). HTML can’t even begin to do that.
Even better, CSS styles take up much less space than HTML’s formatting options, such as the much-hated
<font>tag. You can usually trim a lot of kilobytes from text-heavy web pages by using CSS. As a result, your pages look great and load faster.Style sheets also make updating your site easier. You can collect all your styles into a single external style sheet that’s linked to every page in your site. Then, when you edit a style, that change immediately ripples through your site wherever that style appears. You can completely change the appearance of a site just by editing a single style sheet.
This book assumes you’ve already got some knowledge of HTML (and
maybe some CSS experience as well). Perhaps you’ve built a site or two
(or at least a page or two) and have some familiarity with the sea of
tags—<html>, <p>, <h1>, <table>, and so on—that make up the
Hypertext Markup Language. CSS can’t do anything without HTML, so to
move forward you need to know how to create a web page by using basic HTML.
If you’ve used HTML in the past to create web pages, but feel like your knowledge is a bit rusty, the next section provides a basic refresher.
Tip
If you’re just getting your feet wet learning HTML, then check out these free online tutorials: HTML Dog (www.htmldog.com/guides/htmlbeginner) and W3Schools (www.w3schools.com/html). If you’re a printed page fan, then you may want to pick up a copy of Creating a Website: The Missing Manual, Third Edition or Head First HTML and CSS, Second Edition (both O’Reilly).
HTML (Hypertext Markup Language) uses simple commands called tags to define the various parts of a web page. For example, this HTML code creates a simple web page:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Hey, I am the title of this web page</title> </head> <body> <p>Hey, I am a paragraph on this web page.</p> </body> </html>
It may not be exciting, but this example has all the basic
elements a web page needs. You’ll notice something called a
doctype declaration at the very beginning of the
code, followed by <html> (with
the brackets), a head, a body, and some stuff—the actual page
contents—inside the body, ending in a final </html>.
All web pages begin with a doctype—a line of code that identifies what flavor of HTML you used to write the page. Two doctypes have been used for years—HTML 4.01 and XHTML 1.0—and each of those doctypes has two styles: strict and transitional. For example, the HTML 4.01 transitional doctype looks like the following (the other doctypes for HTML 4.01 and XHTML 1.0 look similar):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. w3.org/TR/html4/loose.dtd">
Note
For examples of all various doctypes, visit www.webstandards.org/learn/reference/templates.
If you look at the code for the sample HTML page in this section, you’ll see that it uses a much more succinct doctype:
<!doctype html>
That’s HTML5’s new—and simpler—doctype. HTML5 is intended to be easier to use and more streamlined than its predecessors. This book uses the HTML5 doctype, which is supported by every popular browser (even the old Internet Explorer 6). And because HTML5 is the future of the Web, there’s no reason to use the older doctypes any longer.
Note
Just because the HTML doctype works in older browsers doesn’t mean that those browsers understand all HTML5 tags or features. Internet Explorer 8 and earlier, for example, don’t recognize the new HTML5 tags. To style tags with CSS for those versions of IE, you have to employ a little JavaScript. You’ll learn how to get older browsers up to speed on The Importance of the Doctype.
But no matter which doctype you prefer, the important thing is to always use one. Without it, your pages will look different depending on your visitor’s browser, since browsers display CSS differently if they don’t have a doctype for guidance.
Each doctype requires you to write your HTML in a certain way. For example, the tag for a line break looks like this in HTML 4.01:
<br>
But in XHTML, it looks like this:
<br />
And there’s another advantage of HTML5: it accepts either one.
In the simple HTML example on HTML: The Barebones Structure, as in the HTML code of any web page, most commands appear in pairs that surround a block of text or other commands. Sandwiched between brackets, these tags are instructions that tell a web browser how to display the web page. Tags are the “markup” part of the Hypertext Markup Language.
The starting (opening) tag of each pair tells the browser where the instruction begins, and the ending tag tells it where the instruction ends. Ending or closing tags always include a forward slash (/) after the first bracket symbol (<).
On any web page, you’ll usually find at least these four elements.
The first line of a web page is the DOCTYPE declaration, discussed in the previous section.
The
<html>tag appears once at the beginning of a web page and again (with an added forward slash) at the end:</html>. This tag tells a web browser that the information contained in this document is written in HTML, as opposed to some other language. All the contents of a page, including other tags, appear between the opening and closing<html>tags.If you were to think of a web page as a tree, the
<html>tag would be its root. Springing from the trunk are two branches that represent the two main parts of any web page: the head and the body.The head of a web page contains the title of the page (“Izzie’s Mail-Order Pencils”). It may also include other, invisible information, like a page description, that browsers and search engines use. You surround the head section with opening and closing
<head>tags.In addition, the head section can include information that browsers use to format the page’s HTML and to add interactivity. As you’ll see, the
<head>section can contain CSS code (like the kind you’ll learn to write in this book) or a link to another file containing CSS information.The body, as set apart by its surrounding
<body>tags, contains all the content that appears inside a browser window—headlines, text, pictures, and so on.
Within the <body> tag,
you commonly find tags like these:
You tell a web browser where a paragraph of text begins with a
<p>(opening paragraph tag), and where it ends with a</p>(closing paragraph tag).The
<strong>tag emphasizes text. When you surround some text with it and its partner tag,</strong>, you get boldface type. The HTML snippet<strong> Warning!</strong>tells a web browser to strongly emphasize the word “Warning!”The
<a>tag, or anchor tag, creates a hyperlink in a web page. When clicked, a hyperlink—or link—can lead anywhere on the Web. You tell the browser where the link points by putting a web address inside the<a>tags. For instance, you can type<a href=“http://www.missingmanuals.com”>Click here!</a>.The browser knows that when your visitor clicks the words “Click here!” it should go to the Missing Manual website. The
hrefpart of the tag is called an attribute, and the URL (the Uniform Resource Locator or web address) is the value. In this example,http://www.missingmanuals.comis the value of thehrefattribute.
Like any technology, HTML has evolved over time. Although standard
HTML has served its purpose well, it’s always been a somewhat sloppy
language. Among other things, it lets you use uppercase, lowercase, and
mixed-case letters in tags (<body> and <BODY> are both correct, for example)
and permits unclosed tags (so you can use a <p> tag without a closing </p> tag to create a paragraph). While
this flexibility may make page-writing easier, it also makes life more
difficult for web browsers, smart phones, and other technologies that
interact with data on the Web. Additionally, HTML doesn’t work with one
of the hottest Internet languages: XML, or Extensible Markup Language.
To keep pace with the times, an improved version of HTML, called XHTML, was introduced back in 2000, and you’ll find it used frequently on many sites (in fact, XHTML is just an “XML-ified” version of HTML). XHTML was seen as the future (back in 2000), but has since been supplanted by HTML5. While web browsers still understand XHTML (and probably will for a long time), this book doesn’t include it.
When the W3C—the group responsible for many Internet technologies—introduced XHTML as an intermediate step in the transition to XML as the prime language of the Web, the web development community heralded it as the next big thing. History has shown that prediction to be a bit grandiose. As it turns out, the complexity of moving to XML kept browser manufacturers from following the XML path the World Wide Web Consortium laid down. Instead, the W3C closed down the XHTML working group in favor of HTML5—a new version of HTML that moves away from XML and back to HTML, albeit an enhanced version. With the support of all browser manufacturers, HTML5 is the new next big thing. Some browsers, including Google Chrome and Firefox, already recognize parts of HTML5, and even mainstream news outlets like Time, Newsweek, and CNN drop “HTML5” into their technology reporting.
HTML5 isn’t some radically new technology. In fact, unlike XHTML,
which was intended to foster a new way to build web pages, HTML5 is
about making sure the Web continues to work the way it always has. Most
of the basics of HTML are still in place. Also, HTML5 adds a few new
elements, meant to support the way web designers currently build
websites. For example, in HTML5, the <header> tag can contain the content
you’d usually find at the top of a page, such as a logo and site-wide
navigation links; the new <nav>
tag encloses the set of links used to navigate a site; and the <footer> tag houses the stuff you
usually put at the bottom of a page, like legal notices, email contacts,
and so on.
In addition, HTML5 adds new tags that let you insert video and audio into a page, and new form tags that add sophisticated elements, like sliders and pop-up date pickers, as well as built-in browser support for form validation (which ensures visitors correctly fill out your forms). Unfortunately, browser support for these new features isn’t consistent, and it’s difficult to use the new tags without some pretty elaborate workarounds.
Although HTML5 may not be entirely ready for primetime, there’s no reason not to start using the HTML5 doctype and even some basic HTML5 now. (You’ll need to give Internet Explorer 8 and earlier a bit of help, though; see the box on Getting IE 8 to Understand HTML5.) You’ll find HTML5 throughout this book, especially in the next chapter.
To create web pages made up of HTML and CSS, you need nothing more than a basic text editor like Notepad (Windows) or TextEdit (Mac). But after typing a few hundred lines of HTML and CSS, you may want to try a program better suited to working with web pages. This section lists some common programs, some free and some you have to buy.
Note
There are literally hundreds of tools that can help you create web pages, so the following isn’t a complete list. Think of it as a greatest-hits tour of the most popular programs that CSS fans are using today.
There are plenty of free programs out there for editing web pages and style sheets. If you’re still using Notepad or TextEdit, give one of these a try. Here’s a short list to get you started:
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.
TextWrangler (Mac; www.barebones.com/products/textwrangler). This free software is actually a pared-down version of BBEdit, the sophisticated, well-known Mac text editor. TextWrangler doesn’t have all of BBEdit’s built-in HTML tools, but it does include syntax highlighting, FTP (so you can upload files to a web server), and more.
Commercial website development programs range from inexpensive text editors to complete website construction tools with all the bells and whistles:
EditPlus (Windows; www.editplus.com) is an inexpensive ($35) text editor that includes syntax highlighting, FTP, auto-complete, 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 relatively new text editor. It’s beloved by many web coders.
Dreamweaver (Mac and Windows; www.adobe.com/products/dreamweaver) is a visual web page editor ($399). 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 CS6: The Missing Manual for the full skinny on how to use this powerful program.
Expression Web 2 (Windows; www.microsoft.com/expression) is Microsoft’s entry in the web design field ($149). It includes many professional web design tools, including excellent CSS tools.
Note
The various types of software discussed in this section are general-purpose programs that let you edit both HTML/XHTML and CSS. With them, you need to learn only one program for your web development needs. But if you already have a beloved HTML/XHTML editor that doesn’t do CSS, then you may want to check out one of the CSS-specific editing programs covered in Appendix B.
The World Wide Web is really easy to use. After all, grandmothers in Boise and first graders in Tallahassee log onto the Web every day. Unfortunately, the rules that govern how the Web works aren’t so easy to understand. The computer scientists and other techie types who write the official documentation aren’t interested in explaining their concepts to the average Joe (or Joanne). Just check out www.w3.org/TR/css3-transforms to get a taste of the technical mumbo-jumbo these geeks speak.
People just learning CSS often don’t know where to begin. And CSS’s finer points can trip up even seasoned web pros. The purpose of this book, then, is to serve as the manual that should have come with CSS. In this book’s pages, you’ll find step-by-step instructions for using CSS to create beautiful web pages.
CSS3: The Missing Manual is designed to help readers at every technical level. To get the most out of this book, you should know a sampling of HTML and maybe even CSS. So if you’ve never built a web page before, then check out the tutorial that starts on Tutorial: Creating Your First Styles. The primary discussions in these chapters are written for advanced-beginners or intermediates. But if you’re new to building web pages, special boxes called “Up to Speed” provide the introductory information you need to understand the topic at hand. If you’re an advanced web page jockey, on the other hand, then keep your eye out for similar boxes called “Power Users’ Clinic.” They offer more technical tips, tricks, and shortcuts for the experienced computer fan.
Note
This book periodically recommends other CSS books, covering topics that are too specialized or tangential for a manual. Sometimes the recommended titles are from Missing Manual series publisher O’Reilly—but not always. If there’s a great book out there that’s not part of the O’Reilly family, we’ll let you know about it.
CSS3: The Missing Manual is divided into five parts; the first four each contain several chapters while the last part contains appendixes:
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 placement of elements on a page. You’ll learn how to create common designs (like 2- and 3-column layouts), how to add sidebars, as well as 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.
Part 4, teaches you how to make web pages look good when printed and covers advanced techniques for using CSS more effectively and efficiently.
Part 5, provides 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 last appendix covers tools and resources for creating and using CSS.
To use this book, and indeed to use a computer, you need to know a few basics. You should be familiar with these terms and concepts:
Clicking. This book gives you three kinds of instructions that require you to use your computer’s mouse or trackpad. To click means to point the arrow cursor at something on the screen and then—without moving the cursor at all—to press and release the clicker button on the mouse (or laptop trackpad). A right-click is the same thing using the right mouse button. (On a Mac, press Control as you click if you don’t have a right mouse button.)
To double-click means to click twice in rapid succession, again without moving the cursor at all. And to drag means to move the cursor while pressing the button.
When you’re told to ⌘click something on the Mac, or Ctrl-click something on a PC, you click while pressing the ⌘ or Ctrl key (both of which are near the space bar).
Menus. The menus are the words at the top of your screen or window: File, Edit, and so on. Click one to make a list of commands appear, as though they’re written on a window shade you’ve just pulled down. This book assumes that you know how to open a program, surf the Web, and download files. You should know how to use the Start menu (Windows) or the Dock or
menu (Mac), as well as the Control Panel (Windows) or
System Preferences (Mac OS X).Keyboard shortcuts. Every time you take your hand off the keyboard to move the mouse, you lose time and potentially disrupt your creative flow. That’s why many experienced computer fans use keystroke combinations instead of menu commands wherever possible. When you see a shortcut like Ctrl+S (⌘S) (which saves changes to the current document), it’s telling you to hold down the Ctrl or ⌘ key, and, while it’s down, type the letter S, and then release both keys.
Throughout this book, and throughout the Missing Manual series, you’ll find sentences like this one: “Open the System→Library→ Fonts folder.” That’s shorthand for a much longer instruction that directs you to open three nested folders in sequence, like this: “On your hard drive, you’ll find a folder called System. Open that. Inside the System folder window is a folder called Library; double-click it to open it. Inside that folder is yet another one called Fonts. Double-click to open it, too.”
Similarly, this kind of arrow shorthand helps to simplify the business of choosing commands in menus, as shown in Figure 1.
Figure 1. In this book, arrow notations help simplify menu instructions. For example, View→Text Size→Increase is a more compact way of saying, “From the View menu, choose Text Size; from the submenu that then appears, choose Increase.” (By the way, when you see a keystroke combination after a menu command, like Ctrl++ here, that means you can press those keys as a shortcut.)
As the owner of a Missing Manual, you’ve got more than just a book to read. Online, you’ll find example files so you can get some hands-on experience, as well as tips, articles, and maybe even a video or two. You can also communicate with the Missing Manual team and tell us what you love (or hate) about the book. Head over to www.missingmanuals.com, or go directly to one of the following sections.
This book is designed to get your work onto the Web faster and more professionally. It’s only natural, then, that half the value of this book lies on the Web.
As you read the book’s chapters, you’ll encounter a number of living examples—step-by-step tutorials that you can build yourself, using raw materials (like graphics and half-completed web pages) that you can download from www.sawmac.com/css3/. You may not gain very much by simply reading these step-by-step lessons while relaxing in your porch hammock. But if you work through them at the computer, you’ll discover that these tutorials give you insight into the way professional designers build web pages.
You’ll also find, in this book’s lessons, the URLs of the finished pages, so that you can compare your work with the final result. In other words, you won’t just see pictures of how the web pages should look; you’ll find the actual, working web pages on the Internet.
At www.missingmanuals.com, you’ll find articles, tips, and updates to CSS3: The Missing Manual. In fact, we invite and encourage you to submit such corrections and updates yourself. In an effort to keep the book as up-to-date and accurate as possible, each time we print more copies of this book, we’ll make any confirmed corrections you’ve suggested. We’ll also note such changes on the website, so that you can mark important corrections into your own copy of the book, if you like. (Go to www.missingmanuals.com/feedback, choose the book’s name from the pop-up menu, and then click Go to see the changes.)
Also on our Feedback page, you can get expert answers to questions that come to you while reading this book, write a book review, and find groups for folks who share your interest in CSS.
We’d love to hear your suggestions for new books in the Missing Manual line. There’s a place for that on missingmanuals.com, too. And while you’re online, you can also register this book at www.oreilly.com (you can jump directly to the registration page by going here: www.oreilly.com/register). Registering means we can send you updates about this book, and you’ll be eligible for special offers like discounts on future editions of CSS3: The Missing Manual.
In an effort to keep this book as up-to-date and accurate as possible, each time we print more copies, we’ll make any confirmed corrections you’ve suggested. We also note such changes on the book’s website, so you can mark important corrections into your own copy of the book, if you like. Go to oreil.ly/css3_mm to report an error and view existing corrections.
Safari® Books Online is an on-demand digital library that lets you easily search over 7,500 technology and creative reference books and videos to find the answers you need quickly.
With a subscription, you can read any page and watch any video from our library online. Read books on your cellphone and mobile devices. Access new titles before they’re available for print, and get exclusive access to manuscripts in development and post feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features.
Get CSS3: The Missing Manual, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
