book

CSS: The Missing Manual, 2nd Edition

Name: CSS: The Missing Manual, 2nd Edition
Author: David Sawyer McFarland
ISBN: 9780596802448

by David Sawyer McFarland

August 2009

Intermediate to advanced

558 pages

18h 5m

English

O'Reilly Media, Inc.

Read now

Unlock full access

A Note Regarding Supplemental Files
The Missing Credits
About the AuthorAbout the Creative TeamAcknowledgementsThe Missing Manual Series
Introduction
How CSS WorksThe Benefits of CSSWhat You Need to KnowHTML: The Barebones StructureHow HTML Tags WorkXHTML: HTML for the New Era?HTML 5: The Wheel Turns AgainSoftware for CSSFree ProgramsCommercial SoftwareAbout This BookAbout the OutlineLiving ExamplesAbout MissingManuals.comThe Very BasicsAbout → These → ArrowsSafari® Books Online
I. CSS Basics
1. Rethinking HTML for CSS
HTML: Past and PresentHTML Past: Whatever Looked GoodHTML Present: Scaffolding for CSSWriting HTML for CSSThink StructureTwo New HTML Tags to LearnHTML to ForgetTips to Guide Your WayThe Importance of the DoctypeGetting the Most out of Internet Explorer 8
2. Creating Styles and Style Sheets
Anatomy of a StyleUnderstanding Style SheetsInternal or External—How to ChooseInternal Style SheetsExternal Style SheetsLinking a Style Sheet Using HTMLLinking a Style Sheet Using CSSTutorial: Creating Your First StylesCreating an Inline StyleCreating an Internal Style SheetCreating an External Style Sheet
3. Selectors: Identifying What to Style
Tag Selectors: Page-Wide StylingClass Selectors: Pinpoint ControlID Selectors: Specific Page ElementsStyling Groups of TagsConstructing Group SelectorsThe Universal Selector (Asterisk)Styling Tags Within TagsThe HTML Family TreeBuilding Descendent SelectorsPseudo-Classes and Pseudo-ElementsStyles for LinksStyling Paragraph PartsMore Pseudo-Classes and -Elements:before:after:first-child:focusAdvanced SelectorsChild SelectorsAdjacent SiblingsAttribute SelectorsTutorial: Selector SamplerCreating a Group SelectorCreating and Applying a Class SelectorCreating a Descendent SelectorCreating and Applying an ID SelectorFinishing Touches
4. Saving Time with Style Inheritance
What Is Inheritance?How Inheritance Streamlines Style SheetsThe Limits of InheritanceTutorial: InheritanceA Basic Example: One Level of InheritanceUsing Inheritance to Restyle an Entire PageInheritance Inaction
5. Managing Multiple Styles: The Cascade
How Styles CascadeInherited Styles AccumulateNearest Ancestor WinsThe Directly Applied Style WinsOne Tag, Many StylesSpecificity: Which Style WinsThe Tiebreaker: Last Style WinsControlling the CascadeChanging the SpecificitySelective OverridingStarting with a Clean SlateTutorial: The Cascade in ActionResetting CSS and Styling from ScratchCreating a Hybrid StyleOvercoming Conflicts
II. Applied CSS

