Homepage » Tutorials » HTML & CSS » Linked stylesheets

Linked stylesheets

Info 
Door: Rick Moeilijkheidsgraad: 1/3
Geplaatst op: 09-02-2004Reacties: 34(Bekijken)
Views: 48329 (gem. 20.1203 per week) Log in om zelf te reageren
 Waardering:9.3/10 (6 stemmen)

Uitgebreide cursus CSS» Inleiding: wat is CSS? | Linked stylesheets | Embedded stylesheets | Inline stylesheets | Je eigen styles maken | Meer over styles | Tekst en CSS | Achtergronden met CSS

Als eerste dus de linked stylesheets. Zoals gezegd koppel je een stylesheet aan een of meer html-bestanden. Over hoe je zo'n styleheet maakt hebben we het straks wel, eerst leggen we je even uit hoe je een stylesheet aan het html-bestand koppelt. We gaan er even vanuit dat je HTML al onder de knie hebt, zoniet, volg dan de HTML-cursus nog even.

Je weet dat een html-pagina er zo uit kan zien:

#Code
1
2
3
4
5
6
7
8
<html>
<head>
<title>Welkom op mijn website!</title>
</head>
<body>
<p>Dit is mijn website</p>
</body>
</html>

Dit stelt natuurlijk niet veel voor, maar daar gaat het nu ook niet om. Het gaat hier even om de manier waarop we de stylesheet koppelen. En dat doen we in de head-sectie, dus tussen <head> en </head>. Koppelen we aan het bovenstaande document bijvoorbeeld het stylesheet opmaak.css, dan ziet de head-sectie er zo uit:

#Code
1
2
3
4
<head>
<title>Welkom op mijn website!</title>
<link rel="stylesheet" type="text/css" href="opmaak.css">
</head>
Helemaal niet moeilijk dus, zoals je ziet. Nu hebben we dus aangegeven dat de website er volgens de door ons opgegeven opmaak uit moet zien. Volgende vraag is natuurlijk: hoe maken we dan zo'n stylesheet? Ook dit is weer behoorlijk eenvoudig, het lijkt een beetje op HTML, maar er zijn toch zeker verschillen. Ten eerste kun je het gewoon in bijvoorbeeld het Windows-programma Kladblok of Notepad maken. We zullen hieronder laten zien hoe je de stijl van een alinea (de tag <p>) aangeven:
#Code
1
2
3
4
p {
font-size: 11 pt;
font-family: Arial, Swiss, Helvetica;
color: black;}
Waarschijnlijk spreekt het allemaal voor zich, maar we zullen het allemaal toch even toelichten. Met p (dit noem je een selector) geef je natuurlijk aan dat het hier op de tag <p> gaat, tussen de { en } staat de stijl aangegeven. Verder heten bijvoorbeeld font-size en color properties, de waarde ervan, bijvoorbeeld 11pt en black heten values. Na iedere value volgt een punt-komma teken.

Met 11pt hebben we de hoogte opgegeven. Dat had ook gekund in pixels (px), inches, centimeters of wat dan ook. Met font-family geven we het lettertype aan. Door 3 lettertypes op te geven gaat de browser ze allemaal af. Wordt bijvoorbeeld Arial niet op de pc aangetroffen, dan zoekt hij evrder naar Swiss. Is ook die niet te vinden, dat gaat hij voor Helvetica. Je kunt er ook nog meer opgeven.


