Earlier we mentioned properties, but we’ll try to look at them in a little more detail here. CSS is largely made of properties. To fully understand CSS you need to understand properties.

What is a Property?

A property is literally just that, a property of the element/tag in question. They use english words, so if english is your first language you shouldn’t have much trouble. Suppose you have an element, and you want the text to be blue. In CSS we use color to denote the color of text. Lets assume the element in question is a paragraph element. All we have to do is this:

p {
    color: blue;
}

..And we’ll have beautiful blue text! CSS follows this pattern when defining a property:

property: value;

Value

There are a variety of keywords for color in CSS such as blue, orange and red, but lets suppose you want to be more specific about the color of the text. In general though when we define colors we use hexadecimal format. This is a hash tag followed by 6 numbers or letters which define the color. So a hex for a blue color might look like this: #51bad4. It follows the pattern #RRGGBB where R is a value for red, G is green and B is blue.

p {
    color: #51bad4;
}

If you wish to learn more about units you can skip ahead to 2.4. Units

Multiple Values

Some properties in CSS require multiple values. The box-shadow property is a good example, which will give an element a nice shadow effect. In general it requires 4 values, the horizontal displacement, the vertical displacement, the blur of the shadow and the color. A regular box shadow might look like this:

/* px stands for pixels! */
box-shadow: 4px 4px 10px #eee;

Then there are other properties which will require one value, but may have optional extra values. The padding defines the room around the edges inside an element. If you give it one value it will define the padding in all directions (the top, bottom, left and right padding). If you give it 2 values it will define the top, bottom and left, right values differently. If you give it 4 it will define each direction differently. There are even separate properties for each direction!

/* 10 pixels of padding in every direction
from the border to the content */
padding: 10px;

/* 10 pixels of padding on the top and bottom
and 5 pixels of padding on the left and right */
padding: 10px 5px;

/* 10 pixels for the top, 5 pixels for the right
2 pixels for the bottom and 1 pixel for the left */
padding: 10px 5px 2px 1px

/* The padding at the top is specifically 10px */
padding-top: 10px;

Each CSS property will be defined in a certain way and can be defined using a variety of units. Later in the guide we will come across a variety of properties which you will become familiar with.

Share This Page: