Skip to main content

Intermediate CSS

0001

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!
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.
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.
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> Step 1: Create the HTML # Create a new HTML file and add the following code to create a simple web page.
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: 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> Step 1: Create the HTML # Create a new HTML file and add the following code to create a simple web page.
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.
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.