learn-advanced-css

CSS Viewport Units: A Quick Start

Asha and Maria offer an accessible but thorough introduction to the use of CSS viewport units for truly responsive typography and layout elements on the web.

10 Ways to Hide Elements in CSS

Craig Buckler presents the various CSS methods available for hiding elements on a web page, looking at how they differ and which is best when.

How to Apply CSS3 Transforms to Background Images

Craig Buckler demonstrates a neat trick for applying CSS3 transforms to background images. Rotating and skewing elements with stunning backgrounds will now be a breeze!

Rem in CSS: Understanding and Using rem Units

Adrian Sandu explains the purpose and advantages of rem units, demonstrating ways to use em and rem units in CSS layouts.

Creating Flexible Layouts with Flexbox

Tiffany Brown introduces Flexbox, explaining the basic principles behind flex layout, with examples of laying out a basic media object, flexible form components, vertical centering, and creating grid-like layouts, as well as explaining when to use Flexbox over CSS Grid.

Creating Layouts with CSS Grid

Tiffany Brown introduces the basics of CSS Grid, covering the grid formatting context, defining a grid layout, explicit versus implicit grids, specifying track size for an implicit grid, creating flexible grids with flex units, using the grid-template shorthand property, and repeating rows and columns.

Using SVG with Media Queries

With HTML documents, we might show, hide, or rearrange parts of the page based on the conditions of the viewport. If the browser window is 480 pixels wide, for example, we might shift our navigation from a horizontal one to a vertical, collapsible list. We can do something similar with media queries and SVG documents.

Scroll Snap in CSS: Controlling Scroll Action

Scroll snap lets developers define the distance an interface should travel during a scroll action. You might use it to build slide shows or paged interfaces―features that currently require JavaScript and expensive DOM operations.

How to Use 2D Transformation Functions in CSS

Transforms allow us to create effects and interactions that are otherwise impossible. When combined with transitions and animations, we can create elements and interfaces that rotate, dance, and zoom. In this piece, we'll look at 2D transform functions.

How to Get Started with CSS Animation

Think of CSS animation as the more sophisticated sister to CSS transitions. Animations differ from transforms in a few key ways, which we'll explore in this article

CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS

We’ll now look at two methodologies for naming things in CSS: Block-Element-Modifier (better known as BEM) and Atomic CSS.

Variables in CSS: Custom Properties

Variables make it easier to manage colors, fonts, size, and animation values, and to ensure their consistency across a codebase.

Variable Fonts: What They Are, and How to Use Them

In this article, Cláudio Ribeiro looks at the exciting new possibilities surrounding variable fonts — now bundled with the OpenType scalable font format — which allows a single font to behave like multiple fonts.

3D Transformation Functions in CSS

Craig Buckler shows how to add another dimension to your web pages and applications with the new 3D transformation functions and properties in CSS, covering transform, translate, rotations, scaling, perspective and more, along with z-index, browser gotchas, and ideal use cases.

A Practical Guide to CSS Variables (Custom Properties)

Maria Antonietta Perna walks you through CSS variables/custom properties, the awesome new technology that adds more flexibility and fun to CSS coding.

A Friendly Introduction to Flexbox for Beginners

Christian Krammer walks you through the basics of Flexbox, showing how you can use flexbox to lay out specific page elements, and also how flexbox can serve as a handy fallback method in browsers that don't yet support CSS Grids.

An Introduction to the CSS Grid Layout Module

Ahmad Ajmi introduces CSS Grid Layout Module, showing beginner-friendly examples of how to use CSS Grid, as well as discussing current browser support and what to do if you need to support older browsers — from using a mobile-first layout as a fallback, to using other CSS fallbacks and even a polyfill.

Optimizing CSS: ID Selectors and Other Myths

Ivan Čurić covers the basics of CSS parsing, how to measure CSS selector performance, and how to deal with multiple render passing on dynamic pages.

The CSS Grid Layout vs CSS Frameworks Debate

Maria Antonietta Perna takes Bootstrap as representative of CSS frameworks, asking if there are still reasons to use frameworks now that we have CSS Grid.

Upgrade Your Project with CSS Selector and Custom Attributes

CSS font-display: The Future of Font Rendering on the Web

Giulio Mainardi explains the new font-display property and how it will help CSS developers improve rendering of fonts during page load.

CSS Architecture and the Three Pillars of Maintainable CSS

Zsolt Nagy discusses three principles of CSS architecture and why mastering them will help you keep your CSS maintainable and lean.

CSS Inheritance: An Introduction

Asha Laxmi introduces and explains what CSS inheritance is, how it helps development, and what pitfalls to avoid while using it.

A Walkthrough of CSS Length Units You Can Use for Font Size

Asha Laxmi walks you through the CSS length units you have at your disposal to size fonts like a pro: from pixels to ems, rems, viewport units and more.

The Meaning and Purpose of Responsive Web Design

How do we support this ever-increasing array of devices? The answer is responsive web design, which allows websites to adapt to screens of all sizes.

Structural Pseudo-Classes

In this exclusive excerpt from our book, HTML5 & CSS3 for the Real World, we examine the different types of structural pseudo-classes you can use.

Managing the CSS Box Model

In this exclusive excerpt from our book, CSS Master by Tiffany Brown, we look at the best ways of managing the CSS Box Model

Pseudo-classes – The Basics

In this article, we'll talk about the basics of Pseudo-class, by the author Alexis Goldstein.

Relational and Attribute Selectors in CSS3

In this excerpt from our book, HTML5 & CSS3 for the Real World (2nd Edition), we look at Relational and Attribute Selectors in CSS3

Learn about CSS Architecture: Atomic CSS

What exactly is Atomic CSS, and how do you use it? We give the lowdown through this exclusive excerpt from our book, CSS Master.