If you look at root component, you can see the 'App.css' already
Any style add inside App.css will be applied to any page in the browser
if you inspect element in browser, you can see the styles inside <head>
Let's add few styles.
So we gone a add all styles to index.css and remove App.css
new 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;
}
-----------------------------
after that let's see add inline style
let's add inline style to navbar.js
class Navbar extends Component {
render() {
return (
<nav className="navbar">
<h1>Dojo blog</h1>
<div className="links">
<a href="/">Home</a>
<a href="/create"
style={{
color: 'white',
backgroundColor: '#f1356d',
borderRadius: '8px'
}}
>New Blog</a>
</div>
</nav>
);
}
}
Here note: we have two mustache
- first one for dynamic variable
- second one for object
style={{color: 'white', backgroundColor: '#f1356d',borderRadius: '8px'}}
No comments:
Post a Comment