De kleur kun je zowel als hexadecimale code(#000000) of als woord(black) opgeven.

Koppel je dit bestand aan bijvoorbeeld 15 html-documenten, dan worden de voordelen al snel duidelijk. Kom je er bijvoorbeeld achter dat zwart toch wel erg slecht te lezen is op een donkerblauwe achtergrond en wil je de tekst wit maken, dan hoef je niet bij elke alinea de kleur op te geven. Het enige wat je doet is black veranderen in white, en alles is aangepast! Het zal duidelijk zijn dat dit enorme tijdwinst oplevert, en je een hoop vervelend werk afneemt.

«Inleiding: wat is CSS? Embedded stylesheets »

34 reacties
serdaan Geplaatst op 29-04-2010 om 16:30
 

Regular		 Wat een geweldige site! Ik heb nog nooit zo veel geleerd in korte tijd.
Ik ben nog steeds geen ster in de materie, maar kan wel een beetje wegwijs. Ik weet niet of het toegestaan is om hier om hulp te vragen, maar dat merk ik dan vanzelf :-)
Ik zit nl. nu al bijna de hele dag te prutsten op mijn linked stylesheet die maar niet wil werken. Het betreft gewoon een link naar een andere pagina; de tekst komt in beeld maar de style van de hoofdpagina wordt niet overgenomen. Ik heb een kopie gemaakt van de hoofdpagine, dus wat kan hier dan fout aan zijn:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>dekoofies</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

willy vital Geplaatst op 23-01-2010 om 17:13
 

Regular		 fantastische cursus! ben met css willen beginnen en een afzonderlijke stylesheet maken , maar het is mij niet duidelijk waar ik alles moet plaatsen, anderen hebben daar schijnbaar ook problemen mee. kunt u duidelijk zeggen waar ik alles moet plaatsen? veel dank
EpicMaster Geplaatst op 17-04-2009 om 13:44
Avatar van EpicMaster

Regular		 @juliusjk:

staat het CSS bestand in de zelfde map als het HTML bestand?

En heb je ook wel iets tussen <p>hier dus</p> staan, want dat is het enigste wat het CSS bestand hier verandert...
juliusjk Geplaatst op 07-01-2009 om 20:17
 

Regular		 ik heb geprobeert een style te maken met css maar het werkte niet. ik deed dus:
p {
font-size: 11 pt;
font-family: Chiller, Comic sans MS;
color: blue;}
dit bestand opgeslagen als bodystyle_site.css (en nee geen .txt erachter!!!).
daarna heb ik in een html bestand dit gezet:
<link rel="stylesheet" type="text/css" href="bodystyle_site.css">
(natuurlijk in de head)
maar het werkt niet...
iemand enig iedee wat er fout is...
iemand HELP ME!!!!!!!!!
niels daddle Geplaatst op 02-08-2007 om 13:56
 

Regular		 Mag je die css code in het zelfde bestand typen als je html code?
Of gwn in een ander bestand maar in dezelfde map?
Groeten Niels
5v3n Geplaatst op 11-07-2007 om 13:23
Avatar van 5v3n

Regular		 Is het ook mogelijk op een link te leggen naar een php-script,
en dat dat script naar een css verwijst?
dan kun je via een controlepaneeltje makkelijk een stijl wijzigen i.p.v. de css te overschrijven
Peck Geplaatst op 03-07-2007 om 11:45
 

Moderator		 Als je je tekst eerst in kladblok plakt, dan hou je enkel nog plaintext over (=platte tekst, zonder enige opmaak). Als je deze dan plakt in Frontpage kan je deze zonder zorgen opnieuw opmaken.
Cees Geplaatst op 03-07-2007 om 11:39
 

Regular		 Als ik een Word doc. toegestuurd krijg en ik plak de tekst m.b.v. Frontpage 2003 in de body van een webpage dan overrulen de opmaaktags van Word de CSS commando's
Dan zie je bijv. <p class="MsoNormal"><span style="font-size: 11pt> Dit zou betekenen dat ik alle tags handmatig moet verwijderen en vervangen door de style opdracht. Is hier een truc voor?
5v3n Geplaatst op 03-06-2007 om 15:03
Avatar van 5v3n

Regular		 ik merk ook juist een probleempje op met deze pagina:
ik klikte op vernieuwen om op reacties te sheckke en het bericht werd opnieuw verzonden het stond er 2 keer, ik paste het dan maar aan naar dit bericht Grtz
5v3n Geplaatst op 03-06-2007 om 14:58
Avatar van 5v3n

