Add an <h1></h1> heading tag, and a <p></p> paragraph tag inside the <header></header> container.
<!DOCTYPE html><htmllang="en"><head>...
</head><body>
❌ <header></header><header>
👉🏽 <h1>Website</h1>
👉🏽 <p>How to make a Website</p></header>
...
</body></html>
Header styles
Add the basic selector header to the main.css file.
* {...
}
html {...
}
header {... 👈🏽
}
Let's add the CSS declaration display: flex;, which transform the header element as a container and its childs h1, p as a flex items.
...
header {
display: flex; 👈🏽
}
Now, let's define the flex-direction property as column.
<!DOCTYPE html><htmllang="en"><head>
...
<linkrel="stylesheet" href="./styles/desktop.css" media="screen and (min-width: 768px)"></head><body>...
</body></html>
By setting the values screen and min-width: 768px means the styles inside the desktop.css file will apply only if the screen width is equal or bigger than 768 pixels.
CSS custom properties
Define custom properties at the top of the main.css file using the :root pseudo-class.
Then replace the direct use of the hexadecimal values in both the background and color properties at the header selector by using the custom properties defined above.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent