Important CSS Properties Part One

In order to manipulate and style HTML elements in CSS we must first find a way to refer to the certain HTML elements within our CSS file. The way we do this is by using CSS selectors. There are quite a few CSS selectors, but mostly you’ll be using two. The Class and ID selectors.

In HTML you can give your elements Class and ID names. Those names are used in CSS to select the element for styling.

Class names are selected with . .

And ID names are referenced with # .

If two or more elements share a name, they will all be styled.

Once selected we must put properties in between the curly braces {} to tell CSS what we want done to the elements.

There are many, many properties in CSS, which give you endless ways to style your content, but we are only going to cover a handful of those properties in this part (and cover more down the line). It’s easier to absorb information in smaller chunks.

Let’s waste no time and get stylin’!

Display

The display properties set the element’s display type, define it as either a block or in-line element and set the layout system for child elements.

To better understand this, let’s look at some of the most common display values.

In-line

Displays the element in-line which means it will contain no line breaks. You cannot use width or height properties on in-line (more on those later).

Block

Displays the element as a block which means it can contain line breaks. You can use width or height properties on block elements.

Flex

Sets the element to use the Flex layout model (which I’ve covered in a previous blog if you want to check it out).

Grid

Sets the element to use the CSS Grid layout model.

Width and Height

You can probably imagine what the width and height properties do. They set the width and/or height of an element. These properties are separate, but I’m putting them together for the obvious reason that they are similar in what they do (just opposite directions).

What you might not know, which is imporant to defining width and height properties, is the different kinds of units you can use to define the measurements. I’ll list the major ones here.

Px

Px or “pixel” is an absolute unit of measurement. It does not change it’s size depending on how or where it’s being displayed, which can sometimes be an issue.

Em

Em is a relative unit. Its size changes in relation to the font-size of the element.

Percentage

Perecentage is another relative unit, which you will likely be familiar with already. Its size changes in relation to the parent element.

Margin

Margins are used to make space around an element, basically creating empty space that pushes other elements away. There is no single “margin” property. There’s actually four, which cover all sides of the element and give you complete control.

These are: margin-top, margin-bottom, margin-right, and margin-left

Padding

Padding is used to add extra inside an element, extending its border. There is no single “padding” property. There’s actually four, which cover all sides of the element and give you complete control.

These are: padding-top, padding-bottom, padding-right, and padding-left

Background

Let’s end this section on the background properties, which is kind of a fun one. Yes, there are multiple properties with which to alter the background of an element. Let’s cover the most important ones:

background-color

Sets the background color of the element. You can use hex code, RBG, RGBA, and more, to set the color.

background-image

Sets an image as the background of the element. It will override background-color unless the image is unvailable, in which case it will default to the background-color .

The url or link is the only value needed here.

background-position

Dictates the starting position of the background-image .

You can use one of nine values: left top, left center, left bottom, right top, right center, right bottom, center top, center bottom, center center

background-size

Set the size of the background image.

The value can be auto which just uses the image’s original size.

Or it can be set by the length value. The first number is the width and the second is the height. It nothing is put in for the second number it will use the image’s original height.

And that’s it for this first part on CSS properties. Hopefully you have found it useful.

Tune in next week for Part 2!