CSS Tutorials : Lesson 1 : CSS Introduction

CSS Tutorials : Lesson 1 – Introduction

In this tutorial you will learn about Cascading Style Sheets (CSS), Introduction to CSS, What you should already know? History, What is CSS? CSS saves a lot of work and time, CSS reduces the file size of HTML documents and CSS can be designed for different media

What you should already know?

The tutorial assumes that you have basic understanding of the following topics:

• HTML/XHTML

History

In the old days we had only HTML, which was good, with HTML you can make good web designs, you can adjust the layouts using tables, and the layout problems can be fixed using the single-pixel gif image, but this is not good.

The layout problem and many others were fixed using CSS, with CSS design became a straight forward process, all web development/design tools now contain a CSS designer that makes using CSS a first choice for web designers.

What is CSS?

• CSS stands for Cascading Style Sheets.
  .
• CSS is a language that works with HTML to define how to present the contents.
  .
• Styles are placed directly into HTML, HTML document head, and/or in a separate sheet.
  .
• CSS contains rules to define how HTML elements will be styled.
  .
• Many HTML files can use the same CSS file, and one HTML file can use many styles.

CSS saves a lot of work and time

Single CSS file can control the appearance of multiple HTML documents; to make a change to all documents you don't have to make the change in every document, just make it in the CSS file, and it will be reflected on all documents that are linked to it.

Even for one document, the CSS can define the appearance of an HTML element; all you have to do to change the appearance of that element all over the document is to change it in the CSS, this saves a lot of time and work.

CSS reduces the file size of HTML documents

By removing the presentation from the HTML documents and saving it in a smaller size CSS file, you get rid of presentation attributes and spacing images which reduces the size of the document and makes site navigation faster.

CSS can be designed for different media

A document can be styled in a way that is suitable for the presentation media, you can have many style sheets linked to one document, every sheet is for content presentation on a specific media, including browsers, printers, handheld devices, and projectors.