Regular		 EY,

'k heb e vraagske:

Ik wouw een map maken op de server ("scins") waarin ik verschillende css bestanden wouw plaatsen.
zo wordt het mogelijk verschillende scins snel na elkaar te kunnen afwisselen.
1 probleempe, als ik het uiterlijk wil laten aansturen door een ander css bestand, dan moet ik alle links in de html/php pagina's wijzigen naar dat bestand.

ik dacht eraan om de al die links standaard naar http://www.svencoppers.be/scins/ te sturen.
is het dan mogelijk daar een bestand default.css te maken?
zodat dat bestand gebruikt wordt. zoja, volgend probleem:
dan zal ik telkens de namen van de css bestanden te wijzigen,
dat wordt onoverzichtelijk want dan weet je niet meer welke wat is ??
iemand ene oplossing???
lord floris9 Geplaatst op 22-03-2007 om 15:37
Avatar van lord floris9

Regular		 cool!.... ik ben een grote fan van websitemaken.be
want zeg nou zelf? het is echt een handige website
Redzero90 Geplaatst op 12-03-2007 om 20:25
 

Regular		 is al opgelost
joevan74 Geplaatst op 04-11-2006 om 10:44
Avatar van joevan74

Regular		 internet blijft het beste
Mikomi Geplaatst op 16-03-2006 om 17:43
Avatar van Mikomi

Regular		 goede tutorial, alleen heb ik 1 probleem.
alles blijkt goed te werken maar met firefox werkt de font-size blijkbaar niet? als ik dezelfde website open met internet explorer past hij deze wel aan. Heeft iemand enige oplossing voor mijn probleem ? bedankt
MaHo Geplaatst op 13-03-2006 om 15:59
Avatar van MaHo

Regular		 Dit werkt in IE prima maar bij in Firefox zie ik niets veranderen...misschien een plugin?
Niek57K Geplaatst op 30-11-2005 om 19:50
 

Regular		 .allemaal leuk en aardig. je schrijft (Koppel je dit bestand aan bijvoorbeeld 15 html-documenten, dan worden de voordelen al snel duidelijk.) maar hoe koppel je zoiets.
hoefd niet meer heb het al begrepen denk ik door het uit te proberen van voorbeeld van mazzelaar.
sierra Geplaatst op 16-10-2005 om 09:39
 

Regular		 hoe kan het dat tabellen en lijsten niet meekleuren?
daar moet ik apart de kleur wijzigen
mazzelaar Geplaatst op 09-08-2005 om 11:13
 

Regular		 je typt dit in een kladblok bestand. en slaat het dan op als opmaak.css

p {
font-size: 11 pt;
font-family: Arial, Swiss, Helvetica;
color: Red;}

dan neem je weer een leeg kladblok en zet je dit er in. en slaat hem dan op als HTMLbestand.html bijv.

<html>

<head>

<title>Welkom op mijn website!</title>

<link rel="stylesheet" type="text/css" href="opmaak.css">

</head>


<body>

<p> hier komt de tekst dat beinvloed word door opmaak.css </p>

</body>

</html>

als je HTMLbestand.html nu in je browser opend krijg je als het goed is een rode tekst te zien(ik heb voor de handigheid black met red vervangen)
Michielvsb Geplaatst op 25-07-2005 om 12:30
 

Regular		 Gewoon in je extern CSS bestand.
thijsty Geplaatst op 06-07-2005 om 18:19
Avatar van thijsty

Regular		 ik heb het eerste gedeelte gedaan maar waar moet je:
p {
font-size: 11 pt;
font-family: Arial, Swiss, Helvetica;
color: black;}

neerzetten¿¿¿¿¿¿¿¿¿¿¿¿¿¿
ingridtjuh Geplaatst op 06-07-2005 om 11:57
 

