CSS and inline style

Import css

  • Index.css
  • import “./index.css”;
  • Color is green in body
  • When you want to use myClass 
    • you have to use in this way, it will be className instead of class
    • <li className=”myClass”>React</li>
					body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: green;

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;

.myClass {
  color: blue;

					import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
    <App />

					import React from "react";

const App = () => {
  const myStyle = {
    color: "black",
    fontSize: "2.5rem",
  return (
        <li style={{ color: "orange", fontSize: "3.5rem" }}>React -(inline style)</li>
        <li className="myClass">Angular -(className)</li>
        <li style={myStyle}>Vue -(inline style object)</li>

export default App;


Keeping Image tips

  • Images when kept in public folder is less performant
  • Keeping images in src folder is good as they get optimized

Leave a Comment