React Styling: ClassName

Continuing from previous post.

Styling is the ability to apply colors, backgrounds, images, grids to html using a CSS (Cascading Style Sheet).

CSS
CSS gives us the ability to set colors, backgrounds, text sizes and fonts, images, grids, and apply animations. It does this in a file named a stylesheet.

The Style Sheet is one of the three aspects of a web page:

• HTML
• JavaScript
• The Style Sheet

Styles must be able to 'locate' HTML Elements in order to apply the rules. This is done via the
Selector.

Click on the selector link above and study CSS for the next year or two. You must know how to use Selectors and how to write the Rules.

React Styling
When we created our first react app, we saw this file.

The contents were similar to this:

.App {
  text-align: center;
} 

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

//edited for brevity 

Anything starting with a dot '.' in a stylesheet is referred to as a "Class" rule. HTML uses 'class' rules to apply it's rules for specific HTML Elements.

React and the className Rule

Non-react 'normal' HTML refers to class rules like this:

 <div 
    class="App">
  <header 
     class="App-header">

But react requires the 'class' attribute to be changed to 'className'! Like this:

 <div 
    className="App">
  <header 
     className="App-header">

Tips
This post is not a lesson on CSS. The study of CSS and its application is a separate career long pursuit.

There's two parts to CSS, the theory, and the artistry. It's not enough to just know the theory.

JWP2021 React style className