Create Your First Cascading Style Sheet (CSS)


Copy and paste the following CSS into your text editor and Save it as 'tutorial.css'



body {

background-color: #ffe4b5;

}



Now open a new document in your text editor and copy and paste the following HTML code.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>My First Web Page Using CSS</title>

<link rel="stylesheet" type="text/css" href="tutorial.css" />

</head>

<body>

<h1>My First Web Page Using CSS</h1>

<p>I am going to build my first website using CSS and HTML.</p>

</body>

</html>



In the same folder as tutorial.css, Save this document as 'first_page.html'. Then go to your folder and open it to your web browser either by double clicking the icon or using right click, then 'open with', then selecting your web browser.


See this Example. The background of your web page should be a magnolia colour. If you are using Internet Explorer the heading and text will be in Times New Roman, whereas if you use Firefox it will be in Arial font.


Background Image in CSS


Copy and paste the following CSS into your text editor and Save it as 'tutorial.css'



body {

background-color: #ffe4b5;

}




>> Next - The Box Model >>



Summary of CSS Tips so far


Save your style sheet(s) using the .css file extension.

Use small letters throughout your CSS code

Keep it simple and use a common structure throughout the CSS

Refresh your browser to see the changes that you have made.

US English spelling throughout.