How to Use CSS3’s Width and Height Properties

This tutorial is for very beginners and people who are brand new to CSS, and it covers two of the most useful and common CSS properties: width and height. In CSS, you use the width and height properties to define (as you can probably guess) the width and height of any element. When we say any element, we really do mean any. You can define something as large as the width and height of the body of your entire HTML file, or something as small as a tiny little button.

The syntax for the width and height properties is very easy to understand. Both properties only take a few different types of values. There’s auto, the default value, then there’s the [length] value, where you can define the length using the units of measurement of your choice (px, em, rem, cm, in…whatever your heart desires), and finally, there’s the % value, where you can define the width or height of an object as a percentage of its parent element — this last one is very common and helpful when it comes to responsive and mobile-friendly design.

One of the most common elements that the width and height properties are applied to is the div element. By default, div elements don’t have a fixed width or height, so they’re only as big as the content within them. This is true of all HTML elements, but it can become a problem with divs, because developers create empty divs very often to represent squares or rectangles. If you want empty divs to look like shapes, you have to give them a width and a height. To see what that looks like, check out the code snippet below:

div{
   width: 300px;
   height: 300px;
}

The div in the example above is now in the shape of a square, because the width is equal to the height. To make a rectangle is just as easy, just be sure that the width and height don’t have equal values. Take the code below as an example of this:

div{
   width: 400px;
   height: 250px;
}

How to Use CSS3’s Right and Left Properties

In CSS, the right and left properties can be used to define the space between the right or the left edge of an element and it’s nearest ancestor. If you’re familiar with the margin property, then it might help you to know that in CSS, the right and left properties can be used much the […]

Read on...

How to Use CSS3’s Letter-Spacing Property

Screen Shot 2017-05-17 at 2.21.38 PM

CSS’s letter-spacing property is one that can be used to, you probably guessed it, add (or remove!) spacing between letters. The property is perfect for either making your letters look super close together, or super spread out. If you have any graphic design knowledge, it’s a little bit like kerning your letters — only there’s […]

Read on...

How to Use CSS3’s Padding Property

Screen Shot 2017-05-17 at 1.35.27 PM

In today’s tutorial we’re going to talk about how to use a super-popular CSS property: padding. You can think of the padding property as a way to add space within your elements — not to be confused with margins, which allow you to add space outside of your elements. Just like with margin though, you […]

Read on...

How to Use CSS3’s Quote Property to Customize Quotations

Did you know that you can customize quotes in CSS? It’s actually a fairly easy and straightforward process. Instead of using the traditional “” quotation marks, you can pretty much use just about any symbol you can think of, and you can easily have this symbol be the uniform quotation mark throughout your website, pages, […]

Read on...

CSS3’s Widows and Orphans Properties

Widows and orphans. These might sound like strange names for CSS properties, and they kind of are. They’re named as such because they come from old-school typography terms referring to, if you can believe it, lines of a paragraph. A widow refers to the last line of a paragraph that didn’t fit on the same […]

Read on...

How to Convert Pixels to Ems

Screen Shot 2017-05-11 at 5.31.40 PM

If you work with CSS a lot, and especially if you work with a lot of responsive and mobile friendly designs, then you probably know the difference between pixels and ems. But just in case, here’s a little rundown for you: pixels are fixed values of measurement that can be used to define the size […]

Read on...

8 Free Icon Sets for App Designs

Screen Shot 2017-05-11 at 5.04.53 PM

Designing an app and looking for some free icon sets that you can use on iOS and Android? Look no further. We’ve curated this list of some generic yet stylish and current icon sets that will make super additions to any of your app designs. Not only can you use the icons on iOS and […]

Read on...

How to Use CSS3’s Transition Property

Don’t be intimidated by CSS transitions! They might seem complicated if you know nothing about them, but really, they’re pretty straightforward and easy to implement. A transition animation occurs when a value of any property of an element is triggered to change — often something like this happens when you’ve implemented a hover effect. Let’s […]

Read on...

How to Use CSS3’s Z-Index Property

In CSS, the z-index property can be used to specify the order of an element. Traditionally in HTML, elements that appear later on in the code take precedence over the ones that come before them. So for example, if you’ve got a <div> element that comes before a <p> element and the two elements happen […]

Read on...