Written by Andrei MoraruJan 16, 2020

A few weeks ago 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 Introduction - here.

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

  1. Topics of discussion
  2. Defining CSS

1. Topics of discussion

In this tutorial, we will take a look at what CSS actually is and we will also write our first CSS code. So, let's have some fun.

2. Defining CSS

CSS stands for Cascading Style Sheet. The purpose of CSS is to make your websites look better by adding certain styles to it and it allows you to create different layouts based on the resolution of the screen you are viewing said website on. The most interesting part of this programming language lies in the cascading aspect. Cascading refers to the fact that an HTML element can have multiple CSS classes and it will retain the styles from all of those classes, in the order they are placed on the element.

For example, let's say an element has two classes on it: class1 and class2, in this order. The element will retain the styles from both of these classes and any and all styles from class2 that may override styles from class1 will be the ones used on the element.

Quite a few terms there. Let's take them one by one:

As for the overriding part, if class1 and class2 both define a style, say the color of the text, then the HTML element will take the styles from the second class defined in the class attribute. This is usually the case, though as we will learn later on, it can be changed.

Ok, enough talk. Let's write some code. First off, open Notepad++ or any other text editor and create a file called index.html. If you are using Notepad++, make sure that when you click Save As..., you select All Files from the second dropdown. Otherwise, it will save it as a txt file. Secondly, let's create a stylesheet file called styles.less in a similar fashion.

Now, in our index.html file, write the following code:

Main Title

Secondary Title

Section Title

Paragraph text

  

And now, in our styles.less file, let's write the following CSS classes:

.title {
  color: black;
  font-size: 14px;
  font-family: Arial;
}
.main-title {
  color: blue;
  font-size: 24px;
}
.secondary-title {
  color: red;
  font-size: 20px;
}

As you can see, we define a CSS class by using the . sign followed by the class name. And as you can also see, we use the classes in the HTML file by using the class attribute. How does the HTML file know what these classes are? The answer is in the link element, which imports the styles.css file in the page so that the index.html file knows to use them.

But wait, how do we go from styles.less to styles.css? It's very simple. In the folder where we have created the files, go to the address bar, type cmd, and press Enter. From now on, we will refer to this process as opening a command prompt in the folder. Once the command prompt has opened, enter the following command:

lessc styles.less styles.css

What this does is use the lessc compiler to compile the styles.less file in the style.css file.

The final step is to test everything to see that it works. For that, you simply have to open the index.html file in any browser of your choosing. You can do that directly from Notepad++ by going to the Run menu and selecting an option from there.

Once you open it, you will notice that, while we have 3 elements that use the title class, only one of them has black colored text. That is because the other two use another class that overrides the text color.

And that about covers it for this tutorial. In the next one, we are going to discuss the CSS box model.

See you next time.

 

At Upstack we help you grow your business faster. We connect you with the top 1% developers in the world.

Contact us NOW!