Concepts of CSS — Part 2

Image for post
Image for post

📄 Table of contents

  • px, em , rem
  • Global CSS Reset

px, em, rem

em

An em is equal to the computed font-size of that element’s parent. For example, If there is a div element defined with font-size: 16px then for that div and for its children 1em = 16px.

Default font-size of the root element is provided by browser.

<div id="parent" class="parent">
Parent
<div id="outerChild" class="child">
Outer child
<div id="innerChild" class="child">
Inner child
</div>
</div>
</div>
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em;
}

Here, you can see we gave font-size: 20px to.parent and font-size: 1.5em to.child. Computed font sizes of both .child(#outerChild and #innerChild) are different.

How?

#outerChild uses font-size from its parent .parent. So, computed font-size of #outerChild will be 1.5 * 20px = 30px.

And #innerChild uses font-size from its parent #outerChild (which already has computed font-size of 30px). Hence the computed font-size of nested .child will be 1.5 * 30px = 45px.

rem

rem values are relative to the root html element, not to the parent element. That is, If font-size of the root element is 16px then 1 rem = 16px for all elements. If font-size is not explicitly defined in root element then 1rem will be equal to the default font-size provided by the browser (usually 16px).

When it comes to spacing and font-sizing, I prefer to use rem. Since rem uses root element’s font-size instead of its parent’s font-size.

Usually default font-size of the browser is 16px. Setting font-size: 100% will make 1rem = 16px. But it will make calculations a little difficult. A better way is to set font-size: 62.5%. Because 62.5% of 16px is 10px. Which makes 1rem = 10px.

Percentages

Just like pixels, percentages are pretty straightforward. The percentage is always looking at the size of its parent. This means that in the example below the second div will be 50% of its parent, which comes down to 30% of the page width. That is because the parent of the second div, the first div, is 60% of the page width.

Vw and vh

The vw and vh units, which stand for viewport width and viewport height, are the last units that we will go over. No matter where you are, inside a child or in a grand grandchild, the vw and vh will always be the width and height of the viewport. The vw and vh don’t care about the size of its parent.

Conclusion

px => not for font-sizing

rem => spacing (margin, padding, etc.) and font sizing.

em => layouts like menu.

Global CSS Reset

@import url(https://fonts.googleapis.com/css?family=Raleway);

:root {
font-size: 62.5%;
body {
margin: 0;
// Body font size 16px
font-size: 1.6rem;
}
}
*{
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}

Buttons can have content

The primary reason for using a <button> is that it has both an opening and closing (</button>) tag. Which means there can be stuff inside. A common use case would be something like:

<button>
<img src="tiny_birthday_cake.png" alt="">
Submit
</button>

While an input can be <input type="image">, this mixed content would be hard to pull off.

Button is a Form Element

Web forms have submit buttons. You might think of that like this:

<form action="/" method="post">
<input type="submit" value="Submit">
</form>

A <button> element in a <form>, by default, behaves identically to that submit input above.

<form action="/" method="post">
<button>Submit</button>
</form>

However gross the UX, forms can have reset buttons as well. You can duplicate that behavior by changing the default submit type to reset.

<form action="/" method="post">
<button type="reset">Reset</button>
</form>

Clicking that button will clear all the other inputs (and textareas) with the parent <form>.

The CSS @font-face Rule

Web fonts allow Web designers to use fonts that are NOT installed on the user’s computer.

When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.

Your “own” fonts are defined within the CSS @font-face rule.

@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

div {
font-family: myFirstFont;
}

Different Font Formats

The Web Open Font Format (WOFF)

WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.

TrueType Fonts (TTF)

TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.

OpenType Fonts (OTF)

OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms.

The Web Open Font Format (WOFF 2.0)

TrueType/OpenType font that provides better compression than WOFF 1.0.

SVG Fonts/Shapes

SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.

Embedded OpenType Fonts (EOT)

EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.

Written by

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store