CSS Tutorial

Cascading style sheets (CSS) are used to specify the appearance of web pages written in HTML. Before going to learn this tutorial, you should have a basic understanding of the following tutorials.


Click Here to learn HTML and HTML5 Tutorials firstly.

What is CSS?

  • CSS stands for Cascading Style Sheets ( C ascading Style Sheets )
  • Styles define how HTML elements are displayed
  • Styles are usually stored in style sheets
  • Styles were added to HTML 4.0 to address the separation of content and presentation
  • External style sheets can greatly improve productivity
  • External style sheets are usually stored in CSS files
  • Multiple style definitions can be cascaded into one

Before CSS, almost all presentation attributes of an HTML document were contained within HTML tags (especially within HTML tags). All font colors, background styles, element alignments, borders and sizes must be clearly described in HTML.

The consequence of this is that the development of a large website becomes a long and expensive process as style information is repeatedly added to each page of the website, and it also increases the cost of maintenance.

Advantages of using CSS

The biggest advantage of CSS is that it separates style and layout from the content of the document. There are more advantages here, why choose to use CSS?

  • CSS saves a lot of time – CSS provides a lot of flexibility in setting style properties of elements. You can write CSS once. The same code can then be applied to groups of HTML elements or reused across multiple HTML pages.
  • Ease of Maintenance — CSS provides an easy way to update the formatting of documents and maintain consistency across multiple documents. Because the content of an entire web page can be easily controlled using one or more style sheets.
  • Pages load faster – CSS allows multiple pages to share formatting information, reducing the complexity and duplication of document structure content. It significantly reduces file transfer size, resulting in faster page loading.
  • Advanced Styling of HTML – CSS has a wider range of presentation capabilities than HTML and provides better control over the layout of web pages. Therefore, you can make your web page look better than HTML represents elements and attributes.
  • Multiple Device Compatibility – CSS also allows web pages to be optimized for multiple types of devices or media. Using CSS, the same HTML document can be rendered with different viewing styles for different rendering devices (e.g. desktop, mobile, etc.).

What this tutorial covers

This CSS tutorial series covers all the basics of CSS, including the concept of selectors, how to set colors and backgrounds, how to format fonts and text, styling UI elements like hyperlinks, lists, tables, and CSS boxes model, etc.

Once you’re familiar with the basics, you’ll move on to the next level, which will cover setting the size and alignment of elements, using image sprites to place elements on a web page, and the concepts of relative and associative. Absolute units, visual formatting models, display and visibility, layers, pseudo-classes and elements, media-related style sheets, and more.