Introduction - Free CSS Tutorial

CSS is a style language that defines layout of HTML documents

Cascading Style Sheets (CSS) is a fantastic tool to add layout to your websites. It can save you a lot of time and it enables you to design websites in a completely new way. CSS is a must for anyone working with web design.

This tutorial will get you started with CSS in just a few hours. It is easy to understand and it will teach you all the sophisticated techniques.

Learning CSS is fun. As you go along through the tutorial, remember to take enough time to properly experiment with what you learn in each lesson.

Using CSS requires basic experience with HTML. If you are not familiar with HTML, please start with our HTML tutorial before moving on to CSS.

Which software do I need?

Please avoid using software such as FrontPage, DreamWeaver or Word with this tutorial. Advanced software will not help you learn CSS. Instead, it will limit you and slow down your learning curve significantly.

All you need is a free and simple text editor.

For example, Microsoft Windows comes with a program called Notepad. It is usually located in Accessories in the start menu under Programs. Alternatively, you can use a similar text editor e.g. Pico for Linux or Simple Text for Macintosh.

A simple text editor is ideal for learning HTML and CSS because it doesn't affect or change the codes you type. That way, your successes and errors can only be attributed to yourself - not the software.

You can use any browser with this tutorial. We encourage you to always keep your browser updated and use the latest version.

A browser and a simple text editor is all you need.

Let's get started!

Comments

Lesson 10: Margin and padding css

Lesson 10: Margin and padding In the previous lesson you were introduced to the box model. In this lesson, we will look at how you can change the presentation of elements by setting the margin and padding properties. Set the margin in an element Set the padding in an element Set the margin in an element An element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document). See also the diagram in lesson 9 for an illustration.

Lesson 9: Images

Familiarise yourself with seven of the most-used elements Lesson 9: Images Wouldn't it be great if you could have an image of actor and music legend David Hasselhoff right in the centre of your page? That sounds like a bit of a challenge... Maybe, but in fact it is pretty easy to do. All you need is an element: Example 1: <img src="david.jpg" alt="David" /> would look like this in the browser

Lesson 2: How does CSS work?

Lesson 2: How does CSS work? In this lesson you will learn how to make your first style sheet. You will get to know about the basic CSS model and which codes are necessary to use CSS in an HTML document. Many of the properties used in Cascading Style Sheets (CSS) are similar to those of HTML. Thus, if you are used to use HTML for layout, you will most likely recognize many of the codes. Let us look at a concrete example. The basic CSS syntax Let's say we want a nice red color as the background of a webpage: Using HTML we could have done it like this: <body bgcolor="#FF0000"> With CSS the same result can be achieved like this:

html ibbye htm

Search This Blog