CSS Basics #3

This article is outdated. If you are interested in learning HTML and CSS, check out my new course ➡️ HTML & CSS: A Practical Guide.

In this article, we are going to talk about some relatively advanced topics in CSS, including float, transform, and flexbox, and in the end, we are going to briefly introduce two very popular CSS frameworks, Bootstrap and TailwindCSS.

The `float` property in CSS #

The float property is another CSS property used for positioning HTML elements. It specifies how an element should “float”. For example, an image could float left or right to the text in a container. The float property can have one of the following values:

left: The element floats to the left of its container
right: The element floats to the right of its container
none: The element does not float (will be displayed just where it occurs in the text). This is default
inherit: The element inherits the float value of its parent

1
2
3
4
<div>
  <img src="image.png" />
  Lorem ipsum...
</div>

Float Type	Result
`none`
`left`
`right`

By default, two <div> elements will be displayed on top of each other. However, it is possible to make them float next to each other using float: left.

1
2
<div class="div1">Div #1</div>
<div class="div2">Div #2</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.div1 {
  float: left;
  background-color: red;
  padding: 15px;
}

.div2 {
  float: left;
  background-color: green;
  padding: 15px;
}

Float next to each other

The `transform` property in CSS #

The transform property allows you to move, rotate, scale, and skew elements. It allows us to use the following transformation methods:

The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). For example, the following code will move the <div> element 50px to the right, and 100px down from its current position.

1
2
3
div {
  transform: translate(50px, 100px);
}

The rotate() method rotates an element clockwise (positive) or counter-clockwise (negative) according to a given degree. In this example, the <div> element will rotate 20 degrees clockwise, and the <section> element will rotate 20 degrees counter-clockwise.

1
2
3
4
5
6
7
div {
  transform: rotate(20deg);
}

section {
  transform: rotate(-20deg);
}

The scale() method increases or decreases the size of an element. The first parameter corresponds to the width and the second parameter corresponds to the height. The above code increases the <div> element to be twice its original width and three times its original height.

1
2
3
div {
  transform: scale(2, 3);
}

The skew() method skews an element along the X and Y-axis by the given angles.

1
2
3
div {
  transform: skew(20deg, 10deg);
}

Skew

The matrix() method is the combination of all of the above methods. It takes six parameters, which allows you to rotate, scale, move (translate), and skew elements. The parameters are as follows: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()), where X means around the horizontal axis and Y means around the vertical axis.

1
2
3
div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

Discussing the flexbox in CSS #

The flexbox is another layout module that makes it easier for us to design a responsive layout without using float or position. Just like the grid system, each flexbox has a flex container and several flex items.

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

This <div> block becomes a flexbox (becomes flexible) by setting the display property to flex:

1
2
3
.flex-container {
  display: flex;
}

Flexbox

The Flex Container #

flex-direction

The flex-direction property defines in which direction the container wants to stack the flex items. The default value is row, which makes the items stack from left to right, like in the example above.

We can also stake them vertically:

1
2
3
4
.flex-container {
  display: flex;
  flex-direction: column;
}

Flex direction column

Or in the reversed order:

1
2
3
4
.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

Flex Direction Reversed Column

flex-wrap

The flex-wrap property specifies whether or not the flex items should wrap (automatically put items in a new row when there is not enough space).

When flex-wrap is set to wrap:

wrap

When flex-wrap is set to nowrap:

no wrap

The Alignment Properties

Just like the grid system, there are also alignment properties in the flexbox, and they work exactly the same. The justify-content property is used to vertically align the flex items and the align-items property is used to horizontally align the flex items.

The Flex Item #

order

The order property specifies the order of the flex items.

1
2
3
4
5
6
<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>

Flex with order

flex-grow

When the flex-grow property is set, the flex items will always stretch to the edge of the viewport as you resize your browser, and the number indicates how much faster the item grows relative to the other items in the flexbox.

1
2
3
4
5
<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

flex grow

flex-basis

The flex-basis property specifies the initial length of a flex item.

1
2
3
4
5
6
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

Image mask #

Consider this scenario, if you are designing a website, you want the users to upload images as their profile pictures. The profile pictures will be displayed as small squares, but the uploaded images come in different sizes. Simply setting the width and height of the image will result in a stretched and strange-looking profile picture. How can we solve this problem?

Here we have an image of an adorable kitten, and we can resize it into a 200px by 200px image using CSS:

1
2
3
4
img {
  width: 200px;
  height: 200px;
}

And as you can see, the image has been stretched and it doesn’t look very good.

Here is where the object-fit property comes in. The object-fit property can take one of the following values:

fill: This is the default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit
contain: The image keeps its aspect ratio, but is resized to fit within the given dimension
cover: The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
none: The image is not resized
scale-down: the image is scaled down to the smallest version of none or contain

`object-fit` Options	Result
`cover`
`contain`
`none`
`scale-down`

If we want to use this image as a profile picture, the best option will be using object-fit: cover;.

However, now we face another problem, this option zooms in on the center of the image to fill the container, and it clips a part of the cat. What if we want to zoom in on the cat?

The object-position property can help us with this problem. It is used to specify how an <img> or <video> should be positioned within its container.

1
2
3
4
5
6
img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: 100% 100%;
}

The first parameter determines the position on the x-axis, and the second parameter determines the position on the y-axis.

Some useful CSS frameworks #

Finally, before we wrap up the CSS part of this tutorial, let’s briefly talk about some very useful CSS frameworks that could greatly accelerate the web page design process. A CSS framework is basically a predefined CSS file, which you can simply import into your web page and use the defined CSS classes inside your HTML document.

Bootstrap is one of the most popular responsive front-end frameworks in the world. Originally created by a designer and a developer at Twitter, it is now maintained by a small team of developers on GitHub.

To use Bootstrap, you can download the compiled code from their official website , and then load the files into your HTML document.

Or the easier way is to use a CDN like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="Eric Hu" />
    <title>My HTML Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" href="myCSS.css" />
  </head>

  <body>
    <img src="image.jpg" />

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

The CSS file should be imported in the <head> section as we talked about before, and the JavaScript file goes before the closing tag of <body> element. Yes, you do need to import JavaScript code for the framework to work properly, but luckily, for now, you don’t need to understand how it works.

To use the Bootstrap framework, you simply add the correct class names inside your HTML elements like this:

1
<button type="button" class="btn btn-primary">Primary</button>

In this example, the btn class defines a button, and btn-primary defines the button’s color.

bootstrap primary button

There are lots of other components you could use, and they are all beautifully designed, you can find all of them on their official documentation .

The second framework I’d like to introduce is Tailwind CSS , it is relatively new in the field, but it has quickly gained a lot of the market recently. Unlike Bootstrap, it is a utility-first framework, it does not come with components that you can just copy and paste. If you want a button, you have to design it yourself.

1
2
3
4
5
<button
  class="inline px-6 py-2 w-fit rounded-md bg-blue-500 text-white font-bold text-sm uppercase"
>
  Button
</button>

Tailwind button

I know this seam like a lot more extra work, but the advantage is that it gives you a lot more freedom, you can design your elements however you want. But, you do need to have a decent understanding of CSS in order to use Tailwind.

Another advantage of Tailwind CSS is that if you install it using npm, as specified in the official documentation , Tailwind will be able to scan your entire project, see what CSS classes you are using, and generate a custom CSS file for you. This means the result CSS file will be a lot smaller compared to Bootstrap.

If you think my articles are helpful, please consider making a donation to me. Your support is greatly appreciated.