When SitePoint asked me to write the fourth edition of this book, I
initially thought it would take the same format of other editions—adding new
techniques, removing content that had become outdated, and updating
solutions to a more modern approach. As I started to work through the table
of contents, however, I realized that the world of CSS had changed so much
that a complete rewrite was needed.
Rather than being about cutting-edge or experimental CSS, this book
demonstrates the tips, tricks, and solutions that I use every day. We’ll
thoroughly investigate the world of CSS3, many of the features of which are
supported by the major browsers, and look at how to make these new
techniques work in older browsers.
We’ll also walk through the use of CSS for layout purposes. While the
tools that we have for layout haven’t changed much in the last two years,
the types of devices that we need to design websites for have changed. Our
sites are being viewed on hardware ranging from smartphones to desktop
screens. Responsive design aims to tackle the challenge of designing a
single site that provides a great experience for all.
This anthology contains minimal theory; instead, I’ve concentrated on
providing solutions that will enable you to quickly get started with a
technique or solve a problem. The sections in each chapter can also act as
starting points for your own experimentation and creativity. Each one is
framed as a specific issue or question, accompanied by a detailed
explanation to help you understand the solution and point out any related
challenges or alternate approaches.
This is a really exciting time for front-end development, and I hope
that this book helps you start to explore some of the features of CSS3, and
find answers to CSS problems that you might have.
This book is aimed at people who need to work with CSS: web
designers and developers who’ve seen the cool CSS designs out there, but
are short on the time to wade through masses of theory and debate in order
to create a site. Each problem is solved with a working solution that can
be implemented as it is or used as a springboard to creativity.
As a whole, this book isn’t a tutorial. While Chapter 1 covers the very basics of CSS, and the early
chapters cover simpler techniques than those that follow, you’ll find the
examples easier to grasp if you have a basic grounding in CSS.
- Chapter 1: Making a Start with CSS
- This chapter is simply a quick CSS tutorial for anyone who needs to brush up on the basics of CSS. If you’ve been using CSS in your own projects, you might want to skip this chapter and refer to it on a needs basis, when you want to look into basic concepts in more detail.
- Chapter 2: Text Styling and Other Basics
- This chapter covers techniques for styling and formatting text in your documents; font sizing, colors, highlighting text, and the removal of extra whitespace around page elements are explained as the chapter progresses. Even if you’re already using CSS for text styling, you’ll find some useful tips here.
- Chapter 3: Images and Other Design Elements
- This chapter looks at the ways in which you can combine CSS and images to create powerful visual effects, such as placing background images on elements, applying gradients, making elements transparent, and positioning text with images, among other topics.
- Chapter 4: Navigation
- Every site requires usable navigation, and this chapter explains how to achieve it, CSS-style. We’ll investigate image-based navigation, tabbed navigation, combining background images with CSS text to create attractive and accessible menus, and using lists to structure navigation in an accessible way.
- Chapter 5: Tabular Data
- The use of tables for layout hasn’t been considered best practice for a long time. Tables should be used for their real purpose: the display of tabular data, such as that contained in a spreadsheet. This chapter will demonstrate techniques for the application of tables to create attractive and usable tabular data displays.
- Chapter 6: Forms and User Interfaces
- Whether you’re a designer or a developer, it’s likely that you’ll spend a fair amount of time creating forms for data entry. CSS provides incredible support in this area; this chapter shows how we can build accessible, usable forms with that extra design oomph. We’ll also take a look at some of the diverse HTML5 tools that are simplifying form configuration.
- Chapter 7: Cross-browser Techniques
- How can we make our CSS techniques work in older browsers or on alternative devices such as smartphones? These questions form the main theme of this chapter. We’ll also see how to troubleshoot CSS bugs—and where to go for help—as well as looking at methods for integrating CSS3 selectors and HTML5 elements in older browsers.
- Chapter 8: CSS Positioning Basics
- Placing elements correctly on a web page can be tricky, but in this chapter we’ll learn to master the art of positioning. Using floats effectively, nifty ways of adding margins and padding, implementing text wrapping, and creating thumbnail galleries—these are all great strategies for your CSS arsenal.
- Chapter 9: CSS for Layout
- In this chapter, we’ll explore a range of CSS layout techniques that can be combined and extended upon to create numerous interesting page formations, including different column configurations and print-ready stylesheets. We’ll also delve into the emerging sphere of responsive design, looking at both text- and image-heavy layouts that will render effectively and smoothly on a range of devices or screen sizes.
Located at http://www.sitepoint.com/books/cssant4/, the website that
supports this book will give you access to the following
facilities.
As you progress through this book, you’ll note filenames above
many of the code listings. These refer to files in the code archive, a
downloadable ZIP file that contains all the finished examples
presented in this book. Simply click the Code
Archive link on the book’s website to download it.
No book is error-free, and attentive readers will no doubt spot
at least one or two mistakes in this one. The Corrections
and Typos page on the book’s website will provide the latest
information about known typographical and code errors, as well as
offer necessary updates for new releases of browsers and related
standards.
If you’d like to communicate with other designers about this book,
you should join SitePoint’s online
community. The CSS & Page Layout
forum, in particular, offers an abundance of information above
and beyond the solutions in this book, and a lot of experienced web
designers and developers hang out there. It’s a good way to learn new
tricks, have questions answered in a hurry, and just have a good
time.
In addition to books like this one, SitePoint publishes free email
newsletters such as the SitePoint newsletter,
PHPMaster, CloudSpring,
RubySource, DesignFestival,
and BuildMobile. In them you’ll read about the
latest news, product releases, trends, tips, and techniques for all
aspects of web development. Sign up to one or more of these newsletters at
http://www.sitepoint.com/newsletter/.
Join the SitePoint Podcast team for news, interviews, opinion, and
fresh thinking for web developers and designers. They discuss the latest
web industry topics, present guest speakers, and interview some of the
best minds in the industry. You can catch up on the latest and previous
podcasts or subscribe via iTunes.
If you’re unable to find an answer through the forums, or if you
wish to contact us for any other reason, the best place to write is
[email protected]. We have an email support system set up
to track your inquiries, and friendly support staff members who can answer
your questions. Suggestions for improvements, as well as notices of any
mistakes you may find, are especially welcome.
Firstly, I’d like to thank the SitePoint team for making a fourth
edition of this book possible. Despite us being spread across a range of
time zones, the whole process has been enjoyable and the comments from
everyone have served to make this a better book than it would otherwise
be.
To those people who are really breaking new ground in the world of
CSS, those whose ideas are discussed throughout this book, and those who
share their ideas and creativity with the wider community, thank
you.
Thanks to Drew, for accepting yet another book project into our
personal and professional lives, and for being part of so many discussions
that have informed topics covered in this book. Finally, thanks must go to
my daughter Bethany, who is understanding of the time I spend working, and
makes me laugh when I am tired. You both make so many things possible;
thank you.
You’ll notice that we’ve used certain typographic and layout styles
throughout this book to signify different types of information. Look out
for the following items.
Any markup—be that HTML or CSS—will be displayed using a
fixed-width font like so:
<h1>A perfect summer's day</h1> <p>It was a lovely day for a walk in the park. The birds were singing and the kids were all back at school.</p>If the markup forms part of the book’s code archive, the name of the file will appear at the top of the program listing, like this: If only part of the file is displayed, this is indicated by the word excerpt: If additional code is to be inserted into an existing example, the new code will be displayed in bold:
function animate() {
new_variable = "Hello";
}
Also, where existing code is required for context, rather than
repeat all the code, a … will be displayed:
function animate() {
…
return new_variable;
}
Some lines of code are intended to be entered on one line, but
we’ve had to wrap them because of page constraints. A ↵ indicates a line
break that exists for formatting purposes only, and should be
ignored:
URL.open("http://www.sitepoint.com/blogs/2007/05/28/user-style-she
↵ets-come-of-age/");
Tip: Hey, You!
Tips will give you helpful little pointers.Note: Ahem, Excuse Me …
Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information.Important: Make Sure You Always …
… pay attention to these important points.Warning: Watch Out!
Warnings will highlight any gotchas that are likely to trip you up along the way...................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.