CSS is an essential part of the modern web. It’s what makes our websites beautiful and our web apps more colorful and mobile-friendly. We can even create amazing animation effects. Over the years, developers have discovered new tips and tricks that make CSS more exciting. In this article and podcast, I’ll cover the top three CSS tricks that every new developer should learn.
I know that CSS can be somewhat of a controversial topic. Some developers hate it with a passion but they know it’s an essential part of web development, while others will build their careers upon CSS and simply can’t do without it. Personally, CSS for me is like when I was a child and my mom would buy me a new set of crayons or colored pencils. They were the new ‘tools’ that I could add to my collection of other crayons and colored pencils, of which I had many. My mom would tell you how much I loved my crayons and pencils and used them literally all the time.
Of course I use CSS in all of my projects, especially when it comes to fonts, font-sizes, changing the text color, and margins. That’s the obvious right? But when it comes to CSS effects, it has to fit the end goal for the project I’m working on. Animation and effects on a webpage can get to be too much. So it has to be a right fit for the project.
Most of all, I like to use CSS a lot when it comes to color, like my crayons and colored pencils. CSS makes it easy to add color to text, buttons, backgrounds and navigational bars. But CSS can do so much more and is becoming more advanced. For those who are sweating it, don’t fret! I’ve put in lots of examples in this article :)
Centering a div element with CSS can be a tad challenging, but it is definitely possible. Sometimes I’ve defaulted to using Bootstrap because adding a Bootstrap class can be easier than messing with CSS. However, taking the easy route might not always be the solution, and besides, why not learn how to do it both ways?
Using CSS for centering a div looks something like this:
In this example, I’ve already assigned an id attribute to my HTML div element. The id of the div element is ‘centered-div’. In my CSS, I’ll use the ‘#’ (hashtag) symbol and the id name of my div element to assign two properties to it: 1) the display property and 2) the margin property.
If I set the margin property to auto, my CSS will automatically set the margins around my div element based on the size of the user’s screen. This is effective even on mobile devices. The display:block; property will display an element in ‘block’ format, starting on a new line. It will also take up the full width of the screen. But when using display:block; in tandem with the margin property, they really balance each other out and it allows us then to center the div element. This example can also be effective if you use a div element to wrap around an image on your webpage.
I discovered this technique early on in my journey of learning to code. At first I almost always used pixels in the size property for the height and width of my element. But I realized that if I used a percentage for the value instead of pixels, it would give the element a form of responsiveness. Here’s an example:
In the above snippet, in stylizing the rectangle, it will always be sized to 20% of the height and 60% of the width of the users screen. This helped me many times when I was resizing a paragraph of text with an opaque background, or if I needed to resize multiple elements, like images combined with their descriptions. Amazing isn’t it?
But I want to give a word of caution here: While using percentages can be really exciting when you have a large element to resize, I would not recommend using percentages to apply sizes to your text elements for example. The reason being is you would be dealing in hundredths of a percent to make the text look right. It would simply be more hassle than it’s worth. Percentages have their place in CSS, but so do pixels.
I love using CSS transition effects especially for elements that I want to change on :hover. On my website, you’ll find that I’ve used a transition effect on my navigational bar. If you hover your mouse over one of the links, you’ll see the background color change. But it doesn’t just ‘snap’ to the new color. The background color kind of moves in softly, but not too slow either. This is thanks to CSS transitions. See the following sample:
transition: background-color 0.5s ease;
In the example above, I want the button element to change color when I hover over it. I use the background-color property to access the color of the button, and I want the color to change to orange. Then I assign the transition property to the button, because I don’t want it to be a stark, sudden change. I want it to ease in. Let’s break down the syntax of the transition property:
1) I am applying the transition effect to the background color property.
2) Next, I want the entire transition effect to last all of 0.5s (half a second)
3) Lastly, I want it to ease in. Ease is a default CSS value that I find to be perfect for most transition effects.
This was so simple and yet creates a nice visual effect on your webpage. You can learn more about CSS transition effects on developer.mozilla.org.
Now this is not an ‘essential’ trick…this is just for fun. One of the coolest tricks in CSS is changing the color around a piece of text that is selected for copying and pasting for example. We know most of the time, when we select text in the browser, the color around the text is blue, right? You can change that with CSS, giving your website one of the most “not-well-known” effects out there. Let’s go over the following sample of code:
/* for Safari and Chrome */
/* for Mozilla */
/* for Opera */
/* for Internet Explorer */
The selection CSS pseudo-element targets the element the user has selected. In this case we’re appling color to the text that has been selected. In the code sample above, the selection pseudo-element changes the background color around the text to yellow, using the background-color property. It also changes the color of the text (when selected) to white with the color property. In this sample, I’ve also included the different vendor-prefixes for Mozilla, Internet Explorer and Opera browsers. It is important to use vendor-prefixes to make sure that your website looks the same across the different browsers. I won’t get into vendor-prefixes here, but I’ll be sure to cover the topic in a future article/podcast. You can find out more about the selection element and vendor-prefixes on developer.mozilla.org.
You can see all of these examples in action here in Codepen:
I hope you have enjoyed reading this article and have found a CSS trick that you’ll want to add to your tool bag. Don’t forget to check out my podcast, A Cup of Code Podcast, available for listening on Spotify, Apple Podcasts, Google Podcasts, and anywhere else podcasts are available!