If you are introduced to the website world, you must have heard the three letter word - CSS. It is not one word, but short form of three words. The full form os CSS is Cascading Style Sheets. These are simple files with .css extension that contain some piece of code. The code determines how web pages are formatted and presented to the users.

Before you learn some of the basics of CSS codes, let's see why it was first introduced when all styles can be added in HTML pages itself.

Background of CSS

When CSS was not there and all formatting was done in HTML pages, web developers faced a lot of difficulties in creating and modifying web pages. Most part of code was repeated in all the pages. If you wanted to even change the color of page, you need to edit all the style codes in HTML pages.

With CSS, content is separated from styling of documents. HTML is used to deliver content while CSS is used to deliver all the formatting. In short, HTML + CSS combination works wonders to create web sites.

In short, CSS is used to control the style and layout of multiple web pages at once.

Linking Cascading Style Sheets

Now as there two files (HTML and CSS), that are used to deliver any web page (content with formatting) across browser, you need to tell HTML files to include CSS files by adding a simple line of code to your HTML files.

<link rel="stylesheet" href="/style.css">

Three Parts of Every CSS Code

The basic form of style sheets contains three parts:

  1. Selector
  2. Property
  3. Value

The selector is the HTML element (like body, p, table) for which you want to create a syle rule. The property defines what you want to do (size, color, border) and the value specify the exact details each property is applied to. 

selector {
  property1: value;
  property2: value;
  property3: value;

Types of Selectors

Above code is an example of element selector that is applied to all the elements of the HTML tag. There are two more types of selectors that are frequently used - Class selector and ID selector

The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a property name and a value, separated by a colon.

Class Selector: The class selector finds elements with the specific class. It uses the HTML class attribute. To find elements with a specific class, write a period (dot) character, followed by the name of the class.

Styling Elements

What do you actually mean by styling elements? There are five common types of styling that can be applied to any element:

  1. Background
  2. Alignment
  3. Decoration
  4. Text Font and Color
  5. Margin

These styling can be applied to body, paragraph, lists, tables, links, images, etc.

CSS Box Model

Every element that browser displays takes some space. Consider the space as a box which has three parts - padding, border and margin. At times, there can be lot of confusion between these three elements and specially between padding and margin. Below image will clear all your doubts.

CSS Text Styling Properties

  • color
  • text-align
  • vertical-align
  • text-decoration
  • text-transform
  • text-indent
  • font-family
  • font-size
  • letter-spacing
  • word-spacing
  • line-height

CSS List Styling Properties (ul, ol)

  • list-style-type
  • list-style-position
  • list-style-image

CSS Table Styling Properties (table, th, td)

  • border
    • border-style
    • border-width
    • border-color
    • border-collapse
    • border-bottom
  • width
  • height
  • text-align
  • vertical-align
  • padding

CSS Image Styling Properties

  • float

CSS Margin and Padding

The margin is area outside the border. It does not have a background color, and is completely transparent. The padding is area around the content inside the border. It is effected by the background color of the element.

The top, right, bottom, and left margin or padding can be changed independently using separate properties. A shorthand margin or padding property can also be used, to change at once.

CSS Display

The display property specifies how an element is displayed - none, block, inline, inline-block. Every element has a default display value. However, you can override this to make the page look in a specific way.

A block element is an element that takes up the full width available, and has a line break before and after it. It always starts on a new line. Examples of block elements - h1, p, div, li

An inline element only takes up as much width as necessary, and does not force line breaks. Examples of inline elements - a, span, img

A none element (display: none;) is commonly used with JavaScript to hide and show elements without deleting and recreating them.

An inline-block element is like inline element but it can have a width, height, margin or border. This is useful to create a grid of boxes that fills the browser width and wraps nicely when the browser is re-sized.