Warning: The magic method Shapely_Related_Posts::__wakeup() must have public visibility in /home/samanthasoper/public_html/wp-content/themes/shapely/inc/class-shapely-related-posts.php on line 89
CSS Beginner Tips: 6 Time-Savers | Samantha Soper
Skip to content
Samantha Soper
  • About
  • Work
  • Services
  • Blog
Site Search

CSS Beginner Tips: 6 Time-Savers

CSS Beginner Tips: 6 Time-Savers

  • Samantha Soper
  • February 24, 2017June 15, 2017
  • Tips and Tricks

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.

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • More
  • Click to email a link to a friend (Opens in new window)
  • Click to print (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Pocket (Opens in new window)
  • Click to share on WhatsApp (Opens in new window)
  • Click to share on Telegram (Opens in new window)

Related


2 COMMENTS
  • Jens
    February 24, 2017 at 9:18 pm
    Reply

    Awesome jeans!! You are such a great teacher.

  • Michael Minshew
    April 5, 2017 at 1:47 pm
    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 Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Connect with me

  • Facebook
  • LinkedIn
  • GitHub
  • Dribbble
  • Vimeo
  • Twitter

Recent Posts

  • The UX Researcher: Methodologies, Process, and Tools
  • How to Become a UX Designer: Tips from my Experience
  • CSS Beginner Tips: 6 Time-Savers
  • Developer Tools: The Key to Speedy CSS
  • Free Textures & Patterns: 5 Freesources

Trending

  • Austin Asian Community Health Initiative (AACHI) Brand Identity Kit
    Austin Asian Community Health Initiative (AACHI) Brand Identity Kit
  • HostGator Blog Theme on WordPress
    HostGator Blog Theme on WordPress
  • Bluehost Blog Theme on WordPress
    Bluehost Blog Theme on WordPress
  • Kettlebell Kings Character Concept Art & Illustration
    Kettlebell Kings Character Concept Art & Illustration
  • The UX Researcher: Methodologies, Process, and Tools
    The UX Researcher: Methodologies, Process, and Tools

Like what you see?

Contact me
2025 Samantha Jean Soper
  • Facebook
  • LinkedIn
  • GitHub
  • Dribbble
  • Twitter
 

Loading Comments...