Programming

Markup

Browser scripting

Server scripting

Making money online

Introduction to CSS

With CSS, you can specify the appearance, style, and layout of various elements on a webpage.

This lesson focuses on:

• What you should already know
• What is CSS?
• CSS and HTML
• What can be done with CSS?

What you should already know

Before studying CSS, you should already have at least a basic understanding of HTML and/or XHTML. CSS is used to specify the overall appearance of webpages written in HTML/XHTML. To use CSS for this purpose, you should first have at least a basic understanding of webpage building.

If you need to study HTML, you can do so at our HTML section.

If you need to study XHTML, you can do so at our XHTML section.

What is CSS?

CSS stands for Cascading Style Sheets. It is a language designed to specify the overall appearance of webpages as well as the appearance and structure of the text and elements such as images and buttons on webpages and their layout. Styles can be specified with CSS using internal style sheet definitions which are placed right into HTML/XHTML code or in external files.

CSS is supported by all modern browsers including Firefox, Opera, Netscape, and Internet Explorer.

CSS and HTML

Not just a language all its own, CSS is a part of HTML. The first version of HTML to include CSS was HTML 4.0

CSS was added to HTML to solve a particular problem - the problem of the content of HTML documents not being separated from the layout of the documents. This problem arose when the two most popular web browsers (Netscape and Internet Explorer) continuously added new tags and attributes to the HTML specification. Without the use of formatting tags, the layout of an HTML document was supposed to be taken care of by web browsers. The original purpose of HTML tags was to specify the content that will appear on webpages, and not their layout. But this was no longer the case, as Netscape and Internet Explorer added to the HTML specification.

The World Wide Web Consortium (W3C) - the organization responsible for developing and maintaining standards on the world wide web created CSS to solve the problem of content not being separated from layout. While CSS should be used to specify the overall appearance of webpages as well as the appearance and structure of the text and elements such as images and buttons on webpages and their layout, HTML/XHTML should be used to specify the content on webpages.

What can be done with CSS?

There is alot you can do with CSS:

• Specify a background color

  You can specify a background color for a webpage, a table, a form element, a paragraph, and more.

• Specify a common style for one tag or a set of tags.

  You can specify a common style for one tag or a set of tags. For example, you can specify that all text declared with the <h2> tag should be blue or that all text declared with the <p> (paragraph) tag should be bold and in a Courier font.

• Specify the distance between elements

  You can specify the distance between elements. For example, you can specify how much distance between the top most point of a page and the first element that appears on it there should be or the line spacing in a paragraph.

• Specify the appearance of links

  You can specify how links appear on a webpage. For example, you can specify that an unvisited link should be blue and not underlined, when the user moves the mouse over a link it should have a gray background and be underlined, and visited links should be green.

• Specify multiple styles for various webpages

  You can specify multiple styles for various webpages. You can have one stylesheet definition that can be used on several webpages instead of redefining the style on each individual page. For example, if you want the links on several of your pages to be green, you can specify this in one external stylesheet definition, and upload it to the pages where you want this particular style to take effect. Once you want to make a change to the stylesheet definition, you can do so in the stylesheet, and the changes will appear automatically on all the pages that the stylesheet has been uploaded to.

All this and much more can be done with CSS!

Practice

Reference

Rate this site