Mastering CSS
A guided journey through modern CSS
1st Edition
Published on 8. July 2025
522 pages
978-1-78712-057-0 (ISBN)
Description
No detailed description available for "Mastering CSS".
More details
Person
Finelli Rich :
Rich Finelli is a husband and a father living in Piscataway, NJ, working as a frontend developer. He's truly passionate and excited for all frontend technologies and enjoys learning about web design and development. He also teaches two courses on CSS at Mercer County Community in NJ, and writes about web design on his blog, richfinelli.com.
Rich Finelli is a husband and a father living in Piscataway, NJ, working as a frontend developer. He's truly passionate and excited for all frontend technologies and enjoys learning about web design and development. He also teaches two courses on CSS at Mercer County Community in NJ, and writes about web design on his blog, richfinelli.com.
Content
- Cover
- Title Page
- Copyright
- Credits
- About the Author
- www.PacktPub.com
- Customer Feedback
- Table of Contents
- Preface
- Chapter 1: CSS Foundations
- The anatomy of a rule set and the three types of style sheets
- Dissecting a rule set
- External style sheets
- Embedded style sheets
- Inline style sheets
- The box model and block versus inline elements
- The box model
- Block level elements versus inline elements
- Summary
- Chapter 2: Ramping Up
- Text editors
- Snippets
- Multiple cursors
- Syntax highlighting
- Code suggestion
- CSS reset
- Loading Eric Meyer's CSS reset
- Examining the CSS reset
- Customizing the CSS reset
- Chrome DevTools
- How to open developer tools
- Changing CSS inside the inspector
- Using the console to find errors
- Renaming elements - classes and IDs
- Classes
- Classifying multiple elements
- IDs
- Should we use classes or IDs?
- Descendant selectors
- Parent, child, and sibling elements
- Creating descendant selectors
- Calculating the weight of selectors
- BEM
- Summary
- Chapter 3: Creating a Page Layout with Floats
- Float introduction-flowing text around images
- The Shark movies page
- The original purpose of floats
- Using the clear property to solve basic problems with floats
- Creating a multicolumn layout
- Centering an element
- Floating columns
- Targeting .column using a pseudo class
- Collapsed containers
- Solving the problems of floats
- Using the clear method
- Using overflow property with hidden value
- The float method
- Clearfix hack
- Summary
- Chapter 4: Creating Buttons with Modular, Reusable CSS Classes, and CSS3
- Creating buttons with modular CSS
- Different button types
- Building standard buttons
- Multiple classes
- Changing the width of the buttons
- Changing the border and font colors of the buttons
- Positioning the button
- Specificity rules
- The weights of different selectors
- The !important declaration
- The universal selector
- Reality of the point system
- Transitions
- Creating a hover state
- Using the transition property
- Vendor prefixes
- Transforms
- Applying a scale to our button
- Using the translate function
- Using the rotate value
- Adding vendor prefixes and :focus states
- Styling the call-to-action button
- Adding the HTML
- Positioning using CSS
- Styling the button
- Gradients
- Using the ultimate CSS gradient generator
- The CSS output of the ultimate gradient generator
- Summary
- Chapter 5: Creating the Main Navigation and Drop-Down Menu
- Starting the navigation
- The semantic HTML for building a menu
- Using CSS to style the navigation
- Using pseudo classes
- The first child
- The last child
- nth-child pseudo class
- nth-of-type pseudo class
- Absolute positioning
- Absolutely positioning the shark
- Using fixed positioning for the nav bar
- Building the drop-down menu
- Creating the basic HTML list
- Styling the dropdown
- Fixing the hover state
- Hiding the drop-down menu using the off-screen hidden technique
- CSS animations (part 1)
- Defining the animation name, duration, and timing function
- Setting additional keyframes
- Vendor prefixes
- CSS animations (part 2)
- Animation delay, iteration-count, and fill-mode
- animation-fill-mode
- Using the animation shorthand
- Vendor prefixes
- Additional info on animations
- Finalizing the navigation
- Fixing the Z index issue
- Adding box-shadow
- Summary
- Chapter 6: Becoming Responsive
- Fluid grids
- Converting pixels to percentages
- Calculating percentage widths
- Changing padding to a percentage
- A fluid grid on the shark movies page
- Flexible images
- The octopus, crab, and whale images
- The shark image
- Shrinking images on the shark movies page
- Media queries
- Anatomy of a media query
- Considering iPads and other tablet dimensions
- Adding our three columns to the media query
- The mobile-first approach
- Solving the navigation problem
- Mobile menu
- Styling the mobile nav in its open state
- Adding the hamburger menu icon
- Hiding the menu
- Using jQuery to trigger the menu on a click
- Viewport meta tag
- Testing our responsive design on a mobile device
- The anatomy of the viewport meta tag
- Summary
- Chapter 7: Web Fonts
- The @font-face property
- Adding font files directly to the site
- Defining and applying new fonts in our CSS
- @font-face: a little tricky business
- Making it work in all browsers
- Google Web Fonts
- Finding Google Fonts
- Applying fonts in CSS
- Adobe Typekit
- Selecting fonts from Typekit
- Adding fonts to the site
- Icon fonts
- Building the footer
- Downloading a free icon font from the ZURB Foundation
- Adding the icon font to our website
- Styling icon fonts
- Summary
- Chapter 8: Workflow for HiDPI Devices
- 2x images
- Creating a retina size image (2x)
- Sizing down the 2x image using CSS
- Checking the image quality on a retina device
- Background images
- Targeting the seaweed in the footer
- Media query for device pixel ratio
- Serving the 2x image only to retina devices
- Scalable Vector Graphic (SVG)
- Saving an Illustrator file as an SVG
- Adding the SVG file as a background image
- Adding the SVG as a regular ol' &img&
- You can't stop SVG's, you can only hope to constrain them!
- Using an inline SVG
- Source set attribute (srcset)
- What is srcset?
- Adding a set of images to srcset
- Testing the image set
- Simplifying the srcset attribute
- Browser support
- Using the W descriptor and sizes attribute of the srcset attribute
- Summary
- Chapter 9: Flexbox, Part 1
- Overview of the flexible box layout module
- Flex terminology
- Flex container and flex items
- Main size and cross size
- Main axis and cross axis
- Justify-content and align-items
- From floats to flexbox
- Removing float-related properties from the columns section
- Turning on flexbox using display: flex
- Changing the flex-direction
- Browser shrinking
- Understanding flex-grow, flex-basis, flex-shrink, and flex
- Using flex-grow
- Using flex-basis
- Using flex-shrink
- Using the flex shorthand
- More layout, more positioning
- Using the justify-content property
- Nesting Flexboxes
- Using automatic margins
- Summary
- Chapter 10: Flexbox, Part 2
- Building the product listing
- Using align-items
- Using the align-self Flexbox property
- Using flex-wrap and align-content
- Using flex-wrap
- Using align-content
- Using the flex-flow shorthand
- Changing the display order of flex items
- Accessibility impact
- Vendor prefixes
- Autoprefixer
- Gulp
- Flexbox homework assignment
- Summary
- Chapter 11: Wrapping Up
- The next steps
- CSS preprocessors
- Variables
- Mixins
- SASS nesting
- Creating and importing partial files with SASS
- JavaScript and jQuery
- Conclusion and links
- The box model and block versus inline elements
- Floats
- Modular CSS
- CSS3
- Creating the navigation
- Making the site responsive
- Web fonts
- HiDPI devices
- Flexbox
- Final tidbit of advice: Audio Podcasts are terrific
- Summary
- Index
