Hey Guys. This is my first time posting and hopefully I have done it correctly. I am doing the front end engineer career path and am on the build a website design system. Amongst other errors I have, I am trying to make the font in html bold in one instance and italic in another. I have used class=“bold source-code-pro” and have done .bold in the css style sheet but it won’t go italic or bold. I have a basic understanding of specificity.
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> My Website Style Guide <h1>
<div class="container">
<h4> Colors </h4>
<div class="color-container">
<div class="color-panel cool-blue">
<p class="color-label">Cool Blue</p>
<p class="color-hex">#2d5dcc</p>
</div>
<div class="color-panel pink">
<p class="color-label" >Pink</p>
<p class="color-hex">#d957d9</p>
</div>
<div class="color-panel mint-green">
<p class="color-label" >Mint Green</p>
<p class="color-hex">#4fe0b0</p>
</div>
<div class="color-panel beige">
<p class="color-label" >Beige</p>
<p class="color-hex">#efd9ca</p>
</div>
</div>
</div>
<div class="container">
<h3>Fonts</h3>
<div class="font-container">
<div class="font-panel">
<p class="font-label source-code-pro">Source Code Pro</p>
<p class="regular source-code-pro">The quick brown fox jumps over the lazy dog.</p>
<p class="bold source-code-pro">The quick brown fox jumps over the lazy dog.</p>
<p class="italic source-code-pro">The quick brown fox jumps over the lazy dog.</p>
</body>
</html>
.container {
border: 2px solid #a2a2a6;
padding: 10px;
margin: 10px auto;
}
.cool-blue{
background-color: blue;
color: #fff;
}
.pink {
background-color: #d957d9;
color: #fff;
}
.mint-green {
background-color: #4fe0b0;
color: #fff;
}
.beige {
background-color: #efd9ca;
color: #fff;
}
.color-panel {
display: inline-block;
width: 32%;
text-align: center;
margin: 20px auto;
min-height: 100px;
}
.source-code-pro{
font-weight: 100;
}
.font-panel{
width: 45%;
display: inline-block;
}
.font-label{
text-decoration: underline;
font-weight: bold;
}
.bold{
text-decoration: bold;
}
.italic{
text-decoration: italic;
}
.regular{
font-style: normal;
}
.text-panel p {
font-weight: 400;
font-size: 14px;
font-family: 'Poppins', sans-serif;
}
