Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Mastering CSS
Mastering CSS

Mastering CSS: A guided journey through modern CSS

eBook
€17.99 €26.99
Paperback
€32.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

Mastering CSS

Ramping Up

In order to be a great coder, you need to ramp up and learn about things that will help you become a better developer. In this chapter, we're going to look at text editors that will speed up our workflow. We'll then look at a CSS reset, which resets the default browser such that its styling is reduced to nothing, and the built-in browser developer tools to help us troubleshoot our code. Then, we'll look at how to rename elements with classes and IDs as well as qualify our selectors using descendant selectors.

Text editors

HTML, CSS, and JavaScript can be written in any text-editing application. This is one of the great things about the three core web languages. The problem is that writing HTML, CSS, and JavaScript is extremely error-prone. For CSS, commas, semicolons, and curly braces need to be typed in the right spots. A specific syntax needs to be adhered to perfectly in most cases, else your page won't render as expected. The following is an illustration of TextEdit for Mac. It's similar in nature to Notepad for Windows, in that it doesn't have many features that make writing code easy:

Let's write some code in TextEdit anyway. We start with the HTML doc type. Post this, we add an HTML opening and closing tag and then the head tag and inside that the title tag. You'll soon realize that it's a pretty tedious process, that is, writing code in TextEdit...

CSS reset

In the last section, you learned about the power of a good text editor. In this section, we're going to use that text editor to explore something called a CSS reset. There's a lot of pieces to starting a website that need to be in place and are typically part of your website boilerplate. I call these pieces your "base layer". A big part of this base layer is the CSS reset. A reset allows you to eliminate browser inconsistencies with regard to default browser styling and eliminate all default browser styles in general. It allows you to more easily provide your handcrafted styles using CSS. In this section, we're going to first load in a CSS reset, then examine that reset and see what it's doing. Finally, we'll add to and customize the reset to fit our needs.

...

Chrome DevTools

Most of the CSS we have done so far has been fairly simple. Everything we did worked the first time we tried, and that doesn't always happen. Often, CSS doesn't work and I'm left wondering what I missed. Syntax highlighting in my editor, while helpful, doesn't stop me from overlooking mistakes. Usually, it's a tiny mistake that causes something not to work and it's hard to find the error and fix it. In this section, we'll simply look at how to open up DevTools. Then, we'll modify some CSS in the inspector and finally look at the console to find errors.

How to open developer tools

To open up Chrome's DevTools, all you need to do is right-click or Ctrl + click on any...

Renaming elements — classes and IDs

Renaming elements is such a powerful feature of CSS. Let me set this up for you. So far, CSS has been good because we have been able to keep things consistent. All heading 1s are blue with a font size of 20 pixels, for instance, but what if you want your h1 to look different? That's where renaming and classifying elements really becomes useful. In this section, you're going to learn about how to rename and style elements based on classes and IDs. We'll look at how this will pay off on our shark website, first with classes, followed by IDs.

Classes

Look at the index.html file. You can see there are several HTML5 <section> tags throughout the page: one in the initial...

Descendant selectors

Renaming elements with classes, as you learned in the previous section, is an extremely powerful feature in CSS. However, that's not the only way to target a specific type of element. Descendant selectors will allow you to target elements on a page based on their ancestor elements. This is often necessary because you only want to apply a margin or a new font based on the context of the element. You can use a descendant selector to get that context without putting a class on every element every time you want to target it. I'm going to first explain what parent, sibling, and child elements are as well as what ancestor and descendant elements are. We'll need to be clear about these if we want to use descendant selectors. We'll follow this up by using a practical example of the descendant selector and finishing up by calculating the descendant...

Summary

In this chapter, you learned about the features of a good text editor, discussed CSS resets, explored the troubleshooting power of Chrome's DevTools, and learned how to rename elements with classes. In the final section of this chapter, you learned about descendant selectors.

The next chapter is about creating a multicolumn layer using floats and understanding the solutions to the problems that floats cause.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • 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

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.

Who is this book 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

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Oct 06, 2017
Length: 522 pages
Edition : 1st
Language : English
ISBN-13 : 9781787281585
Languages :
Concepts :
Tools :

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : Oct 06, 2017
Length: 522 pages
Edition : 1st
Language : English
ISBN-13 : 9781787281585
Languages :
Concepts :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 237.97
HTML5 and CSS3: Building Responsive Websites
€73.99
Mastering CSS, Second Edition
€130.99
Mastering CSS
€32.99
Total 237.97 Stars icon

Table of Contents

