CSS Overview

What is css?

CSS stands for Cascading Style Sheets. It is considered the most widely used style language on the web. Think of it as a manual of sorts for web browsers, translating how you want to display web pages, layouts, colors and fonts, making them less boring and in turn showing visitors what you want them to see. It also allows you to adapt the web pages to different types of devices, such as large screens, small screens, or printers.

OK OK! CSS allows you to create great-looking web pages and make pages responsive, but how does it work?

CSS IS…

Basically, CSS is a language, outlining a bunch of directions on how things on your website will look. CSS can save lot of work. Instead of styling individual elements over and over again, a “Style” can be assigned to an element and in CSS language told that it should look a certain way.

The default is:

Headings will look larger than regular text, paragraphs break onto a new line and have space between them. Links are colored (usually blue) and underlined to distinguish them from the rest of the text…

These are the browser’s default styles – very basic styles that the browser applies to HTML to make sure it will be basically readable even if no explicit styling is specified by the author of the page. But that’s boring.

We might want to change the size of the header, make links green to match your logo and remove that ugly underline or make images centered. We can go on forever! There is very little you cannot do with CSS styling.

We’ll cover the syntax and how it works exactly, but we hope you get the idea.

The Benefits

  • CSS saves you time – Write it once and then reuse same style sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.
  • Faster Page Loads – If you are not writing an inline style on every HTML element individually, there will be less coding on the page. Just write one CSS rule for an element and apply it to all the occurrences of that element. Less code means faster download times.
  • Easy Maintenance – So to make a global change, you wont need to edit all the pages individually. Just change the style, and all elements with that class will be updated automatically.
  • Responsive Design – CSS allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as Laptops,  Tablets and cell phones.