CSS Tutorial – For beginners and advanced users

What is CSS

CSS stands for Cascading Style Sheets that was created by World Wide Consortium (W3C). The purpose of creating CSS was to solve the problems faced in HTML 3.2 when tags with formatting were introduced.

As such HTML defines the content of web page, like paragraphs (p), Div, headings (h1, h2, h3 etc.). At that time formatting was defined on each HTML page in HTML tags like fonts. For larger and complex websites it became quite harder for web developers to maintain presentation layer as such any change to be made on web page was to be done on each web page separately. For example if color of heading needed to be changed across the web site in <h1>, then developers had to open each page and modify as per need. For larger websites it became a terrible thing to do.

W3C realized and came up with CSS that defines the display of HTML elements. CSS files can be stored separately. It saves a lot of work and time as if you need to make changes in display of HTML elements you just need to go to CSS part that will be shown across the site. It was from HTML 4.0 where all formatting of HTML tags could be removed from documents and stored in separate CSS files.

Types of CSS

CSS can be used within HTML document, called as internal CSS. Separate files of CSS can be created as well. This is called external CSS. Generally external CSS is used by developers. References of external CSS files are given in web pages in order to use in your documents.

Purpose of tutorial

This tutorial will teach you how to use CSS. How CSS can be used to define presentation/layout of your web pages.

Requirements for this tutorial

This tutorial expects that you have knowledge of HTML. Live demo of examples are also given in order to see CSS working real time in each topic.

Chapters in this Tutorial

  1. CSS  Basic Syntax
  2. CSS Classes
  3. CSS ID
  4. CSS Backgrounds
    1. CSS background color
    2. CSS background image
    3. CSS background position
  5. CSS Text
    1. CSS text color
    2. CSS line height
    3. CSS text align
    4. CSS vertical align
    5. CSS text decoration
    6. CSS transform
    7. CSS text indent
    8. CSS letter spacing
    9. CSS text shadow
  6. CSS Font
    1. CSS Font family
    2. CSS Font weight
    3. CSS Font size
    4. CSS font Style
    5. CSS font color
  7. CSS Border
    1. CSS border style
    2. CSS border color
    3. CSS border radius
    4. CSS table border
  8. CSS Padding
  9. CSS Links
  10. CSS hover
  11. CSS cursor
  12. CSS Display
  13. CSS Visibility
  14. CSS table
  15. CSS Float
  16. CSS clear