CSS Tutorial – For beginners and advanced users
What is CSS
CSS stands for Cascading Style Sheets that was created by World Wide Consortium (W3C). The purpose of creating CSS was to solve the problems faced in HTML 3.2 when tags with formatting were introduced.
As such HTML defines the content of web page, like paragraphs (p), Div, headings (h1, h2, h3 etc.). At that time formatting was defined on each HTML page in HTML tags like fonts. For larger and complex websites it became quite harder for web developers to maintain presentation layer as such any change to be made on web page was to be done on each web page separately. For example if color of heading needed to be changed across the web site in <h1>, then developers had to open each page and modify as per need. For larger websites it became a terrible thing to do.
W3C realized and came up with CSS that defines the display of HTML elements. CSS files can be stored separately. It saves a lot of work and time as if you need to make changes in display of HTML elements you just need to go to CSS part that will be shown across the site. It was from HTML 4.0 where all formatting of HTML tags could be removed from documents and stored in separate CSS files.
Types of CSS
CSS can be used within HTML document, called as internal CSS. Separate files of CSS can be created as well. This is called external CSS. Generally external CSS is used by developers. References of external CSS files are given in web pages in order to use in your documents.
Purpose of tutorial
This tutorial will teach you how to use CSS. How CSS can be used to define presentation/layout of your web pages.
Requirements for this tutorial
This tutorial expects that you have knowledge of HTML. Live demo of examples are also given in order to see CSS working real time in each topic.
Chapters in this Tutorial
- CSS Basic Syntax
- CSS Classes
- CSS ID
- CSS Backgrounds
- CSS Text
- CSS Font
- CSS Border
- CSS Padding
- CSS Links
- CSS hover
- CSS cursor
- CSS Display
- CSS Visibility
- CSS table
- CSS Float
- CSS clear
- CSS hover – 4 Examples of hover in div, a: link, p, headings etc.
- CSS font-weight: bold or slightly bold text with 2 Demos
- Ways to use CSS line height with example
- CSS Link Properties – Setting Color, Style, Size: 4 Demos
- 6 Examples to Understand ALL about CSS display Property
- How to Use Hand, Pointer and other CSS Cursors
- CSS Visibility: Learn to Make Elements Visible or Hidden
- CSS table – 3 Examples to Style HTML Tables With CSS