CSS Basic Formatting Code

The basis of style sheets for Web design. You can use this cascading style sheet template to begin creating your beautiful website.

There are many ways to link style sheets to HTML, each carrying its own advantages and disadvantages. And there are two easy methods to insert the CSS in your web page.

The first method is to embedded the style sheets directly into a web document - insert the style container tag inside the header tags. Such as the following example:

<head>
<style type="text/css">
body {
  font-family: Arial, Helvetica;
  color: Black;
  background-color: White;
}

other css code here...
</style>
</head>

The second method is to create a style sheet link in the header tags, and links to external CSS file. External CSS files must be saved using the .css file extension. The following is one example of an external link to CSS file:

<head>
  <title></title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

For full article, please see Linking Style Sheets to HTML

The following resources is the most basic CSS example, you can replace with your favorite color or style.

Resources:

CSS Code

body {
  font-family: Arial, Helvetica;
  color: Black;
  background-color: White;
}

p {
  font-family: Arial, Helvetica;
  color: Black;
}

a:link {
  color: Blue;
}

a:visited {
  color: Purple;
}

a:active {
  color: Red;
}

a:hover {
  color: Red;
}

h1 {
  font-family: Arial, Helvetica;
  color: Black;
}

h2 {
  font-family: Arial, Helvetica;
  color: Black;
}

h3 {
  font-family: Arial, Helvetica;
  color: Black;
}

h4 {
  font-family: Arial, Helvetica;
  color: Black;
}

h5 {
  font-family: Arial, Helvetica;
  color: Black;
}

h6 {
  font-family: Arial, Helvetica;
  color: Black;
}

HTML Code

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

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

<head>
  <title></title>
<style type="text/css">

body {
  font-family: Arial, Helvetica;
  color: Black;
  background-color: White;
}

p {
  font-family: Arial, Helvetica;
  color: Black;
}

a:link {
  color: Blue;
}

a:visited {
  color: Purple;
}

a:active {
  color: Red;
}

a:hover {
  color: Red;
}

h1 {
  font-family: Arial, Helvetica;
  color: Black;
}

h2 {
  font-family: Arial, Helvetica;
  color: Black;
}

h3 {
  font-family: Arial, Helvetica;
  color: Black;
}

h4 {
  font-family: Arial, Helvetica;
  color: Black;
}

h5 {
  font-family: Arial, Helvetica;
  color: Black;
}

h6 {
  font-family: Arial, Helvetica;
  color: Black;
}

</style>
</head>

<body>

<h1>Your Page Title</h1>

<h2>Subtitle Goes Here</h2>

<p>This paragraph contains some text. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exercitation ulliam corper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

<a href="home.htm">Home</a> |
<a href="products.htm">Products</a> |
<a href="services.htm">Services</a> |
<a href="about.htm">About Us</a> |
<a href="contact.htm">Contact</a>

</body>

</html>

Webmaster » XHTML CSS » You are here

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

CSS Website Layout