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"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

				
			
				
					import React from "react";

const App = () => {
  const myStyle = {
    color: "black",
    fontSize: "2.5rem",
  };
  return (
    <>
      <ul>
        <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>
        <li>xyz</li>
      </ul>
    </>
  );
};

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