CSS Properties
Tags: beginners, css
Published: 2019-10-26 18:23:04

---
title: CSS Properties
published: true
description: An introduction to CSS Properties
tags: beginners, css
series: FrontEnd Development Zero to Hero
---
CSS properties are used to apply the desired effect on HTML Elements.

These properties are named in such way you'll know what's is going happen to the HTML Element that you are working on.

When you come across terms like `background-color`, you should get the feeling that this property will change the background color of your desired element.

Another property is the `font-size` which can be used to increase or decrease the font size of HTML Elements like Headers ( `h1` to `h6` ) and  Paragraphs ( `p` ).

CSS contains lots of properties that can be used to achieve your desired effect on HTML Element, discussing each one of them will make this post way too long and you are likely to get bored before you learn anything.

So here is what we are going to do, we will list the properties i feel you will use and come across most of the time, and we'll explain each one with some examples and if need be we will consult the Specification. After that i will point you to resources to further your studies. The properties we will discuss are:

* `font-size`
* `font-family`
* `background-color`
* `color`
* `text-decoration`
* `display`
* `margin`
* `padding`
* `border`
* `width`

####__font-size__
As i mentioned before, this property is used to increase or decrease the font size of HTML element.

```css
p {
  font-size: 120%;
}
```

####__font-family__
[The specification](https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#font-family-prop) states:

> The property value is a prioritized list of font family names and/or generic family names. Unlike most other CSS properties, component values are separated by a comma to indicate that they are alternatives.

__This translates to__: When the `font-family` property is used on an HTML Element, you give it __a value that you prefer the most__ and supply comma-separated values as alternatives.  For example

```css
body {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}
```

From the code sample above, "__Trebuchet MS__" is the `font-family` you will like the browser to use, and if it's not available, the browser should use "__Helvetica__", if that's also not available it should use the system default font.

####__background-color__
This property sets the background color of an element using either a `color` value or `transparent`

```css
p {
  background-color: red;
}
```

####__color__
This is used to specify the color that a browser will use on an Element. The value can be in the form of:

* Keyword e.g orange
* Hexadecimal e.g `#ffffff`
* RGB (Red Green Blue) e.g `rgb(255,255,0)`
* RGBA (Red Green Blue Alpha) e.g `rgba(12, 12, 13, 0.1)`
* HSL (Hue Saturation and Lightness) e.g  `hsl(356, 92%, 41%)`

```css
p {
  color: #150bd6;
}
```

We will discuss this color formats in the section: CSS Colors.

####__text-decoration__
This property describes __decorations that are added to the text of an element__ using the element's color. It accepts values like `underline`, `overline`, `line-through`, `blink` and `inherit`.

```css
p {
  text-decoration: underline;
}
```

####__display__
As the name suggest, this property can be used to control how elements are displayed in the browser.  It accepts value like `block`, `inline`, `none` e.t.c

```css
span {
  display: block;
}
```

####__margin__
This property is used to specify the spaces between a child element and its parent. Margins create extra space around an element. It's actually a shorthand of four properties which are  `margin-top`, `margin-right`, `margin-bottom`, `margin-left`. 

```css
p {
  margin-left: 2em;
}
```

####__padding__
Padding is used to create extra space within an element.

```css
h2 {
  background-color: lime;
  padding: 20px 50px;
}
```

####__border__
This is a shorthand CSS property used to set an element's border. It sets the `border-width`, `border-style`, and `border-color`.

```css
div {
  border: 12px solid red;
}
```

####__width__
This property can be used to specify how wide an element can be.

```css
div {
  width: 50%;
}
```

You can find a comprehensive list of properties on [The Mozilla Developer Network.]( https://developer.mozilla.org/en-US/docs/Web/CSS/Reference )

The code snippet's used in this section have been applied to the element by selecting the tag name followed by curly braces and some properties. Now you might as ask yourself questions like:

* why are we using the HTML Elements name in CSS?
* what other ways can we use to select an element for styling?

This is will be discussed in much detail in the next topic, CSS Selectors.