Written by Andrei MoraruJun 18, 2020

Somewhere between technicality and non-technicality - a bridge of communication between technical knowledge and creativity is created. And there we meet our developers who want to give voice to the code and knowledge gathered during all the years of hard work, to share them with anyone who is eager to learn new things!

For this exact reason, the series of "Learning CSS with Less" created by Andrei Moraru, a great #remotewarrior from our community, delighted us from the very beginning. 

Today, a new part of this course is here for you. Here you can find all the parts of Andrei's puzzle, to form a whole and give meaning to this course. Enjoy!

  1. Topics of discussion
  2. CSS properties for lists
  3. Background CSS properties

1. Topics of discussion

In this tutorial, we are going to discuss list and background specific properties in CSS. So, let's have some fun

2. CSS properties for lists

HTML supports two types of lists: unordered (obtained by using the HTML element) and ordered (obtained by using the HTML element). And in order to add an element to a list, you will use the

 HTML element, which is common for both unordered and ordered lists.

 

 

An example of an unordered list is the one below, where we enumerate the list CSS properties. An example of an ordered list is the one above, where we enumerate the sections of this tutorial.

There are a handful of properties that we can use for lists:

One thing to note is that the fundamental difference between unordered and ordered lists is that ordered lists use the decimal value for list-style-type. Anyhow, here are some examples:


  
    
    
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  

And here is the CSS code:

.unordered-list {
  list-style-type: circle;
  list-style-position: outside;
}

.ordered-list {
  list-style-position: outside;
}

3. Background CSS properties

Handling the background of an element can prove very useful for a website. You can have elements of different colors and can even use images as backgrounds, which I do a lot on this website as you may have seen.

And this can be accomplished by using the background related properties from CSS. And there are quite a lot of them:

As you can see, there are a lot of properties there to play around with. Let's talk about the url value for a bit before we end the tutorial. In order to use an image as a background, you have to instruct CSS to use an image file by passing its path in the url function. But what is this path? Well, most often you will use what is known as relative paths, in which you supply the location to the file relative to the location of the CSS file that requires access to that image.

Let's say you have the following project structure

Say that you want to reference an image called home-banner.jpg, located inside the img folder. Since your CSS files are located inside the styles folder, in order to use that image as a background, you'd have to use the url function as follows:

And yeah, that about covers it for this tutorial. Take your time with these properties, as there are a lot of them. Next time, we are going to have an in depth look at CSS selectors. 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!