CSS: REMs vs EMs

So you’ve been using pixels (px) for your font sizes since you first learned CSS, but you’ve been hearing about REM and EM units and how they should be used for today’s websites instead of pixels. Before I try to explain how they work, what exactly are they? An EM is a CSS unit mainly used today for font sizes. A REM is a root EM (this is explained more later).

The first thing to note is that the default font size in most web browsers today is 16px. EMs and REMs lets developers scale elements up and down, which is very useful for responsive design (mobile and small screens vs large screens) and accessibility. The web browser converts the EMs/REMs into pixel values.

How do REMs work?

REM units look at the font size of the root element of the page, which is the html element (remember it’s 16px by default usually), and they take that size and multiply it by the REM value you set.

So in the below REMs example, the “text-1” class is set to use 1.5rem and that will be multiplied by 16, which equals 24, so the font size will be 24px. Make sense?

REMs example

/*CSS*/
.text-1 {
  font-size: 1.5rem;
}

/*HTML*/
<html>
  <body>
    <p class="text-1">Testing text 1.</p>
  </body>
</html>

How do EMs work?

EM units look at the font size of its parent and they take that size and multiply it by the EM value you set.

So in the below EMs example, the “text-2” class is set to use 1.5em and that will be multiplied by the font size of its parent (“text-2″‘s parent is the body element and the body’s font size is 12), so it will be 1.5 x 12, which equals 18, so the font size will be 18px. Make sense?

EMs example

/*CSS*/
body {
  font-size: 12px;
}
.text-2 {
  font-size: 1.5em;
}

/*HTML*/
<html>
  <body>
    <p class="text-2">Testing text 2.</p>
  </body>
</html>

If you have any questions feel free to leave a comment and ask. Also, if you found my explanation confusing or if you learn better with video, I recommend checking out the below helpful video by YouTuber Coder Coder where she goes over using REMs instead of pixels.

px vs rem: what to use for font-size in your CSS

Sharing resources and articles – August 2021

It’s been a long time since I’ve posted one of these, a post where I share resources and interesting news from around the web in the past month.

Disabling tab hover cards in MS Edge

In a previous blog post I listed the steps for disabling tab hover cards in Chrome but now I must share how to do the same in the Microsoft Edge web browser. If you’re using MS Edge and not sure what a tab hover card is, move your mouse cursor to a tab, leave it there for a second and a rectangular box will appear displaying the website’s “title” and then below that will be the website’s favicon and domain name. See the below screenshot of what a tab hover card looks like for this website’s homepage.

Screenshot of a Tab Hover Card in the Microsoft Edge browser
Screenshot of a Tab Hover Card in the Microsoft Edge browser

Steps to turn off tab hover cards in MS Edge

  1. In Edge’s address bar, type in (or copy/paste): edge://flags/#tab-hover-cards
  2. On the right side, change the drop-down from “Default” to “Disabled”
  3. You will have to click the “Restart” button at the bottom in order for this change to take effect and you’re done

If you ever need to turn it back on in the future, just follow the same steps above and change the drop-down.

Bootstrap 5 is here

Bootstrap 5 is here and tutorials and websites are being created about it around the web. One good source for web development video tutorials is Traversy Media on YouTube and he recently put out a beginner-friendly crash course using Bootstrap 5 to create a simple website. You can watch the crash course video down below or watch it on YouTube.

The Bootstrap components, utilities and other HTML elements used in the crash course include: a navbar, cards, an accordion, a modal, a hamburger menu (which will only appear on medium and small screens), flex containers, sizing images, buttons, a simple one-field form using an input group with a submit button, list groups, a form with multiple fields, and also using Bootstrap icons.

Bootstrap 5 Crash Course | Website Build & Deploy

New CSS to style underlines

Mozilla’s Jen Simmons posted a video on YouTube recently talking about some new CSS for styling underlines, “text-underline-offset,” “text-decoration-thickness,” and “text-decoration-skip-ink.” The video I am referring to is embedded below and I added a few simple code examples down below as well.

I think these new styles will be useful and web developers can now stop using CSS borders to style underlines (for those that do) and use this new CSS instead. Just a heads up though, as Jen mentions in her video, that right now this new CSS only works in the Mozilla Firefox and Safari (and maybe soon in Chrome) web browsers.

Video: New CSS for Styling Underlines on the Web

Continue reading New CSS to style underlines

How to stop showing box that appears when mousing over Chrome tabs

A recent Chrome browser update brought “tab hover cards” which are small boxes that appear when you put your mouse on a tab. These boxes display the website’s “title” tag and domain name, as shown in the screenshot below.

Screenshot of Tab Hover Cards in Chrome
Screenshot of Tab Hover Cards in Chrome

For me, these tab hover cards started to annoy me, as they block part of the address bar, so I disabled them. See down below for steps on how to disable tab hover cards.

Steps to turn off tab hover cards in Chrome

  1. In the address bar, type in: chrome://flags/
  2. Do a CTRL + F to bring up the “Find” search box and type in: Tab Hover Cards
  3. When you find “Tab Hover Cards”, on the right there is a drop-down, change it from “Default” or “Enabled” to “Disabled”, and you are done

Sharing resources and articles – September 2019

Here’s a quick sharing resources post with a few links to websites and articles I found interesting.

How to add a circle border around a Font Awesome icon

I was recently working on building a webpage and I ran into an issue where I wanted to add a circular border around an icon. I was using Bootstrap 4 for the page’s layout and Font Awesome for the icons. I tried a few things with Bootstrap’s border utilities but it couldn’t do what I wanted, so I searched online.

I was able to find this CodePen solution to my problem. I made some edits to the code for my webpage, which I have provided below.

HTML Code

<div class="icon-flex">
  <div class="icon-wrapper"><i class="far fa-user"></i></div>
</div>

CSS Code

.icon-flex, .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-wrapper {
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid blue;
    font-size: 3rem;
    width: 80px;
    height: 80px;
}
.icon-wrapper i {
    color: blue;
}

Few notes about my CSS code

  • If you increase or decrease the “font-size” value in the “icon-wrapper” class, it will make the icon larger or smaller.
  • If you increase or decrease the “width” and “height” values in the “icon-wrapper” class, it will make the circular border larger or smaller.

Let me know your thoughts about this solution. If you know of a better way to do this, please leave a comment and share your knowledge.

Sharing resources and articles with you: UX, favicon, bad habits and more

I came across a few good articles, blog posts and tools that I wanted to share with you, from UX to avoiding bad habits and unprofessional vocabulary and more.


WordpressPromotion: Get 20% off with coupon code DISCOUNT20 – Coupon expires August 31st. Create your website today!


If you have any reactions or thoughts about these articles or tools listed, please let me know by leaving a comment.

Sharing resources with you: LinkedIn profile and job searching tips, and optimizing Google fonts

I came across a few good resources I wanted to share with everyone, ranging from LinkedIn profile tips to job interview tips to optimizing Google fonts performance.

  • LinkedIn profile tips – Blog post from dev.to, you may not agree with every tip that is listed but they’re something to look at and consider
  • Things to not say in a job interview – Blog post from roberthalf.com, with tips on things to not say during an interview, most are obvious
  • 12 best job search websites – Blog post from roberthalf.com, with a list of job searching websites (a little arrogant of themselves to list their website as #1)
  • Optimizing Google Fonts Performance – Blog post from SmashingMagazine.com, where they give great tips on how to optimize load times for Google Fonts on your website