Advanced CSS Tutorials
CSS isn't just used for colors and fonts—all layout work is done through a stylesheet. In the past, this is where web designers got caught up the most, fiddling with positioning and CSS hacks to make their work appear as uniformly as possible across a variety of browsers.
Thankfully, modern day, CSS support has matured considerably. The standards now make it easier than ever to create complex layouts for both desktops and mobile devices with minimal setup. This section is dedicated to high-level styling, building responsive layouts, working with more advanced selectors and combinators, pseudo-classes, and the two most powerful tools CSS3 offers, grid and flexbox.
(This section hasn't been written yet—hold tight!)
| Tutorial | Description |
|---|---|
| CSS Positioning Made Easy | Explaining CSS' position rule and how not to drive yourself batty with relative, fixed, and sticky positioning. |
| Taking Stock With Media Queries | Media queries allow you to detect everything from device type to screen size and load stylesheets and rulesets specifically built for certain devices. |
| Selectors and Combinators | Sometimes, you need to get a little fancy with what you're trying to style. CSS features a variety of selectors and combinators for getting more granular without needing a class. |
Viewport Units and calc() |
Over the past few years, CSS has gotten a lot smarter. The spec now allows you to calculate out percentages and element sizing on the fly if necessary. |
| Flexbox | Flexbox is an advanced, fully modern layout engine that can dynamically reorder and resize parts of your page depending on the size of the viewport. |
| CSS Grid | Grid enables the creation of complex, two-dimensional page layouts with far less hassle than before. |