What is CSS? class, color and flex
Give a page color, write a class and place elements side by side.
All lessons · CSS lessons: color, class and flex
What CSS is
HTML is the words of a page. CSS is the color, size and place of those words. The style is written inside a style tag.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 { color: #2f6bff; }
.card {
background: #101826;
color: white;
padding: 16px;
}
</style>
</head>
<body>
<h1>Nibras</h1>
<p class="card">This box has a class.</p>
</body>
</html>class and flex
A class ties a style to a name. The dot marks a class: .card. flex places elements side by side.
.row {
display: flex;
gap: 12px;
}
.row p {
background: #1c2740;
color: white;
padding: 12px;
}In HTML you call it like this: <div class="row"><p>One</p><p>Two</p></div>.
Questions
Does CSS replace HTML? No. HTML is the structure, CSS is the look.
What is a class for? To give the same style to several elements.
Where does color go? Inside a selector: h1 { color: #2f6bff; }.
What does flex do? It puts the child elements in one row, side by side.