CSS Basics

Lesson 1 - Starting Out

In Lesson 1 we gather the tools required to create our first HTML page utilising 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.


<!DOCTYPE html> 
<!-- Our HTML and CSS for this CSS tutorial follows -->
<html  xmlns="https://www.w3.org/1999/xhtml/">
<head>
<title>
HTML Doctor - CSS Tutorials - Basic CSS Lesson 1 - Starting Out
</title>
</head>
<body>
<h1 style="color: green;">CSS Basics - Starting Out</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.

notepad

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.

notepad

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.

Related Tutorials/Quizzes

NONE

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.

CSS Basics  << Prev          Next >>  CSS Syntax

go to home page Homepage go to top of page Top