Introduction to CSS
With CSS, you can specify the style, layout, and appearance of various elements on webpages.
This tutorial 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/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. Check out our HTML tutorials or XHTML tutorials if you are not yet familiar with these languages.
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 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?
- 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. - 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 - 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 - 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 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!