<h1 class="title" id="title-id">Carmen Ansio</h1>
h1 {
font-family: serif;
}
#title-id {
font-family: sans-serif;
}
.title {
font-family: monospace;
}
<button>Carmen Ansio</button>
button {
color: red;
}
button {
color: blue;
}
<div class=”pink purple”> Carmen Ansio </div>
<div class=”purple pink”> Carmen Ansio </div>
.pink {
color: pink;
}
.purple {
color: purple;
}
.card {}
.card:hover {}
/* can be done with nesting like */
.card {
&:hover {
}
}
.progress {
animation: progress both linear;
animation-timeline: scroll(root);
transform-origin: 0 50%;
}
@keyframes progress {
0% {
scale: 0 1;
}
100% {
scale: 1 1; }
}