CSS Beginner Tips: 6 Time-Savers

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%;
}
CSS Display Attribute

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;
}
Margin Property

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;
}
Position Property

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;
}
Box-Sizing Property

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);
}
Legal Color Values

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.


Samantha Soper

Creative and interactive force of nature. Innovative, hardworking, and adaptive. Currently manages web presence for Golf Town, serving Canada in English and French. Loves learning, creating, and producing positive results.

2 COMMENTS
  • Jens
    Reply

    Awesome jeans!! You are such a great teacher.

  • Michael Minshew
    Reply

    Awesome Article,
    The thing I forget most while I’ve been learning CSS is the crazy commenting. /* text here */ . I probably over comment in general and having to use 2 different symbols is annoying. I just started learning C though and its the same so I guess at some level that made me feel better.

Leave a Reply

Your email address will not be published. Required fields are marked *

Like what you see?

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close