I recently started on a new project and I needed to redesign a website but before getting to that I wanted to "clean up" the code. It is just a mess as you can see below.
Now I wanted to move this to a new css file:<style type="text/css"></style>and there is more to be transferred to the css file (for example the position, colour and other make-up things).
Now I transferred the css text to a new style.css file and referred to it with:<link rel="stylesheet" href="css/style.css">but after deleting the css code from the html file it did not show any changes. Wel it did show some but not as it was before.
How can I transfer this css code to a seperate file? It works fine as it is now but when I move it to a new file it does not.
Anyway here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Generator" content="Serif WebPlus 11.0.8.033">
<title>Home</title>
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
<!--
body {margin: 0px; padding: 0px;}
a:link {color: #3e550e;}
a:visited {color: #8e9165;}
a:hover {color: #3e550e;}
a:active {color: #3e550e;}
.Standaard-P
{
margin:0.0px 0.0px 0.0px 0.0px; text-align:center; font-weight:400;
}
.Standaard-P0
{
margin:0.0px 0.0px 0.0px 0.0px; text-align:left; font-weight:400;
}
.Standaard-C
{
font-family:"Tahoma", sans-serif; font-size:11.0px; line-height:1.18em;
color:#37b0c1;
}
.Standaard-C0
{
font-family:"GrilledCheese BTN Wide Blk", sans-serif;
font-size:20.0px; line-height:1.40em; color:#ad0e0b;
}
.Standaard-C1
{
font-family:"GrilledCheese BTN Wide Blk", sans-serif;
font-size:20.0px; line-height:1.40em; color:#27ffa6;
}
.Standaard-C2
{
font-family:"GrilledCheese BTN Wide Blk", sans-serif;
font-size:20.0px; line-height:1.40em; color:#00ffff;
}
.Standaard-C3
{
font-family:"GrilledCheese BTN Wide Blk", sans-serif;
font-size:29.0px; line-height:1.38em; color:#ad0e0b;
}
.Standaard-C4
{
font-family:"GrilledCheese BTN Wide Blk", sans-serif;
font-size:17.0px; line-height:1.41em; color:#ad0e0b;
}
.Standaard-C5
{
font-family:"Tahoma", sans-serif; font-weight:700; font-size:16.0px;
line-height:1.19em;
}
.Standaard-C6
{
font-family:"Tahoma", sans-serif; font-size:16.0px; line-height:1.19em;
}
.Hyperlink-C
{
font-family:"GrilledCheese BTN Wide Blk", sans-serif;
font-size:20.0px; line-height:1.40em; color:#4cfff7;
text-decoration: underline;
}
.Hyperlink-C0
{
font-family:"GrilledCheese BTN Wide Blk", sans-serif;
font-size:20.0px; line-height:1.40em; color:#53ff19;
text-decoration: underline;
}
.Hyperlink-C1
{
font-family:"GrilledCheese BTN Wide Blk", sans-serif;
font-size:16.0px; line-height:1.38em; color:#4cfff7;
text-decoration: underline;
}
-->
</style>
<script type="text/javascript"><!--
var blankSrc = "wpscripts/blank.gif";
--></script>
<script src="wpscripts/jspngfix.js" type="text/javascript"></script>
<script src="wpscripts/jsDetectBrowser.js" type="text/javascript"></script>
<script src="wpscripts/jsMenus.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var wp_menubar0 = new wp_menus();
wp_menubar0.m_bkgndcolor = '#edad0e';
wp_menubar0.m_bkgndcolorhl = '#37b0c1';
wp_menubar0.m_textcolor = '#800000';
wp_menubar0.m_textcolorhl = '#000080';
wp_menubar0.m_bordercolor = '#000080';
wp_menubar0.m_bordersize = 1;
wp_menubar0.m_fontsize = 13;
wp_menubar0.m_fontbold = true;
wp_menubar0.m_imagearrow = 'wpimages/wp68960b01.gif';
wp_menubar0.m_imagearrowhl = 'wpimages/wpb841bcb5.gif';
wp_menubar0.m_txtalign = 'center';
wp_menubar0.m_fontfamily = 'Tahoma,serif';
wp_menubar0.m_filterOpacity = 100;
wp_menubar0.m_mozOpacity = 1.000000;
wp_menubar0.m_delay = 500;
wp_menubar0.m_itemlines = true;
wp_menubar0.m_width = 0;
wp_menubar0.m_acStack.type = 1;
wp_menubar0.m_acStack.m_showbelow = true;
wp_menubar0.m_acStack.m_showright = true;
wp_menubar0.m_acStack.gap = 1;
wp_menubar0.m_acStack.bordergap = 1;
wp_menubar0.m_acStack.m_firstpopup = 1;
wp_menubar0.BeginMenu('wp_menubar0_P2');
wp_menubar0.AddLink('wp_menubar0_P2_I0','Werkboek','werkboek.html',null,'_self');
wp_menubar0.AddLink('wp_menubar0_P2_I1','Bestellen werkboek','werkboek_bestellen.html',null,'_self');
wp_menubar0.AddLink('wp_menubar0_P2_I2','Bestelformulier Werkboek / Rebozo','werkboek_bestelformulier.html',null,'_self');
wp_menubar0.AddLink('wp_menubar0_P2_I3','Voorzijde Rebozowerkboek','werkboek_rebozo_voorzijde.html',null,'_self');
wp_menubar0.AddLink('wp_menubar0_P2_I4','Achterzijde Rebozowerkboek','werkboek_rebozo_achterzijde',null,'_self');
wp_menubar0.AddLink('wp_menubar0_P2_I5','Foto's boekpresentatie ','pagina71aaaaaaaa.html',null,'_self');
wp_menubar0.EndMenu();
wp_menubar0.BeginMenu('wp_menubar0_P4');
wp_menubar0.AddLink('wp_menubar0_P4_I0','Workshop','pagina71aaaaaaaaaaaa.html',null,'_self');
wp_menubar0.AddLink('wp_menubar0_P4_I1','Programma workshop','pagina71.html',null,'_self');
wp_menubar0.AddLink('wp_menubar0_P4_I2','Foto impressie workshop','pagina71aaaaa.html',null,'_self');
wp_menubar0.AddLink('wp_menubar0_P4_I3','Persberichten','pagina71aaaaaaaaa.html','wp_menubar0_P4_P4','_self');
wp_menubar0.AddLink('wp_menubar0_P4_I4','Aanmelding workshop','pagina71aa.html',null,'_self');
wp_menubar0.EndMenu();
wp_menubar0.BeginMenu('wp_menubar0_P4_P4');
wp_menubar0.AddLink('wp_menubar0_P4_P4_I0','Weleda','pagina71aaaaaaaaaa.html',null,'_self');
wp_menubar0.AddLink('wp_menubar0_P4_P4_I1','Educare','pagina71aaaaaaaaaaa.html',null,'_self');
wp_menubar0.EndMenu();
wp_menubar0.BeginMenu('wp_menubar0_P9');
wp_menubar0.AddLink('wp_menubar0_P9_I0','Workbook','pagina2aaaaa.html',null,'_self');
wp_menubar0.AddLink('wp_menubar0_P9_I1','Order Workbook','pagina2aaaaaa.html',null,'_self');
wp_menubar0.AddLink('wp_menubar0_P9_I2','Order-form workbook','pagina71aaaaaaaaaaaaa.html',null,'_self');
wp_menubar0.AddLink('wp_menubar0_P9_I3','Front cover','pagina2aaaaaaa.html',null,'_self');
wp_menubar0.AddLink('wp_menubar0_P9_I4','Back cover','pagina2aaaaaaaa.html',null,'_self');
wp_menubar0.AddLink('wp_menubar0_P9_I5','About the authors','pagina71aaa.html',null,'_self');
wp_menubar0.EndMenu();
//-->
</script>
</head>
<body text="#000000" style="background: #424242; position:relative; height:80% text-align:center;">
<div style="background: #0c6684; position:relative;width:80%;height:80%;margin-left:auto;margin-right:auto;">
<div style="position:absolute; left:39px; top:34px; width:683px; height:207px;">
<img src="wpimages/wp6a71e827.png" width="100%" height="100%" border="0" id="art_1" name="art_1" title="" alt="www.Rebozo.nl" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:40px; top:833px; width:680px; height:7px;">
<img src="wpimages/wp9cc26935.png" width="680" height="7" border="0" id="qs_13" name="qs_13" title="" alt="" onload="OnLoadPngFix()"></div>
<div id="txt_11" style="position:absolute; left:453px; top:845px; width:291px; height:15px;-moz-box-sizing:border-box;box-sizing:border-box; overflow:hidden;">
<P class="Standaard-P"><span class="Standaard-C">© webdesign: M. van Druten voor www.rebozo.nl</span></P>
</div>
<div style="text-align:left; position:absolute; left:37px; top:260px;">
<a href="index.html" target="_self"><img alt="Home." title="" id="wp_menubar0_0" src="wpimages/wpcd722a5f.png" style="border:0;width:211px;height:33px" onmouseover="wp_MenuItemOver('wp_menubar0_0',wp_menubar0,null);" onmouseout="wp_MenuItemOut('wp_menubar0_0',wp_menubar0);" onload="OnLoadPngFix();"></a><br>
<a href="pagina2.html" target="_self"><img alt="Werkboek." title="" id="wp_menubar0_1" src="wpimages/wp38c91c8c.png" style="border:0;width:211px;height:33px" onmouseover="wp_MenuItemOver('wp_menubar0_1',wp_menubar0,'wp_menubar0_P2');" onmouseout="wp_MenuItemOut('wp_menubar0_1',wp_menubar0);" onload="OnLoadPngFix();"></a><br>
<a href="pagina2aaaaaaaaa.html" target="_self"><img alt="Rebozo bestellen." title="" id="wp_menubar0_2" src="wpimages/wpaf7cea79.png" style="border:0;width:211px;height:33px" onmouseover="wp_MenuItemOver('wp_menubar0_2',wp_menubar0,null);" onmouseout="wp_MenuItemOut('wp_menubar0_2',wp_menubar0);" onload="OnLoadPngFix();"></a><br>
<a href="pagina71a.html" target="_self"><img alt="Workshop." title="" id="wp_menubar0_3" src="wpimages/wp985c7d1f.png" style="border:0;width:211px;height:33px" onmouseover="wp_MenuItemOver('wp_menubar0_3',wp_menubar0,'wp_menubar0_P4');" onmouseout="wp_MenuItemOut('wp_menubar0_3',wp_menubar0);" onload="OnLoadPngFix();"></a><br>
<a href="pagina71aaaaaaaaaaaaaa.html" target="_self"><img alt="Over ons." title="" id="wp_menubar0_4" src="wpimages/wp72392f04.png" style="border:0;width:211px;height:33px" onmouseover="wp_MenuItemOver('wp_menubar0_4',wp_menubar0,null);" onmouseout="wp_MenuItemOut('wp_menubar0_4',wp_menubar0);" onload="OnLoadPngFix();"></a><br>
<a href="pagina71aaaaaa.html" target="_self"><img alt="Contact." title="" id="wp_menubar0_5" src="wpimages/wp03f6932f.png" style="border:0;width:211px;height:33px" onmouseover="wp_MenuItemOver('wp_menubar0_5',wp_menubar0,null);" onmouseout="wp_MenuItemOut('wp_menubar0_5',wp_menubar0);" onload="OnLoadPngFix();"></a><br>
<a href="pagina71aaaaaaa.html" target="_self"><img alt="Links." title="" id="wp_menubar0_6" src="wpimages/wpc00d0795.png" style="border:0;width:211px;height:33px" onmouseover="wp_MenuItemOver('wp_menubar0_6',wp_menubar0,null);" onmouseout="wp_MenuItemOut('wp_menubar0_6',wp_menubar0);" onload="OnLoadPngFix();"></a><br>
<a href="indexa.html" target="_self"><img alt="English version." title="" id="wp_menubar0_7" src="wpimages/wpb3eff106.png" style="border:0;width:211px;height:33px" onmouseover="wp_MenuItemOver('wp_menubar0_7',wp_menubar0,'wp_menubar0_P9');" onmouseout="wp_MenuItemOut('wp_menubar0_7',wp_menubar0);" onload="OnLoadPngFix();"></a><br>
<script type="text/javascript">
<!--
wp_menubar0.InitElement('wp_menubar0_0','wpimages/wpcd722a5f.png','wpimages/wpcd722a5f.png');
wp_menubar0.InitElement('wp_menubar0_1','wpimages/wp38c91c8c.png','wpimages/wp38c91c8c.png');
wp_menubar0.InitElement('wp_menubar0_2','wpimages/wpaf7cea79.png','wpimages/wpaf7cea79.png');
wp_menubar0.InitElement('wp_menubar0_3','wpimages/wp985c7d1f.png','wpimages/wp985c7d1f.png');
wp_menubar0.InitElement('wp_menubar0_4','wpimages/wp72392f04.png','wpimages/wp72392f04.png');
wp_menubar0.InitElement('wp_menubar0_5','wpimages/wp03f6932f.png','wpimages/wp03f6932f.png');
wp_menubar0.InitElement('wp_menubar0_6','wpimages/wpc00d0795.png','wpimages/wpc00d0795.png');
wp_menubar0.InitElement('wp_menubar0_7','wpimages/wpb3eff106.png','wpimages/wpb3eff106.png');
//-->
</script>
</div>
<div style="position:absolute; left:307px; top:696px; width:164px; height:104px;">
<map id="map0" name="map0">
<area shape="rect" coords="17,1,165,92" href="http://www.youtube.com/watch?v=hcr3EUEfA6M" alt="">
</map>
<img src="wpimages/wp3c8657e6_02.jpg" width="164" height="104" border="0" id="pic_85" name="pic_85" title="" alt="" usemap="#map0"></div>
<div style="position:absolute; left:261px; top:260px; width:461px; height:400px;">
<img src="wpimages/wp399788b7.png" width="461" height="400" border="0" id="qs_14" name="qs_14" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:57px; top:712px; width:180px; height:19px;">
<img src="wpimages/wpb26a6a80.png" width="180" height="19" border="0" id="art_11" name="art_11" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:479px; top:669px; width:243px; height:121px;">
<img src="wpimages/wp70844bb8.png" width="243" height="121" border="0" id="qs_84" name="qs_84" title="" alt="" onload="OnLoadPngFix()"></div>
<div id="txt_60" style="position:absolute; left:443px; top:683px; width:307px; height:93px;-moz-box-sizing:border-box;box-sizing:border-box; overflow:hidden;">
<P class="Standaard-P"><span class="Standaard-C0">Bestel</span><span class="Standaard-C1"> </span><span class="Standaard-C2"><a href="pagina2a.html" style="color:#00ffff;">hier</a></span><span class="Standaard-C1"> </span><span class="Standaard-C0">het </span></P>
<P class="Standaard-P"><span class="Standaard-C3">Werkboek</span></P>
<P class="Standaard-P"><span class="Standaard-C4">Rebozotechniek</span></P>
</div>
<div style="position:absolute; left:259px; top:259px; width:465px; height:401px;">
<img src="wpimages/wp5f208f41.png" width="465" height="401" border="0" id="qs_20" name="qs_20" title="" alt="" onload="OnLoadPngFix()"></div>
<div style="position:absolute; left:0px; top:559px; width:320px; height:311px;">
<map id="map1" name="map1">
<area shape="rect" coords="24,0,321,308" href="pagina2.html" alt="">
</map>
<img src="wpimages/wpb6d9d1ba.png" width="320" height="311" border="0" id="drie_1" name="drie_1" title="" alt="Werkboek" onload="OnLoadPngFix()" usemap="#map1"></div>
<div id="txt_65" style="position:absolute; left:293px; top:283px; width:407px; height:355px;-moz-box-sizing:border-box;box-sizing:border-box; overflow:hidden;">
<P class="Standaard-P0"><span class="Standaard-C5">Welkom op www.Rebozo.nl, </span></P>
<P class="Standaard-P0"><span class="Standaard-C6">de site die informeert over de massagetechniek met de traditionele draagdoek: de
Rebozo.</span></P>
<P class="Standaard-P0"><span class="Standaard-C6"> </span></P>
<P class="Standaard-P0"><span class="Standaard-C6">Deze massagetechniek werd oorspronkelijk door verloskundigen uit Midden-Amerika toegepast
bij de voorbereiding van zwangeren op de bevalling.</span></P>
<P class="Standaard-P0"><span class="Standaard-C6">Mede door de opkomst van de Doula is deze techniek ook in het Westen geintroduceerd.
</span></P>
<P class="Standaard-P0"><span class="Standaard-C6">Met de groeiende bekendheid van de Doula, neemt ook de toepassing van de Rebozo toe.
</span></P>
<P class="Standaard-P0"><span class="Standaard-C6"> </span></P>
<P class="Standaard-P0"><span class="Standaard-C6">Ons doel is deze eenvoudige, maar zeer doeltreffende techniek, een bredere bekendheid
te geven. </span></P>
<P class="Standaard-P0"><span class="Standaard-C6">Het uitgangspunt is de traditionele toepassing bij zwangeren, barenden en kraamvrouwen.
Daarnaast zijn er meer mogelijkheden de Rebozo toe te passen bij zeer uiteenlopende
doelgroepen.</span></P>
</div>
<div style="position:absolute; left:236px; top:797px; width:448px; height:28px;">
<div class="Standaard-P0">
<span class="Hyperlink-C">Also </span><span class="Hyperlink-C0">English version</span><span class="Hyperlink-C"> available!</span></div>
</div>
<div style="position:absolute; left:671px; top:796px; width:52px; height:30px;">
<a href="indexa.html"><img src="wpimages/wp410e0b32.gif" width="52" height="30" border="0" id="agif1" name="agif1" title="" alt="English version"></a></div>
<div style="position:absolute; left:322px; top:672px; width:169px; height:22px;">
<div class="Standaard-P0">
<span class="Hyperlink-C1"><a href="http://www.youtube.com/watch?v=hcr3EUEfA6M" style="color:#4cfff7;text-decoration:none;">TV opnames!</a></span></div>
</div>
</div>
</body>
</html>
