book

CSS: The Missing Manual, 4th Edition

Name: CSS: The Missing Manual, 4th Edition
Author: David Sawyer McFarland
ISBN: 9781491918050

by David Sawyer McFarland

August 2015

Beginner to intermediate

718 pages

20h 46m

English

O'Reilly Media, Inc.

Read now

Unlock full access

CSS: The Missing Manual
The Missing Credits
About the AuthorAbout the Creative TeamAcknowledgmentsThe Missing Manual Series
Introduction
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
1. CSS Basics
1. HTML and CSS
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
2. Creating Styles and Style Sheets
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
3. Selectors: Identifying What to Style
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
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 In Action
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 OverridingAvoiding Specificity WarsStarting with a Clean SlateTutorial: The Cascade in ActionResetting CSS and Styling from ScratchCreating a Hybrid StyleOvercoming Conflicts
2. Applied CSS

6. Formatting Text
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
7. Margins, Padding, and Borders
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
8. Adding Graphics to Web Pages
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
9. Sprucing Up Your Site’s Navigation
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
10. CSS Transforms, Transitions, and Animations
TransformsRotateScaleTranslateSkewMultiple TransformationsOriginTransitionsAdding a TransitionTransition TimingDelaying a Transition’s StartTransition ShorthandAnimationsDefining KeyframesApplying an AnimationTiming the AnimationFinishing the AnimationAnimation ShorthandPausing an AnimationAnimating on HoverTutorialAdding an Animation
11. 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
3. CSS Page Layout
12. Introducing CSS Layout
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
13. Building Float-Based Layouts
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
14. 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 BoxCreating CSS-Style Frames Using Fixed PositioningTutorial: Positioning Page ElementsEnhancing a Page BannerPlacing Captions on the Photos
15. Responsive Web Design
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
16. Using a CSS Grid System
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
17. Modern Web Layout with Flexbox
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
4. Advanced CSS
18. Improving Your CSS Habits
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
19. More Powerful Styling with Sass
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
5. Appendixes
A. CSS Property Reference
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
B. CSS Resources
ReferencesWorld Wide Web Consortium (W3C)Other Online ReferencesCSS HelpDiscussion BoardsCSS Tips, Tricks, and AdviceCSS NavigationTutorialsOnline ExamplesCSS LayoutShowcase Sites
Index
About the Author
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, 4th Edition

by David Sawyer McFarland

404

Not Found