Tiny CSS Projects Version 8

Tiny CSS Projects MEAP V08
Copyright
Welcome
Brief contents
Chapter 1: CSS introduction
	1.1 Overview
		1.1.1 Separation of Concerns
		1.1.2 What is CSS?
	1.2 Getting started with CSS by creating an article layout
		1.2.1 Setup
	1.3 Adding CSS to our HTML
		1.3.1 Inline CSS
		1.3.2 Internal CSS
		1.3.3 External CSS
	1.4 The cascade of cascading style sheets
		1.4.1 User-agent style sheets
		1.4.2 Author stylesheets
		1.4.3 User stylesheets
		1.4.4 CSS reset
		1.4.5 Normalize
		1.4.6 !important
	1.5 Specificity
	1.6 CSS selectors
		1.6.1 Basic selectors
		1.6.2 Combinators
		1.6.3 Pseudo-class and pseudo-element selectors
		1.6.4 Attribute value selectors
		1.6.5 The universal selector
	1.7 Different ways to write CSS
		1.7.1 Shorthand
		1.7.2 Formatting
	1.8 Summary
Chapter 2: Designing a layout using CSS grids
	2.1 Display
	2.2 Grid tracks and lines
		2.2.1 Repeating columns
		2.2.2 Minmax
		2.2.3 The auto keyword
		2.2.4 Flexible length
	2.3 Grid template areas
		2.3.1 grid-area
	2.4 Grid gap
	2.5 Media Queries
	2.6 Accessibility
	2.7 Summary
Chapter 3: Creating a responsive animated loading screen
	3.1 SVG and graphics
		3.1.1 Positions
		3.1.2 Viewport
		3.1.3 ViewBox
		3.1.4 Shapes in SVG
	3.2 Applying styles to SVGs
		3.2.1 Fill
	3.3 Animation module
		3.3.1 Animation property
		3.3.2 Keyframes and Animation name
		3.3.3 Duration
		3.3.4 Iteration count
		3.3.5 Animation shorthand property
		3.3.6 Delay
	3.4 Transform origin
	3.5 Accessibility and the reduced motion query
	3.6 Styling an HTML progress bar
		3.6.1 Styling the progress bar
	3.7 Vendor Prefixes
		3.7.1 Appearance property
		3.7.2 Styling the progress bar for -webkit- vendor prefixed browsers
		3.7.3 Browser prefixes Styling the progress bar for -moz- vendor prefixed browsers
	3.8 Summary
Chapter 4: Creating a responsive web newspaper layout
	4.1 Setting up our theme
		4.1.1 Importing fonts from Google Fonts
		4.1.2 Font-weight property
		4.1.3 Font shorthand property
		4.1.4 Creating a visual hierarchy
		4.1.5 Inline versus block elements
		4.1.6 Quotes
	4.2 CSS counters
		4.2.1 Symbols
		4.2.2 System
		4.2.3 Suffix
		4.2.4 Putting it all together
	4.3 Styling images
		4.3.1 The filter property
		4.3.2 Handling broken images
		4.3.3 Formatting captions
	4.4 Using the CSS multi-column layout module
		4.4.1 Media queries
		4.4.2 Defining and styling columns
		4.4.3 Using the column-rule property
		4.4.4 Adjusting spacing with the column-gap property
		4.4.5 Making content span multiple columns
		4.4.6 Controlling content breaks
	4.5 Finishing touches
		4.5.1 Text justification and hyphens
		4.5.2 Wrapping the text around the image
		4.5.3 Max-width and margin auto
	4.6 Summary
Chapter 5: Summary cards with hover interactions
	5.1 Getting started
	5.2 Laying out the page using grid
		5.2.1 Media queries
	5.3 Styling the header using background-clip
		5.3.1 Setting the font
		5.3.2 Background-clip
	5.4 Styling the cards
		5.4.1 Outer card container
		5.4.2 Inner container and content
	5.5 Transition on hover and focus-within
	5.6 Summary
