How to Start With CSS Displaying Basic Elements in HTML

This article helps you to start in CSS3, explaining the basics of how to display elements in an HTML document.

When I started to work as a software developer, it was boring for me to code the web user interfaces. My weakness always was CSS because it was hard for me to do good displaying of elements in an HTML document.

I had some experience using CSS (version 2), but I felt frustrated because of the compatibility in browsers. When I had to have to work with web user interfaces, I only copied some layouts which could find on the Internet. Later it changed when I knew Bootstrap.

1. My previous experience

A. What did I have?

As I said before, I only copied some pretty layouts which I could find on the Internet, until the day I knew Bootstrap.
With Bootstrap my job was easier, because of CSS classes were compatible with all browsers (even IE8), there were pretty templates and it could be used with JQuery to do a useful user interface.

B. All was easy with a framework and “!important”

I was working for a school as a software developer, meanwhile, I had some clients who wanted e-invoicing software for their companies. So, when I started these projects, I used Bootstrap for the user interfaces with some changes, and I always applied “!important” if a class not working.

C. Consequences

The projects of my clients were growing, so I was happy because I earned more. The disadvantage was I had to change my interfaces a lot upon customer request. Using Bootstrap and plugins my interfaces were too heavy, slow and many times with errors.

2. Practicing I did it!

A. Grid

With Grid, we can assemble the layout (or skeleton, as I call this) of our template. We only need to put: Header, Footer, Main and a left Sidebar (Aside) as a puzzle. The key to using Grid is to know which element is the parent (as a container) and which elements are the children. So, the example below shows a father container and three children.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    h1 {
      margin: 0;
      padding: 0;
    }

    .grid-father {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 5px;
    }

    .grid-child-1 {
      grid-row: 1;
      grid-column: 1;
      background-color: green;

      height: 150px;
    }

    .grid-child-2 {
      grid-row: 2;
      grid-column: 2;
      background-color: orange;

      height: 150px;
    }

    .grid-child-3 {
      grid-row: 3;
      grid-column: 3 / span 2;
      background-color: red;

      height: 150px;
    }
  </style>

</head>

<body>

  <div class="grid-father">
    <div class="grid-child-1">
      <h1>Row 1 - Col 1</h1>
    </div>
    <div class="grid-child-2">
      <h1>Row 2 - Col 2</h1>
    </div>
    <div class="grid-child-3">
      <h1>Row 3 - Col 3,4</h1>
    </div>
  </div>
</body>
</html>

Running the previous example in our browser, we can see how the children display inside the father:

The father is a Grid with 4 columns (grid-template-columns: 1fr 1fr 1fr 1fr) where each "fr" represents an equitable fraction of the screen. The first child was displaying on the first column and the first row because its class has two explicit properties (grid-row: 1; grid-column: 1); also it applies for the second child and its properties (grid-row: 2; grid-column: 2).

The special case is in the third child, which is in the third row and the third column, but it occupies 2 columns because the property grid-column specifies with span the number of columns to expand.

B. Flexbox

Using Flexbox it is possible to put some elements in different positions and displayings. It was important for me because many times I had problems with the vertical and horizontal positions of divs, spans, and images. Such as the Grid, with Flexbox the key is to know which is the parent and the child: Displaying effect only applies from parent to child, not to the child of its child. So, the next example shows three kinds of Flexbox displaying: row, wrap and column.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox</title>
  <style>
    h1 {
      padding: 0;
      margin: 0;
    }

    .square-container {
      padding: 5px;
      margin: 5px;
      border: 2px solid #000;
      text-align: center;
      height: 50px;
      width: 350px;
    }

    .flex-row {
      display: flex;
      flex-direction: row;

      background-color: gray;
      color: #000;
      margin: 5px;
    }

    .flex-wrap {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      background-color: cadetblue;
      color: #000;
      margin: 5px;
    }

    .flex-column {
      display: flex;
      flex-direction: column;

      background-color: darkgoldenrod;
      color: #000;
      margin: 5px;
    }
  </style>
</head>

