Photoshop Templates

Featured Photoshop templates - professional ready to use designs for your next project.

View all templates

Introduction into CSS - CSS tutorial

This tutorial gives you a basic overview about CSS and it's advantages

Category: CSS tutorials - Difficulty:

Introduction into CSS

How would you like to create your own layout for your new website? You are probably so pleased with what you have accomplished so far. Maybe a bit less satisfied, though, because you want something better. Here is where CSS can help you. CSS helps to add layout to your website. It allows you to design websites in ways you could only imagine.

Before you learn CSS, it is a must that you have basic knowledge of and experience with HTML. The latter is not such a task to learn, so does the CSS but both requires experimenting and logic. Both may seem complicated at first glance, especially if you see the commands and codes first without reading through the discussions, but truth is you just got to get acquainted with the basics. Everything else will follow.

In learning and making CSS, there is nothing much that you will need, except a simple text editor, such as notepad. It is not recommended that you use software like, FrontPage or Word. These softwares won’t be so much of a help, but in stead will limit your learning.

If you are using Microsoft Windows, notepad can be located by going to “start” button, which you can find in the taskbar. Once you tick the “start” button a menu appears. Go to “All programs” then another menu will appear. Go to “accessories” and another menu will show. You should see a blue notebook with the text Notepad click on it to open.

If you are using Linux, a good simple text editor suggestion would be “g-Edit” or “Pico”. For Macintosh, you can use “Simple text”.

Why is simple text editor preferred to make CSS? It is simply because it doesn’t interfere with your typing. It does not correct any misspelled word especially that you are typing codes. If you use Word or any other software, it will alert you from time to time that you are typing a word that it cannot recognize. This can be very annoying.

Another basic requirement to make CSS is browser. Any browser will do. Whatever you are using, may it be Internet Explorer, Netscape Navigator, Firefox, or what have you, as long as the browser is updated, you should have no problem.

So, basically, you can start creating layout for your website with only two basic requirements and -- a simple text editor and a browser – and you’re ready to go!

So, what is CSS?

Surely, you have heard about CSS before. Maybe you have heard of it several times especially if you have been using the internet for a long time now, only you just didn’t know what it really is. Friendster.com has incorporated an option to edit the layout of personal accounts using CSS. But what really is CSS?

CSS is short for Cascading Style Sheets. It is a new tool added to HTML that allows one to create layouts for websites. By it, one can control how the page should appear in the browser. One can manage font type, font and element background color, padding, margins and many others. With it, one can create style sheets that define how different elements appear in the browser. The word “cascading” is used to convey the fact that multiple style sheets can be applied to the same web page. You just have to change the style and all elements in the web are automatically updated. All browsers support Cascading Style Sheets. It can be embedded in the of an HTML document.

You should be able to make your own style sheets using CSS by the end of the lesson or after only a few lessons. You can then give your website a totally wonderful make-over.

HTML vs CSS

No, these two are not competing with each other. There is no argument which of the two is more helpful. In fact, they are like tag team. One does the dirty work and the other does the clean work. HTML is used to make the structure while CSS is used to format the structured content.

To give you a brief background, HTML was originally designed to define the content of a document. It is used to do all the work and the browser will take care of the layout. However, major browsers went on with adding new HTML tags and attributes to the original HTML pattern. It then became more and more difficult to create websites where contents of HTML documents were separated from the document’s presentation layout.

W3C, a non profit, standard setting consortium, also responsible for standardizing HTML, acted to solve the problem. The solution was CSS. CSS is designed to provide web designers with advanced layout opportunities that are supported by all major browsers. It allows site maintenance a lot easier for the web designers.

Advantages of CSS

Cascading Style Sheets allow you to control the style and layout of several web pages simultaneously. With CSS, you can specify a style for each HTML element and apply it to as many web pages as you wish. All you have to do is to just change the style and in no time, all elements in the page are updated. Also, CSS gives web developers the power to give total control on layouts. And the fact that it offers countless advanced techniques, web developers are now more capable of designing websites with less complexity.