Styling using regular css and mapping it with class name

🙋Get Help
1

Is it possible to style frontity code with regular external .css file and import it and map the styles with class name of the html tags as done in ReactJS. As styling it with Emotion library seems counter intuitive. The creation of components, specifying what html tag they are and then styling them is confusing to me as a React Developer.
For Example:
page2.css
.Frame62_3{
display: flex;
padding: 30px 50px;
flex-direction: column;
align-items: center;
gap: 40px;
border-radius: 12px;
background: var(–gray-50, #F9FAFB);
box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.10), 0px 10px 10px 0px rgba(0, 0, 0, 0.04);
}
.txt1_3{
display: flex;
flex-direction: column;
align-self: stretch;
color: var(–gray-500, #6D7280);
text-align: center;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 150%;
}
.Frame54_3{
display: flex;
padding: 12px 20px;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 6px;
border: 1px solid var(–gray-400, #9CA3AF);
}
.Website_3{
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.btn2{
display: flex;
padding: 7px 9px;
justify-content: center;
align-items: center;
flex: 1 0 0;
border: 1px solid var(–gray-300, #D2D5DA);
background: none;
}
page2.jsx
…

Choose a Template

Select a Website Category
Next
...
2

Certainly, I’d be happy to provide you with an example of styling using regular CSS and mapping it to class names in HTML. Let’s say you have a simple HTML structure with a header and a paragraph for laminate worktops , and you want to style them using CSS classes.

Here’s how you can do it:

HTML:

htmlCopy code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Styling with CSS</title>
</head>
<body>
    <header class="page-header">
        <h1 class="title">Welcome to My Website</h1>
    </header>
    <main>
        <p class="content">This is a sample paragraph of content.</p>
    </main>
</body>
</html>