<body>
  <div class="flex-row">
    <div class="square-container">
      <h1>Flex row</h1>
    </div>
    <div class="square-container">
      <h1>Flex row</h1>
    </div>
    <div class="square-container">
      <h1>Flex row</h1>
    </div>
    <div class="square-container">
      <h1>Flex row</h1>
    </div>
    <div class="square-container">
      <h1>Flex row</h1>
    </div>
  </div>
  <div class="flex-wrap">
    <div class="square-container">
      <h1>Flex wrap</h1>
    </div>
    <div class="square-container">
      <h1>Flex wrap</h1>
    </div>
    <div class="square-container">
      <h1>Flex wrap</h1>
    </div>
    <div class="square-container">
      <h1>Flex wrap</h1>
    </div>
    <div class="square-container">
      <h1>Flex wrap</h1>
    </div>
    <div class="square-container">
      <h1>Flex wrap</h1>
    </div>
    <div class="square-container">
      <h1>Flex wrap</h1>
    </div>
  </div>
  <div class="flex-column">
    <div class="square-container">
      <h1>Flex column</h1>
    </div>
    <div class="square-container">
      <h1>Flex column</h1>
    </div>
    <div class="square-container">
      <h1>Flex column</h1>
    </div>
  </div>
</body>
</html>

If we run the previous code, can see the difference:

Using the element property display with flexbox as row (flex-direction: row), all the elements inside take a position in the same line. If the sum of elements sizes exceeds the container size, the elements inside will resize their widths.

With flexbox as a wrapping row (adding flex-wrap: wrap), all elements will take a position in the same line, but if the sum of elements sizes exceeds the container size, these will move to a new row without resizing any child.

Finally, if we use flexbox as a column (flex-direction: column) all elements will take a vertical position, in the same column.

C. Media Queries

Working with Media Queries the web pages can reconfigure all their elements. Also, the web pages can be parameterized with conditional screen sizes, considering the devices which the page will display on. In the example below, we can see how to use media queries and the effect when change the size of the screen.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Queries</title>

    <style>
      .test-class:before {
        content: "Extra Large (normal,without media queries): from 1201px";
      }
      
      .test-class {
        background-color: #ccc;
        color: #000;
        text-align: center;
        font-size: 24px;
      }

      @media (max-width: 767px) {
        .test-class:before {
          content: "Small: to 767px";
        }

        .test-class {
          background-color: #06943c;
        }
      }

      @media (min-width: 768px) and (max-width: 991px) {
        .test-class:before {
          content: "Medium: from 768px to 991px";
        }

        .test-class {
          background-color: rgb(204, 150, 1);
          color: #fff;
        }
      }

      @media (min-width: 992px) and (max-width: 1200px) {
        .test-class:before {
          content: "Large: from 992px to 1200px";
        }

        .test-class {
          background-color: rgb(72, 82, 221);
          color: #fff;
        }
      }
    </style>
  </head>
  <body>
    <div class="test-class"></div>
  </body>
</html>

We can run the previous HTML code in our browser, resize the width of the screen and check "the magic":

When we declare the class .test-class outside a media query, all the properties in the class are taken as default values, so if we redefine the class inside of a media query, it only overwrites the values that already exist and add the values that do not exist yet.

.test-class:before {
  content: "Extra Large (normal,without media queries): from 1201px";
}

.test-class {
  background-color: #ccc;
  color: #000;
  text-align: center;
  font-size: 24px;
}

@media (max-width: 767px) {
  .test-class:before {
    content: "Small: to 767px";
  }

  .test-class {
	background-color: #06943c;
  }
}

3. Conclusion: My "relationship” with my favorite framework

Nowadays, I know more about CSS and understand better Bootstrap, even I could use better this framework without modifying it. Mixing Bootstrap and own classes are too easy, we only need to put our class after the Bootstrap class inside the attribute “class” in the HTML tag.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <style>
    .background-eg {
      background-color: #f42;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-3 background-eg">
        <h1>Hello World!</h1>
      </div>
    </div>
  </div>
</body>
</html>

In the previous example, we work with a container, a row and a column (with 3 spaces) from Bootstrap, and apply background-eg as a second class to add a red background and white font color.

To finish I would like to recommend if you start with CSS, visit CSS-Tricks
, my favorite site to learn about CSS.