Written by Andrei MoraruFeb 20, 2020

We integrated into our Technical Blog section a new project that Andrei, a great developer in our community, wanted to share with all of us. Now, the project consists of a series of courses created by Andrei with a lot of passion and dedication, giving from his knowledge gathered during years of work and sleepless nights the chance to learn, grow and become our best version in the future. You can find the other chapters of the course in the Tech section of our blog - here.

Now let's discover the next part of the course "Learning CSS with Less - Display types":

  1. Topics of discussion
  2. Display types

1. Topics of discussion

In this tutorial, we are going to talk about the display property, the values it can take and its impact on the width and height properties of an element. So, let's have some fun.

2. Display types

The display property can take many values. However, more often than not, you will juggle with 4 or 5 different of them. Let's go through these common values, one by one:

Basically, a block element occupies the entire width of the page and as much height as it needs, be it stated through the height property or computed based on the content and padding of the element. An inline element is usually used inside a block element. An easy example of such a scenario is when you have a paragraph and you want some text inside it to have a different style.

In short, once a block element is finished with occupying its space, a new line character is added at the end of it to make sure the next element starts just below it. Think of it as pressing the Enter key in a text document.

Each and every HTML element has a native display type. For example, div elements are block elements, as well as p elements. span elements, on the other hand, have an inline display.

Let's look at some examples now. First off, in our index.html file, let's place this code:

Paragraph text. Inline text. Inline block text.

Now, in the styles.less file, let's put this code:

.block {
  display: block;
  p {
    color: red;
    .inline {
      display: inline;
      color: blue;
      width: 50px;
      height: 20px;
    }
    .inline-block {
      display: inline-block;
      color: black;
      width: 50px;
      height: 20px;
    }
  }
}

After you compile the less file and open the index.html page in a browser, notice the subtle difference between inline and inline-block elements. Notice how inline elements completely ignore the width and height properties, while inline-block elements do not ignore them.

As you can see, we have introduced a new type of CSS selector. By simply using the p selector, the styles inside would be applied to all the paragraphs in our page. Another thing to notice here is that we have selector classes inside other selector classes. This is specific to Less CSS and cannot be used in regular CSS. After you compile the file into a regular CSS file, you can actually see how it looks.

The rule is as follows. Say you have the following code:

.selector1 {
  // code here
  .selector2 {
    // more code here
  }
}

In regular CSS, this would look something like this:

.selector1 {
  // code here
}

.selector1 .selector2 {
  // more code here
}

There are more details to discuss selectors and we will have a separate tutorial dedicated to them, so don't worry about it.

And with that piece of information, we end this tutorial. In the next one, we will talk about positioning your elements. See you then.

Interested in finding out more about the author? Andrei's world is just a click away!

If you are interested in working with a team of expert remote developers, contact us TODAY!