DaniWeb IT Discussion Community - Simple css templates

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/)

- Site Layout and Usability (http://www.daniweb.com/forums/forum130.html)

- - Simple css templates (http://www.daniweb.com/forums/thread79107.html)

Simple css templates

Hi everyone

I just started using css and I was wondering if anyone knows of some SIMPLE yet nice templates I can get hold of that are easy for newbie to modify. I looked at the site dexterz suggested but they were a bit confusing. Can anybody tell me where to go to get the templates I need please.

Many Thanks

HLA91

Re: Simple css templates

if you want to start something from scratch, you can try dreamweaver or frontpage and by trial and error test the various css styles.

or you can go to http://www.freecsstemplates.org/ and donwlaod templates and tweak the style sheet for testing purpose. There should be many free/sample out there. Try googling for it.

Re: Simple css templates

you can study some codes and techniques used here -> http://cssplay.co.uk

i was once a noob...css codes here helped me to polish my skills...lol...OA

Re: Simple css templates

Here is my first css style . Made it myself.

 



  body

  {

   margin: 0;

   padding: 0;

   font-family: georgia, times, "times new roman", serif;

   color: #000;

   background-color: #000099;

  }

  

  #container

  {

   margin: 1em 5%;

   background-color: #FFF;

   border: 1px solid #333;

  }

  

  #banner

  {

   color: #FFF;

   background-color: #0066CC;

   border-bottom: 1px solid #333;

  }

  

  #banner h1

  {

   margin: 0;

   padding: .5em;

  }

  

  #nav

  {

   background-color: #FFF;

   float: left;

   width: 160px;

   margin-left: 10px;

   padding-top: 1em;

  }

  

  #nav p { margin-top: 0; }

  

  #content

  {

   padding-top: 1em;

   margin: 0 2em 0 200px;

  }

  

  #content h2 { margin-top: 0; }

  

  #content h4 { margin-top: 0; }

  #footer

  {

   color: #FFF;

   clear: both;

   background-color: #0066CC;

   padding: 1em;

   text-align: right;

   border-top: 1px solid #333;

  }



a,white:link {

color: #FFFFFF; text-decoration: underline;

}

a.white:active {

color: #FFFFFF; text-decoration: underline;

}

a.white:visited {

color: #FFFFFF; text-decoration: underline;

}

a.white:hover {

color: #FF0000; text-decoration: none;

}

a.green:link {color: #008000; text-decoration: underline; }

a.green:active {color: #008000; text-decoration: underline; }

a.green:visited {color: #008000; text-decoration: underline; }

a.green:hover {color: #ff0000; text-decoration: none; }

i will include a HTML page soon to show you how it is used

Re: Simple css templates

ok thanks, that would help because that looks confusing.

Re: Simple css templates

Easier than it looks ;)

Here is a page making use of that stylesheet. Copy and paste the HTML below into notepad and save it with the extension .HTML . Do the same with the CSS file above. THE CSS FILE MUST BE CALLED STYLE.CSS

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

<head>

<title>Test Site</title>

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

</head>

 

<body>

 

<div id="container">

 

 <div id="banner">

  <h1>Test Site</h1>

 </div>

 

 <div id="nav">

 

  <hr>

  <h4> Links to stuff</h4>

 

  <hr>

 

  <p>

   <a href="index.html" class="green">Main Menu</a> 

  </p>

  <p>

   <a href="sitemap.html" class="green">site1</a> 

  </p>

  <p>

   <a href="http://www.google.com" class="green">site2</a> 

  </p>

  <p>

   <a href="http://www.daniweb.com" class="green">site3</a> 

  </p>

  <p>

   <a href="http://www.google.com" class="green">site4</a> 

  </p>

  <p>

   <a href="http://www.google.com" class="green">site5</a> 

  </p>

  <p>

   <a href="http://www.google.com" class="green">site6</a> 

  </p>

  <hr>

  <h4> More sites</h4>

 

  <hr>

 

  <p>

   <a href="http://www.google.com" class="green">more1</a> 

  </p>

  <p>

   <a href="http://www.google.com" class="green">more2</a> 

  </p>

  <p>

   <a href="http://www.google.com" class="green">more3</a> 

  </p>

 

 <p><a href="<A href="http://www.daniweb.com/techtalkforums/member33110.html"><img">http://www.daniweb.com/techtalkforums/member33110.html"><img

 src="http://www.daniweb.com/certificates/badge33110.jpg"

 border="0" alt="jbennet has contributed to our community"

 width="125" height="125" /></a></p>

 

 </div>

 

 <div id="content">

 

  <h2>Welcome to my opensource software site</h2>

 

  <h4>Why did you make this site?</h4>

 

  <p>I made it to  experiment with and learn about Apache and something called CSS. In the field of computing, CSS (Cascading Style Sheets) are used to describe the presentation of a document written in a markup language such as HTML.</p>

 

  <h4>What can CSS do for me?</h4>

  <p> Cascading Style Sheets offer a simple mechanism for adding style (e.g. fonts, colors, layout) to web documents as changing a single stylesheet can mean that you dont have to change all of your pages. Layout with CSS is easy too. If you are used to laying out a page with tables, it may at first appear difficult, but it isn't really. It's just different. In fact, it makes much more sense. In order to understand, you need to think of each part of the page as an individual chunk that can be placed absolutely or relative to another chunk.</p>

 

  <h4>What is Daniweb?</h4>

  <p>Daniweb is a really handy forum for talking about IT related topics such as linux and website creation/managament. DaniWeb is an IT Discussion community which, at only three years old, has already surpassed 200,000 forum posts. It is currently growing at the rate of over 400 new members daily and offers everything Information Technology related in one convenient place, putting a wealth of knowledge at your fingertips. </p>

 

 </div>

 

 <div id="footer">

  Copyright &copy <a href="mailto:james.bennet1@ntlworld.com" class="white"> James Duncan Bennet 2007</a>

 </div>

 

</div>

 

</body>

</html>

Re: Simple css templates

Thanks for that if I change the look slightly and the text do you mind me using this code for a site and I would place your name as a comment or as the copyright?

Re: Simple css templates

Dont worry. Use it however you want im glad to have helped :)

Re: Simple css templates

haha...you earn a reputation point!

Re: Simple css templates

hey if you want another good free one then here you go. Includes css, button images and sample page. Much better than the other one.