July 2024
This lesson will introduce you to CSS and explain you what CSS is, when it is used and why it is useful for designers.
It’s time to learn about some basic terms used in CSS. Classes, IDs, selectors, paddings and margins, pseudoelements and pseudoclasses.
We will finally get to see how an actual CSS code looks like using a few simple lines. Then, you will be able to see CSS in action so that you can start with the exercises in the next module!
We will take a look at different types of text like paragraphs, links and headings. And some introduction to lists and spans so that you can style all kinds of text on your website!
This lesson is all about paragraph styling – properties like font-family, font-size, color, line-height, text-transform, text-decoration, letter-spacing and more.
You will learn how to split text into several columns and how to style those columns. Then, we will see how to style different parts of text (or words) using span and make them look differently than the rest of the text.
How to style the links using ‘a’ selector. We will take a look at the hover, active and visited states, pointer actions, cursor and how to disable a link.
This lesson is about headings of different levels, from h1 to h6 and how to use basic text properties to style them.
How to style ordered and unordered (or bullet) lists in CSS and change the bullets to something else and the markers for ordered lists.
How to turn a simple text link into a button using some background-color, border-radius and paddings. Then, we will use the same properties to style the spans so that they look like labels!
Basic styling of images in CSS. Set the width, height, border-radius for rounded corners, image border and control how the image fits into the frame using object-fit and aspect-ratio properties. Together with some basic filters and drop shadow effects!
How to set background image to divs using only CSS. Set the image source in url of the background-image property. Using background-repeat, background-position and background-size to adjust your background.
How to set a background color or background gradients for divs and other elements in CSS. Using rgba colors instead of hex values to control the transparency.
A cool feather gradient on an image using mask-image property and linear-gradients. You can control the direction and the exact gradient stops, as well as create the effect on one or both sides / edges of the image!
Learn basics of different displays in CSS – block, inline, inline-block, flex and grid! You will see how different displays control layout and elements organization and the typical properties that you can use for each of them.
Diving into display flex – flexible containers. You can organize your elements within a parent container next to each other or below each other and control the gaps using column-gap and row-gap and align-items and justify-content for vertical and horizontal alignment.
In this lesson, we will see the difference between visibility: hidden and display: none. We will also learn about different overflow settings and how it affects the visibility of the content that’s going outside of the parent frame, container or the screen.
One of the most used layout properties in CSS – position. The difference between position: static, relative, absolute, fixed and sticky. Correlation between absolute position of your element and the relative position of the parent element.
Using before and after pseudoelements to add icons, symbols, emojis or even images and other graphics to parent elements. Those can be text, list items, buttons etc.
In this lesson, we will add a color overlay to the background image of our container using an after pseudoelement. Using rgba background color enables you to set the transparency.
