CSS3 For Dummies®

Published by: John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, www.wiley.com

Copyright © 2014 by John Wiley & Sons, Inc., Hoboken, New Jersey

Published simultaneously in Canada

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without the prior written permission of the Publisher. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions.

Trademarks: Wiley, For Dummies, the Dummies Man logo, Dummies.com, Making Everything Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc., and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc., is not associated with any product or vendor mentioned in this book.

Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Website is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or Website may provide or recommendations it may make. Further, readers should be aware that Internet Websites listed in this work may have changed or disappeared between when this work was written and when it is read.

For general information on our other products and services, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002. For technical support, please visit www.wiley.com/techsupport.

Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com.

Library of Congress Control Number: 2013948027

ISBN 978-1-118-44142-8 (pbk); ISBN 978-1-118-46210-2 (ebk); ISBN 978-1-118-61240-8 (ebk); ISBN 978-1-118-61261-3 (ebk)

Manufactured in the United States of America

10 9 8 7 6 5 4 3 2 1

CSS3 For Dummies®

Visit www.dummies.com/cheatsheet/CSS3 to view this book's cheat sheet.

Table of Contents

Introduction

About This Book

Foolish Assumptions

Icons Used in This Book

Beyond the Book

Where to Go from Here

Part I: Getting Started with CSS3

Chapter 1: Understanding CSS3

Defining Why You Need CSS3

Understanding How Browser Support Affects You

Obtaining an Overview of the CSS Modules

Understanding Styles

Creating External Styles

Defining the CSS Units of Measure

Chapter 2: Performing Basic Tasks

Working with Selectors

An overview of selectors

Working with tag selectors

Working with attribute selectors

Working with pattern selectors

Working with event selectors

Working with state selectors

Understanding Layout Using the Basic Box Model

Viewing the box

Working with the box model

Designing Backgrounds

Chapter 3: Working with Fonts and Colors

Using Fonts

Understanding Web Safe Fonts

Using standard Web safe functionality

Using .WOFF fonts

Producing Text Effects

Using the safe text decorations

Adding the CSS3 text effects

Adding Colors

Understanding how CSS colors work

Using color values

Using color names

Using hexadecimal values for color

Understanding Aural Style Sheets

Chapter 4: Working with Graphics

Understanding the <img> Tag

Working with Foreground Images

Creating a border

Centering the image

Adding a caption

Adding Background Images

Using CSS alone

Using a single image

Using multiple images

Positioning Graphics

Working with Repetitive Images

Changing repetitive backgrounds

Creating repetitive borders

Chapter 5: Using CSS Shortcuts

Understanding Style Inheritance

Cascading Styles — Using Multiple Styles Together

Using Additional Basic User Interface Features

Performing quick navigation

Providing a document outline

Creating Special Effects

Transforming objects, including graphics

Using the attr() function

Working with Multiple Columns

Part II: Making Layouts Fast and Simple with Libraries

Chapter 6: Creating a Test Site with jQuery and jQuery UI

Using the jQuery Core Features

Detecting the user’s browser type

Selecting elements

Changing an element’s CSS

Understanding jQuery UI

Using the jQuery UI Controls

Working with Accordion

Working with Datepicker

Working with Dialog

Working with Progressbar

Working with Slider

Working with Tabs

Performing jQuery UI Interactions

Creating a Draggable Interface

Creating a Droppable Interface

Creating a Resizable Interface

Creating a Selectable Interface

Creating a Sortable Interface

Creating jQuery UI Special Effects

Adding color animations

Employing class transitions

Working with advanced easing

Performing transforms

Defining the Basic Page Layout

Chapter 7: Creating Pages Using Dynamic Drive

Working with Layouts

Developing with fixed layouts

Developing with liquid layouts

Using two-column layouts

Working with layouts

Modifying the layouts

Using three column layouts

Employing CSS frames

Creating Menus

Developing horizontal menus

Developing vertical menus

Performing Image Magic

Dressing Up Forms

Using the Free Icons

Chapter 8: Using the Google API

Understanding Why Developers Like the Google API

Working with AngularJS

Working with Chrome Frame

Working with Dojo

Working with Ext Core

Accessing jQuery

Accessing jQuery UI

Working with MooTools

Working with Prototype

Working with script_aculo_us

Working with SWFObject

Working with WebFont Loader

Using the Google APIs Explorer

Getting a Google account

Obtaining a developer key

