Ex No: 4 EXTERNAL CSS IN REACT.JS
Aim: To design a React App that uses external CSS for designing the elements.
Algorithm
Step1: Install Node Package Manager (npm) in the system.
Step2: Create react app using "npx create-react-app" in the terminal.
Step3: Alter the content of the “App.js” file to add the profile page.
Step4: Create “style.css” file to store the css information.
Step5: Start the React App using "npm start".
Source Code

App.js


import React from 'react';
import './style.css';

function ProfileApp() {
 const profileData = {
  name: "Ramesh Kannan",
  occupation: "Web Developer",
  avatar: "logo192.png", 
  bio: " I'm an aspiring web developer with a strong foundation in web development fundamentals like HTML, CSS, and JavaScript.",
  skills:["HTML","CSS","JavaScript","JQuery","BootStrap"],
};

return (
  <div className="profile-container" >
   <img src={profileData.avatar} alt="Profile avatar" className="avatar" / >
   <div className="profile-info" >
    <h2 >{profileData.name} </h2 >
    <p >{profileData.occupation} </p >
    <p >{profileData.bio} </p >
    <h3 >Skills </h3 >
    <ul >
    {profileData.skills.map((item) = > (
   	 <li >{item} </li >
     ))}
     </ul >
    </div >
   </div >
 );//End of Return
}

export default ProfileApp;

style.css


.profile-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 400px;
  margin: 10px auto;
  background-color:azure;
}

.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.profile-info {
  text-align: center;
}

h2 {
  font-size: 24px;
  margin-bottom: 10px;
}
h3 {
  text-align: left;
  text-decoration: underline;
}

p {
  font-size: 16px;
  line-height: 1.5;
}

ul{
  text-align: left;
}
Result: Thus a React App that uses external CSS is implemented.