Units of Measurement: Vmin and Vmax

In CSS there are so many different units that can be used to define the size of your HTML elements. There are fixed units, like px, cm, in, etc, and then there are relative units, like em, rem, vh and vw. Some less popular units (but still just as useful) are vmin and vmax. The units are used to define the size of HTML elements relative to the dimensions of the viewport.

The vmin unit of measurement represents 1% of the smaller viewport dimension (either vh or vw, whichever is smaller). The vmax unit of measurement represents 1% of the larger viewport dimension (either vh or vw, whichever is larger. Here’s an example of how you’d use it in your CSS stylesheet:

p{
   font-size: 1vmin;
}

This property isn’t widely used, partly because in order to use it both vh and vw must be defined, and those also aren’t widely used, and partly because it isn’t supported by Internet Explorer. It is however, a very useful property to take advantage of, especially in responsive design.

CSS3’s Text Decoration Property

Screen Shot 2016-11-26 at 2.28.53 PM

Knowing how to add an underline your text and knowing how to remove an underline from your text are equally as important skills to have in CSS (the default style rules in every browser give anchor tags an underline, and knowing how to remove this will go a long way in making your pages look more […]

Read on...

CSS Snippets: Media Queries

We’ve come to a point in web development where if you’re not creating or designing sites that are mobile friendly and responsive, you’re doing something wrong. Responsive design is no-longer optional, as more and more users continue to access the internet via their mobile devices. If you’re just getting started with mobile development (or even […]

Read on...

How to Add Zebra Striping to Your Tables

Screen Shot 2016-11-20 at 10.22.08 AM

With CSS, it’s really easy to add a zebra striping effect to your tables (where every other row is shaded grey — or whatever color you like!) with only ONE simple line of code. Let’s say you have a standard table: The table has four columns and three rows. Maybe you’re like us an don’t […]

Read on...

CSS3’s Margin Property

Screen Shot 2016-11-13 at 10.09.49 AM

In CSS, the margin property is used to create space around elements. Without margins, all of our HTML elements would appear pretty right next to each other, with no spacing in between them, which would make for some unattractive designs. To understand how margins work, take a look at the example below: Without margins, you can […]

Read on...

CSS’s font-stretch Property

CSS’s font-stretch property allows you to expand and condense text. As of right now, the property isn’t supported on any of the major browsers, but it’s still an interesting property to learn about. Here’s how it would look to use it in your CSS: The values that this properties will take are: normal (this is […]

Read on...

Using Images as Backgrounds with CSS3

Screen Shot 2016-11-06 at 3.44.26 PM

With CSS you can make an image the background not only of the entire body of pages, but also of individual elements too. All you need to do is use the background property and provide the path to the image. Let’s say you have this boring page, and you want to punch it up by […]

Read on...

Create Superscript and Subscript Text in CSS

Screen Shot 2016-11-06 at 3.17.36 PM

With CSS3’s vertical-align property, its super easy to create superscript and subscript effects in your HTML text. Often this is done by using inline HTML tags, but that’s not really a great practice. Using CSS rather than HTML to achieve this effect makes your code more flexible and dynamic, especially if there are a lot […]

Read on...

How to Use CSS3’s Text-Align Property

Screen Shot 2016-10-30 at 2.51.09 PM

CSS3’s text-align property defines how text should be horizontally aligned in relation to its parent element. You can use it to align text left (this is the default value), center, or right. The default value (text-align: left) is shown above. Here’s how you would center align text: To align your text to the right, use […]

Read on...

Understanding CSS3’s Font-Size Property

Screen Shot 2016-10-30 at 2.45.47 PM

CSS3’s font-size property is one that is used very commonly, so it’s important to understand exactly how to use it. Most new developers may think that the font-size property only takes fixed values in any of the common units of measurement (px, em, rem, cm, etc), but the property also takes values in percentages (%) and […]

Read on...