Linked stylesheets

Info 
Door: Admin Moeilijkheidsgraad: 1/3
Views:63.189Reacties: 35(Bekijken)
  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 »

35 reacties
babsonterr Geplaatst op 08-11-2010 om 12:20
 

Regular
<link rel="stylesheet" type="text/css" href="opmaak.css" />
is mijn lijntje code in de head, misschien doet de rangschikking er toe?
opmaak.css is een ander bestandje in dezelfde map met enkel de volgende code.

p {
font-size: 20pt;
font-family: Arial, swiss, Helvetica;
color: black; }
menno313 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
 

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!!!!!!!!!

Pagina 1 2 3 4 5 6 7 

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


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder