Skip to content

How do I use className to change appearance of html in reactjs?

I am currently learning ReactJS from a youtube tutorial and am trying to use className’s to make the page look better. The tutorial I am following only added: className="card"> in the opening tag of a div element and it changed the page appearance though it does not seem to be working for me. Forgive me if this is a dumb question as I am not aware whether you have to import your own css files to change the appearance and the tutorial just did not show it. I would appreciate any responses. Thank you.

Answer

You need to learn about CSS (cascading style sheets) (: HTML elements can be given classes like this

<html>
<head>
   <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card">content</div>
</body>
</html>

And if you have a stylesheet (file ending in .css included in the <head> of your document

/* styles.css */ 
.card {
    background-color: red;
}

The styles described in the .card class section will be applied to your html element (in this case a red background)

You probably missed a step in your tutorial about including some pre-created style sheet.

CSS Basics