1. How to Make a Triangle with CSS

    CSS doesn’t have any built-in way to make triangles, but an easy way to solve the problem is to just use borders. Let’s say we have an element with borders on all sides: As you can see, the borders doesn’t have sharp corners, and we can use …


  2. CSS Box Model and Box Sizing Explained

    If you are a developer writing any kind of CSS, you should know about the box model, and how it relates to the sizing of elements. Let’s dig in to that right now. The CSS Box Model Every HTML element is a box. That box has 4 different layers: …


  3. How to Make a Switch Button with CSS

    A switch button—as made popular by the iOS operating system— makes it easy to toggle between two different options, such as on or off. We can recreate this type of button with pure CSS. We don’t need any JavaScript, we can use the :checked state of a checkbox …


  4. Different Layouts: Static, Liquid, Adaptive, Responsive, What?

    When talking about layouts in CSS, we often divide the different types of layouts into 4 categories: Static (also called a fixed layout) Liquid (also called a fluid layout) Adaptive Responsive What are the differences between these? Let’s go through each one and see what the differences are. If …


  5. Collapsing Margins in CSS

    When the margins of two adjacent elements are collapsed—or combined—into just a single margin, we call this behavior margin collapsing. The final margin size will be equal to the largest of the two margins. For example, if an element with a 20px margin collapses with an element with …