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.

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 the 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:

• list-style-type - refers to the list item marker used; the default is disc and there are quite a few different values you can use, which you can take a look at here
• list-style-position - refers to the position of the marker; the default value is outside and another possible value is inside
• list-style-image - can be used to set an image as a list item marker using url(path_to_image) as a value
• list-style: list-style-type list-style-position list-style-image - shorthand property that allows you to set all the list properties in one single line

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:

• Item 1
• Item 2
• Item 3

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

• Item 1
• Item 2
• 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:

• background-image - used to set an image as a background by using a url(path_to_image) value
• background-position - used to position the image (or gradient, since you can also set colors as background) at a certain point; you can use up to 4 values (be it by using pixels, percentages, or certain keywords) for this property; there are some rules to how the number of values supplied affects the position if you supply only one value, then that value is going to be used as the horizontal offset and the vertical offset will be set to center
  if you supply two values, the first one is the horizontal offset and the second is the vertical offset
  when you supply 3 values, the first two will be used together, in that you will supply a position (e.g. right, left, etc.) and a percentage/pixel value that determines the size of the horizontal offset; the third value will have to be another keyword (e.g. top, center, bottom, etc.) that determines the vertical offset; the actual size of the offset will be interpreted as 0
  when you supply 4 values, you are basically supplying all the 3 values above alongside the actual value for the vertical offset
  
• background-size - determines the size of the background; you can use either one or two percentage or pixel values that determine the width and height of the background; alternatively, you can use certain keywords such as contain or cover that are used when you have images as background (cover makes sure the images covers the entire container while contain makes sure the entire image is always displayed, even if it means showing some extra space)
• background-repeat - determines how the background is going to be repeated; it is usually used with images and it has a bunch of possible valuesrepeat - the default value, which tiles the image in both directions
  repeat-x - this one is used to tile the image horizontally
  repeat-y - this one is used to tile the image vertically
  no-repeat - this one prevents any repeat of an image and is the one you'll want to use when setting an image as the background
  space - similar to repeat in that it tiles the image in both directions, with the added twist that it allows you to space images evenly and it never crops them, unless of course, the image would be too big to fit
  round - similar to space, with the added functionality that it can squish or stretch images to fill the remaining space inside the element
  
• background-attachment - this property is used to specify how to move the image, relative to the viewport; it has 3 possible valuesscroll - this one makes sure the image is fixed relative to the local view (which is the element that contains the image) and it also makes sure that the element itself scrolls with the main view
  fixed - the image stays fixed
  local - somewhat similar to scroll, with the added functionality that the image inside the element can scroll relative to that view as well
  
• background-clip - determines how far a background extends beyond the padding or content of an element; it has the following possible valuesborder-box - the default value, that basically means the background image or color will extend until the borders of the element
  padding-box - the image or color extends until the padding of the element; basically, if the element has any padding, the image or color will extend until the area where the padding starts
  content-box - the image or color extends until the edge of the content box
  
• background-origin - it has the same values as background-clip and the only difference between them is that this property resizes the image rather than clipping it
• background-color - allows you to set the background color, in the same ways you set the color of a text or border
• background: image position / size repeat attachment origin clip color (e.g. background: url(path) top center / 400px 400px no-repeat scroll border-box border-box #112233) - this one is a shorthand for all possible background properties

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 bypassing 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

• index.html - the main page of your website
• img - a folder that contains images
• styles - a folder that contains CSS files

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 senior remote css devs, contact us TODAY!