6. Full React Tutorial #6 - Adding Styles

CSS and Inline

01

In this project we will only use the index.css which is imported in index.js and will affect all of the components and scripts

Delete App.css from all the scrips

02

Insert the css from his index.css from this part of the repo https://github.com/iamshaunjp/Complete-React-Tutorial/blob/lesson-6/dojo-blog/src/index.css 

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

/* base styles */
* {
margin: 0;
font-family: "Quicksand";
color: #333;
}
.navbar {
padding: 20px;
display: flex;
align-items: center;
max-width: 600px;
margin: 0 auto;
border-bottom: 1px solid #f2f2f2;
}
.navbar h1 {
color: #f1356d;
}
.navbar .links {
margin-left: auto;
}
.navbar a {
margin-left: 16px;
text-decoration: none;
padding: 6px;
}
.navbar a:hover {
color: #f1356d;
}
.content {
max-width: 600px;
margin: 40px auto;
padding: 20px;
}

03

To add inline styles, enter the style in the style attribute as an object with keyvalue pairs

**Remember to use camelCase for the css properties. 

const Navbar = () => {
return ( 
    <div className="navbar">
        <h1>The Dojo Blog</h1>
        <a href="/">Home</a>
        <a href="/create" style={{
            backgroundColor: 'yellow',
            fontSize: '2rem'
            }
        }>New Blog</a>
    </div>
);
}

export default Navbar;