CSS Tricks To Enhance Your Website
In the time that I’ve been building apps and working on personal projects, I’ve grown to appreciate programmers who are adept at styling with CSS. It amazes me how people can manipulate simple elements and create masterpieces (if you’re not convinced, go check out CSS Zen Garden, where you can see just how different the same web page can look with different CSS). Now, I’m admittedly no expert on CSS, so if you came here looking for Building A Beautiful Web Page With CSS 101, you may be disappointed. What I do have to offer, however, are some simple CSS tricks that will help you when you’re styling your site, and will add that little extra something for your users!
Updating Links
As developers, one of our goals is to make our websites as user-friendly as possible. This means thinking of the smallest things that will make a huge difference to the usability of our projects. One of the most overlooked ways that we can improve usability is by updating the color of links once they’ve been clicked. Let’s take a look at the CSS that allows us to do this!
It’s as simple as two lines of code. In the example above, the :link selector will select any links that have not yet been visited and style them with a blue color. After a link is clicked on, the :visited pseudo-class will apply to that link and change the color to red. This one is such a simple way to make your website a bit easier to use. Whether or not you have a ton of links on your site, your users will thank you! Read more about :link and :visited here.
Highlighting Selected Text
Coming at you with another trick that we take for granted sometimes when we’re using a website. Say you’re on Wikipedia reading up on Tom Hanks when you see a paragraph you’d really like to send to your mom (I don’t know, this is hypothetical!) — you’re probably going to select that text so that you can copy and paste it. When you do select your Tom Hanks paragraph, you see your selected text highlighted in a different color.
Look familiar? For this example I’ve used the light blue color that Wikipedia uses when you highlight text. So how do we achieve this effect?
You’re going to use the ::selection pseudo-element in CSS which applies styling to the portion of an element that the user selects. In this case, we set the color and the background color of the selected texts, but you can also customize your selected text in other ways like adding a text shadow or changing the cursor. Check out some specifics on ::selection here!
Hover Effects
Lastly, a really simple way to jazz up your website is to add hover effects, especially to elements that are meant to be interacted with. I think it’s super important to add styling that makes your site appear more interactive and less like a static, lifeless page of elements. Hover effects allow you to change the styling of a certain element when the user’s mouse is hovering over that element.
To do this, we need to utilize another CSS pseudo-class, the :hover pseudo-class. In the example above, any h2 tags on the website will be black until the user hovers over the h2. At that point, the color and size of the text will change. Much like the other tricks in this article, you can alter more than just the color of your elements using the :hover pseudo-class. You can read more about :hover here.
These are just a few of the many things you can accomplish using CSS. Consider incorporating one or all of these tricks into your next project and see what a difference it makes!