Chapter 6: Creating a profile card
	6.1 CSS custom properties
	6.2 Full height backgrounds
	6.3 Styling and centering the card using flexbox
		6.3.1 Using flexbox to center elements
	6.4 Styling and positioning the profile picture
		6.4.1 Object-fit
		6.4.2 Negative margins
	6.5 Background size and positioning
	6.6 Styling the content
		6.6.1 Styling the name and job title
		6.6.2 Space-around and gap
		6.6.3 Flex-basis and flex-shrink
		6.6.4 Flex-direction
		6.6.5 Styling the paragraph
		6.6.6 Flex-wrap
		6.6.7 Styling the actions
	6.7 Summary
Chapter 7: Harnessing the full power of float
	7.1 Adding a drop cap
		7.1.1 Leading
		7.1.2 Justification
		7.1.3 First Letter
	7.2 Styling the quote
	7.3 Curving text around the compass
		7.3.1 Shape-Outside: Circle
		7.3.2 Clip-Path
		7.3.3 Shape-box
	7.4 Wrapping text around the dog
		7.4.1 Using path()... or not yet
		7.4.2 Using the image
		7.4.3 Shape Margin
	7.5 Summary
Chapter 8: Designing a checkout cart
	8.1 Getting Started
	8.2 Theming
		8.2.1 Typography
		8.2.2 Links and Buttons
		8.2.3 Input fields
		8.2.4 Table
		8.2.5 Definition List
		8.2.6 Cards
	8.3 Mobile Layout
		8.3.1 Table Mobile View
		8.3.2 Definition List
		8.3.3 Call to Action Links
		8.3.4 Padding, Margin, and Margin Collapse
	8.4 Medium screen size layout
		8.4.1 Table layouts
	8.5 Wide screens
	8.6 Summary
Chapter 10: Styling forms
	10.1 Creating backgrounds using radial-gradient
		10.1.1 Setting the color scheme using custom properties
		10.1.2 Manipulating a radial gradient
		10.1.3 Emphasizing the form
	10.2 Resetting fieldset styles
	10.3 Styling input fields
		10.3.1 Styling text and email inputs
		10.3.2 Making selects and textareas match the input styles
		10.3.3 Styling radio inputs and checkboxes
		10.3.4 :where() and :is() pseudo-classes
		10.3.5 Styling checked radio and checkbox inputs
		10.3.6 Using the :checked pseudo-class
		10.3.7 Shaping the checked radio input’s inner disk
		10.3.8 Using CSS shapes to create the checkmark
		10.3.9 Calculating specificity with :is() and :where()
	10.4 Styling dropdowns
		10.4.1 Select styling limitations
		10.4.2 Using linear-gradients to create an arrow
	10.5 Styling labels and legends
	10.6 Styling the buttons
		10.6.1 Resetting the button styles
		10.6.2 Styling the submit button
		10.6.3 Styling the reset button
	10.7 Error handling
		10.7.1 Styling error messages
	10.8 Adding hover and focus styles to form elements
		10.8.1 :focus versus :focus-visible
		10.8.2 Adding hover styles
	10.9 Handling forced-color mode
	10.10 Summary
Chapter 11: Animated social media share links
	11.1 CSS Architecture
		11.1.1 OOCSS
		11.1.2 SMACSS
		11.1.3 BEM
		11.1.4 Picking an approach
	11.2 Setup
	11.3 Sourcing Icons
		11.3.1 Media Icons
		11.3.2 Icon libraries
	11.4 Styling the block
	11.5 Styling the elements
		11.5.1 Share button
		11.5.2 Share menu
		11.5.3 Share links
		11.5.4 Scale()
		11.5.5 The inherit property value
	11.6 Animating the component
		11.6.1 Transition
		11.6.2 Opening and closing the component
		11.6.3 Animating the menu
	11.7 Summary