CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Introduction

CSS is used to control the style of a web document in a simple and easy way- for example, to alter the font, colour, size and spacing of your content, split it into multiple columns, or add animations, transition effects and other decorative features.

  • CSS is Easy to learn
  • CSS is a language that describes the style of an HTML document
  • CSS describes how HTML elements should be displayed

This tutorial will help you learn the essentials of latest CSS3, from the fundamentals to advanced topics, so that you can fine control the style and layout of your web pages and websites.


Examples in each Chapter

Every chapter in this tutorial contains lots of practice examples that you can try and test yourself using our online editor to extend your learning. The purpose of these examples is to provide you a better understanding of the usage of CSS.

Basic CSS example
Run code

Advantages of CSS

  • CSS saves lots of time: CSS gives lots of flexibility to set the properties of an element. You can write CSS once; and then the same code can be applied to the groups of HTML elements, and can also be reused in multiple HTML pages.
  • Easy maintenance : To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
  • 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.
  • Superior styles to HTML : CSS has much wider presentation capabilities than HTML, so you can give far better look to your HTML pages in comparison to the HTML presentational elements and attributes.
  • Multiple Device Compatibility : CSS can also allow the HTML document to be optimized for more than one type of device or media. Using CSS the same HTML document can be presented in different viewing styles for different rendering devices such as computer screen, cell phones, printer, etc.

Prerequisites

Before starting this module, you should have:

  • Basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content).
  • A basic work environment set up as detailed in Installing basic software, and an understanding of how to create and manage files, as detailed in Dealing with files.
  • Basic familiarity with HTML, as discussed in the Introduction to HTML tutorial.

CSS References

The reference section will give you the detailed information about the latest CSS3 properties and values, selectors, functions, units, entities and more.

Go to CSS Reference