Concepts of CSS — Part 2

📄 Table of contents

px, em, rem

em

<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;
}

rem

Percentages

Vw and vh

Conclusion

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>

Button is a Form Element

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

The CSS @font-face Rule

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

div {
font-family: myFirstFont;
}

Different Font Formats

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