Gain insights into CSS to tailor web styles, layout, text, and images. Discover core CSS fundamentals, adding colors, controlling layouts, and exploring essential CSS animation functions to create professional web pages.

Cascading Style Sheets (CSS) is a document type and the associated scripting language that describes the presentation of HTML documents. Using the CSS language, you can control the look and feel of web pages by defining layout, text, and image properties to be applied in a wide array of contexts.

This course is a comprehensive introduction to both writing and implementing CSS. Using the document hierarchy model, you’ll learn how to tailor web styles to specific areas. With your hierarchy defined, you’ll dive deep into CSS fundamentals, adding colors, text styles, and backgrounds to your web page. After you’ve defined these elements, you’ll use CSS to define layouts around pictures and text flow and completely control your web page’s look. You’ll wrap up by exploring the essential animation functions of CSS.

By the end of this course, you’ll have functional mastery of Cascading Style Sheets and the CSS scripting language. You’ll be prepared to build professional web pages with your code.

Luka

Highly recommended! Tim covers everything & gets right to the important stuff!

Frontend dev

The Complete Beginner’s Guide to CSS

# How to achieve perfect centering

Achieving perfect centering is quite simple with Flexbox! We simply need to ensure that both the `justify-content` and `align-items` properties are set to the `center` value:



// document.addEventListener("DOMContentLoaded", function () {
//   pTag = document.querySelector("div");
//   newVal = document.createElement("p");
//   newVal.innerHTML = 'Hello, Hello';
//   pTag.appendChild(newVal);
// });

// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

* {
  font-family: monospace;
  text-align: center;
  font-size: 44px;
}

.flex-container {
  display: flex;
  background-color: #E9F3F8;
  border: 2px solid #000;
  justify-content: center;
  align-items: center;
}

.flex-container > div {
  width: 100px;
  margin: 20px 15px;
  padding: 10px;
  line-height: 75px;
  background-color: #F59100;
  border: 2px solid #000;
}

codemirror

# Child elements (flex items)

Let’s take a look at the set of properties we can apply to child elements. These are our flex items. Any direct child elements of a flex container automatically become flex items.

![](/api/collection/5200180308606976/6734908744531968/page/6489872043868160/image/4946323052953600?page_type=collection_lesson)

```html
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```

The four orange boxes shown in the figure above are our flex items because they’re direct children of `flex-container`.

The flex item properties are:

- `order`
- `flex-grow`
- `flex-shrink`
- `flex-basis`
- `align-self`
- `flex`

## The `order` property

The `order` property controls the order in which flex items appear in the flex container.

The value must be a number, like in the following example:


# Child elements (flex items)

Let’s take a look at the set of properties we can apply to child elements. These are our flex items. Any direct child elements of a flex container automatically become flex items.

![](/api/collection/5200180308606976/6734908744531968/page/6489872043868160/image/4946323052953600?page_type=collection_lesson)

```html
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```

The four orange boxes shown in the figure above are our flex items because they’re direct children of `flex-container`.

The flex item properties are:

- `order`
- `flex-grow`
- `flex-shrink`
- `flex-basis`
- `align-self`
- `flex`

## The `order` property

The `order` property controls the order in which flex items appear in the flex container.

The value must be a number, like in the following example:


Learn how to achieve perfect centering and work with flex items.

Introduction to CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

Flexbox: Centering and Flex Items

How to achieve perfect centering

Child elements (flex items)