Beginning CSS: Cascading Style Sheets for Web Design
Total Page:16
File Type:pdf, Size:1020Kb
www.GetPedia.com 01_576429 ffirs.qxd 11/18/04 12:25 PM Page iii Beginning CSS: Cascading Style Sheets for Web Design Richard York 01_576429 ffirs.qxd 11/18/04 12:25 PM Page i Beginning CSS: Cascading Style Sheets for Web Design 01_576429 ffirs.qxd 11/18/04 12:25 PM Page ii 01_576429 ffirs.qxd 11/18/04 12:25 PM Page iii Beginning CSS: Cascading Style Sheets for Web Design Richard York 01_576429 ffirs.qxd 11/18/04 12:25 PM Page iv Beginning CSS: Cascading Style Sheets for Web Design Published by Wiley Publishing, Inc. 10475 Crosspoint Boulevard Indianapolis, IN 46256 www.wiley.com Copyright © 2005 by Wiley Publishing, Inc., Indianapolis, Indiana Published simultaneously in Canada ISBN: 0-7645-7642-9 Manufactured in the United States of America 10 9 8 7 6 5 4 3 2 1 1B/QZ/RS/QU/IN 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 either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Legal Department, Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317) 572-4355, e-mail: [email protected]. 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 PARTIC- ULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMO- TIONAL 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 PRO- FESSIONAL 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 or to obtain technical support, please contact our Customer Care Department within the U.S. at (800) 762-2974, outside the U.S. at (317) 572-3993 or fax (317) 572-4002. Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books. Library of Congress Cataloging-in-Publication Data: 2004-024-101 Trademarks: Wiley, the Wiley Publishing logo, Wrox, the Wrox logo, Programmer to Programmer and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affil- iates, in the United States and other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. Wiley Publishing, Inc., is not associated with any product or vendor mentioned in this book. 01_576429 ffirs.qxd 11/18/04 12:25 PM Page v About the Author Richard York is a freelance web designer and a participant in the open source community. After attend- ing website and graphic design courses at Indiana University-Purdue University, Indianapolis in Indianapolis, Indiana, Richard continued a course of self-study which involved mastering design of web sites using web technologies like CSS, XHTML, and PHP. When not writing for Wrox or building a website, Richard works on open source webmail applications written for PHP PEAR, an open source repository of PHP applications. Richard also enjoys writing poetry, playing music, and painting. He maintains a website at www.smilingsouls.net that exhibits his personal and professional interests. 01_576429 ffirs.qxd 11/18/04 12:25 PM Page vi 01_576429 ffirs.qxd 11/18/04 12:25 PM Page vii Credits Senior Acquisitions Editor Vice President and Publisher Jim Minatel Joseph B. Wikert Development Editors Project Coordinator Tom Dinse Erin Smith Brian Herrmann Jodi Jensen Graphics and Production Specialists Lisa England Production Editor Carrie Foster Angela Smith Denny Hager Joyce Haughey Technical Editor Jennifer Heleine Wiley-Dreamtech India Pvt Ltd Quality Control Technician Copy Editor John Greenough Mary Lagu Joe Niesen Editorial Manager Media Development Specialist Mary Beth Wakefield Angela Denny Vice President & Executive Group Publisher Proofreading and Indexing Richard Swadley TECHBOOKS Production Services 01_576429 ffirs.qxd 11/18/04 12:25 PM Page viii 02_576429 ftoc.qxd 11/18/04 12:27 PM Page ix Contents Acknowledgments xix Introduction 1 Chapter 1: Introducing Cascading Style Sheets 9 Who Creates and Maintains CSS? 10 How the Internet Works 11 Abridged History of the Web 12 How CSS Came to Be 13 Advantages of Using CSS 14 Summary 14 Chapter 2: Document Standards 17 Choosing Which Markup Language to Use 17 How to Write Markup 18 Which Browser to Use 19 Microsoft Internet Explorer 20 Gecko: Mozilla, Mozilla Firefox, and Netscape 21 Opera 22 KHTML: Safari and Konqueror 22 Introduction to HTML 23 Single Tags and HTML Line Breaks 23 HTML Attributes 25 XML 28 XHTML 31 XHTML Is Case-Sensitive 31 All Attribute Values Must Be Enclosed in Quotes 31 No Attribute Minimization Allowed 32 All Elements Require Both an Opening and Closing Tag 32 Why XHTML Is the Future 33 The Document Type Declaration 36 DOCTYPE Sniffing 37 Common Document Type Declarations 40 HTML 4.01 Transitional 40 HTML 4.01 Frameset 40 02_576429 ftoc.qxd 11/18/04 12:27 PM Page x Contents HTML 4.01 Strict 41 XHTML 1.0 Transitional 41 XHTML 1.0 Frameset 41 XHTML 1.0 Strict 41 Summary 42 Exercises 42 Chapter 3: The Basics of CSS Anatomy and Syntax 43 CSS Rules 43 Introducing Selectors 44 Grouping Selectors and Declarations 44 Including CSS in a Document 49 Including an Embedded Style Sheet 49 Linking to External Style Sheets 50 Importing Style Sheets 50 How to Structure an External CSS Document 51 Inline Styles 52 CSS Comments 54 Summary 54 Exercises 55 Chapter 4: Data Types, Keywords, Color, Length, and the URI 57 Keywords 57 Strings 59 Length and Measurement Options 63 Inconsistencies with Absolute Measurements 64 Metric Measurements 64 Typographical Measurements 65 Relative Length Measurements 65 Measurements Based on the Height of the Lowercase Letter x 67 Pixel Measurements 67 Percentage Measurements 68 Integers and Real Numbers 68 Colors 69 Color Keywords 70 RGB Colors 70 Hexadecimal Colors 71 Short Hexadecimal and Web-Safe Colors 72 The URI 73 Summary 74 Exercises 75 x 02_576429 ftoc.qxd 11/18/04 12:27 PM Page xi Contents Chapter 5: CSS Selectors 77 The Universal Selector 77 Contextual/Descendant Selectors 78 Direct Child Selectors 85 Direct Adjacent Sibling Combinator 89 Indirect Adjacent Sibling Combinators 92 Attribute Selectors 93 Selection Based on the Presence of an Attribute 93 Selection Based on the Value of an Attribute 94 Attribute Substring Selectors 95 Selection Based on Attribute Values That Begin with a String 95 Selection Based on Attribute Values That End with a String 95 Selection Based on Attribute Values That Contain a String 96 Class and ID Selectors 100 Summary 105 Exercises 106 Chapter 6: Pseudo-Element and Pseudo-Class Selectors 107 Pseudo-Elements 107 ::first-letter and ::first-line 108 ::selection 110 ::before and ::after 111 Pseudo-Classes 113 Dynamic Pseudo-Classes 113 :link and :visited 113 :hover 114 :active 115 :focus 116 Structural Pseudo-Classes 120 :root 120 :first-child 121 :last-child 121 :empty 122 The Negation Pseudo-Class :not 126 The :target Pseudo-Class 128 Summary 132 Exercises 133 xi 02_576429 ftoc.qxd 11/18/04 12:27 PM Page xii Contents Chapter 7: Inheritance and the Cascade 135 Inheritance 135 The inherit Keyword 137 The Cascade 137 Calculating the Specificity of a Selector 139 !important Rules 155 Custom Style Sheets 156 Specifying a Custom Style Sheet Using MSIE 156 Specifying a Custom Style Sheet Using Mozilla 156 Customizing Mozilla Using CSS 158 Summary 161 Exercises 162 Chapter 8: Text Manipulation 163 The JT’s Website 164 Developing a Design Strategy 164 Creating the Directory Structure 165 Settling on a Table of Contents 167 The letter-spacing Property 175 The word-spacing Property 179 Indenting Paragraph Text Using text-indent 181 Aligning Text with the text-align Property 185 Justifying Text 186 The text-decoration Property 191 The text-transform Property 196 The white-space Property 199 A Look Ahead to CSS 3 200 Summary 201 Exercises 202 Chapter 9: Font Manipulation 203 Specifying Fonts with the font-family Property 203 Generic Font Families 206 The font-style Property 211 The font-variant Property 215 The font-weight Property 216 Relative Values 218 xii 02_576429 ftoc.qxd 11/18/04 12:27 PM Page xiii Contents The font-size Property 221 Absolute Font Sizes 222 Relative Font Sizes 223 Percentage Font Sizes 225 The font Shorthand Property 230 System Fonts 232 Summary