Mastering CSS

Mastering CSS

by Rich Finelli
Released October 2017
Publisher(s): Packt Publishing
ISBN: 9781787281585

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Rich Finelli's modern CSS training course, based on his bestselling Mastering CSS video, now available in a book. Master CSS from best practices to practical CSS coding.

About This Book

  • Learn CSS directly from Rich Finelli, author of the bestselling Mastering CSS training course
  • From best practices to deep coding, Rich Finelli shares his CSS knowledge with you
  • Rich Finelli covers the latest CSS updates with flexbox and works with retina devices

Who This Book Is For

This book is for web designers who wish to master the best practices of CSS in their web projects. You already know how to work with a web page, and want to use CSS to master website presentation.

What You Will Learn

  • Master fundamental CSS concepts like the anatomy of a rule set, the box model, and the differences between block and inline elements
  • Employ flexbox to layout and align elements simply and cleanly
  • Become proficient with CSS3 properties such as transitions, transforms, gradients, and animations
  • Delve into modular, reusable, and scalable CSS for more organized and maintainable style sheets
  • Understand media queries and other pillars of responsive web design
  • Get creative with the @font-face property, Google Web Fonts, font services such as Typekit, as well as, icon fonts
  • Understand the workflow for HiDPI (retina) devices using 2x images, SVG, and the srcset attribute

In Detail

Rich Finelli trains you in CSS deep learning and shows you the techniques you need to work in the world of responsive, feature-rich web applications. Based on his bestselling Mastering CSS training video, you can now learn with Rich in this book! Rich shares with you his skills in creating advanced layouts, and the critical CSS insights you need for responsive web designs, fonts, transitions, animations, and using flexbox.

Rich begins your CSS training with a review of CSS best practices, such as using a good text editor to automate your authoring and setting up a CSS baseline. You then move on to create a responsive layout making use of floats and stylable drop-down menus, with Rich guiding you toward a modular-organized approach to CSS.

Your training with Rich Finelli then dives into detail about working with CSS and the best solutions to make your websites work. You'll go with him into CSS3 properties, transforms, transitions, and animations. You’ll gain his understanding of responsive web designs, web fonts, icon fonts, and the techniques used to support retina devices. Rich expands your knowledge of CSS so you can master one of the most valuable tools in modern web design.

Style and approach

Let Rich Finelli train you in CSS! This book has a direct training style because it is based on Rich's bestselling Mastering CSS training course.

Table of contents

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

Product information

  • Title: Mastering CSS
  • Author(s): Rich Finelli
  • Release date: October 2017
  • Publisher(s): Packt Publishing
  • ISBN: 9781787281585