oursolutionarchitectoursolutionarchitect
  • Selected Reading
  • Q&A

CSS Tutorial

Table of content

CSS Tutorial

CSS is an acronym for Cascading Style Sheet and it was created by HÃ¥kon Wium Lie in 1996 for the web developers to change the layout, colors, and fonts of their websites.

CSS is a style sheet or presentational language that is used to layout, format, and style documents that are written in HTML to make them look beautiful. CSS is generally used with HTML to change the style of web pages and user interfaces. You can use CSS to change the color, backgrounds, borders, paddings, margins, fonts, icons, position and various other properties of HTML elements in a web document.

This tutorial covers all the versions of CSS including CSS1, CSS2 and CSS3, and gives a complete understanding of CSS, starting from its basics to advanced concepts. This tutorial will teach you about CSS Box Model, Selectors, The cascade, Color, Sizing Units, Layout, Flexbox, Grid, Pseudo-elements and Pseudo-classes, Borders, Shadows, Focus, Functions, Gradients, Animations, Filters, Lists, Transitions, Overflow, Backgrounds, Text and typography.

CSS Examples

This tutorial teaches you every CSS concept with the help of suitable examples which you can execute in your browser itself without a need of any external HTML editor.

Below HTML & CSS code is editable where you can change the value of the code. You can click the icon run button to see the output of the following code. Try to change the values of width, font-size and padding etc and then run it again to see the modified result.

<html>
<head>
   <style>
      div{ background-color: lightgrey; width:100%; padding:5px}

      h1{color: #40a944; text-align: center;}

      p{ font-family: verdana;font-size: 20px;}
   </style>
</head>
<body>
   <div>
      <h1>CSS Example</h1>
      <p>This is a paragraph.</p>
   </div>
</body>
</html>

Why to Learn CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.

CSS is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Web Development Domain. I will list down some of the key advantages of learning CSS:

  • Create Stunning Web site - CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs,variations in display for different devices and screen sizes as well as a variety of other effects.

  • Become a web designer - If you want to start a carrer as a professional web designer, HTML and CSS designing is a must skill.

  • Control web - CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

  • Learn other languages - Once you understands the basic of HTML and CSS then other related technologies like javascript, php, or angular are become easier to understand.

Applications of CSS

As mentioned before, CSS is one of the most widely used style language over the web. I'm going to list few of the CSS applications here:

  • CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.

  • Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.

  • Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.

  • Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.

  • Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.

  • Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.

Audiences

This CSS tutorial will help both students as well as professionals who want to make their websites or personal blogs more attractive. We recommend reading this tutorial, in the sequence listed in the left side menu.

Today, HTML and CSS are essential languages to learn for anyone involved in the web development process including Web Developers, Web Designers, Graphic Designers, Content Managers, and Project Managers etc.

Prerequisites

Don't worry, you really don't need to be a computer geek to learn CSS. It's very easy styling and presentational language which anyone can learn on the go. You simply needs to be familiar with:

  • Basic word processing using any text editor.
  • How to create directories and files.
  • How to navigate through different directories.
  • Internet browsing using popular browsers like Internet Explorer or Firefox.
  • Developing simple Web Pages using HTML or XHTML.

If you are new to HTML and XHTML, then we would suggest you to go through our HTML Tutorial or XHTML Tutorial first.

CSS Online Quizzes

This CSS tutorial helps you prepare for technical interviews to be conducted by various Software Development and other IT related companies. We have provided various CSS quizzes and assignments to check your learning level. Given quizzes have multiple choice type of questions and their answers with short explanation.

Following is a sample quiz, try to attempt any of the given answers:

Answer : C

Explanation

HÃ¥kon Wium Lie proposed the idea of CSS in 1994 and then the first version of CSS was invented in 1996.

Start your online quiz Start CSS Quiz.

CSS Jobs and Opportunities

CSS professionals are always in high demand as the web development is increasing exponentially all around the world. Almost every major or minor company wants to have their website and so they are requruiting IT professionals having good experience with CSS, HTML and other front end development technologies.

Average annual salary for a Web Developers is around $150,000. Though it can vary depending on the location and company to company. Following are the great companies who keep recruiting great Web Designers & Developers:

  • Infosys
  • Google
  • TCS
  • Amazon
  • Netflix
  • Tech Mahindra
  • Wipro
  • Pinterest
  • Tutorials Point
  • Many more...

So, you could be the next potential employee for any of these major companies. We have developed a great learning material for CSS and HTML which will help you learning complete web development. So, start learning CSS using our simple and effective tutorial anywhere and anytime absolutely at your pace.

Frequently Asked Questions about CSS

There are some very Frequently Asked Questions(FAQ) about CSS, this section tries to answer them briefly.

There are three versions of CSS – CSS1, CSS2 and CSS3. CSS1 is the oldest one which was released in 1996 and CSS3 is the latest which contains fresh features and functionalities and it was released in 2012.

The latest version of CSS is 3.0. As of June 2012, there are over fifty CSS modules published from the CSS-3 Working Group.

CSS is being used every where including Web Pages, RSS Feeds, Web Chats, Embedded-devices etc.

It's a myth that there will be a CSS4. There has never been a CSS4. There will never be a CSS4. CSS4 is not a thing that exists.

We can include CSS in three different ways (a) Using external CSS file (b) By including inside <style>...</style> tags (c) Using style attribute of an HTML element.

A CSS Syntax consists of a selector{ property1: value1, property2: value2...}. The selector is used to select an HTML element where the CSS style needs to be applied. The CSS properties are separated by semicolons.

Thus a CSS rule consists of two main parts: selector ('h1') and declaration ('color: red').

The <style> tag is used to define style information (CSS) for a document.

There are more than 100 different properties in CSS and a infinite number of different values can be assigned to those properties.

CSS is extremly easy to learn. You can learn CSS in as little as one to two weeks. However, it can take months of practice before you become CSS expert. Determining how long it takes to learn CSS also depends on how you plan to use it. Following our CSS tutorial will give you enough confidence to work with CSS and design & develop an great website.

Here are the summarized list of tips which you can follow to start learning CSS.

  • First and the most important is to make your mind to learn CSS.
  • Follow our tutorial step by step starting from very begining.
  • Read more articles, watch online courses or buy a book on CSS and web development to enhance your knowledge.
  • Try to develop a small websites using CSS and HTML.

You can use our simple and the best CSS tutorial to learn CSS. We have removed all the unnecessary complexity while teaching you CSS concepts. You can start learning it now Start Learning CSS.

Kickstart Your Career

Get certified by completing the course

Get Started