Build a website design system

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.

    <link rel="stylesheet" href="styles.css">
      <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 class="color-panel pink">
          <p class="color-label" >Pink</p>
          <p class="color-hex">#d957d9</p>
        <div class="color-panel mint-green">
          <p class="color-label" >Mint Green</p>
          <p class="color-hex">#4fe0b0</p>
        <div class="color-panel beige">
          <p class="color-label" >Beige</p>
          <p class="color-hex">#efd9ca</p>
        <div class="container">
          <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>
.container {
    border: 2px solid #a2a2a6;
    padding: 10px;
    margin: 10px auto;
  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;
  font-weight: 100;
  width: 45%;
  display: inline-block;
  text-decoration: underline;
  font-weight: bold;
  text-decoration: bold;
  text-decoration: italic;
  font-style: normal;
.text-panel p {
  font-weight: 400;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;

Hey there, welcome to the community!

I see you’re attempting a few things. It’s nice to try and see what gives.

However, font-weight, font-style and text-decoration serve different purposes

  • font-weight will decide how thick or thin the text will appear
  • font-style decides if text should be normal, italic, oblique
  • text-decoration is to style text with underline decoration

Now that you know this, you should be able to adjust your css to get what you want :slight_smile:

1 Like