Working with the Google APIs Explorer

Creating a Site that Uses Multiple Libraries

Part III: Working with CSS3 Generators

Chapter 9: Managing Colors Using ColorZilla

Obtaining the Plugin

Choosing Colors with the Color Picker

Using the Color Picker

Using the Palette Browser

Grabbing Colors Using the Eyedropper

Working with the Color Analyzer

Performing the analysis

Seeing the details

Saving the output

Creating a Gradient

Developing a basic gradient

Adding special effects

Saving the result

Converting an image to CSS

Chapter 10: Creating Themes Using ThemeRoller

Understanding ThemeRoller

Using the ThemeRoller Interface

Working with Predefined Themes

Viewing the predefined themes

Accessing the predefined themes directly

Creating Custom Themes

Choosing a predefined theme as a starting point

Performing the configuration

Downloading Themes to Your System

Downloading a predefined theme

Downloading a custom theme

Adding Custom Themes to Your Projects

Viewing the index.html file

Viewing the interactive demos

Looking at the documentation

Adding a custom theme to your own project

Chapter 11: Using the Dynamic Drive Tools

Managing Images with Image Optimizer

Creating Icons Using FavIcon Generator

Creating Animations with Animated Gif

Generating Images Using Gradient Image Maker

Generating Controls Using Button Maker Online

Creating the button

Using the button

Adding Pizzazz Using Ribbon Rules

Creating the ribbon rule

Using the ribbon rule

Part IV: Modifying Pre-Built Content for a Unique Look

Chapter 12: Understanding CSS for Libraries and Generators

Finding the CSS for a Library or Generator

Viewing the CSS

Deciding What to Modify or Tweak

Locating Modification Aids

Searching for modification aids

Using other developer solutions

Getting answers from other professionals

Chapter 13: Modifying the jQuery and jQuery UI CSS

Looking at the jQuery and jQuery UI CSS

Understanding the basic layout

Defining reasonable changes

Avoiding potential error conditions

Defining a Specialized Control

Creating Specialized Control Effects

Developing the page code

Creating the XML file

Working with Added Graphics

Creating the HTML

Designing the CSS styles

Developing the required code

Working with Plug-ins

Finishing with the Coded Bits

Chapter 14: Modifying the Dynamic Drive CSS

Understanding the Script Categories

Locating the CSS for a Particular Feature

Adding Modifications

Obtaining the example

Making the example more flexible

Modifying the JavaScript

Modifying the CSS

Working with Menus

Defining a specialized menu

Developing menus with graphics

Creating specialized menu effects

Part V: The Part of Tens

Chapter 15: Ten Phenomenal Places to Find Libraries

Animating Page Elements with Animate.css

Locating a Library Using CSSDB.co

Combining CSS3 and JavaScript with JSter

Developing Background Animations with Animatable

Easing Your Way into a Transition with Easings

Transitioning Elements Using Morf.js

Creating Full Interactive Applications with YUI

Displaying Tooltips Using HINT.css

Ridding Yourself of Browser Differences with Normalize.css

Ensuring Your Application Works with Mobile Devices Using Skeleton

Chapter 16: Ten Phenomenal Places to Find Generators

Creating Animations Using Stylie

Designing CSS Styles Using CSSDesk

Making Applications Run Faster with yepnope.js

Generating Templates Using Initializr

Optimizing Applications to Work with Older Browsers with Modernizr

Enhancing Selector Support Using Selectivizr

Designing Unusual List Presentations with Liffect

Editing Code Using Komodo Edit

Engineering Layer Effects Using LayerStyles

Testing Your Font Stacks Using FFFFALLBACK

Chapter 17: Ten Quick Ways to Produce a Great Layout

Learning the Layout Properties

Creating Basic Layouts Using CSS Layout Generator

Getting Help Understanding CSS Layouts with Learn CSS Layout

Using a Reset to Overcome Errors

Creating Mobile-Friendly Layouts with the 960 Grid System

Finding Articles and Blog Posts Discussing Layouts

Obtaining Free Layouts Through Design Shack

Getting a Really Complex Design Through Free CSS Templates

Relying on a CSS Framework

Using Best Practices to Enhance Your Layouts

About the Author

Cheat Sheet

Connect with Dummies

Introduction

