Tutorials Tonight's Logo
Follow Us

CSS INTRODUCTION


What is CSS?

CSS which is an acronym for Cascading Style Sheets is used to style webpages, create webpage animations, create shapes and to make the webpage responsive to different device sizes.

It is a design language using which you can style and design the look of your webpage. It has an old history and the current version of CSS is CSS3.

introduction to CSS

The latest version of CSS (CSS3) is a combination of the old version + some new specification like a media query, namespace, selector, etc.

It works with HTML files so before learning CSS you must be knowing HTML.

It let you embed its code directly in an HTML file and even write code independently in another document and then link it to your HTML file.

Here is an example showing how a simple webpage can be styled to look beautiful using CSS.

This is HTML code for the webpage without any CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS - Introduction</title>
</head>
<body>
  <div class="container">
    <div class="first">
      <h1>Hello, World!</h1>
      <p>The most famous line for a programmer.</p>
    </div>
    <div class="box">
      <h2>Learning CSS</h2>
      <p>Learning CSS will let you design beautiful webpages, moving objects, amazing animations and different shapes on your webpage.</p>
    </div>
    <button>Start Learn CSS With Tutorials Tonight!</button>
  </div>
</body>
</html>

Output:

HTML without CSS

Now adding CSS code see how the look of the webpage changed.

body {
  margin: 0;
  font-family: sans-serif;
}

.container {
  width: 600px;
  background-color: #ffe8cb;
  border: 5px solid #a3442e;
}

h1 {
  font-size: 40px;
  text-align: center;
}

.first p {
  margin-left: 20px;
}

.box {
  padding: 20px;
  background-color: #f1bbad;
}

button {
  display: block;
  color: #2e2e2e;
  font-size: 18px;
  margin: 20px auto;
  padding: 10px 20px;
  border-radius: 25px;
  border: 2px solid #a3442e;
}
▶ Run the code

Output:

HTML without CSS

You can see how CSS code changes the look of the webpage. Well, this is just a glimpse of what CSS can do, you will be able to do even more after you learn it.

Note: If you don't understand CSS code currently than don't bother we will look at all properties in detail in the coming sections.


What CSS can do?

HTML was designed only for describing the content of the web page not for formatting it.

When formatting tags like <font> and attributes like color was introduced in HTML 3.2 then it becomes a nightmare for web developers to manage large websites. They had to place font and color information on every page and that looked so overwhelming.

To solve this problem, the World Wide Web Consortium (W3C) created CSS, which was able to design websites more beautiful and clean. It removed the style formatting from the HTML page.

Here is a list of few things that CSS can do:

  • Changing font properties, like size, color, weight etc
  • Adding color to text elements

  • Adding color to text elements adding background properties like, color image etc to any HTML element
  • Creating different shapes
  • Adding margin and padding to the elements
  • Designing layouts
  • Creating effects like animation, hover etc


Why you should learn CSS?

If you want to become a web developer then CSS is among the 3 necessary languages (HTML, CSS, JavaScript) that you must learn.

Here are some key points why you should learn CSS:

  • Web development: It is a must-learn language for web development
  • Unique design: Using this you will be able to design unique looking websites
  • Access over elements: It gives you access to almost each element that is visible on the screen
  • Control: You can style any element according to your wish
  • Adding effects: It can add effects on webpages that looks fabulous
  • Create animations: Using CSS you can create animations like moving objects or shapes
  • Responsive websites: Learning CSS will let you design responsive websites that fit to any device sizes
  • Learning frameworks: If you learn and understand it then you be able to learn and work on many CSS based frameworks like Bootstrap


History of CSS

CSS was first proposed on 10th Oct 1994 by Håckon Wieum Lie. In that year Microsoft's Internet Explorer 3 was released with very limited support of CSS.

In those days browsers were unable to add complete CSS and also had bugs. It took more than 3 years when any browser reached full implementation of CSS.

It has multiple versions and each version is built upon the previous version, typically adding new features. Newer versions are a subset of one or more levels of CSS build for a particular device and user interface.

  • CSS 1 - First CSS specification was published on 17th Dec 1996.
  • CSS 2 - Developed by W3C and published in May 1998.
  • CSS 2.1 - CSS level 2 revision 1, W3C published it on 7th June 1998.
  • CSS 3 - Earliest draft of CSS3 was published in June 1999.

Advantages of CSS

CSS provides powerful control over HTML documents. It is also easy to learn and understand.

There are a lot of advantages of learning CSS:

  • Easy to maintain - If you want to change any kind of styling just go to styling, change and all your elements will adjust according to the new change.
  • Handle multiple webpages: CSS saves lots of time when used externally because it can control multiple page layout at once.
  • Faster page loading - Before CSS tags like color, border, size, font etc were repeated many times which led to slower loading. But by using CSS we need to mention property and value just once.
  • High Control - We can control the style of the whole website using a single CSS page. Change just once here and the whole website shows your changes.
  • Multiple devices friendly - Using CSS we can create pages that can adjust their decorations according to the device.

Here is a working example of HTML + CSS.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS - intro</title>
  <style>
    button {
      border: none;
      background-color: tomato;
      color: white;
      font-size: 20px;
      padding: 20px;
    }

    button:hover {
      color: black;
      background-color: aqua;
    }

    .sideways {
      margin: 10px;
      height: 50px;
      width: 100px;
      background-color: rgb(59, 206, 206);
      animation: move 2s infinite;
    }

    @keyframes move {
      0% {
        margin-left: 0
      }

      50% {
        margin-left: calc(100% - 100px)
      }

      100% {
        margin-left: 0
      }
    }
  </style>
</head>

<body>
  <button>Hover me!</button>
  <div class="sideways"></div>
</body>

</html>
▶ Run the code

Points to remember:

  1. CSS stands for Cascading Style Sheet.
  2. It is used to style webpage, create animation and effects.
  3. It can be added directly to the HTML file or can be added another external CSS file to HTML.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.