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

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 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.

Where does “localStorage” save data?

I have been taking a Javascript online course and we have been using “localStorage” to create a task list app. So I was wondering where does this actual data get stored because the data can be retrieved, edited and deleted so it must get saved somewhere. Since cookies aren’t being used I assumed the data was being saved in some text file somewhere locally on my computer. I did some searching online and found the answer to my question, which I thought I should share on the blog in case it can help someone else out there.

So first, there are two types of web storage, where data is stored locally in a user’s web browser. First, local storage, where the data stored has no expiration date and will persist after the web browser is closed. Second, session storage, where the data stored gets cleared after the web browser is closed.

So the data saved using web storage is stored locally on your computer. Each web browser has their own location to store this data. Looking at Wikipedia’s web storage page, it links to a few pages on StackOverflow (here and here) where others have listed the location of the saved data.

I also wanted to link out to the w3schools.com’s page on localStorage which has a quick simple example in Javascript showing how to set and retrieve data using localStorage.

Media query max-width and min-width

I wanted to write a quick blog post explaining in plain English what max-width and min-width mean when setting up media queries in your CSS, so here we go first with an example of media query code in your CSS.

Code examples of min-width and max-width

<style>
@media (min-width: 480px) { /*add your css in here*/ }

@media (max-width: 1280px) { /*add your css in here*/ }
</style>

Using the code example above, “min-width: 480px”, means that when your web browser’s viewport width is equal to or more than 480px, then the web browser will apply the CSS in the brackets that follow.

Again, using the code example above, “max-width: 1280px”, means that when your web browser’s viewport width is equal to or lesser than 1280px, then the web browser will apply the CSS in the brackets that follow.

Parallax scrolling effect, the new web thing to do on your site

As the web changes, new designs and effects become popular and you see them across many sites. One new effect I’ve been seeing more and more is the “parallax scrolling effect” where you have backgrounds stay in place as the user scrolls down the page.

If you somehow haven’t seen this cool effect yet, check out the w3schools.com links below to see the effect and also the code to do this yourself.

WordPress plugins you should use for your WordPress site

Wordpress logoThis blog post was going to be a post specifically for my wife with suggestions on what WordPress plugins to use for her sites, but the more I thought about it, these plugins should be used on most/if not all WordPress sites (or similar plugins that provide the same features).

Below is a list of suggested WordPress plugins that you should use for your web site (for a small-to-medium sized standard WordPress blog, not including a forum or store). Reminder that this is just my opinion and if you prefer different plugins feel free to leave a comment telling us which ones and why.
Continue reading WordPress plugins you should use for your WordPress site

Cool HTML5 tips for form inputs

I wanted to share these cool quick tips that HTML5 provides to basic HTML web forms that will save you time and work in the end. Remember though, these tips only work in web browsers that support HTML5.

Placeholder attribute
You can now easily have “placeholder” text display inside a text field, whereas before you had to use Javascript to add text inside a text field before the user enters their own text.

Code

Input Type: Date
You can have a date field where users can select a date from a visual calendar that appears and you don’t have to code the calendar.

Code

Input Type: Time
You can have a time field where users can select a time.

Code

To see more HTML input types that are supported with web browsers that support HTML5, check out w3schools.com.