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>
<html>
<head>
<link rel="stylesheet" type="text/css" href="examplestyle.css">
</head>
<body>

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

</body>
</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.

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.

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