CSS Tutorial

CSS stands for Cascading Style Sheets, used to define how a document written in markup language (HTML) should be presented on the web. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      body{margin: 0;}
      .myContainer {display: grid;
         grid-template-areas: 'h h h h' 'n n n n' 'm c c c' 'f f f f';}
      #myHeader {grid-area: h; background-color: mediumseagreen; color: white;
         padding: 18px 0; text-align: center; font-size: large;}
      #myNavBar{grid-area: n; background-color: purple; color: whitesmoke;}
      #myMenu {grid-area: m; margin-top: -15px;}
      #myContent {grid-area: c; padding: 4px 12px;}
      #myFooter {grid-area: f; background-color: mediumseagreen; color: white;
         padding: 18px 0; text-align: center; margin-top: -15px;}

      #myHeader{display: inline;}
      .company{float: left; padding-left: 14px;}
      .search{float: right; padding-right: 14px;}
      .search input{width: 80px; border-radius: 10px; padding: 4px 6px; margin-right: 8px;
         background-color: mediumaquamarine; border: 2px solid white;}

      #myNavBar ul{list-style-type: none; background-color: purple; overflow: hidden;
         margin: 0; padding: 0;}
      #myNavBar li{float: left;}
      #myNavBar li a{display: block; color: white; text-decoration: none; padding: 12px;}
      #myNavBar li a:hover{background-color: aliceblue; color: purple;}
      #myNavBar .right{float: right;}

      #myMenu ul{list-style-type: none; background-color: #ccc;
         padding: 0; text-align: center;}
      #myMenu li a{display: block; text-decoration: none; padding: 12px; color: brown;}
      #myMenu li a:hover{background-color: aliceblue; color: purple;}
   </style>
</head>
<body>

   <div class="myContainer">
      <div id="myHeader">
         <div class="company">fresherearth</div>
         <div class="search">
            <input type="text">Search
         </div>
      </div>
      <div id="myNavBar">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li class="right"><a href="#">Prices</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
         </ul>
      </div>
      <div id="myMenu">
         <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
            <li><a href="#">Link Six</a></li>
         </ul>
      </div>
      <div id="myContent">
         <h2>Some Heading</h2>
         <p>Some myContent</p>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia architecto quibusdam
            deserunt aspernatur quaerat eum, vero ullam rerum dicta illum?</p>
      </div>
      <div id="myFooter">Footer</div>
   </div>
   
</body>
</html>

Output

fresherearth

Some Heading

Some content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia architecto quibusdam deserunt aspernatur quaerat eum, vero ullam rerum dicta illum?

Footer

Now if I remove all the CSS codes from above example, then the output should be:

fresherearth

Some Heading

Some content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia architecto quibusdam deserunt aspernatur quaerat eum, vero ullam rerum dicta illum?

Footer

See how boring the presentation of the same document, but without CSS, looks like.

Important - Please do not worry about the CSS codes written in above example. You will learn all those properties one by one. My only purpose to create that example, is to show you, how CSS is used in designing an HTML document.

Mandatory Information about CSS

The filename extension of CSS is .css

CSS was developed by World Wide Web Consortium (W3C), initially released on the date 17^th of December, 1996.

For Whom is this CSS Tutorial Designed?

This tutorial is designed for both beginners and advance level CSS developer.

CSS Topics for Beginner Level CSS Developer

CSS Topics for Advance Level CSS Developer

Note - The CSS tutorial, I have designed over here, is not limited to above topics. These are the list of some famous topics, that beginners and advance level CSS developers can directly visit to start the tutorial.

Otherwise, from upcoming article, by clicking on the Next Tutorial button/link provided right after this article, you will learn all the CSS topics and/or properties, one by one along with example.

Best Part of This Tutorial

The best part of this tutorial is, I've included at least one example in each and every topics, to provide the convenient way to learn the things about CSS, easily and practically. So start the tutorial, using the Next Tutorial button/link given below.

CSS Online Test

« fresherearth Home Next Tutorial »