ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

What are the basic commands of css for websites to produce simple web formats?

Updated on September 16, 2007

Basic CSS/HMTL For a Simple Readable Website

text.htm

-----------------------------------------------------------------------------------

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<title>Text XHTML Page</title>

<link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>

<script type="text/javascript" src="javascript/main.js"></script>

</head>

<body>

<h1>This is the title</h1>

<p>This is HTML and <script type="text/javascript">test()</script>, and this is a <a href="http://www.tanguay.info/web">link to another website</a> and this is the rest of the text.</p>

<p>This is the second paragraph.</p>

<h1>This is the second title</h1>

<p>Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence.

<ul>

<li>item number one</li>

<li>item number two</li>

<li>item number three</li>

</ul>

</p>

<p>Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. Here is a another sentence. </p>

</body>

</html>

css/main.css

-----------------------------------------------------------------------------------

/* bugfix: forces firefox and explorer to treat margin and padding similarly */

* {margin: 0px; padding: 0px;}

body {

font: 95% Verdana, Arial, Helvetica, sans-serif;

color: #000;

background: #eee;

padding: 10px;

}

a {

color: #cc0066;

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

a img {

border: 0 none;

}

p {

margin: 10px;

}

h1 {

color: navy;

background: transparent;

font-size: 1.5em;

}

ul {

list-style-type: square;

margin: 0px 0px 0px 40px;

}

javascript/main.js

-----------------------------------------------------------------------------------

function test() {

document.write("this is from javascript code");

}

Comments

    0 of 8192 characters used
    Post Comment

    Click to Rate This Article