CSS Doc - Printable Version
-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: CSS Doc (/showthread.php?tid=59568)
CSS Doc by welshboy222 on 05-20-2006 at 03:02 PM
How do I put a CSS document into my HTML for my website as I have tried lots but it wont work.
RE: CSS Doc by stoshrocket on 05-20-2006 at 03:04 PM
what do you mean? link to an external css sheet??
code:
<link rel="stylesheet" type="text/css" href="link to css" title="default" />
eg/. if the css sheet is style.css and is in the same directory as you have the .html file in, use the code
code:
<link rel="stylesheet" type="text/css" href="style.css" title="default" />
RE: CSS Doc by Zahid™ on 05-20-2006 at 03:06 PM
CSS Tutorial: http://www.w3schools.com/css/
If you have already made a css document just put this in the <head> section :
code:
<link rel="stylesheet" type="text/css" href="put link of css here" title="default" />
RE: CSS Doc by welshboy222 on 05-20-2006 at 03:15 PM
didnt work
RE: CSS Doc by Zahid™ on 05-20-2006 at 03:17 PM
quote:It should work, have you already created a css file? and did you put it in the <head> ?
Originally posted by welshboy222
didnt work
RE: CSS Doc by welshboy222 on 05-20-2006 at 03:21 PM
this is it and its just words no positioning or picture
<!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">
<head>
<link rel="stylesheet" type="text/css" href="/* CSS Document */
body {background-image:url(images/bg.jpg); background-repeat:repeat-y; background-color:#FFFF99; padding-left: 90px;}
#page {width: 410px; float:left}
#page h1{color:#FF9933; font-family:"Trebuchet MS", Verdana, SansSerif; margin:20px 0 0 0; text-align:center;}
#page p {font-family:Arial, Helvetica, sans-serif; padding-left:10px;}
#page .postdatetime {text-align:center; color:#FF0000; font-family:Arial, Helvetica, sans-serif; font-size:10px}
#page .postcat {text-align:center; color:#FF9933; font-family:Arial, Helvetica, sans-serif; font-size:10px;}
#sidebar {padding-left:410px;}
#sidebar ul {padding:4px; margin: 0 0 0 4px; width:100%}
#sidebar li {width:100%;margin:0; padding:0; list-style-type:none; color:#FFFFFF; font-family:"Trebuchet MS", Verdana, SansSerif; font-size:12px;}
#sidebar li a{color:#FFFFFF; text-decoration:none; width:100%}
#sidebar li a:hover{color:#FFFF99;}
#sidebar h3 {font-size:22px; margin: 0; color:#FFFFFF; font-family:"Trebuchet MS", Verdana, SansSerif; padding-left:2px}
#sidebar .sideitem1 {background-color:#FF0000; width: 170px; margin-top: 10px;}
#sidebar .sideitem2 {background-color:#FF9933; width: 170px; margin-top: 10px;}
#sidebar .sideitem3 {background-color:#FF6633; width: 170px; margin-top: 10px;}
#footer {clear:both; text-align:right; font-family:"Trebuchet MS", Verdana, SansSerif; color:#FF0000; font-weight:bolder}
#footer a{color:#FF0000; text-decoration:none}
#footer a:hover{color:#FF9933; text-decoration:none}
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css"/>" title="default" />
</head>
<body>
<div id="page">
<h1>Welcome to SimpliCss4</h1>
<div class="postdatetime">July 13, 2006</div>
<p>This design is inspired by my favorite coffee mug 
</p>
<div class="postcat">Posted in: Category 1, Category 2</div>
<h1>Welcome to SimpliCss4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Welcome to SimpliCss4</h1>
<div class="postdatetime">July 13, 2006</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="postcat">Posted in: Category 1, Category 2</div>
<h1>Welcome to SimpliCss4</h1>
<div class="postdatetime">July 13, 2006</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="postcat">Posted in: Category 1, Category 2</div>
<h1>Welcome to SimpliCss4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Welcome to SimpliCss4</h1>
<div class="postdatetime">July 13, 2006</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="postcat">Posted in: Category 1, Category 2</div>
<h1>Welcome to SimpliCss4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Welcome to SimpliCss4</h1>
<div class="postdatetime">July 13, 2006</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="postcat">Posted in: Category 1, Category 2</div>
<h1>Welcome to SimpliCss4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="sidebar">
<div class="sideitem1">
<h3>Menu</h3>
<ul>
<li><a href="index.html" title="link">Link</a></li>
<li><a href="index.html" title="link">Link</a></li>
<li><a href="index.html" title="link">Link</a></li>
<li><a href="index.html" title="link">Link</a></li>
</ul>
</div>
<div class="sideitem2">
<h3>Categories</h3>
<ul>
<li><a href="index.html" title="link">Link</a></li>
<li><a href="index.html" title="link">Link</a></li>
<li><a href="index.html" title="link">Link</a></li>
<li><a href="index.html" title="link">Link</a></li>
</ul>
</div>
<div class="sideitem3">
<h3>Archive</h3>
<ul>
<li><a href="index.html" title="link">Link</a></li>
<li><a href="index.html" title="link">Link</a></li>
<li><a href="index.html" title="link">Link</a></li>
<li><a href="index.html" title="link">Link</a></li>
</ul>
</div>
<div class="sideitem1">
<h3>Valid</h3>
<ul>
<li><a href="index.html" title="link">XHTML</a></li>
<li><a href="index.html" title="link">CSS</a></li>
</ul>
</div>
</div>
<div id="footer">Designed by: <a href="http://myhedspace.com" title="Myhedspace.com" target="_blank">Jose Erlino M. Lontok</a></div>
</body>
</html>
RE: CSS Doc by stoshrocket on 05-20-2006 at 03:25 PM
hmm.... you want internal css from what i can see....
ive attached the html doc, ive used the <style> tag for the internal css... but you can use external style sheets (nicer looking coding 
) by moving that css into a new doc, naming it style.css and then linking to it the way i said in my post earlier 
RE: CSS Doc by welshboy222 on 05-20-2006 at 03:27 PM
how do I get that file off there?
RE: CSS Doc by stoshrocket on 05-20-2006 at 03:30 PM
click on mmm.html, select the text, ctrl + c, open up notepad, ctrl + v et voila! just save that as a .html doc
RE: CSS Doc by welshboy222 on 05-20-2006 at 03:35 PM
so can I put all this HTML/css onto my website?
RE: CSS Doc by stoshrocket on 05-20-2006 at 03:37 PM
that code that ive attached is all of the code for the page you posted a few posts back, the code i posted as an attatchment replaces the code you posted a few posts back, just save the code i posted as a html doc
RE: CSS Doc by welshboy222 on 05-20-2006 at 03:39 PM
yes but I would like to use it as a template could I do that?
RE: CSS Doc by stoshrocket on 05-20-2006 at 03:42 PM
yes... if you wanted... just edit the content as you like... and also because im a nice bloke ive attached a .zip file with the html file you just have to replicate and copy for different pages...
RE: CSS Doc by welshboy222 on 05-20-2006 at 03:50 PM
looks the smae to me lol
RE: CSS Doc by stoshrocket on 05-20-2006 at 03:54 PM
theres one major difference. You were using the <link....> tag which is to link to an external css sheet, ie if you cut all of that css and saved it into a seperate css doc... i do it that way, its just easier and cleaner... but for that code to work you needed to use internal css, which means you use the <style> tag, not the <link> tag
by the way, you need to move this .html file back to the original directory, it needs a bg pic to display, and it cant display it if the file has been moved...
RE: CSS Doc by welshboy222 on 05-20-2006 at 03:55 PM
oh