Cascading Style Sheets (CSS) help you define a website’s presentation and special effects. Because of this capability, most books about CSS on the market are written for designers. They get into the artistic elements of CSS and make you create everything from scratch. CSS3 for Dummies is different. It was written with the developer in mind. It may not seem as if a developer necessarily would need to know about presentation and design-related issues, but users want applications that are pleasant to use, so developers need to know about both topics. This book assumes that you’re a developer, and that you’re busy — that you really need to get a great-looking application out yesterday because the boss is breathing down your neck. You don’t need to be an artist to produce spectacular sites — you just need a helping hand. Most of the artwork’s already done for you — you just need to know where to find it.

About This Book

Your time is valuable. This book helps you understand quickly how to use tools to create great-looking applications that provide all the right user prompts in a fraction of the time it would take you to write the application from scratch. In fact, once you know the secrets in this book, you may wonder why other people think working with CSS3 is hard. By the time you complete this book, you’ll be able to dazzle the user and make your boss think you spent days working on the page that only took a few hours to write this morning. Even though complete applications will take longer, you can create usable mockups of what your application will look like in an incredibly short time.

However, this book isn’t all about tools. When necessary, you see how things work at a much lower level so that you can maintain the code you create with the same ease that you experienced when putting it together. Instead of covering absolutely every nuance of CSS3 development, though, CSS3 For Dummies concentrates on the CSS3 features you use most often and examines them in a real-world functional environment.

No, this book won’t turn you into a designer, but that’s the point. You’ll become a developer who can compete with the best designers out there, on your own terms, by using tools that designers generally don’t rely upon. The difference is that your sites won’t be unique one-offs — they’ll rely on the huge base of predefined templates and tools that already exist for everyone to use. Even so, everyone will think your offerings are unique because of the way you can use these various tools together to create results that look unique.

The chapters were written for everyday developers, but note that a portion of most chapters contains advanced material, mostly in sidebars, that will interest only some readers. When you see one of these specialized topics, feel free to skip it.

You can also skip any material marked with a Technical Stuff icon. This material is helpful, but you don’t have to know it to work with CSS3, HTML, or JavaScript. I include this material because I find it helpful in my programming efforts and believe that you will, too.

This book uses special typefaces to emphasize some information. For example, entries that you need to type appear in bold. All code, website URLs, and onscreen messages appear in monofont type. When I define a new word, you see that word in italics.

Because you use multiple applications when you're working with CSS3, I always point out when to move from one application to the next. Note, however, that the testers for this book tried out the code with the Internet Explorer, Firefox, and Chrome browsers on the Macintosh, Linux, and Windows platforms. One tester also checked at least some of the code using a Windows 8 phone. In most cases, you shouldn't experience any problem working with your application unless specifically noted in the application description. Please let me know (at John@JohnMuellerBooks.com) if you ever experience a problem with one of the examples.

Foolish Assumptions

You might find it difficult to believe that I’ve assumed anything about you — after all, I haven’t even met you yet! Although most assumptions are indeed foolish, I made these assumptions to provide a starting point for the book.

It’s important that you’re familiar with the platform and browser you want to use because the book doesn’t provide any handholding in this regard. To focus on CSS3 (and HTML5 and JavaScript when needed) as fully as possible, the book covers browsers marginally and platform requirements not at all. You really do need to know how to install applications, use the browser, and generally work with your chosen platform before you begin working with this book.

Knowing a little about both HTML5 and JavaScript is helpful but not essential. Any experience you have with programming will be helpful as well. The book doesn’t assume you have any knowledge of CSS3.

Icons Used in This Book

As you read this book, you’ll see icons in the margins that indicate material of interest (or not, as the case may be).This section briefly describes each icon in this book.

Tips are nice because they help you save time or perform some task without a lot of extra work. The tips in this book are timesaving techniques or pointers to resources that you should try to get the maximum benefit from CSS3 (or HTML5 or JavaScript in some cases).

I don’t want to sound like an angry parent or some kind of maniac, but you should avoid doing anything marked with a Warning icon. Otherwise you could find that your program only serves to confuse users who will then refuse to work with it.

Whenever you see this icon, think advanced tip or technique. You might find these tidbits of useful information just too boring for words, or they could contain the solution you need to get a program running. Skip these bits of information whenever you like.

If you don’t get anything else out of a particular chapter or section, remember the material marked by this icon. This text usually contains an essential process or a bit of information that you must know to write CSS3 programs successfully.

Beyond the Book

