CODESCRACKER

Learn CSS: CSS Tutorial for Beginners

Are you fed up with CSS's seemingly limitless potential overwhelming you? Do you want to discover how to design beautiful websites without wasting countless hours trying to figure out where to begin? Look nowhere else! We'll walk you through the fundamentals of CSS and more in this tutorial, arming you with the knowledge you need to make your website stand out from the competition.

So buckle up and prepare to advance your web design abilities! 😍

CSS stands for Cascading Style Sheets and is 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">Company</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
Company
Search

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

In the above HTML and CSS code, everything in between the "SCRIPT" tag is all CSS code. Now if I remove all the CSS codes from the above example, then the output should be:

Company
Search

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.

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

I used basic CSS codes in the above example to make the codes shorter. However, after learning all the concept included in this CSS tutorial, you will be able to design a truly stunning website with your own.

Mandatory Information about CSS

The filename extension of CSS is .css

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

CSS Topics for Beginner-Level CSS Developers

If you are a beginner in the field of CSS, you can start with these topics:

However, we recommend that you begin this "CSS tutorial" series by simply following the "Next Tutorial" link at the bottom of this post, so that you can level up from zero to hero.

CSS Topics for Advance-Level CSS Developers

Note: The CSS tutorial I have designed here is not limited to the above topics. These are only some of the famous topics that beginners and advanced CSS developers can directly visit to start the tutorial.

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

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.

CSS Online Test

« CodesCracker.com Next Tutorial »

Liked this post? Share it!