CSS gradients are smooth transitions between two or more colors – one color that fades into another. And CSS is a great tool to help you control how that color transition happens – how many colors you want to be included, where exactly will the transition happen, will it be super smooth, will it be linear, go down, up, or diagonal, will it be radial, what angle will the color change take, or will the transition repeat. Yes, of course, you can do all that with an actual image file with a help of Photoshop or whatever program you use, but applying gradients through CSS declarations gives you much better control.

This tutorial will cover only linear gradients, but if you want to learn more about radial gradients, you should take a look at this tutorial. Let’s start.

…

The background property in CSS is used to add the background effect(s) for any element – as a matter of fact – what is underneath the content of that element. It’s a shorthand property, so you can write properties in one single line instead of listing multiple properties.
…

CSS layout properties may intimidate you, especially if you’re learning web development for the first time. Especially the position property. Some even claim it’s an advanced subject. Nevertheless, it is essential to understand how CSS affects the alignment of elements on the page. CSS allows a few different methods for positioning elements, and the most common are position, float, and display. We discussed the display property that specifies the display behavior of an element in the previous article, but this time we will learn more about the CSS property, called position. We will learn what position property is, the types, how they affect the position of an element on a page, how they compare to each other, and most of all what is the typical use for each position property. Let’s get started!

…

This article will take you to the very basics of CSS layout. We will look into a display property, which defines the display behavior of an element – if and how the element is positioned in a layout. Every HTML element has a default display value depending on what type of element it is, and the default display value for most elements is either inline or block. We will present a way to create boxes that can (or not) be displayed side by side, that wrap the way we expect them to wrap or to be positioned in the next line. Layouts that we used to create with floats, are now possible with a display property, so we don’t have to clear the floats.
We will explain the difference between display: inline vs inline-block vs block with examples, and will also list a few best practices and when to use each.
…

This article will take you to the very beginning of working with a grid layout. We will present a super simple code for the layout of the page. We will start with a mobile view first and include a media query for a desktop version. We will go through the code and explain why we did this and that. Let’s start at the beginning, but first, let’s take a look at how our page is constructed.
…

We will take you back to the basis of CSS styling. We will dive into CSS margins, padding, and borders. We will investigate what each of these properties means, what are the differences between them, and when should we use each of them. We will start with borders, and then move to margins and paddings, and see what they are all about. We will compare margins vs paddings and we will take a look at when do we typically use margins and paddings.

…

This is one of the most common questions people ask when learning CSS and flexbox module – should I use flex-basis or width? Even more, why is there flex-basis property when we have width? At the end of the day: what is the difference? This article will try to convince you that flex-basis is a property with its own potential and we cannot simply replace it with a width or height.
…

In short, flexbox layout is based on a direction – either horizontal or vertical (flex-flow direction) and its purpose is to align flex items in a flex container. Compared to block which is vertically-based and inline which is horizontally-based, and they work pretty well for pages, it is also important to bring out they have a flexibility problem and cannot hold up complex applications, especially when it comes to responsive design that deals with lots of orientation changing, stretching and shrinking. So, you think flexbox solves all that? Not really. Flexbox does not deal well with the complexity of big-scale layouts. Grid does. At the end of the day, grid is two-dimensional and the flexbox is one-dimensional. We talked about that and other differences in an article about Grid vs. flexbox in CSS: how are they different and when should we use them?. However, flexbox is still an appropriate approach for small-scale layouts and parts of an application and its goal is to enable a more flexible layout, in terms of aligning and distributing space among flex items in a flex container.
…

This article will cover what are CSS selectors, why and how we use them, and we will also get to know different types of CSS in detail, and we will take a look at how they work. We’ve already covered selectors in QuerySelector multiple classes and other rules in JavaScript and CSS, so this is definitely the article you should also take a look at. And if you are interested in JavaScript, the article GetElementById vs. querySelector: Which is better and why use one over the other? is also something you should check, too.
…

In this article, we are going to learn the difference between a pseudo-class vs pseudo-element – we are going to take a look at how they are similar and what are the differences between them. For a start, pseudo-class and pseudo-element are both CSS selectors, so this is definitely something that they have in common. The basic difference, however, is, that a pseudo-class represents a virtual CSS class, while a pseudo-element represents a virtual HTML element. Let’s take a look at what this really means.
…