Table Of ContentCSS3
Foundations
CSS3
Foundations
Ian Lunn
A John Wiley and Sons, Ltd, Publication
This edition first published 2013
© 2013 Ian Lunn
Registered office
John Wiley & Sons Ltd, The Atrium, Southern Gate, Chichester, West Sussex, PO19 8SQ, United Kingdom
For details of our global editorial offices, for customer services and for information about how to apply for permission to
reuse the copyright material in this book please see our website at www.wiley.com.
The right of the author to be identified as the author of this work has been asserted in accordance with the Copyright,
Designs and Patents Act 1988.
All rights reserved. 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 or otherwise, except as permitted by the UK Copyright,
Designs and Patents Act 1988, without the prior permission of the publisher.
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in
electronic books.
Designations used by companies to distinguish their products are often claimed as trademarks. All brand names and prod-
uct names used in this book are trade names, service marks, trademarks or registered trademarks of their respective own-
ers. The publisher is not associated with any product or vendor mentioned in this book. This publication is designed to
provide accurate and authoritative information in regard to the subject matter covered. It is sold on the understanding that
the publisher is not engaged in rendering professional services. If professional advice or other expert assistance is required,
the services of a competent professional should be sought.
TRADEMARKS: WILEY AND THE WILEY LOGO ARE TRADEMARKS OR REGISTERED TRADEMARKS OF JOHN WILEY
AND SONS, INC. AND/ OR ITS AFFILIATES IN THE UNITED STATES AND/OR OTHER COUNTRIES, AND MAY NOT
BE USED WITHOUT WRITTEN PERMISSION. ALL OTHER TRADEMARKS ARE THE PROPERTY OF THEIR RESPEC-
TIVE OWNERS. JOHN WILEY & SONS, LTD. IS NOT ASSOCIATED WITH ANY PRODUCT OR VENDOR MENTIONED
IN THE BOOK. THE TREEHOUSE LOGO, MIKE THE FROG, AND RELATED TREEHOUSE WEBSITE CONTENT IS
©2012 TREEHOUSE ISLAND, INC. LOGOS AND CONTENT CANNOT BE REPRODUCED WITHOUT FIRST OBTAINING
PERMISSION FROM COPYRIGHT HOLDER.
978-1-118-35654-8
A catalogue record for this book is available from the British Library.
ISBN 978-1-118-35654-8 (paperback); ISBN 978-1-118-42516-9 (ebook); 978-1-118-42514-5 (ebook);
978-1-118-42515-2 (ebook)
Printed in the U.S. at Command Web Missouri
About the Author
IAN LUNN (DEVON, UK) is a Freelance Front End Developer, passionate about building
the future of the web using technologies such as CSS3 and HTML5. With a Higher National
Diploma in Internet Technology, Ian combines his education with expertise in CSS, HTML,
JavaScript, and WordPress to build creative and effective websites and applications. Ian’s
enthusiasm for utilizing cutting edge technologies is matched by his dedication for advocat-
ing them; sharing his knowledge with the community, in the form of blog tutorials and open
source projects.
Follow @IanLunn on Twitter (www.twitter.com/IanLunn) where he shares links and ideas
about web design and development.
Publisher’s Acknowledgements
Some of the people who helped bring this book to market include the following:
Editorial and Production Marketing
VP Consumer and Technology Associate Marketing Director:
Publishing Director: Louise Breinholt
Michelle Leete
Marketing Executive:
Associate Director–Book Content Kate Parrett
Management:
Martin Tribe
Composition Services
Associate Publisher:
Chris Webb Compositor:
Andrea Hornberger
Assistant Editor:
Jennifer Mayberry
Ellie Scott
Proofreaders:
Development Editor:
Linda Seifert
Brian Herrmann
Indexer:
Copy Editor:
Ty Koontz
Chuck Hutchinson
Technical Editor:
Nick Elliott
Editorial Manager:
Jodi Jensen
Senior Project Editor:
Sara Shlaer
Editorial Assistant:
Leslie Saxman
Contents
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3
Who Should Read This Book? ..................................................1
What You Will Learn .........................................................1
How to Use This Book ........................................................2
Using This Book with Treehouse .............................................2
part 1: Introduction
CHAPTER ONE
Understanding CSS and the Modern Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5
What Is the Modern Web? .....................................................5
What Is CSS? ................................................................6
The Role of CSS ..............................................................6
Modern Browsers ...........................................................10
Today’s Major Browsers ...................................................10
Browser Engines (Layout Engines) ..........................................11
Browser Usage Statistics ...................................................12
Older Browsers on the Modern Web ...........................................12
Tools for Building and Styling the Modern Web .................................15
Web Developer Tools .....................................................15
Text Editors .............................................................17
Summary ..................................................................18
CHAPTER TWO
Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19
Getting Started with the Project Files ..........................................20
Downloading the Project Files ..............................................20
Folder Structure and Good Practices ........................................20
Understanding the HTML Template ........................................22
Getting Started with CSS .....................................................30
Adding CSS to a Page ......................................................30
Using Media Types .......................................................31
Inline Styles .............................................................32
User Agent Stylesheets .......................................................33
Using a CSS Reset for Better Browser Consistency ...............................34
Summary ..................................................................38
TABLE OF CONTENTS vii
part 2: Learning CSS Syntax and Adding Presentational Styles
CHAPTER THREE
Mastering The Power of CSS Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41
Writing Your First Styles .....................................................41
Inheritance and the Relationship Between Elements .............................44
Selectors ...................................................................45
Universal Selector ........................................................45
Type Selector ............................................................45
ID and Class Selectors .....................................................46
Grouping Selectors ..........................................................47
Combinators .............................................................48
Descendant Combinators ...............................................48
Child Combinators .....................................................49
Sibling Combinators ...................................................49
Attribute Selectors ........................................................50
Selecting Elements with an Attribute, Regardless of Its Value ................51
Selecting Elements with Multiple Attributes ...............................51
Other Attribute Selectors ...............................................51
Pseudo-Classes ...........................................................52
Dynamic Pseudo-Classes ................................................52
Structural Pseudo-Classes ...............................................53
The Target Pseudo-Class ................................................56
The UI Element States Pseudo-Classes ....................................56
The Language Pseudo-Class .............................................57
The Negation Pseudo-Class ..............................................57
Pseudo-Elements .........................................................58
Selecting the First Line .................................................58
Selecting the First Letter ................................................58
Generating Content Before and After an Element ..........................59
Selector Specificity and the Cascade ............................................60
The !important Rule ......................................................61
Summary ..................................................................62
CHAPTER FOUR
Creating Styles Using Property Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63
Color Keywords .............................................................63
Color Values ................................................................64
RGB (Hexadecimal) .......................................................64
RGB (Integer Range) ......................................................67
RGBA ...................................................................67
viii CSS3 FOUNDATIONS
