CSS Tutorial: An Introduction to CSS

Cascading Style Sheets (CSS) are one of the greatest things invented for the Web. In their simplest form, CSS are a collection of formatting rules that control the appearance of the content on a web page.

This CSS tutorial will provide you with a basic level of knowledge that will enable you to create, edit, and modigy simple CSS code. This tutorial will make more sense if you already have a basic understanding of HMTL and XHTML.

What is CSS?

CSS stands for Cascading Style Sheets. For years, web developers had no way to separate the content of a web page from the presentation of the style elements. If you wanted a large blue font for all of your headings, you had to individually set the color and size for each of the headings on youe website. That could be thousands of pages!

CSS solved that problem. It separated the content of a document from the formatting.

• Styles define how to display the HTML elements on a web page
• Styles were added to HTML 4.0 to solve the problem of separating the content of a page from the formatting.
• Styles can be either internal to the webpage or kept in an external file that is "attached" to the web page.
• External style sheets can save a lot of work.
• External style sheets are stored in a separate text file called a CSS file.

HTML code was never intended to include the tags for formatting a document. It was intended to do simple formatting like that of a header, a paragraph, and other web page elements.

<h1>This is a large heading</h>

<p>This is a paragraph</p>

New tags for things like fonts, color attributes, margins, and padding were added to HTML specifications in version 3.2. This caused huge problems for web developers especially those working on very large sites where fonts and color information were added to every single page. Changing colors or modifying the pages tool a long time and was a very tedious undertaking. Wouldn't it by nice if the colors and other formatting could be changed one time in a singel file and those changes would apply to every page on the website.

To solve this problem, CSS was developed.

When HTML 4.0 was released, all formatting for colors, fonts, sizes, etc. was removed from the HTML and placed in a separate CSS file.

This seaparate file is called an external CSS file and it contains all of the intormation that the browser needs to read the code and apply the formatting.

This made it very easy to make changes to fonts, colors and other attributes across an entire web site containing thousands of pages, with a simple edit done one time on the style sheet.

All modern browsers support CSS today.

More CSS Tutorials: An Introduction to CSS

CSS Syntax, Rules, Comments
CSS ID and Class Selectors
Using the External & Internal CSS Style Sheet
Using Multiple CSS Style Sheets
CSS Backgrounds
CSS Text Formatting
CSS Font - Using CSS to Modify Font Properties
CSS Links - Using CSS to set the four link states
CSS List - Using Ordered and Unordered Lists
CSS Tables
CSS Boxes
CSS Borders
CSS Outline
CSS Margins
CSS Padding

 

Share this Webpage

 

More Create a Great Website Articles

Build a Website | Create a Great Website! Build a Website is an online website tutorial and guide for showing anyone how to create a web site that draws significant traffic. The site also explains how to make money from your website.

Keyword | Create a Great Website! Create a Website is an online website tutorial and guide for showing anyone how to create a web site draw significant traffic. The site also explains how to make money from your website.

Website Host | Create a Great Website! Website host - Getting Space on the Web. This tutorial will teach you what you need to know about selecting a Website host.

Infolinks In-Text Advertising | Create a Great Website! This article explains how website publishers and bloggers can make money from their websites by using Infolinks In-text advertising links.

Website Niche | Create a Great Website! Choosing your website niche is one of the most important decisions you'll make and it will have a huge impact on your ability to make money with your website.

Online Courses Online courses from Create-a-great-website!

Create a Great Website Blog Create a Great Website Blog

E-Commerce Website | Create a Great Website! Information and resource for creating an e-commerce website.

Web Design | Create a Great Website! Tutorials and tips and resources for web design.

Domain Names | Create a Great Website! Domain Names - What you need to now about website domain names, choosing one, parking a domain, registering a domain name.

Planning a Website | Create a Great Website! An overview of everything you'll need to know in planning a website.

Create a Great Website Blog The Create a Website Blog - listing of recent articles published on Create a Great Website.

CSS Tutorial | Create a Great Website! An introduction to CSS tutorial.

Dreamweaver CS4 Tutorial | Create a Great Website! This Dreamweaver CS4 Tutorial covers everythong you need to know about creating a website with Dreamweaver.

WordPress as a Website | Create a Great Website! What you need to know about using WordPress as a website.

Affiliate Marketing | Create a Great Website! Affiliate marketing is a great way to make money online. This article provides tips on how to do it.

Site Built-It! for Making Money Online | Create a Great Website! Why I chose Site Build It! for Making Money Online.

Ebooks, Tutorials, and E-Googs | Create a Great Website! Learn how you can make money with your own Ebooks and E-goods.

Search Engine Optimization | Create a Great Website! What you need to know about search engine optimization and why it's so important for your website success.

How to Make a Website | Create a Great Website! The basic steps for how to make a website. Making your own website can be fun and profitable activity. Let the information tutorials and resources on Create a Great Website show you how.

XHTML Tutorial | Create a Great Website! XHTML Tutorial from Create a Great Website. Learn about XHTML tags and how to use them in your web pages.

Dreamweaver CS5 Tutorial | Create a Great Website! This Dreamweaver CS5 Tutorial covers everything you need to know about creating a website with Dreamweaver CS5.

Web Tutorials Create a Great Website! Web tutorials for beginners through experts for creating a website. Includes topics on Dremweaver, CSS, and others.

Buy Dreamweaver CS5 | Create a Great Website! Buy Dreamweaver CS5: Here are several retail outlets and online vendors where you can Dreamweaver CS5.

Link Building | Create a Great Website! What you need to know about link building for your website and strategies to build more links to your website.

Small Business Website - Getting Started | Create a Great Website! Everything you need to know about setting up a small business website.

Contact Us | Create a Great Website! Contact Us.

 

This site proudly build with Site Build It!