Important CSS Properties Part Two

Welcome back to Part Two of the Important CSS Properties series!

In our last blog we covered multiple CSS properties in five different categories, but this time we’re just covering two: Borders and Font. That’s because there’s quite a lot to talk about with them.

So, let’s just jump right in, starting with:

Border

Most of our elements have the ability to have a border and with the many different options for border properties, we have nearly limitless options for changing or accentuating various parts of the element’s borders.

border-width

First, we have border-width. This let’s us change how thick or thin our borders are, by using the same measurements we would for height and width (px, em, percentage, etc.).

.element {
  border-width: 1px;
}

border-style

Now, we have the option of choosing the style of our border which many times you’ll see as a solid line, but there are many different options for the value of border-style: solid (obviously), dotted, dashed, double, groove, ridge, inset, outet. Those last four are 3D borders, so they have a kind of cool look to them.

.element {
  border-style: dotted;
}

border-color

This is a pretty straightforward one. border-color lets you choose the color of your border…

You can use either hex or rgb values to choose your color.

.element {
  border-color: #3d03fc;
}

border-radius

Finally, we’ll touch on border-radius . This one is pretty odd, but I personally find myself using it a lot.

Changing the radius of the border will round the corners of the border. This is done using px units; the higher the number, the more extreme the rounding. You can basically turn a square into a circle depending on how extreme you want it, or you can just have a box with nice, soft edges.

.element {
  border-radius: 4px;
}

Font

You’re probably already fairly familiar with the idea of fonts if you’ve ever used a Word Processor (like Microsoft Word) and it’s mostly similar in concept, just that applying the changes to font is different. Let’s cover the main properties regarding fonts.

font-family

The font-family option is first and foremost as it allows you to choose the actual font.

You can pick multiple fonts, though the browser will only display one. It will try to display the first font, but will default to the second (and so on) if the first is unavailable. That’s why it’s best to always have a second, generic font-family, just as a backup.

.element {
  font-family: "Courier", serif;
}

font-size

Changing the font size, predicatably, makes the font either bigger or smaller, depending on your needs. You have 3 different values you can use to manipulate the size of the font: px (as ever), percentage (which will scale), and simple words (small, medium, large).

.element {
  font-size: 3px;
}

font-weight

Changing the font weight changes how thick or thin the font is. Think of it like bolding that you can control.

You can use the words bold, bolder, and lighter for simplicity or you can use number ranging from 100 to 900 (in increments of 100), where 400 would be considered normal font-weight.

.element {
  font-weight: 500;
}

line-height

Lastly, for font we have line-height , which will manipulate the space above and below the text. This is particularly helpful for good readability and making your text look professional.

The spacing can be be changed with either a unitless number that will multiply the spacing in by the font-size, a fixed measurement in units (like px ), or a percentage.

.element {
  line-height: 1.6;
}

And that’s all we got for font today!

In fact, that’s all we got for this whole blog today!

Great, so we’ve spent a good amount of time on the properties for Borders and Fonts and how to adjust them properly.

I hope that you found it worth your time and that you learned something. Hopefully you’ll tune in next week to learn some more stuff!