book

CSS: The Missing Manual, 4th Edition

by David Sawyer McFarland

August 2015

Beginner to intermediate

718 pages

20h 46m

English

O'Reilly Media, Inc.

Read now

Unlock full access

About the AuthorAbout the Creative TeamAcknowledgmentsThe Missing Manual Series
What Is CSS?What You Need to KnowHTML: The Barebones StructureDocument TypesHow HTML Tags WorkHTML5: More Tags to Choose FromSoftware for CSSFree ProgramsCommercial SoftwareAbout This BookAbout the OutlineThe Very BasicsAbout→These→ArrowsAbout the Online ResourcesLiving ExamplesAbout MissingManuals.comErrataSafari® Books Online
HTML: Past and PresentHTML Past: Whatever Looked GoodHTML Present: Scaffolding for CSSWriting HTML for CSSThink StructureMore HTML Tags to Keep in MindUnderstanding the <div> and <span> TagsAdditional Tags in HTML5Keep Your Layout in MindHTML to ForgetTips to Guide Your WayThe Importance of the DoctypeHow CSS Works
Anatomy of a StyleUnderstanding Style SheetsInternal or External—How to ChooseInternal Style SheetsExternal Style SheetsTutorial: Creating Your First StylesCreating an Inline StyleCreating an Internal Style SheetCreating an External Style Sheet
Type Selectors: Styling HTML TagsClass Selectors: Pinpoint ControlOne Tag, Multiple ClassesID Selectors: Specific Page ElementsStyling Groups of TagsConstructing Group SelectorsThe Universal Selector (Asterisk)Styling Tags Within TagsThe HTML Family TreeBuilding Descendant SelectorsCreating ModulesPseudo-Classes and Pseudo-ElementsStyles for LinksStyling Paragraph PartsMore Pseudo-Classes and Pseudo-Elements:Focus:Before:After::SelectionAttribute SelectorsChild Selectors:First-Child:First-Child:Last-Child:Only-Child:Nth-ChildChild Type Selectors:First-of-Type:Last-of-Type:Nth-of-TypeSiblingsThe :target SelectorThe :not() SelectorTutorial: Selector SamplerCreating a Group SelectorCreating and Applying an ID SelectorCreating and Applying a Class SelectorCreating a Descendant SelectorFinishing Touches
What Is Inheritance?How Inheritance Streamlines Style SheetsThe Limits of InheritanceTutorial: InheritanceA Basic Example: One Level of InheritanceUsing Inheritance to Restyle an Entire PageInheritance In Action
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 OverridingAvoiding Specificity WarsStarting with a Clean SlateTutorial: The Cascade in ActionResetting CSS and Styling from ScratchCreating a Hybrid StyleOvercoming Conflicts

