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

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 2 comments

JazLive profile image

JazLive 9 years ago from Decatur

For those who do not have a "clue" like me :p -- can accomplish this in no time in the social community TagWorld http://jazlive.com/jazlive.aspx - join from my open invitation link -- I will personally welcome you into this community of millions.

I created this blog http://www.tagworld.com/JazLive/PostDetail.aspx?id... in TagWorld and transported HTML code to my public blog http://jazlivecash.blogspot.com/2007/08/george-fun...


dynamic css 6 years ago

Good post. Just one note, don't use px in CSS but rather use "em" units. In general 1em is equal to the current font size and thus it will work well across different screen resolutions.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    More by this Author


    Click to Rate This Article
    working