5 ms·
You don't use CSS to move stuff around. If you for example want to place paragraph-1 below paragraph-2 you simply move it in the HTML. And if you want to add a
by z3t4 5y ago
You don't use CSS to move stuff around. If you for example want to place paragraph-1 below paragraph-2 you simply move it in the HTML.
And if you want to add a line break you add <br> in the HTML.
If you want to make a word tiny, you can use the <small> HTML element.
Here is the CSS for my example
body {
font-family: sans-serif;
background: #e4e5f8
}
figure {
text-align: center;
background: #fff;
border-radius: 1rem;
padding: 1.5rem;
max-width: 40rem;
}
figure img {
border-radius: 50%;
width: 7rem;
height: 7rem;
object-fit: cover;
}
figure blockquote {
font-size: 1.125rem;
margin: 1rem;
}
figure b {
color: #0ea5e9;
display: block;
}
The trick is to keep things simple.
Then when you have mastered the rules, you can break the rules. eg. when you can style semantic HTML however you want without adding div's and CSS classes, that's when you can start adding a little div and class here and there just to keep things even more simple.
Simple code is most of the time faster to load, and easier to maintain.