GRANNELL
SUMNER
SYNODINOS
• The basics of HTML5 and CSS3 web design
• The newest standards implemented in Internet Explorer, Firefox, Opera, Safari, and Chrome
• Effective layouts, tables, images, navigation, forms, and typography
• Cross-browser issues, including quirks, bugs, and hacks in all the major browsers
• Real-world examples of different styles of web front ends
The Essential Guide to
'
HTML5 and CSS3 Web Design
£:
y
RELATED TITLES
L
BC3 ESSENTIAL IdlJIJÿftl
Authors Craig Grannell, Victor Sumner, and Dionysios Synodinos start you off with a
brief introduction to web design before diving into HTML5 and CSS3 basics, code reuse,
and other best practices. Then they focus on the most important aspects of a successful
website: typography, images, navigation, tables, layouts, forms and feedback (including
ready-made PHP scripts), browser quirks, hacks, and bugs.
:;.]! o 1
i§1:;
IKIIIIIi
II
II
II
0
Throughout, engaging case studies help you gain invaluable firsthand experience with
important design elements, including all the most popular website archetypes: a blog,
a storefront, a corporate homepage, and an online gallery. You’ll also appreciate the
detailed reference appendixes covering HTML, CSS, color references, entities, and more.
I
I
II
I
HU1! iH
You’ll find The Essential Guide to HTML5 and CSS3 Web Design invaluable at any stage of
your career. If you’re just starting out, this helpful guide quickly teaches you the basics.
If you’re an experienced developer, it will serve as your ideal reference on techniques,
attributes, and other details you may not have used yet.
B
RP[!
ij
J1
u
msam
illl III
r»
rfS
. .in
%*
SHELVING CATEGORY
•.in
R
WEB DESIGN/HTML
US $34.99
Mac/PC compatible
www.apress.com
£X-
111
Hi
MjjTJB
ill
CSS3 Web Design
iTi
and
The Essential Guide to HTML5 and CSS3 Web Design contains everything you need to
design great websites that are standards-compliant, user-friendly, and aesthetically pleasing. It has been fully revised from its critically acclaimed first edition and now includes
the new features and best practices of HTML5 and CSS3.
HTML5
ft . 7 f
• Approaches for user-friendly and accessible websites
. . r.
7
BBS
www.freepdf-books.com
For your convenience Apress has placed some of the front
matter material after the index. Please use the Bookmarks
and Contents at a Glance links to access them.
www.freepdf-books.com
Contents at a Glance
About the Authors .................................................................................................... xiii
About the Technical Reviewer................................................................................. xiv
About the the Cover Image Designer....................................................................... xv
Acknowledgments .................................................................................................... xvi
Introduction .............................................................................................................. xvii
Chapter 1: An Introduction to Web Design ............................................................... 1
Chapter 2: Web Page Essentials .............................................................................. 29
Chapter 3: Working With Type.................................................................................. 63
Chapter 4: Working With Images............................................................................ 119
Chapter 5: Using Links and Creating Navigation ................................................. 145
Chapter 6: Tables: How Nature (and the W3C) Intended ..................................... 227
Chapter 7: Page Layouts with CSS ........................................................................ 249
Chapter 8: Getting User Feedback ......................................................................... 307
Chapter 9: Dealing with Browser Quirks ............................................................... 343
Chapter 10: Putting Everything Together.............................................................. 357
Appendix A: An HTML5 reference.......................................................................... 387
Appendix B: Web Color Reference ........................................................................ 437
Appendix C: ENTITES reference ............................................................................ 441
Appendix D: CSS Reference ................................................................................... 459
Index.......................................................................................................................... 485
iv
www.freepdf-books.com
Introduction
The Web is an ever-changing, evolving entity, and it’s easy to get left behind. As designers and writers, we
see a lot of books on web design, and although many are well written, few are truly integrated, modular
resources that anyone can find useful in their day-to-day work. Most web design books concentrate on a
single technology (or, commonly, a piece of software), leaving you to figure out how to put the pieces
together.
This book is different
The Essential Guide to HTML5 and CSS3 Web Design provides a modern, integrated approach to web
design. Each of the chapters looks at a specific aspect of creating a web page, such as formatting type,
working with images, creating navigation, and creating layout blocks. In each case, relevant technologies
are explored in context and at the appropriate times, just like in real-world projects; for example, markup is
explored along with associated CSS and JavaScript, rather than each technology being placed in separate
chapters, and visual design ideas are discussed so you can get a feel for how code affects page layouts.
Dozens of practical examples are provided, which you can use to further your understanding of each
subject. This highly modular and integrated approach means you can dip in and out of the book as you
need, crafting along the way a number of web page elements that you can use on countless sites in the
future.
Because the entire skills gamut is covered—from foundation to advanced—this book is ideal for beginners
and longtime professionals alike. If you’re making your first move into standards-based web design, the
“ground floor” is covered, rather than an assumption being made regarding your knowledge. However,
contemporary ideas, techniques, and thinking are explored throughout, ensuring that the book is just as
essential for the experienced designer wanting to work on CSS layouts or for the graphic designer who
wants to discover how to create cutting-edge websites.
This book’s advocacy of web standards, usability, and accessibility with a strong eye toward visual design
makes it of use to technologists and designers alike, enabling everyone to build better websites. For those
moments when a particular tag or property value slips your mind, this book provides a comprehensive
reference guide that includes important and relevant HTML5 elements and attributes, HTML5 entities, web
colors, and CSS 3 properties and values.
Code Examples
Remember that you can also download files associated with this book from www.apress.com—just find the
book and follow its instructions to access downloads and other associated resources.
To make it easier to work through the exercises, each one has an introductory box that lists where you can
find any required files and the completed files within the downloadable file archive. A short overview of
what you’ll learn is also included.
xvii
www.freepdf-books.com
Chapter 1
An Introduction to Web Design
In this chapter:
Introducing the Internet and web design
Working with web standards
Working with HTML
Understanding and creating CSS rules
Creating web page boilerplates
1
www.freepdf-books.com
Chapter 1
Organizing web page content
A brief history of the Internet
Even in the wildest dreams of science-fiction and fantasy writers, few envisioned anything that offers the
level of potential that the Internet now provides for sharing information on a worldwide basis. For both
businesses and individuals, the Internet is now the medium of choice, largely because it enables you to
present your wares to the entire world on a 24/7 basis. But the technology’s origins were more ominous
than and very different from the ever-growing, sprawling free-for-all that exists today.
In the 1960s, the American military was experimenting with methods by which the U.S. authorities might
be able to communicate in the aftermath of a nuclear attack. The suggested solution was to replace pointto-point communication networks with one that was more akin to a net. This meant information could find
its way from place to place even if certain sections of the network were destroyed. Despite the project
eventually being shelved by the Pentagon, the concept itself lived on, eventually influencing a network that
connected several American universities.
During the following decade, this fledgling network went international and began opening itself up to the
general public. The term Internet was coined in the 1980s, which also heralded the invention of
Transmission Control Protocol/Internet Protocol (TCP/IP), the networking software that makes possible
communication between computers running on different systems. During the 1980s, Tim Berners-Lee was
also busy working on HTML, his effort to weld hypertext to a markup language in an attempt to make
communication of research between himself and his colleagues simpler.
Despite the technology’s healthy level of expansion, the general public remained largely unaware of the
Internet until well into the 1990s. By this time, HTML had evolved from a fairly loose set of rules—browsers
having to make assumptions regarding coder intent and rendering output—to a somewhat stricter set of
specifications and recommendations. This, along with a combination of inexpensive hardware, the advent
of highly usable web browsers such as Mosaic (see the following image), and improved communications
technology, saw an explosion of growth that continues to this day.
Initially, only the largest brands dipped their toes into these new waters, but soon thousands of companies
were on the Web, enabling customers all over the globe to access information and, later, to shop online.
Home users soon got in on the act, once it became clear that the basics of web design weren’t rocket
science and that, in a sense, everyone could do it—all you needed was a text editor, an FTP client, and
some web space. Designers soon got in on the act, increasingly catered for by new elements within HTML;
Cascading Style Sheets (CSS), which took a while to be adopted by browsers but eventually provided a
means of creating highly advanced layouts for the Web; and faster web connections, which made mediarich sites accessible to the general public without forcing them to wait ages for content to download.
Therefore, unlike most media, the Web is truly a tool for everyone, and in many countries, the Internet has
become ubiquitous. For those working in a related industry, it’s hard to conceive that as recently as the
mid-1990s relatively few people were even aware of the Internet’s existence!
2
www.freepdf-books.com
An Introduction to Web Design
So, from obscure roots as a concept for military communications, the Internet has evolved into an essential
tool for millions of people, enabling them to communicate with each other, research and gather
information, telecommute, shop, play games, and become involved in countless other activities on a
worldwide basis.
Why create a website?
Before putting pen to paper (and mouse to keyboard), it’s important to think about the reason behind putting
a site online. Millions already exist, so why do you need to create one yourself? Also, if you’re working for
a company, perhaps you already have plenty of marketing material, so why do you need a website as
well?
I should mention here that I’m certainly not trying to put you off—far from it. Instead, I’m trying to reinforce
the point that planning is key in any web design project, and although some people swear that “winging it”
is the best way to go, most such projects end up gathering virtual dust online. Therefore, before doing
anything else, think through why you should build a website and what you’re trying to achieve.
Companies and individuals alike have practical and commercial reasons for setting up a website. A
website enables you to communicate with like-minded individuals or potential clients on a worldwide basis.
If you’re a creative talent of some kind, you can use a website to showcase your portfolio, offering online
photographs, music tracks for download, or poetry. If you fancy yourself as a journalist, a blog enables you
to get your opinion out there. If you own or work for a business, creating a website is often the most
3
www.freepdf-books.com
Chapter 1
efficient means of marketing your company. And even if you just have a hobby, a website can be a great
way of finding others who share your passion—while you may be the only person in town who likes a
particular movie or type of memorabilia, chances are there are thousands of people worldwide who think
the same, and a website can bring you all together. This is perhaps why the paper fanzine has all but died,
only to be reborn online, where development costs are negligible and worldwide distribution is a cinch.
In practical terms, a website exists online all day, every day (barring the odd hiccup with ISPs), which
certainly isn’t the case with printed media, which is there one minute and in the recycle trash the next.
Distribution is less expensive than sending out printed material—a thousand-page website can be hosted
for $10 per month or less, but sending a thousand-page document to one person (let alone a thousand or
several thousand) may cost more than that. Likewise, development (particularly corrections and updates)
is often significantly cheaper, too. For example, if you want to rework a print brochure, you have to
redesign it and then reprint it. Reworking a section of a website often means swapping out a few files,
which is efficient and affordable. So, for large companies and individuals alike, the ability to have relevant
information online in a form that can often be updated in mere minutes, thereby keeping all interested
parties up-to-date, is hard to resist!
Audience requirements
This book centers on the design and technology aspects of web design, but close attention must always
be paid to your potential audience. It’s no good forcing design ideas that result in inappropriate visuals,
unusable navigation to all but the most technically minded of people, and huge download times on your
site’s unsuspecting visitors.
Prior to creating a site, you must ascertain what your audience wants and expects in terms of content,
design, and how the site will work (by way of talking to the relevant people, and also, if your budget allows,
by using surveys and focus groups). You don’t have to take all of your audience’s ideas into account (after
all, many will be contradictory), but be mindful of common themes and ensure they’re not ignored.
Technical considerations must be researched. If you’re targeting designers, you can be fairly sure that a
large proportion of the audience will be using monitors set to a high resolution and millions of colors, and
you can design accordingly. If your site is targeting mobile users, be mindful that it will be displayed on a
wide range of devices. From tablets and smartphones with high-resolution Retina or PenTile technology
displays to those with low-resolution LCD displays, mobile devices come in all shapes, sizes, and
capabilities.
Determining the web browsers your audience members use is another important consideration. Although
use of web standards (used throughout this book) is more likely to result in a highly compatible site,
browser quirks still cause unforeseen problems; therefore, always check to see what browsers are popular
with a site’s visitors, and ensure you test in as many as you can. Sometimes you won’t have access to
such statistics, or you may just be after a “sanity check” regarding what’s generally popular. A
couple
of
useful
places
to
research
global
web
browser
statistics
are
www.w3schools.com/browsers/browsers_stats.asp and www.upsdell.com/BrowserNews/. Note, though,
that any statistics you see online are effectively guesswork and are not a definitive representation of the
4
www.freepdf-books.com
An Introduction to Web Design
Web as a whole; still, they do provide a useful, sizeable sample that’s often indicative of current browser
trends.
Although you might be used to checking browser usage and then, based on the results, designing for
specific browsers, we’ll be adhering closely to web standards throughout this book. When doing this, an
“author once, work anywhere” approach is feasible, as long as you’re aware of various browser quirks
(many of which are explored in Chapter 9). Of course, you should still always ensure you test sites in as
many browsers as possible, just to make sure everything works as intended.
Web design overview
Web design has evolved rapidly over the years. Initially, browsers were basic, and early versions of HTML
were fairly limited in what they enabled designers to do. Therefore, many older sites on the Web are plain
in appearance. Additionally, the Web was originally largely a technical repository, which is the reason for
the boring layouts of many sites in the mid-1990s; after all, statistics, documentation, and papers rarely
need to be jazzed up, and the audience didn’t demand such things anyway.
As with any medium finding its feet, things soon changed, especially once the general public flocked to the
Web. It was no longer enough for websites to be text-based information repositories. Users craved—
demanded, even—color! Images! Excitement! Animation! Interaction! Even video and audio managed to
get a foothold as compression techniques improved and connection speeds increased.
The danger of eye candy became all too apparent as the turn of the century approached: every site, it
seemed, had a Flash intro, and the phrase “skip intro” became so common that it eventually spawned a
parody website.
These days, site design has tended toward being more restrained, as designers have become more
comfortable with using specific types of technologies for relevant and appropriate purposes. Therefore,
you’ll find beautifully designed HTML- and CSS-based sites sitting alongside highly animated Flash efforts.
Also, with the increasing popularity of JavaScript and the introduction of CSS Transitions and HTML5
Canvas, Flash appears to be on the way out because Adobe has recently discontinued support for Flash
on mobile devices.
Of late, special emphasis is being placed on usability and accessibility, and in the majority of cases,
designers have cottoned to the fact that content must take precedence. However, just because web
standards, usability, and accessibility are key, that doesn’t mean design should be thrown out the window.
As we’ll see in later chapters, web standards do not have to come at the expense of good design—far from
it. In fact, a strong understanding of web standards helps improve websites, making it easier for you to
create cutting-edge layouts that work across platforms and are easy to update. It also provides you with a
method of catering for obsolete devices.
5
www.freepdf-books.com
Chapter 1
Note: If you’re relatively new to web design, you may be wondering about the best
platform and software for creating websites. Ultimately, it matters little which platform
you choose, as long as you have access to the most popular browsers for testing
purposes (a list that I’d now include Apple’s Safari in, alongside Chrome, Internet
Explorer, Firefox, and Opera). Regarding software, there’s an overview in Appendix E,
but this isn’t an exhaustive guide, so do your own research and find software to your
liking.
Why WYSIWYG tools aren’t used in this book
With lots of software available and this book being design-oriented, you might wonder why I’m not using
WYSIWYG web design tools. This isn’t because I shun such tools—it’s more that in order to best learn
how to do something, you need to start from scratch, with the foundations. Many web design applications
make it tempting to “hide” the underlying code from you, and most users end up relying on the graphical
interface. This is fine until something goes wrong and you don’t know how to fix it.
Removing software from the equation also means we concentrate on the underlying technology that drives
web pages, without the distraction of working out which button does what. It also ensures that the book will
be relevant to you, regardless of what software you use or your current skill level. Therefore, I suggest you
install a quality text editor to work through the exercises or set your web design application to use its code
view. Once you’re familiar with the concepts outlined in this book, you can apply them to your work,
whatever your chosen application for web design. This level of flexibility is important, because you never
know when you might have to switch applications—something that’s relatively painless if you know how to
design for the Web and understand technologies like CSS and HTML.
Introducing HTML5
The foundation of the majority of web pages is HyperText Markup Language, commonly known by its
initials, HTML. A curious facet of the language is that it’s easy to pick up the basics—anyone who’s
computer literate should be able to piece together a basic page after learning some tags—but it has
enough flexibility and scope to keep designers interested and experimenting, especially when HTML is
combined with Cascading Style Sheets (CSS), which we’ll discuss later in this chapter.
The HTML5 syntax is designed to be simpler, more flexible, developer-friendly, and backward-compatible
than HTML4 and XHTML. HTML5 introduces new features such as animation, offline capabilities, audio,
advanced graphics, typography, transitions, and more, which yields a new class of web standards and
replaces the need for proprietary technologies, like Flash and native mobile platforms.
6
www.freepdf-books.com
An Introduction to Web Design
Introducing the concept of HTML tags and elements
HTML documents are text files that contain tags, which are used to mark up HTML elements. These
documents are usually saved with the .html file extension, although other extensions like .htm can be
used.
The aforementioned tags are what web browsers use to display pages, and assuming the browser is well
behaved (most modern ones are), the display should conform to standards as laid out by the World Wide
Web Consortium (W3C), the organization that develops guidelines and specifications for many web
technologies.
Note: The W3C website is found at www.w3.org. The site offers numerous useful tools,
including validation services against which you can check your web pages.
HTML tags are surrounded by angle brackets—for instance,
is a paragraph start tag. It’s good practice
to close tags once the element content or intended display effect concludes, and this is done with an end
tag. End tags are identical to the opening start tags but with an added forward slash: /. A complete HTML
element looks like this:
Here is a paragraph.
This element consists of the following:
Start tag:
Content: Here is a paragraph.
End tag:
Note: HTML doesn’t have a hard-and-fast rule regarding the case of tags. If you look at
the source code of HTML pages on the Web, you may see lowercase tags, uppercase
tags, or, in the case of pages put together over a period of time, a mixture of the two.
That said, it’s still good practice with any markup language to be consistent, regardless
of whether the rules are more flexible.
Nesting tags
There are many occasions when tags must be placed inside each other; this process is called nesting.
One reason for nesting is to apply basic styles to text-based elements. Earlier, you saw the code for a
paragraph element. We can now make the text bold by surrounding the element content with a strong
element:
Here is a paragraph.
7
www.freepdf-books.com
Chapter 1
You might be used to using the bold element to make text bold, but it is a physical
element that only amends the look of text rather than also conveying semantic meaning.
Logical elements, such as strong, convey meaning and add styling to text and are
therefore preferred. These will be covered in Chapter 3.
Note that the strong tags are nested within the paragraph tags (), not the other way around. That’s
because the paragraph is the parent element to which formatting is being applied. The paragraph could be
made bold and italic by adding another element, emphasis (), as follows:
Here is a paragraph.
In this case, the strong and em tags could be in the opposite order, because they’re at the same level in
the hierarchy. However, you must always close nested tags in the reverse order to that in which they’re
opened, as shown in the previous code block; otherwise, some browsers may not display your work as
intended. For instance, the following should be avoided:
Here is a paragraph.
As previously mentioned, it’s good practice to close tags in HTML—even though it’s not a requirement for
all elements, being sloppy in this area can lead to errors. Take a look at the following:
Here is a paragraph.
Here, the emphasis element isn’t closed, meaning subsequent text-based content on the page is likely to
be displayed in italics—so take care to close all your tags.
Web standards and HTML
HTML5 is an updated version of the HTML specification that has been around since 1997 and many of its
features are already supported in today’s browsers. The changes in HTML5 include a focus on semantic
markup like the addition of the ,
In CSS, for the drop shadows flanking the content area to stop where the content does, they need to be
assigned to the wrapper div, not the web page’s body. Therefore, you need to amend the body rule,
removing the link to a background but retaining the color setting:
body {
background: #878787;
}
The #wrapper rule needs updating in two ways. First, the new background image needs to be applied to
the div—hence the new background property/value pair. However, because the drop shadows are now
shown within the wrapper div, it needs to take up more horizontal space. Since the dimensions of the
div’s content don’t need changing, this is achieved by increasing the horizontal padding value. Also,
because padding at the foot of the div is no longer required (the contentFooter div effectively takes care
of padding at the bottom of the content area), the bottom padding value needs to be set to 0. These
padding values are done in shorthand, as per the method outlined in the “Working with CSS shorthand for
boxes” section earlier in this chapter.
#wrapper {
padding: 18px 36px 0;
background: url(background-drop-shadow-2.gif) 50% 0 repeat-y;
width: 500px;
margin: 0 auto;
}
Finally, the contentFooter div needs styling. Its height is defined on the basis of the height of the
background image (which is a slice of the Photoshop document shown in the following image). The
background is applied to the div in the same way as in previous examples.
One major change, however, is the use of negative margins. The contentFooter div is nested within the
wrapper, which has 36 pixels of horizontal padding. This means that the contentFooter div background
doesn’t reach the edges of the wrapper div by default, leaving whitespace on its left and right sides. By
using margins equal to the negative value of this padding, the div can be “stretched” into place.
50
www.freepdf-books.com
Web Page Essentials
.contentFooter {
height: 20px;
background: url(background-drop-shadow-2-footer.gif) 50% 0;
margin: 0 -36px;
}
As you can see, the horizontal value for margin is -36px, the negative of the horizontal padding value
assigned to #wrapper. The addition of all these new rules results in the following image (which also shows
the Photoshop image and exported GIF that makes up the background).
An alternate method for getting this effect would be to place the contentFooter div outside of the wrapper
and then use the same method of aligning it:
.contentFooter {
width: 500px;
height: 20px;
background: url(background-drop-shadow-2-footer.gif) 50% 0;
padding: 0 36px;
margin: 0 auto;
}
To ensure the background of the wrapper joins up with the shadow on the contentFooter div, a single
pixel of bottom padding needs to be applied to the #wrapper rule:
#wrapper {
padding: 18px 36px 1px;
background: url(background-drop-shadow-2.gif) 50% 0 repeat-y;
width: 500px;
margin: 0 auto;
}
51
www.freepdf-books.com
Chapter 2
CSS3 shadows
The box-shadow property attaches one or more drop shadows on a box. The
property is a comma-separated list of shadows, each specified by two to four
length values, an optional color, and an optional insetkeyword.
div {
width: 150px;
height: 150px;
border:5px solid blue;
background-color:orange;
margin: 30px;
color: blue;
text-align: center;
}
#box1 {
box-shadow: rgba(0,0,0,0.4) 10px 10px;
}
#box2 {
box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px
}
#box3 {
box-shadow: rgba(0,0,0,0.4) 10px 10px inset
}
Plain image gradients
Tiled gradient images can be used to add depth and visual interest, without sapping resources (the
example’s image is less than 2 KB in size). The depicted example is based on the page from the “Drop
shadows” section. The changes are an amendment to the background pair in the #wrapper rule, tiling the
gradient image horizontally on the wrapper’s background, and new padding settings, so the text doesn’t
appear over the gradient.
#wrapper {
padding: 36px 18px 18px;
background: #ffffff url(background-gradient.gif) repeat-x;
width: 500px;
margin: 0 auto;
}
52
www.freepdf-books.com
Web Page Essentials
Watermarks
Although it’s common for sites to be centered in the browser window, many designers choose left-aligned
sites that cling to the left edge of the browser window. Both design styles are perfectly valid, but in an era
of rapidly increasing monitor resolutions, you can end up with a lot of dead space to the side of a fixedwidth left-aligned design. And while some of you might be saying, “Well, create flexible-width designs,
then!” some designs aren’t suited to that, and text-heavy sites tend to work better with fairly narrow text
columns, since most users find it hard to read very wide blocks of text.
All of this brings us to the final example in this chapter, which shows how to create watermarks for a web
page. In the following screenshot, the wrapper div is to the left, with a background image to the right of
this area.
53
www.freepdf-books.com
Chapter 2
To achieve this effect, the margin property/value pair in the #wrapper rule has been removed, and the
following rule has been added:
body {
background: #878787 url(background-watermark-large.gif) no-repeat
536px 0;
}
As mentioned earlier in the chapter, this assumes you’re adding a second body rule. You
can, however, just add the background property/value pair to the existing body rule in the
style sheet.
The image used is a transparent GIF, so the background color setting was made a medium-gray
(#878787). The reasoning behind using a transparent GIF is explained in Chapter 4, but it relates to web
browsers sometimes interpreting colors differently from graphics packages. Therefore, it’s often easier to
make the flat background color of a graphic transparent and then use the web page background color in
place of it.
The repeat setting is set to no-repeat, because we don’t want the image to tile. Finally, the background’s
position is set to 536px 0 . The 0 setting means it hugs the top of the browser window, while the 536px
setting means the image is placed at 536 pixels from the left. This is because the content area was earlier
defined as 500 pixels wide with 18 pixels of padding, and 18 + 500 + 18 = 536.
As mentioned earlier, backgrounds can be added to any web page element. For instance, you can add a
watermark to the wrapper div by using the following CSS:
#wrapper {
padding: 18px;
54
www.freepdf-books.com
Web Page Essentials
background: #ffffff url(background-watermark.gif) no-repeat 20px
20px;
width: 500px;
}
This adds the background-watermark.gif image to the background of the content div and positions it 20
pixels from the top and 20 pixels from the left. Again, no-repeat is used to stop the image from tiling.
In either case for the watermark backgrounds, the images scroll with the page content. However,
watermarks can also work well as fixed backgrounds—this can be achieved by adding the fixed value to
the background property in the body and #wrapper rules.
CSS3 patterns
The CSS3 gradient features that are described earlier are powerful enough to produce beautiful patterns.
Web designer Lea Verou has assembled a nice CSS3 patterns gallery from many contributors
(http://lea.verou.me/css3patterns).
55
www.freepdf-books.com
Chapter 2
Closing your document
At the start of this chapter, we examined basic HTML and XHTML documents. Regardless of the
technology used, the end of the document should look like this:
.