Beginning CSSS2C Home « Beginning CSS

Cascading Style Sheets, more commonly known as CSS are used to present our HTML and XHTML in exactly the way we want it to look. Whereas HTML and XHTML are all about the structure of our web pages, CSS is all about the presentation.

In Lesson 1 we gather the tools required to create our first HTML page utilizing CSS and make a folder to store our CSS Basic practical files in. We do our first practical and view the results in a default web browser.

The Basic Tools

All we need to get going is a basic text editor such as Notepad for windows. So for instance using Windows XP:

click Start>>All Programs>>Accessories>>Notepad

notepad

Creating A Folder For Our CSS Basic Files

Let's create a folder for our CSS basic lessons

double click My Computer icon

double click C:\ drive (or whatever your local drive is)

right click the mouse in the window

from the drop down menu Select New

click the Folder option and call the folder _CSSBasics and press enter.

Saving Our First File

Ok, with Notepad or a simlilar text editor open, copy and paste the following code into the editor.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML and CSS for this CSS tutorial follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
CSS Tutorials - Basic CSS Lesson 1 - Beginning CSS
</title>
</head>
<body>
<h1 style="color: green;">CSS Basics - Beginning CSS</h1>
</body>
</html>

Click file from the toolbar and then click the save option.

In the Save in: tab at the top make sure you are pointing to the _CSSBasics folder we created above.

In the File name: text area type lesson_1_csspage.html and then click the Save button and close the Notepad.

savecssbasics

The .html file extension lets the system know that this is a hypertext document, you must save the file with this extension to view the document in your default web browser. If you do not save the file with the .html file extension Notepad and other text editors save the file with the .txt file extension. This will stop you viewing the file in a web browser.

Viewing Our Saved File

From the C:\_CSSBasics folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

cssbasics

Reviewing Our Changes

We used the style attribute of the h1 html tag to define an inline style for this particular header. The stuff inside the double quotes is the CSS part and here we are setting the CSS property color to green. We will go into the syntax of CSS a lot more in the next lesson so hold on to your hats.

Lesson 1 Complete

That's it! We have just created our first HTML file with CSS using an 'inline' style.

What's Next?

In the next lesson we learn the syntax behind CSS properties, by explaining how a style is applied and the various parts and terminology commonly used for this purpose.

Related Tutorials

NONE

go to home page Homepage go to top of page Top