Concepts of CSS — Part 2

📄 Table of contents

  • Global CSS Reset

px, em, rem

em

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

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

Vw and vh

Conclusion

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

<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

<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

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

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.

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