CSS Tutorial


CSS Tutorial: An Introduction to Cascading Style Sheets

CSS TutorialCascading Style Sheets, better known as CSS, enable you to control the style and layout of a web page. They will enable you to specify link styles, fonts, margins, tables, colors, sizes, alignments and much more throughout your entire web page.

They can also be used to create a template like style sheet (stored within a separate file) that can be used throughout your website. You can simply link to your style sheet within each of your web pages and have the ability to update the styles for your entire website with just one file.

Intended Viewers

This CSS tutorial assumes that you have a basic knowledge of HTML, how it functions, and the terminologies.

If you aren’t familiar with HTML, it is highly recommended that you review the HTML Tutorial prior to reviewing this CSS tutorial.

The Benefits of Using Cascading Style Sheets (CSS)

CSS will save you a great deal of time. When it comes to the Internet, there are really only two elements: Content and the way that content is presented. With HTML, we provide content, and define how that content will be presented within the HTML code. However, we are very limited as to what we can do with HTML.

Each browser is different and they see things differently. This is why webmasters are instructed from the very beginning to view their web pages in many different browsers, such as Internet Explorer,Firefox, and Opera (among many others), to make sure that their web pages appear as they intended and expected them to from one browser to another.

Overall, the HTML code on the web page polices the content, and the CSS polices the HTML. This allows you to create web pages that are suitable for all browsers.

One of the best benefits of using CSS within your web pages is the ease of updating your web pages. If you’d like to make a change to your design, instead of having to change hundreds of web pages on your site, you can make one simple change to the CSS file, and it will automatically update all of the pages on your website. CSS enables you to do in seconds what would take hours to do in HTML.

Cascading Style Sheets enable you to control the style and layout of a web page, such as link styles, fonts, margins, colors, sizes, and more. CSS will enable you to keep your page size down and help it to load more quickly.


Creating Cascading Style Sheets (CSS)

Learning, creating, and working with CSS doesn’t require much. You do not need any type of editor, as Cascading Style Sheets can be created using a plain text editor, such as Note Pad.

However, you will need a web browser. Internet Explorer and Firefox are the most popular ones, but there are many others. Once you create your pages and are using CSS, you must ensure that you view your web pages through multiple browsers to ensure they are displaying just as you had intended. Visit Any Browser to view your pages through different browsers.

You may also need a way to upload your pages to your web server. This is typically done with an FTP client, and there are many nice free one’s available. You may also upload your files through the control panel of your web hosting service.

Internal and External Cascading Style Sheets (CSS)

CSS can be used in two ways. It can be used internally, which may be referred to as embedded or inline, or it can be used externally, which is often referred to as a linked style sheet. Ideally, you will be using linked styled sheets when you finish this tutorial.

The only time you may be using embedded CSS is if you would like to change an individual link or text, or have a one or two page website. If you will have more than that, however, a linked style sheet is definitely the way to go.

CSS can be used in three different ways:

Inline CSS

Added to your standard HTML tags.

Embedded CSS

An embedded CSS is exactly as it sounds. The CSS code is actually placed within the HTML web page between the <HEAD> and </HEAD> tags.

Linked CSS

A linked style sheet, on the other hand, is a completely separate document that is linked to within a web page.

This concludes part on of the CSS Tutorial introduction. In the next lesson, we will continue with part 2.