Learn CSS basics

Writing CSS code should be like writing any programming languages or markup languages. It should be structured and easy to read, plain and simple. CSS is very simple, and it has a basic structure:

CSS 101: The Structure

Selectors

The selector is the element that connect a specific HTML tag to a CSS style. In this example, the HTML5 header tag is used to change the font size, the alignment of any text and the width of the header.

Type of selectors

Class Selectors: The benefit of the class selector is that it can be connected to multiple HTML Tags. For example, you can to style the heading h3 tag and some divs to add a border. By using the . (dot) character, you can dynamically add a class to any, or selected, tags.

.borderBottom
{
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #ddd;
}

The, you can add borderBottom to any HTML tags like this:

<div class="borderBottom"></div>
<p class="borderBottom"></p>

ID Selectors works the same as the class selector, the difference is instead of using the . (dot) character it uses the # character. Also, any ID should be unique in the CSS, so make sure you name every selector wisely.

#borderHeading
{
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #ddd;
}

Descendant Selectors: The descendant selector matches all HTML tags that are descendants or child of a specified HTML tags.

div span
{
  color: red;
}

You notice the space between the div and the span? This way only span elements that are inside of a div will apply the style defined.

Declarations

A CSS style includes one or more declaration. A declaration contains a property, a value and in some case a unit. Each property is separated with a : (column) character and each declaration ends with a ; (semi-colon) character. Example of property: color, text-align, text-shadow and width.

CSS 102: Shorthand declarations

Some of these declarations can be merged or combined. This avoids multiple declaration and overloading the code. This simplifies the readability of the CSS code.

In the example above, using the margin will make the code easy to understand. In this case, since there's 2 values, zero (0) and auto, the margin-top and margin-bottom will use zero and the margin-left and margin-right will use auto. This code will be the same as this:

  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;

As you can see, way easier to read.