A Simple Website Style Guide

This is an example of a simple website style guide that will help you understand some structures to develop your own website.
In my opinion, this project is really useful to deepen your understanding of HTML and CSS. Moreover, this project doesn’t include any javascript but I build on it later on. The outcome of my project looks like the following:

Shortly, I created a title – My Website Style Guide – followed by three sections, namely: Colors, Fonts, and Text Styles. At the end of each section, I included the code related to that section. Moreover, in the CSS code, I included several comments that, hopefully, will help understanding why some code is there.

Setting Up the Website Structure

I started by thinking about the overall structure I wanted to have and I decided to follow the one suggested by Codeacademy. Therefore, I created an h2 element followed by a series of div elements to structure the website in three sections.
Let’s have a quick look at the HTML code and the outcome.

The outcome of this HTML code is not that great but it is a starting point. However, there are a few things worth noticing.

Website Head Section

In the head section, I used the title element to name this page and you can see it on the Firefox tab – Website Design System – in the picture.
Still in this section, the link element tells the browser to look into the styles.css file. However, since I didn’t create it yet, there is no file and no styles are applied to the page.

Website Body Section

The first element in the body section is an h2 element – My Website Style Guide – that is the title of the page. Consequently, this is the first element that you can see on top of the website.
Immediately after the h2 element, I created the first div element, with a class attribute and a value of “container”. This represents the first section: Colors. Since we want to create three sections, we can copy-paste the code as follow:

<div class="container">...
</div>
<div class="container">...
</div>
<div class="container">...
</div>

We just created three identical sections, but we don’t see them yet because they are empty.

First Section: Colors

Now, we will focus on the first Section: Colors.

    <h2>Colors</h2>
      <div class="color-container">
        <div class="color-panel blue">
          <p>Deep Blue</p>
          <p>rgb(13, 13, 151)</p>
        </div>
        <div class="color-panel green">
          <p>Spring Green</p>
          <p>rgb(63, 228, 13)</p>
        </div>
        <div class="color-panel orange">
          <p>Sunset Orange</p>
          <p>rgb(243, 65, 11)</p>
        </div>
      </div>

In the Colors section, I created an h2 element to title this section “Colors”. Since we are in the body of our HTML file, the name of the tab in your browser will not be affected. I then used another div element with a color-container class to group three div elements with color-panel class. Therefore, we have one div for each color: blue, green, and orange.
At this point, the structure is in place and we want to add some style.

This is getting better, and we can finally see some style.

Explaining the CSS

It is worth noticing a few things, following the elements in the CSS file :

• body. The margin property is set to leave no space on top and bottom, but some space (15%) on the sides. This setting will affect the entire webpage, so for example, the default font-family will be Nunito Sans, if not specified differently.
• .container. The margin property will set some space (10px) on top and bottom of all the divs with a container class. However, since we created three div elements with a container class, they will all be affected equally.
  Setting the padding property to 5px 10px makes sure that whatever is inside an element with a container class (e.g. divs or other elements) will be at least 5px away from the element’s borders.
• .color-container. We set a width property to 100% so that the div element with a color-container class will expand to its sides. However, in our case, it will stop 5px before the border (see .container) of the div with a container class.
• .color-panel. Set the display property to inline-block so that the divs with this class will be displayed side by side (i.e. inline), if possible. In this case, I am referring to the the divs within .color-panel with classes .blue, .green, .orange.
  So, to make sure that there is enough space for the three of them, I set the width property to about 1/3 (33%) of the space available.
• .blue .green .orange. Note that I am repeating color: white; in each class to assign the text color. This is not a good practice, so I will move the color property to the parent element that is a div with .color-panel class.

Before concluding this section, I just added a name to the second and third sections.

Find the code for this section here.

Second Section: Fonts

In this second section, we add some content in the Fonts section that we created earlier. As a reminder, the fonts were taken from Google Fonts.

Website Head Section

To add fonts from Google Fonts we have to include a link element in the head section of our HTML page. Below, I show only one link to keep the code concise, but you can find the other links in this Code.

  <head>
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap"
      rel="stylesheet"
    />
    ...
  </head>
  <body>
    ...
    <div class="container">
      <h2>Fonts</h2>
      <div class="font-container">
        <div class="font-panel">
          <p class="font-label dancing-script">Dancing Script</p>
          <p class="regular dancing-script"> Homo faber fortunae suae. Per aspera ad astra. </p>
          <p class="bold dancing-script"> Homo faber fortunae suae. Per aspera ad astra. </p>
          <p class="italic dancing-script"> Homo faber fortunae suae. Per aspera ad astra. </p>
        </div>
        <div class="font-panel">
          <p class="font-label bitter">Bitter</p>
          <p class="regular bitter">...</p>
          <p class="bold bitter">... </p>
          <p class="italic bitter">... </p>
        </div>
        <div class="font-panel">  ... </div>
        <div class="font-panel"> ... </div>
      </div>
    </div>

Website Body Section

In the body section, I only covered the code related to the Colors section to avoid repetitions. Hence, only one div with a font-panel class is shown entirely, but you can find the others in the HTML Code at the end of this section. However, they are just repeating the first div with a font-panel class and changing the font style.

In the CSS file, we set the display property of the .font-panel class to inline-block, as we did for the .color-panel class. Since we want to have only two elements aligning side by side we set a width property to 45%.
.dancing-script .bitter .old-standard .spartan. With these classes, we set the font-family property according to the name assigned in Google Fonts.

/* Style Fonts Section */

.font-container {
  width: 100%;
}

.font-panel {
  display: inline-block;
  width: 45%; 
}

.dancing-script {
  font-family: "Dancing Script", cursive;
  font-size: 20px;
}

.bitter {
  font-family: "Bitter", serif;
  font-size: 20px;
}

.old-standard {
  font-family: "Old Standard TT", serif;
  font-size: 20px;
}

.spartan {
  font-family: "Spartan", sans-serif;
}

.font-label {
  text-decoration: underline;
  font-size: 40px; /* override the font-size set in .dancing-script, so I have a bigger title*/
}

.regular {
  font-style: normal;
}

.bold {
  font-weight: 700;
}

.italic {
  font-style: italic;
}

This is the end of the second section. Find the code for this section here.

Third Section: Text Styles

Finally, we add the Text Styles section under the Fonts section. This section is not adding too much but a few more p elements as well as a few list elements.

This is the end of the third section and you can find the code here.

Even though the layout seems fine, there are some problems when we try to visualize the website on a smartphone screen. When we shrink the website, the elements inside the three sections move around and they make the website ugly and not very readable.

In the following article A Little Responsive Website, I try to fix these issues using plain CSS, so feel free to check it out and leave a comment:).

---