11 Chapters
CSS Foundations Chevron down icon Chevron up icon
Ramping Up Chevron down icon Chevron up icon
Creating a Page Layout with Floats Chevron down icon Chevron up icon
Creating Buttons with Modular, Reusable CSS Classes, and CSS3 Chevron down icon Chevron up icon
Creating the Main Navigation and Drop-Down Menu Chevron down icon Chevron up icon
Becoming Responsive Chevron down icon Chevron up icon
Web Fonts Chevron down icon Chevron up icon
Workflow for HiDPI Devices Chevron down icon Chevron up icon
Flexbox, Part 1 Chevron down icon Chevron up icon
Flexbox, Part 2 Chevron down icon Chevron up icon
Wrapping Up Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.3
(3 Ratings)
5 star 33.3%
4 star 33.3%
3 star 0%
2 star 0%
1 star 33.3%
S. A. K. Dec 15, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Full disclosure that I did receive a copy of this book free of charge in order to provide a review. To help the review reader get some perspective on where I am coming to this book from, I have been in frontend development for some time, and have read through many guides, resources, and a lot of documentation for work and side projects, so while there is much I know, there are also some areas where I certainly could improve. That being said, I tried to look at this book with a few specific questions in mind and I tried to take into account others' perspectives by focusing on the following questions as I read through:1) How well does this book cover important CSS topics?2) How well are the topics explained to someone who is new?3) How would this work for someone who knows CSS, but wants a good reference for new material as devices and standards evolve?1) I chose to focus on a few sections where I feel especially knowledgeable as well as a few where I felt less so to try to answer this. One important thing to note is that Rich has done a great job of using a realistic, project-based approach to pulling CSS concepts together. If you follow through his book, you build a site alongside Rich that has many, if not all, of the major CSS properties of most projects you'll encounter in modern web development. Topics such as building for retina displays on modern devices, flexbox, CSS3 transitions and animations is crucial to today's UIs and Rich ensures he covers all of these and much more. At each stage he provides an explanation of why we're doing what we're doing, and what the impact is on the user. Consistently, he brings into play performance considerations and accessibility -- also two very important themes in web development today that one can no longer afford to overlook. I am genuinely impressed by how the breadth and depth here.2) I think one of my favorite things about Rich's writing is how accessible and friendly it is to the user. Reading/coding along you hear the author's voice and feel as though you're sitting and having Rich walk you through a process, not like you're reading some opaque documentation. I think this is great for anyone just dipping their toes into CSS, because it can be very intimidating and because technology evolves so quickly in this sphere, it can be hard to know what works in modern development. Rich does a great job of making the journey comfortable and addressing the concerns that a beginner might have, and might not know s/he should have (i.e. accessibility, responsiveness, browser considerations), without piling too much onto the user. The author is trying to teach you and preempt your questions with clear and concise explanations, not just list off standards or try to get you to memorize things. Rich works hard to make the reader connect concepts and I think he does an excellent job.3) This is probably the piece of the review that I can address most easily because it applies directly to me as a frontend dev who considers himself pretty knowledgeable and capable. I loved that I could read any section of Mastering CSS and pick up one or two new things -- sometimes small, sometimes not, but always interesting and helpful. I spend a lot of time on frontend development and I have read many articles, books, etc. -- it was really refreshing to get the depth that Rich provides, and to be able to get it delivered so concisely. His explanation of how retina displays work and how to ensure a great user experience with images that support their strengths was very clear and one of those "oh wow, that's awesome" moments for me. Those are the moments that I think most devs love to come across and there were many instances where Rich provided additional detailed knowledge that gave me those moments. Of course, I'll continue to use many different sources of documentation (some of which Rich provides in his notes on resources for the user), but this is definitely added to my repertoire.Overall I think Rich does exactly what he sets out to do here, and I think he does it well. Again, I did receive a free copy in order to write this review, but consider this my recommendation when comparing Mastering CSS to several other books and authors I've read on the topic. If you absorbed everything Rich wrote in this book, you would be able to tackle the vast majority of CSS & CSS3 concerns that frontend developers encounter.
Amazon Verified review Amazon
Pratik Jan 08, 2018
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
This book is suitable for beginners diving into web design. The good thing about this book is that it does not assume any prior knowledge of CSS from you. The only prerequisite is to take your time to do practice and follow along all the examples. It begins from very simple example and that same example carries through the entire book while it teaches more detailed and complex concepts gradually. Before you know, you will have a fairly good understanding of CSS3, Responsive Web Design and some of the advanced concepts such as flexbox.On the flip side, I really wish author would have added couple of appendix on different CSS selectors and CSS specificity. That would server as a reference guide to at my desk and I could refer to them as and when needed.
Amazon Verified review Amazon
Christopher Allen-Poole Apr 17, 2018
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
There are a number of grammatical errors, some of the advice is outdated, other advice is just plain wrong. Much of the book is geared towards a novice, which might forgive some of the statements, but other statements are laughably wrong.- He calls using ID's and class names "renaming" elements. Renaming an element is changing a div to an article. What he's doing is changing the selector or specificity.- He references pseudo classes without explaining what they are (there is a vague reference to how they're used three chapters after he uses the first one).- He talks about IE7. That's not a thing anymore.- He confuses convention (calling things clearfix) with purpose (clearing CSS float property).- He advocates non-semantic CSS as a solution to the problem of non-semantic HTML- He (arguably) conflates anchors and buttons- The specificity "points" concept does not work the way he says. If you have eleven CSS classes in a selector that will not override one ID. (He does clarify this about two chapters after introducing the idea, but he's been using incorrect nomenclature the entire time.)
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.