Jan
5

CSS Introduction

Posted in CSS Tutorials by

0


CSS Introduction

HTML was originally designed as a simple way of presenting information and was never intended to contain tags for formatting a document.

When tags like <font> were added to the HTML 3.2 specification, it started a nightmare for coders. Development of Websites became a long and unduly painful process – where fonts and color information had to be added to every single element, and every single Web page, leading to bigger HTML files, and changing a single color throughout the Website meant hours of re-coding.

Then, someone had a great idea: have one file that defines the values that all those tags would have done, and then have all your Web pages checking this file and formatting your Web pages accordingly. You can therefore leave out most of the formatting tags in HTML and use only structural elements (like headings, paragraphs and links) – separating the appearance of web pages from the content of web pages.

To solve this problem, the World Wide Web Consortium (W3C) – responsible for standardizing HTML – created Cascading Style Sheets (CSS). Styles sheets define how HTML elements are to be displayed.

If you ever decide to change the look of your site, you modify that one CSS file and all the HTML pages reading from that file will display differently. This makes maintenance of your design much easier.

Benefits of CSS

With CSS you define things once, making it far more efficient than defining everything in HTML on every page. This means:

  • Pages download faster, sometimes by as much as 50%
  • You have to type less code, and your pages are shorter and neater
  • The look of your site is kept consistent
  • Updating your design is easier

And there are dozens of powerful extra formatting options and possibilities available through style sheet commands that are not possible through normal HTML.

How Style Sheets Work

Styles can be specified:

  • inside an HTML element
  • inside the head section of an HTML page
  • in an external CSS file

Styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the highest priority:

  • 1. Browser default
  • 2. External style sheet
  • 3. Internal style sheet (in the head section)
  • 4. Inline style (inside an HTML element)

So, an inline style has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser.


Top

Leave a Reply