JS Mates

Often our application requires common CSS for all pages of the applications. Some of the needs are,

• Reset CSS (or Normalize CSS) to reset the browser-specific CSS inconsistencies
• Fonts
• Utility CSS
• Media queries or breakpoints definitions
• CSS variables

There are two global CSS files in our application - index.css and App.css.

• index.css will get used for loading all global CSS
• App.css will get used for loading anything specific to the application. It will be a global CSS file for the application.

Let's add reset CSS to the index.css file. You can check out the NPM package to learn more about resetting CSS. You can also use the normalize package based on your preference.

/* http://meyerweb.com/eric/tools/css/reset/
   v5.0.1 | 20191019
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
menu,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
  display: none;
}
body {
  line-height: 1;
}
menu,
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Adding font in global CSS

We are going to add Inter font from google font,

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

And then to the body CSS add font-family,

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

We will add the FAQ component related CSS in the App.css file in the next lesson.