6. Formatting Text
Formatting TextChoosing a FontSerif fontsSans-serif fontsMonospaced and fun fontsAdditional fonts to considerAdding Color to TextHexadecimal color notationRGBChanging Font SizeUsing PixelsUsing Keywords, Percentages, and EmsKeywordsPercentagesEmsFormatting Words and LettersItalicizing and BoldingCapitalizingSmall capsDecoratingLetter and Word SpacingFormatting Entire ParagraphsAdjusting the Space Between LinesLine spacing by pixel, em, or percentageLine spacing by numberAligning TextIndenting the First Line and Removing MarginsFirst-line indentsControlling margins between paragraphsFormatting the First Letter or First Line of a ParagraphStyling ListsTypes of ListsPositioning Bullets and NumbersGraphic BulletsTutorial: Text Formatting in ActionSetting Up the PageFormatting the Headings and ParagraphsFormatting ListsFine-Tuning with ClassesAdding the Finishing Touches
7. Margins, Padding, and Borders
Understanding the Box ModelControl Space with Margins and PaddingMargin and Padding ShorthandColliding MarginsRemoving Space with Negative MarginsDisplaying Inline and Block-Level BoxesAdding BordersBorder Property ShorthandFormatting Individual BordersColoring the BackgroundDetermining Height and WidthCalculating a Box’s Actual Width and HeightControlling the Tap with the Overflow PropertyWrap Content with Floating ElementsBackgrounds, Borders, and FloatsStopping the FloatTutorial: Margins, Backgrounds, and BordersControlling Page Margins and BackgroundsAdjusting the Space Around TagsBuilding a SidebarFixing the Browser BugsGoing Further
8. Adding Graphics to Web Pages
CSS and the <img> TagBackground ImagesControlling RepetitionPositioning a Background ImageKeywordsPrecise ValuesPercentage ValuesFixing an Image in PlaceUsing Background Property ShorthandTutorial: Enhancing ImagesFraming an ImageAdding a CaptionTutorial: Creating a Photo GalleryAdding Drop ShadowsTutorial: Using Background ImagesAdding an Image to the Page BackgroundReplacing Borders with GraphicsUsing Graphics for Bulleted ListsGiving the Sidebar PersonalityGoing Further
9. Sprucing Up Your Site’s Navigation
Selecting Which Links to StyleUnderstanding Link StatesTargeting Particular LinksGrouping links with descendent selectorsStyling LinksUnderlining LinksCreating a ButtonUsing GraphicsBuilding Navigation BarsUsing Unordered ListsVertical Navigation BarsHorizontal Navigation BarsUsing display: inlineUsing floats for horizontal navigationAdvanced Link TechniquesBig Clickable ButtonsCSS-Style Preloading RolloversSliding DoorsStyling Particular Types of LinksLinks to other websitesEmail linksLinks to specific types of filesTutorial: Styling LinksBasic Link FormattingAdding a Background Image to a LinkHighlighting Different LinksTutorial: Creating a Navigation BarAdding Rollovers and Creating “You Are Here” LinksFixing the IE BugsFrom Vertical to Horizontal
10. Formatting Tables and Forms
Using Tables the Right WayStyling TablesAdding PaddingAdjusting Vertical and Horizontal AlignmentCreating BordersStyling Rows and ColumnsStyling FormsHTML Form ElementsLaying Out Forms Using CSSTutorial: Styling a TableTutorial: Styling a Form
III. CSS Page Layout
11. Introducing CSS Layout
Types of Web Page LayoutsHow CSS Layout WorksThe Mighty <div> TagTechniques for CSS LayoutLayout StrategiesStart with Your ContentMock Up Your DesignIdentify the BoxesGo with the FlowRemember Background ImagesPieces of a PuzzleLayering ElementsDon’t Forget Margins and Padding
12. Building Float-Based Layouts
Applying Floats to Your LayoutsFloating All ColumnsFloats Within FloatsUsing Negative Margins to Position ElementsOvercoming Float ProblemsClearing and Containing FloatsCreating Full-Height ColumnsPreventing Float DropsHandling Internet Explorer 6 BugsDouble-Margin Bug3-Pixel GapsOther IE ProblemsTutorial: Multiple-Column LayoutsStructuring the HTMLCreating the Layout StylesAdding Another ColumnAdding a “Faux Column”Fixing the WidthTutorial: Negative Margin LayoutCentering a LayoutFloating the ColumnsFinal Adjustments
13. Positioning Elements on a Web Page
How Positioning Properties WorkSetting Positioning ValuesWhen Absolute Positioning Is RelativeWhen (and Where) to Use Relative PositioningStacking ElementsHiding Parts of a PagePowerful Positioning StrategiesPositioning Within an ElementBreaking an Element Out of the BoxUsing CSS Positioning for Page LayoutCreating CSS-Style Frames Using Fixed PositioningTutorial: Positioning Page ElementsEnhancing a Page BannerAdding a Caption to a PhotoLaying Out the Page
IV. Advanced CSS
14. CSS for the Printed Page
How Media Style Sheets WorkHow to Add Media Style SheetsSpecifying the Media Type for an External Style SheetSpecifying the Media Type Within a Style SheetCreating Print Style SheetsUsing !important to Override Onscreen StylingReworking Text StylesStyling Backgrounds for PrintRemoving background elementsLeaving background elements inHiding Unwanted Page AreasAdding Page Breaks for PrintingTutorial: Building a Print Style SheetRemove Unneeded Page ElementsAdjusting the LayoutReformatting the TextDisplaying URLs
15. Improving Your CSS Habits
Adding CommentsOrganizing Styles and Style SheetsName Styles ClearlyName styles by purpose not appearanceDon’t use names based on positionAvoid cryptic namesUse Multiple Classes to Save TimeOrganize Styles by GroupingUsing comments to separate style groupsUsing Multiple Style SheetsEliminating Browser Style InterferenceUsing Descendent SelectorsCompartmentalize Your PagesIdentify the BodyManaging Internet Explorer HacksDesign for Contemporary Browsers FirstIsolate CSS for IE with Conditional CommentsConditional comments and IE 8Conditional comments and the cascade
16. CSS 3: CSS on the Edge
An Overview of CSS 3CSS 3 SelectorsChild SelectorsType SelectorsOpacityRGBA ColorSimulating RGBA in Internet ExplorerText ShadowFont FreedomGenerated Content
V. Appendixes
A. CSS Property Reference
CSS ValuesColorsKeywordsRGB valuesLengths and SizesPixelsEmsPercentagesKeywordsURLsText Propertiescolor (inherited)font (inherited)font-family (inherited)font-size (inherited)font-style (inherited)font-variant (inherited)font-weight (inherited)letter-spacing (inherited)line-height (inherited)text-align (inherited)text-decorationtext-indent (inherited)text-transform (inherited)vertical-alignwhite-spaceword-spacing (inherited)List Propertieslist-style (inherited)list-style-image (inherited)list-style-position (inherited)list-style-type (inherited)Padding, Borders, and Marginsborderborder-top, border-right, border-bottom, border-leftborder-colorborder-top-color, border-right-color, border-bottom-color, border-left-colorborder-styleborder-top-style, border-right-style, border-bottom-style, border-left-styleborder-widthborder-top-width, border-right-width, border-bottom-width, border-left-widthoutlineoutline-coloroutline-styleoutline-widthpaddingpadding-toppadding-rightpadding-bottompadding-leftmarginmargin-topmargin-rightmargin-bottommargin-leftBackgroundsbackgroundbackground-attachmentbackground-colorbackground-imagebackground-positionbackground-repeatPage Layout Propertiesbottomclearclipdisplayfloatheightleftmax-heightmax-widthmin-heightmin-widthoverflowpositionrighttopvisibilitywidthz-indexTable Propertiesborder-collapseborder-spacingcaption-sideempty-cellstable-layoutMiscellaneous Propertiescontentcursororphanspage-break-afterpage-break-beforepage-break-insidewidows
B. CSS in Dreamweaver CS4
Creating StylesPhase 1: Set Up the CSS TypePhase 2: Defining the StyleAdding Styles to Web PagesLinking to an External Style SheetApplying a Class StyleApplying a class style to textApplying a class style to objectsOther class styling optionsRemoving a Class StyleApplying IDs to a TagEditing StylesEditing in the Properties PaneManaging StylesDeleting a StyleRenaming a Class StyleDuplicating a StyleMoving and Managing StylesExamining Your CSS in the Styles PanelCurrent Selection ModeDeciphering the CascadeUsing the Code Navigator
C. CSS Resources
ReferencesWorld Wide Web Consortium (W3C)Books and PDFsOther Online ReferencesCSS HelpEmail ListDiscussion BoardsCSS Tips, Tricks, and AdviceCSS NavigationTutorialsOnline ExamplesCSS and GraphicsCSS LayoutBox Model InformationFloat LayoutsAbsolute Position LayoutsLayout ExamplesMiscellaneous Layout ResourcesBrowser BugsWindows Internet ExplorerShowcase SitesCSS BooksCSS SoftwareWindows and MacWindows OnlyMac Only
Index
About the Author
Colophon
Copyright

404

Not Found

Either this content does not exist or you do not have access to it. Try searching for something new.

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

CSS: The Missing Manual, 2nd Edition

by David Sawyer McFarland

404

Not Found