Using FontsChoosing a Common FontSerif FontsSans-Serif FontsMonospaced and Fun FontsAdditional Fonts to ConsiderUsing Web FontsFont File TypesLegal Issues with Web FontsFinding Web FontsGenerating Multiple Font FormatsUsing the @font-face DirectiveCreating Styles Using Web FontsDealing with Bold and Italic Font VariantsThe Easy Way to Add Bold and ItalicAdding Bold and Italic and Supporting Internet Explorer 8Discovering Google Web FontsFinding and Selecting FontsUsing Google FontsAdding Color to TextHexadecimal Color NotationRgbRgbaHsl and HslaChanging Font SizeUsing PixelsUsing Keywords, Percentages, and EmsKeywordsPercentagesEmsRemsFormatting Words and LettersItalicizing and BoldingCapitalizingSmall CapsDecoratingLetter and Word SpacingAdding Text ShadowFormatting 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
Understanding the Box ModelControlling Space with Margins and PaddingMargin and Padding ShorthandColliding MarginsRemoving Space with Negative MarginsInline, Block, and Other Display SettingsAdding BordersBorder Property ShorthandFormatting Individual BordersColoring the BackgroundCreating Rounded CornersAdding Drop ShadowsDetermining Height and WidthCalculating a Box’s Actual Width and HeightRedefining Box Width with Box-SizingControlling the Tap with the Overflow PropertyMaximum and Minimum Heights and WidthsWrapping Content with Floating ElementsBackgrounds, Borders, and FloatsStopping the FloatTutorial: Margins, Backgrounds, and BordersControlling Page Margins and BackgroundsAdjusting the Space Around TagsBuilding a SidebarGoing Further
Discovering CSS and the <img> TagAdding Background ImagesControlling RepetitionPositioning a Background ImageKeywordsPrecise ValuesPercentage ValuesFixing an Image in PlaceDefining the Origin and Clipping for a BackgroundScaling Background ImagesUsing Background Property ShorthandUsing Multiple Background ImagesUtilizing Gradient BackgroundsLinear GradientsColor StopsInternet Explorer SupportRepeating Linear GradientsRadial GradientsRepeating Radial GradientsTutorial: Enhancing ImagesFraming an ImageTutorial: Creating a Photo GalleryAdding Drop ShadowsTutorial: Using Background ImagesAdding an Image to the Page BackgroundReplacing Borders with GraphicsUsing Graphics for Bulleted ListsGiving the Sidebar Personality
Selecting Which Links to StyleUnderstanding Link StatesTargeting Particular LinksGrouping links with descendant selectorsStyling LinksUnderlining LinksCreating a ButtonUsing GraphicsBuilding Navigation BarsUsing Unordered ListsVertical Navigation BarsHorizontal Navigation BarsUsing Display: Inline and Display: Inline-BlockUsing Floats for Horizontal NavigationCSS-Style Preloading RolloversStyling 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” LinksFrom Vertical to Horizontal
TransformsRotateScaleTranslateSkewMultiple TransformationsOriginTransitionsAdding a TransitionTransition TimingDelaying a Transition’s StartTransition ShorthandAnimationsDefining KeyframesApplying an AnimationTiming the AnimationFinishing the AnimationAnimation ShorthandPausing an AnimationAnimating on HoverTutorialAdding an Animation
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
Types of Web Page LayoutsHow CSS Layout WorksThe <div> TagHTML5 Sectioning ElementsTechniques for CSS LayoutLayout StrategiesStart with Your ContentMobile FirstStart with a SketchIdentify the BoxesGo with the FlowRemember Background ImagesPieces of a PuzzleLayering ElementsDon’t Forget Margins and Padding
Applying Floats to Your LayoutsFloating All ColumnsFloats Within FloatsOvercoming Float ProblemsClearing and Containing FloatsCreating Full-Height ColumnsPreventing Float DropsPreventing Float Drops With Box-SizingTutorial: Multiple-Column LayoutsStructuring the HTMLCreating the Layout StylesAdding Another ColumnAdding Some Breathing RoomFixing the WidthMixing Liquid and Fixed Design
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 BoxCreating CSS-Style Frames Using Fixed PositioningTutorial: Positioning Page ElementsEnhancing a Page BannerPlacing Captions on the Photos
Responsive Web Design BasicsSetting Up a Web Page for RWDMedia QueriesStrategies for Using Media QueriesCreating BreakpointsDesktop First or Mobile First?Creating Media QueriesIncluding Queries Inside a Style SheetA Basic Style Sheet StructureMobile FirstFlexible GridsThe Importance of HTML Source OrderReset the Box ModelConverting Fixed Width to Flexible GridsFluid ImagesThe Downside of Fluid ImagesVideos and FlashResponsive Web Design TutorialChanging the HTML Source OrderFluid ImagesAdding Styles for Tablet ScreensAdding Phone Styles
How Grids WorkStructuring Your HTML for GridsUsing the Skeleton Grid SystemCreating and Naming ColumnsCreating Full Width SectionsStyling ButtonsMobile FirstTutorial: Using a Grid SystemAdding a GridAdding StyleThe Mobile DesignStyling a Breakpoint
Introducing FlexboxFlexbox BasicsFlex Container PropertiesFlex-FlowJustify-contentAlign-itemsAlign-contentFlex Item PropertiesThe Order PropertyAlign-selfMini-Tutorial: Auto Margins for Flex ItemsFlexDigging into the MathReturning to the Flex-Shrink PropertyWrapping Flex ItemsThe Bottom LineTutorial: Build a Flexbox LayoutStyling the Navigation BarAdding Three ColumnsFormatting the FooterChanging the Navigation Bar for Mobile
Adding CommentsOrganizing StylesName Classes ClearlyName Classes by Purpose Not AppearanceDon’t Use Names Based on PositionAvoid Cryptic NamesDon’t Repeat YourselfUse Multiple Classes to Save TimeUse Shorthand PropertiesGrouping Related StylesUsing Comments to Separate Style GroupsUsing Multiple Style SheetsEliminating Browser Style InterferenceUsing Descendant SelectorsCompartmentalize Your PagesIdentify the Body
What is Sass?Installing SassInstalling Sass on WindowsInstalling Sass on MacSass BasicsOrganizing Your FilesConverting Your Current Site to SassRunning SassOrganizing Your Styles with Sass PartialsCreating and Using Sass PartialsOrganizing Your Sass Partial FilesSass VariablesOrganizing Your Sass VariablesCommon Uses for Sass VariablesNesting SelectorsReferencing the Parent SelectorMultiple Levels of NestingInheriting (or Extending) PropertiesExtending With Placeholder SelectorsOnly Extend Related ElementsMixinsCreating a MixinUsing a MixinGiving Mixins InformationInserting Variables into TextPassing More Information and Optional Values to MixinsWorking with Media QueriesCreating Media Query MixinsSetting Breakpoint Variables.Creating the Media Query MixinsUsing the Media Query MixinsTroubleshooting with CSS Source Maps
CSS ValuesColorsKeywordsRGB ValuesLengths and SizesPixelsEmsPercentagesRemsVhVwVminVmaxKeywordsURLsText 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-decoration (inherited)text-indent (inherited)text-shadow (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 Marginsbox-shadowborderborder-radiusborder-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-widthbox-sizingoutlineoutline-coloroutline-styleoutline-widthpaddingpadding-toppadding-rightpadding-bottompadding-leftmarginmargin-topmargin-rightmargin-bottommargin-leftBackgroundsbackgroundbackground-attachmentbackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizePage Layout Propertiesbottomclearclipdisplayfloatheightleftmax-heightmax-widthmin-heightmin-widthoverflowpositionrighttopvisibilitywidthz-indexAnimation, Transform and Transition Properties@keyframesanimationanimation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-statetransformtransform-origintransitiontransition-propertytransition-durationtransition-timing-functiontransition-delayTable Propertiesborder-collapseborder-spacingcaption-sideempty-cellstable-layoutMiscellaneous Propertiescontentcursoropacityorphanspage-break-insidewidows
ReferencesWorld Wide Web Consortium (W3C)Other Online ReferencesCSS HelpDiscussion BoardsCSS Tips, Tricks, and AdviceCSS NavigationTutorialsOnline ExamplesCSS LayoutShowcase Sites