A lot of extra content that you won’t find in this book is available at www.dummies.com. Go online to find the following:

Source code for the examples in this book at

www.dummies.com/extras/css3

This book contains a lot of code, and you might not want to type it. In fact, it's probably better if you don't type this code manually. Fortunately, you can find the source code for this book on the Dummies.com website at www.dummies.com/extras/css3. The source code is organized by chapter, and I always tell you about the example files in the text. The best way to work with a chapter is to download all the source code for it at one time.

Online articles covering additional topics at

www.dummies.com/extras/css3

Here you’ll find out how to access multiple Google API libraries and use them in a single app, how to use Komodo Edit to create CSS files, and how to create table-like effects using CSS3 and HTML5 tags, among other details to aid you in your CSS3 journey.

The Cheat Sheet for this book is at

www.dummies.com/cheatsheet/css3

Here you’ll find a roadmap to common CSS3 properties and selectors.

Updates to this book, if we have any, are also available at

www.dummies.com/extras/css3

Where to Go from Here

It’s time to start your CSS3 adventure! If you’re a complete CSS3 novice, start with Chapter 1 and progress through the book at a pace that allows you to absorb as much of the material as possible. If you’re in an absolute rush to get going with CSS3 as quickly as possible, you could possibly skip to Chapter 2 with the understanding that you may find some topics a bit confusing later.

Advanced readers, those who already have a basic understanding of CSS3, can save time by moving directly to Chapter 6. You can always go back to earlier chapters as necessary when you have questions. However, it’s important that you understand how each example works before moving to the next one. Every example has important lessons for you, and you could miss vital content if you start skipping too much information.

Part I

Getting Started with CSS3

Visit www.dummies.com for great Dummies content online.

In this part . . .

Discover why CSS3 is such an important technology

Create simple pages that rely on CSS for formatting

Use fonts and colors to add pizzazz to your site

Add graphics to make your site more appealing and to convey nonverbal information

Understand the shortcuts you can use to make working with CSS3 easier

Chapter 1

Understanding CSS3

In This Chapter

arrow Understanding why using Cascading Style Sheets version 3 (CSS3) is essential

arrow Determining how your browser affects your use of CSS3

arrow Considering the structure of CSS3 through its modules

arrow Defining the concept of a style

arrow Working with basic styles

arrow Determining how units of measure affect appearance

There was a time when even websites painstakingly formatted with arcane tags still ended up boring or unattractive because the tags simply didn’t provide much flexibility in presenting content. In addition, the tags were supported in different ways by each of the browsers that were popular at the time, so that your beautifully rendered page ended up looking terrible on another user’s system. The improper use of tags (such as those used to define tables) also caused problems for people with special needs when their software failed to work with the tags. In short, developers needed something better than tags to create nicely formatted presentations — that something better is Cascading Style Sheets (CSS).

The stated purpose of CSS is to provide a human-readable method of separating the content on a page from the presentation of that content. Separating content from presentation allows users to substitute style sheets that present information in a manner that works better for them (such as the substitution of larger fonts or specific color combinations for sight-impaired users). Separating presentation from content also means that you can define a presentation once and use it on a variety of pages and formats. When you decide you need to change a presentation, all you need to do is change the CSS, rather than edit the specific tags on every page of your site.

However, CSS has gone well beyond simple presentation on HTML pages. CSS also works with a wide variety of other content types such as XML. In addition, CSS makes it possible to create special effects on your page, so that you get the appearance of programming without actually writing any code to do it. The term special effect covers a lot of ground. It includes everything from mouseover effects (a change that occurs when you hover the mouse over a page element) to the use of transparency to fool the eye into seeing both foreground and background elements in specific ways. You can also use special effects to perform tasks such as giving a page a three-dimensional (3D) look.

Even through CSS is standardized through various organizations such as the Internet Engineering Task Force (IETF) as Request for Comment (RFC) 2318 (see www.faqs.org/rfcs/rfc2318.html) and the World Wide Web Consortium (W3C) as specific version-level specifications (see www.w3.org/TR/CSS21/ for the version 2.1 specification), there are differences in the way browsers work with CSS. For the most part, you'll find that every browser supports the basic CSS formatting functionality without any problem. It's when you get into the special effects that you may notice some differences, so this chapter has a special section that discusses some of the differences you need to consider. The differences between browsers is one reason that this book focuses on third-party tools that address these differences for you so that you can focus on creating great-looking pages.

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!