Regular		 hoe koppel je de stylesheet aan een html bestand??
rogier.slag Geplaatst op 30-05-2005 om 21:31
Avatar van rogier.slag

Moderator		 Zet er ook een body in. Een volledige HTML pagina ziet er namelijk niet zo uit. Bekijk onze HTML cursus eens
basketdude Geplaatst op 30-05-2005 om 20:10
 

Regular		 supereendje, ben je zeker dat je het bestand opgeslagen hebt als opmaak.css en niet als opmaak.css.txt,
als het tweede het geval is kan je (extra-mapopietes-weergave)
en dan vink (je extensies voor bekende bestandstypen verbergen) uit
en sla je opnieuw op als opmaak.css

(misschien is dit de oplossing mss ook niet)
Supereendje Geplaatst op 23-04-2005 om 22:33
Avatar van Supereendje

Regular		 Ik heb deze code in het kladblok gezet en het opgeslagen als opmaak.css:
p {
font-size: 11 pt;
font-family: Arial, Swiss, Helvetica;
color: black;}

En toen een ander bestand met deze code opgeslagen als test.html:
<head>
<title>Welkom op mijn website!</title>
<link rel="stylesheet" type="text/css" href="opmaak.css">
</head>

Maar hij doet t niet! Wat doe ik fout? =S
Willem Geplaatst op 10-02-2005 om 20:37
 

Regular		 Heb antwoord waarschijnlijk gevonden.
Ik kan nl mijn bestand stylesheets.css niet openen in kladblok.
In mapopties gezocht naar extencies OID op de tabblad bestandstypen.
Moet ik dan een nieuwe extentie OID invoegen, met daarin als actie "kladblok openen in CSS"?
Gr, Willem
Mirax Geplaatst op 04-02-2005 om 20:48
 

Moderator		 Wat heb je precies opgeslagen in hmtl?

De css moet je dus opslaan als .css.
Willem Geplaatst op 04-02-2005 om 09:52
 

Regular		 Hallo Mirax, heb het opgeslagen in html.document, alle bestanden.
De href <link heb ik tussen de head tags gezet en dat is voldoende, als ik t goed begrepen heb.
Gr,
Mirax Geplaatst op 03-02-2005 om 21:26
 

Moderator		 Dat mag je zelf weten, hoe je het opslaat, als je het in de href van <link> maar goed zet!
Willem Geplaatst op 03-02-2005 om 20:27
 

Regular		 Hallo,
All types?? Bij mij staat tekstdocumenten {*.txt}
Als bestandsnaam heb ik oefensite.html. Moet ik dat opslaan als oefensite.css?
Gr, Willem
gapelvaar Geplaatst op 17-12-2004 om 21:31
 

Regular		 bij mij werkt dat niet! Help me A.UB.!
keasu Geplaatst op 29-11-2004 om 00:16
 

Regular		 save as
style.css (of andere naam .css )
en dan op "save" klikken :) een kind kan de was doen
Ventura Geplaatst op 20-10-2004 om 20:01
Avatar van Ventura

Regular		 Kun je een JavaScript bestand en een CSS bestand tesamen aan een html bestand linken? Bij mij lukt dat niet.
Ewoudonline Geplaatst op 27-09-2004 om 20:28
Avatar van Ewoudonline

Regular		 Nog iets over die code om te linken.
Je kan er nog bijzetten:
media="all"
Ik weet nog niet waarvoor het exact dient,
maar je hebt verschillende dingen: aural, braille, handheld, print, projection, screen, tty en tv.

Greetzz,
!€-w0uD! Online
Mirax Geplaatst op 10-06-2004 om 19:27
 

Moderator		 Je kan dat inkladblok gewoon intypen. Bestand > Opslaan als... Kies dan all types (*.*), en dan typ je bijvoorbeeld style.css, als het goed is werkt het dan.

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!

Check je domein...


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be