Cascading Style Sheets (CSS)

CSS wordt gebruikt samen met HTML bestanden om te zorgen dat er niet veel code op de HTML pagina's is, wat het voor zoekmachines makkelijker maakt Uw website te spideren ( lezen ). Een tweede voordeel is dat de CSS-Stylesheet gelijk voor alle of meerdere HTML pagina's gebruikt wordt. Als U bijvoorbeeld de lettergrootte verandert op een pagina, gebeurd dit automatisch ook op alle andere pagina's van Uw website. Erg handig als U bijvoorbeeld 200+ pagina's in Uw website heeft. Ok, laten we beginnen met wat echte uitleg: CSS is een afkorting voor Cascading Style Sheets,het document waar we mee werken noemen we dus een Style Sheet, zijn naam eindigt op .css. Dus bijv: style.css, U kunt ook met meerdere Style Sheets werken, U geeft dan de volgende bijvoorbeeld de naam style2.css. Om te zorgen dat Uw HTML bestand gelinkt wordt naar de Style Sheet en deze zodoende kan vinden,plaats U de volgende code in de tussen de header tags: <link rel="stylesheet" type="text/css" href="/GWLM/style.css" /> Een browser zal dit lezen en automatisch de stijl van de style.css op Uw HTML bestand toepassen. Deze Style Sheet kunt U schrijven met een willekeurige teksteditor, ik werk persoonlijk met of Notepad of gelijk in Dreamweaver wat deze mogelijkheid ook heeft. Dit is een bijvoorbeeld hoe U begint bijvoorbeeld met de Style Sheet, de volgorde van de stijlen die U erin zet doet er in principe niet toe, al is het makkelijk om duidelijk orde aan te brengen, zodat U later de dingen terug kunt vinden als U iets wilt veranderen.

body{
padding:0px;
margin:0px;
background:url(images/body_bg.gif) 0 0 repeat-x #fff;
color:#434343;
}

div, h1, h2, p, form, label, input, textarea, img, span{
margin:0; padding:0;
}

ul{
margin:0;
padding:0;
list-style-type:none;
}
.spacer{
clear:both;
font-size:0px;
line-height:0px;
}
#header img{
background:url(images/logo.png) 0 0 no-repeat;
width:48px;
height:48px;
position:absolute;
left:-230px;
top:115px;
}

Een belangrijk iets is, tussen 48 en px ( net hierboven ziet U dit staan ) mag geen spatie komen te staan, dus niet zo: 48 px, want dan kan Firefox het niet lezen, ik geloof Opera ook niet.

Als een bepaalde pagina op Uw website een andere stijl verreist werkt U dus of met een tweede stijlsheet, of U geeft de stijl aan binnen Uw HTML document, in dit geval mag er dus geen link aanwezig zijn naar een Style Sheet.U geeft de code aan in de heade sectie. Bijvoorbeeld:

<style type="text/css">
hr {color:green}
p {margin-left:20px}
body {background-image:url("images/mijnhuis.jpg")}
</style>

Wilt U een aparte stijl toepassen op slechts 1 stukje tekst dan doet U dit binnen de desbetreffende tag.Bijvoorbeeld zo:

<p style="color:green;margin-left:10px">We hebben gisteren mijn huis opnieuw geschilderd.</p>

Wilt U alles precies weten? De beste CSS gratis lessen vindt U hier, weliswaar in het Engels, maar ik neem aan dat de meeste van U naar school geweest zijn vroeger.www.w3schools.com Hier vindt U een complete cursus met tips en uitleg,niet alleen wat css betreft, maar van alles en nog wat, HTML, XHTML, XML enzovoorts.