Learning CSS with Less - Display types
Learning CSS with Less - Display types
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.
Now let's discover the next part of the course Learning CSS with LESS - Display types
- Topics of discussion
- 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:
- display: none; - pretty self-explanatory, if you use this display, it hides the element
- display: block; - this display type makes an element occupy the whole line, without allowing any other elements next to it, unless stated with the float property, which we will discuss in another tutorial
- display: inline; - this display type means that the element is to be placed on the same line as the previous element, inside the current block if you will
- display: inline-block; - same as inline, but you can use certain block display properties such as width and height
- display: flex; - we will dedicate a separate tutorial for this display type since it requires more in-depth analysis
- table display - there are a bunch of values you can use for the display property, values which are associated to a table view
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.