Intermediate CSS

Styling fonts in CSS

Now let’s learn how to style fonts in CSS. In this lesson, we will learn about the following properties: font-family, font-size, font-weight, font-style, text-align, text-decoration, text-transform, line-height and letter-spacing.

There are many more properties that you can use to style fonts in CSS, but these are the most commonly used properties. You can find a complete list of font properties on the MDN Web Docs.

How to center a div

Centering a div element in CSS has become a meme that developers joke about. It is a necessary part of your web development journey going to Google (orChatGPT) and searching for “how to center a div” at least once. In this article, we’ll show you how to center a div element in CSS using several different techniques and which one is best for your use case.

Exercise: Absolute Positioning Practice

In this exercise, you will practice using absolute positioning in CSS to position elements on a web page.

Step 1: Create the HTML

Create a new HTML file and add the following code to create a simple web page. Remember to save the file with the .html extension. Alternatively, you can use the CodePen editor to create the HTML file. In which case, you can use the CSS window to add your CSS code instead of the style element in the head element.

Absolute Positioning

Absolute positioning is a powerful technique in CSS that allows you to precisely position an element relative to its nearest positioned ancestor. This technique is often used to create complex layouts and unique design elements on web pages.

Exercise: static and relative position

In this exercise, you will practice using relative and static positioning in CSS to position elements on a web page.

Step 1: Create the HTML

Create a new HTML file and add the following code to create a simple web page. Alternatively, you can use the CodePen editor to create the HTML file. In which case, you can use the CSS window to add your CSS code instead of the style element in the head element.

Static and relative position

Positioning is an essential aspect of web design. It allows you to precisely control the placement of elements on a page and make them look the way you want. CSS provides several ways to position elements, and two of the most commonly used positioning methods are static and relative positioning.

Positioning in CSS

Positioning is an essential aspect of web design that allows you to precisely control the placement of elements on a web page. It involves setting the position of an element in relation to other elements or to the viewport, and it plays a significant role in creating visually appealing and functional web pages.

The display property

Awesome! You have learned how to add CSS to your web pages and how to size elements appropriately using the width and height properties of the box model. You also know how to add borders, margins, and padding to your elements!