Mastering CSS

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.
Preview in Mapt

Mastering CSS

Rich Finelli

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.
Mapt Subscription
FREE
$29.99/m after trial
eBook
$22.40
RRP $31.99
Save 29%
Print + eBook
$39.99
RRP $39.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$22.40
$39.99
$29.99p/m after trial
RRP $31.99
RRP $39.99
Subscription
eBook
Print + eBook
Start 30 Day Trial

Frequently bought together


Mastering CSS Book Cover
Mastering CSS
$ 31.99
$ 22.40
Mastering CSS3 Selectors [Video] Book Cover
Mastering CSS3 Selectors [Video]
$ 94.99
$ 80.75
Buy 2 for $35.00
Save $91.98
Add to Cart
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 

Book Details

ISBN 139781787281585
Paperback522 pages

Book Description

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.

Table of Contents

Chapter 1: CSS Foundations
The anatomy of a rule set and the three types of style sheets
The box model and block versus inline elements
Summary
Chapter 2: Ramping Up
Text editors
CSS reset
Chrome DevTools
Renaming elements — classes and IDs
Descendant selectors
Summary
Chapter 3: Creating a Page Layout with Floats
Float introduction–flowing text around images
Creating a multicolumn layout
Solving the problems of floats
Summary
Chapter 4: Creating Buttons with Modular, Reusable CSS Classes, and CSS3
Creating buttons with modular CSS
Multiple classes
Specificity rules
Transitions
Transforms
Styling the call-to-action button
Gradients
Summary
Chapter 5: Creating the Main Navigation and Drop-Down Menu
Starting the navigation
Using pseudo classes
Absolute positioning
Building the drop-down menu
CSS animations (part 1)
CSS animations (part 2)
Finalizing the navigation
Summary
Chapter 6: Becoming Responsive
Fluid grids
A fluid grid on the shark movies page
Flexible images
Shrinking images on the shark movies page
Media queries
Mobile menu
Using jQuery to trigger the menu on a click
Viewport meta tag
Summary
Chapter 7: Web Fonts
The @font-face property
@font-face: a little tricky business
Google Web Fonts
Adobe Typekit
Icon fonts
Summary
Chapter 8: Workflow for HiDPI Devices
2x images
Background images
Scalable Vector Graphic (SVG)
Source set attribute (srcset)
Summary
Chapter 9: Flexbox, Part 1
Overview of the flexible box layout module
From floats to flexbox
Understanding flex-grow, flex-basis, flex-shrink, and flex
More layout, more positioning
Summary
Chapter 10: Flexbox, Part 2
Building the product listing
Using flex-wrap and align-content
Changing the display order of flex items
Vendor prefixes
Summary
Chapter 11: Wrapping Up
The next steps
Conclusion and links
Summary

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

Authors

Table of Contents

Chapter 1: CSS Foundations
The anatomy of a rule set and the three types of style sheets
The box model and block versus inline elements
Summary
Chapter 2: Ramping Up
Text editors
CSS reset
Chrome DevTools
Renaming elements — classes and IDs
Descendant selectors
Summary
Chapter 3: Creating a Page Layout with Floats
Float introduction–flowing text around images
Creating a multicolumn layout
Solving the problems of floats
Summary
Chapter 4: Creating Buttons with Modular, Reusable CSS Classes, and CSS3
Creating buttons with modular CSS
Multiple classes
Specificity rules
Transitions
Transforms
Styling the call-to-action button
Gradients
Summary
Chapter 5: Creating the Main Navigation and Drop-Down Menu
Starting the navigation
Using pseudo classes
Absolute positioning
Building the drop-down menu
CSS animations (part 1)
CSS animations (part 2)
Finalizing the navigation
Summary
Chapter 6: Becoming Responsive
Fluid grids
A fluid grid on the shark movies page
Flexible images
Shrinking images on the shark movies page
Media queries
Mobile menu
Using jQuery to trigger the menu on a click
Viewport meta tag
Summary
Chapter 7: Web Fonts
The @font-face property
@font-face: a little tricky business
Google Web Fonts
Adobe Typekit
Icon fonts
Summary
Chapter 8: Workflow for HiDPI Devices
2x images
Background images
Scalable Vector Graphic (SVG)
Source set attribute (srcset)
Summary
Chapter 9: Flexbox, Part 1
Overview of the flexible box layout module
From floats to flexbox
Understanding flex-grow, flex-basis, flex-shrink, and flex
More layout, more positioning
Summary
Chapter 10: Flexbox, Part 2
Building the product listing
Using flex-wrap and align-content
Changing the display order of flex items
Vendor prefixes
Summary
Chapter 11: Wrapping Up
The next steps
Conclusion and links
Summary

Book Details

ISBN 139781787281585
Paperback522 pages
Read More

Read More Reviews

Recommended for You

Mastering CSS3 Selectors [Video] Book Cover
Mastering CSS3 Selectors [Video]
$ 94.99
$ 80.75
Mastering CSS3 Colors [Video] Book Cover
Mastering CSS3 Colors [Video]
$ 49.99
$ 42.50
Mastering CSS - Second Edition [Video] Book Cover
Mastering CSS - Second Edition [Video]
$ 124.99
$ 106.25
Mastering CSS [Video] Book Cover
Mastering CSS [Video]
$ 94.99
$ 80.75
Mastering PostCSS for Web Design Book Cover
Mastering PostCSS for Web Design
$ 35.99
$ 25.20
Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile Book Cover
Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile
$ 26.99
$ 18.90