CSS Tutorial

CSS stands for Cascading Style Sheets used to define style, formatting the HTML elements and set the layout of web pages such as font, color, size, splitting into multiple columns, animations and other features. With CSS you can alter every element style or group of element including webpages easily. CSS style sheets can be used internally, externally and inline.

External style sheets can be applied on large number of pages/elements which can improve speed and efficiency of webpage by storing it separately and using <link> to source goes inside the <head> section.

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="examplestyle.css">

<h1>This is a heading</h1>
<p>This is a paragraph. </p>

</html> <!-- save with .html extension -->
  /* This is a CSS file save with .css extension */  
body {
    background-color: grey;

h1 {
    color: blue;
    margin-left: 30px;

Save above example in notepad with .css extension at same place or mention whole path to CSS file in href tag and open in browser. For now, just look at example all elements will be explained later in coming lessons soon.

CSS tutorial
Output of Above example

This guide will help you to learn CSS web design from basic to expert level with the basics examples including selectors, properties, CSS rules, cascade, inheritance, and debugging CSS.

CSS Tutorial

  • Introduction to CSS
  • Syntax
  • File Inclusion External, Internal& Inline
  • CSS Colors
  • CSS Backgrounds
  • CSS Borders
  • CSS Margins & Padding
  • CSS Height/Width
  • CSS Outline
  • CSS Text & Fonts
  • CSS Links
  • CSS Lists
  • CSS Tables
  • CSS Display
  • CSS Max-width
  • CSS Position
  • CSS Overflow
  • CSS Float
  • CSS Inline-block
  • CSS Align
  • CSS Combinators
  • CSS Pseudo-class
  • CSS Pseudo-element
  • CSS Opacity
  • CSS Navigation Bar
  • CSS Dropdowns
  • CSS Image Gallery & Sprites
  • CSS Attr Selectors
  • CSS Forms
  • CSS Counters
  • CSS Website Layout
  • CSS Units