CSS Tricks I wish I knew earlier

Photo by Caspar Camille Rubin on Unsplash

So you’ve built a website, and it’s looking good? But you want to take it that just little bit further? Well, here’s some quick things you can do with CSS to add a very unique touch or that will just make your life of styling SO much easier! Well, let’s get started!

Text Highlighting

Have you ever been using a website and highlighted some text to copy and paste, or just done it on accident? And have you ever noticed that it sometimes is a different color than other websites? It’s a very simple thing with CSS, but adds a very special little note to your website. Let’s take a look at how it works!

::selection {
   background-color: #d18800,
   color: #6e6e6e
}

And it’s as easy as that! Super duper simple, but adds a world of difference.

Using * and a selector

Have a website with multiple pages? Are you trying to style every <p> tag, and you have to sit there and scroll through the page looking for them? Well, scroll no longer! With this amazingly simple method, those days are long past!

If you are trying to style all of the <p> tags, then just use *p, and any styling you add to that, will be applied to ALL of your <p> tag elements, site wide. It’s a very basic and powerful tool, and it took me WAY too long to learn about it.

Photo by John Baker on Unsplash

Changing Link States

Wanting to change the way links on your website appear? It’s rather simple actually. If you want to change the way a link will appear, just use some CSS! In two lines of code, you can change the color of the link, and the color of the link after it’s been visited by a user already. Let’s take a look.

a:link { color: blue; }
a:visited { color: orange; }

In the above code, :link will apply that styling to all links that haven’t been clicked on by a user yet. And the :visited bit of code will apply that styling to any link that HAS been clicked on by a user. This adds an immense amount of usability to your site, and in my experience is something that’s often overlooked.

Multiple classes / selectors

Do you want to add that drop shadow or border to multiple bits of your website? Sure you can just copy and paste the CSS to work for your multiple classes or <p> tags, etc. But! What if there was an easier way? There is!

.sidebar, img, .article {
     border: 2px solid #000;
}

As easy as that, you now have added styling to anything with the .sidebar, img, and .article attached to them.

Photo by Edward Howell on Unsplash

These were all pretty basic things, but this is only scratching the surface of what CSS is able to do. There are a TON more little “tricks” like these out there, and if I were to write a blog about all of them.. It would take me FAR too long to do. I encourage you to go check out some tricks on your own! Happy coding!