If you followed this course from the beginning, you may have noticed that we used two different approaches when it comes to writing CSS code.
For example, if you want to create a card component with an image, a title, and a short description, this is what you can do:
html
1<div class="container">
2 <div class="card">
3 <img class="image" src="https://images.unsplash.com/. . ." alt="" />
4 <h2 class="title">
5 Lorem ipsum dolor sit amet consectetur adipisicing elit
6 </h2>
7 <p class="description">
8 Lorem ipsum dolor sit amet consectetur adipisicing elit. . .
9 </p>
10 </div>
11
12 . . .
13</div>css
1.container {
2 display: flex;
3 flex-direction: row;
4 gap: 10px;
5}
6
7.card {
8 width: 400px;
9 height: fit-content;
10
11 display: flex;
12 flex-direction: column;
13 gap: 10px;
14
15 border: solid 2px;
16 border-radius: 10px;
17
18 margin: 10px;
19 padding: 10px;
20}
21
22.image {
23 width: 100%;
24 border-radius: 10px;
25}
26
27.title {
28 font-family: "Courier New", Courier, monospace;
29 font-size: 1.5rem;
30 font-weight: 700;
31}
32
33.description {
34 font-family: "Courier New", Courier, monospace;
35 font-size: 1rem;
36 font-weight: 500;
37}