CSS Styling for React Vite Project
Budget: $10 – $30 USD
There's no doubt that CSS is an essential element of any software engineering project, and our React projects are no different.
Since our project is still looking pretty plain, let's see what we can do. You might recall that, by default, Vite gives us a CSS file called App.css, and we can find it inside the src directory. There's a lot of code inside this file that Vite uses to style the default project. We'll remove all of that, leaving only one style. Now, the file looks like this:
If we look back in index.html, we'll see that this selector is targeting the root <div>, which means that this style is being applied to everything that's nested inside that element:
Let's create a new file to style the Header component inside the components folder: Header.css. Add the following styles to the CSS file:
In the code above, we have selectors defined according to BEM guidelines. These selectors should match the className attribute values of the appropriate elements in the Header component:
If we navigate to our app expecting some changes, we're in for disappointment. Right now, our Header component has no way of knowing that it should be applying these styles. To make that happen, we must import these styles into our file:
According to the steps described in the lesson, make sure you have the Header.css file inside the components folder.
Check that you've copied the styles to Header.css, added class names to the elements of the component, and imported Header.css into Header.jsx.
Now, work independently on styling the Main component. Create the Main.css file and paste the following styles into it:
Add another <p> tag with the text "Vite" means "quick" in French right after, below the first <p> tag.
Wrap both <p> tags into a <div> element with the container class name.
Import Main.css into Main.jsx.
Since our project is still looking pretty plain, let's see what we can do. You might recall that, by default, Vite gives us a CSS file called App.css, and we can find it inside the src directory. There's a lot of code inside this file that Vite uses to style the default project. We'll remove all of that, leaving only one style. Now, the file looks like this:
If we look back in index.html, we'll see that this selector is targeting the root <div>, which means that this style is being applied to everything that's nested inside that element:
Let's create a new file to style the Header component inside the components folder: Header.css. Add the following styles to the CSS file:
In the code above, we have selectors defined according to BEM guidelines. These selectors should match the className attribute values of the appropriate elements in the Header component:
If we navigate to our app expecting some changes, we're in for disappointment. Right now, our Header component has no way of knowing that it should be applying these styles. To make that happen, we must import these styles into our file:
According to the steps described in the lesson, make sure you have the Header.css file inside the components folder.
Check that you've copied the styles to Header.css, added class names to the elements of the component, and imported Header.css into Header.jsx.
Now, work independently on styling the Main component. Create the Main.css file and paste the following styles into it:
Add another <p> tag with the text "Vite" means "quick" in French right after, below the first <p> tag.
Wrap both <p> tags into a <div> element with the container class name.
Import Main.css into Main.jsx.