Tips and Tricks
CSS Beginner Tips: 6 Time-Savers
When I was first learning, a simple list of CSS beginner tips would have made my life so much easier. While it is an easy-to-learn language, there are a ton of little tricks that you need to know beyond the language and syntax. Several advancements have also been made to improve the language over the years.
Consequently, I was only able to learn these nuances and improvements through years of trial and error. To save my CSS beginners time, here’s the list of CSS questions and answers that I wish existed when I was starting out.
6 Time-Saving CSS Beginner Tips
Why aren’t width and height working?
You set your width and height with CSS and your element won’t resize.
I’ve noticed a lot of CSS beginner tips or tutorials are missing one very important declaration with their lessons on width and height. Furthermore, I’ve seen several novices overlook this when they are asking me for help troubleshooting their code.
If you’re width and height aren’t working, there is a super simple solution.
.container {
display: block;
width: 80%;
height: 100%;
}
That’s it. The element just needs to have a block or inline-block display declaration set. You can check out the article on displays at W3Schools to explore the wide variety of options available.
How do I center align a container?
Now that you know how to properly set your page container width, you might notice that your content is hugging the left-hand side of the page. You want it to be centered, but text-align: center; isn’t centering the content correctly.
.container {
display: block;
width: 80%;
height: 100%;
margin: 0 auto;
}
The value of auto calculates and sets your margins based upon your element’s size and its container’s size, automatically. Unfortunately, this does not work for vertical alignment, but there is a really handy guide to centering on CSS-Tricks to help you out there.
Can I absolute position an element within a container, instead of the browser window?
You may know about absolute positioning and how useful it might be to place elements exactly where you want them on the page.
If you use absolute positioning alone, you’re only experiencing half of its usefulness. Wrapping an absolute positioned element in a relative positioned container positions that element within its container.
.container {
/* Previous styles */
position: relative;
}
.element {
display: block;
width: 50%;
position: absolute;
right: 0;
bottom: 0;
}
The position property has several different values to explore. For an expanded overview, I’d suggest looking at the positioning tutorial at W3Schools.
Why does the container get bigger when I add padding?
You’d think since the padding is set to add space within an element, that it would respect the width and height declarations placed on that element.
Unfortunately, that is not the case. Adding padding without adjusting the width or height to “make room” for it can really mess up your layout, especially if you have side-by-side elements.
As a result, CSS3 introduced box-sizing to solve the discrepancy between the way padding works and the developers’ expectations.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
The code above is a fix-all that is great for when you are starting a new project. If you’re modifying an older template (where a fix-all may cause issues), you can just add the declaration directly to your element or class. CSS-Tricks has a great history on box-sizing, if you want to learn more.
How do I make the background semi-transparent and the text opaque?
A dark or light translucent block over an image is a subtle way to make headlines or text blocks more legible.
If you’re a beginner, you may find the opacity CSS attribute and end your search. You apply opacity: 0.3; to your container. Immediately, you realize everything within the container is at 30% opacity, negating the legibility effect you were trying to achieve.
It wasn’t until CSS3 that RGBA was added as a legal color format. Take advantage of this alpha channel anywhere you’d normally use a hex code.
.container {
/* Previous styles */
background-image: url('bg-image.jpg');
}
.element {
background: rgba(0,0,0,0.3);
color: rgb(255,255,255);
}
Furthermore, RGBA is not your only option. W3Schools has a full run-down on the all the legal color values you can use in your CSS.
How can I code and debug CSS faster?
If you think memorizing the entire library of CSS attributes is the key to faster development, stop. I’ve been doing this for over 10 years and still use Google to double-check syntax sometimes. You only need to memorize what you use the most.
Your in-browser developer tool is fundamental for faster CSS coding and troubleshooting. This is the most important of all my CSS beginner tips. Honestly, it’s too important to add on as a cursory note in this post, so check out the deep-dive in my developer tools article.
In conclusion, I hope these tips help some apprentice devs avoid hours of trial and error. Since I am writing from my own experience, I’d love to hear your mind-blowing discoveries from when you were just starting out.
Do you have any CSS beginner tips that made your coding faster and easier? If you’re experienced, what do you notice junior coders overlooking when you troubleshoot their CSS? Share your favorite tips in the comments section below.
Most importantly, Device Mode is BAE. It’s Chrome’s emulator for mobile and tablet devices. It is always best to compatibility test on an actual device, but