Easy CSS Solutions

Last Updated: January 12, 2020

Every frontend web developer can use a handy cheatsheet of easy CSS solutions. So, I've gone through some of my past projects and pulled a few quick and easy tricks to help make things easier for newer developers. In this list, you'll find ways to turn an element sticky, gain dashed line underlining capabilities, flow the text of your page around a defined shape, achieve parallax effects, and more. Most use widely supported features, while others are on their way for full support by all browsers.

Enjoy!

Numbering Headings and Subheadings

Forget about numbering headings and subheadings with scripts. Don't even think about doing it all manually, either. Simply use this CSS trick that's been around since CSS2 to make your life easier.

See the Pen rNaKNVV by Troy Beglinger (@troy-beglinger) on CodePen.



Alternative Underlines

While underlining text isn't something you'll need to do often, it's nice to know you have some options when you do. Lucky for you, CSS3 gave us three new options: text-decoration-color, text-decoration-line, and text-decoration-style, which can all be shorthanded using text-decoration.

Now, you can style your text using underlines, overlines, blinking text, and a whole lot more. And, it works in all modern browsers.

See the Pen xxbzxOR by Troy Beglinger (@troy-beglinger) on CodePen.



Quoting Quotes

Sometimes, you'll need to have two or more levels of inline quotes, and the default double quotes you get from using <q> just aren't good enough. That's when it's time to break out the CSS.

See the Pen dyPKyNV by Troy Beglinger (@troy-beglinger) on CodePen.



Fixing Your Tables

While tables have become a bit passé over the years thanks to the rise of lists, every now and again there just ins't any other way to organize your information. And, when you get stuck using them, there's always a chance that you'll end up with a huge table with varying sizes of cell content, even if you took the time to specify their width. When that happens, it's time to check out the table-layout property.

In particular, what you need to look into is the table-layout: fixed; value, which lets you set the width of your cells based on the width of the first row of cells. Using that, you can allow the user to set the width, rather than the content. And, best of all, it works in all browser types.

See the Pen oNgyNGo by Troy Beglinger (@troy-beglinger) on CodePen.



Sticky Elements

When you need a picture or link to follow the user as they move through the page, your best friend is position: sticky;. They start off working like a relatively positioned element until a set point on the page is scrolled past, and then they act like a fixed element, staying right where you want it. Just remember to keep them small, so they don't interfere with the user's ability to read the page on smaller screens.

See the Pen VwYdwxX by Troy Beglinger (@troy-beglinger) on CodePen.



Shaping Text Flows

While you're probably already familiar with word wrapping and text floating, there is another way to go if you want a more defined and natural curve. That way is CSS shapes. To use them, we simply combine shape-outside, shape-margin and shape-image-threshold.

See the Pen BayVaGe by Troy Beglinger (@troy-beglinger) on CodePen.



Mandatory Form Fields

Most forms will have some fields that are required, and some that aren't. Thankfully, CSS offers us a super easy way to handle them by using the pseudo classes of :required and :optional.

See the Pen xxbzxvp by Troy Beglinger (@troy-beglinger) on CodePen.



Special Selection Colors

Every now and then, the default blue selection color just doesn't work with the site you've made. It just looks horrible and makes you want to cry. Now, thanks to the ::selection pseudo element, you can make any area of text highlight with whatever color you want.

See the Pen ExaRajo by Troy Beglinger (@troy-beglinger) on CodePen.



Checking Your Checkboxes

Sometimes, you want to make sure a user knows they've ticked a box other than just having a little checkmark or an x tell them they did. Maybe you even want to give them a splash of color to go with it. With CSS, you can exploit the bonds between sibling elements, so when the box gets checked, you can light up the text next to it for a little bit of a visual "pop".

All this trick takes is using the :checked pseudo class to tick the box, and adding the sibling selector using a "+" to target the label in the CSS code.

See the Pen povKvPe by Troy Beglinger (@troy-beglinger) on CodePen.



Storybook Text

Have you ever wanted to have your text look like it does in an old-time storybook, with the first letter of the paragraph larger than the rest? All you need to do is put the ::first-letter pseudo element to work for you.

See the Pen KKwewvW by Troy Beglinger (@troy-beglinger) on CodePen.



Quick Centering

Centering objects and text in CSS can be a very complicated mess at times, epecially once you start stacking div elements. One of the easiest ways to handle this is outlined in the following snippet.

See the Pen LYErEmq by Troy Beglinger (@troy-beglinger) on CodePen.



Displaying File Formats

While you can use any number of methods to display the file format of a link, from text to icons, one of the easiest ways is to use CSS. Namely, you need to use content:url() to automatically pass an image through.

See the Pen WNbybKp by Troy Beglinger (@troy-beglinger) on CodePen.