Often our application requires common CSS for all pages of the applications. Some of the needs are,
There are two global CSS files in our application - index.css
and App.css
.
index.css
will get used for loading all global CSSApp.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.