Homepage » Tutorials » HTML & CSS » Je eigen styles maken

Je eigen styles maken

Info
Door:	Rick	Moeilijkheidsgraad:
Geplaatst op:	09-02-2004	Reacties:	21(Bekijken)
Views:	33166 (gem. 13.7904 per week)	Log in om zelf te reageren
		Waardering:	9.3/10 (4 stemmen)

Het kan allemaal nog beter: je eigen styles maken. Ook dat is met CSS mogelijk. Dus niet alleen de bestaande styles p, table, td enzovoorts, maar bijvoorbeeld mijnstijl. Wil je bijvoorbeeld een stuk tekst in het rood, de linkermarge op 15 pixels en onderstreept, dan kan dat zonder telkens de style op te geven. Je maakt gewoon in je linked of je embedded stylesheet de style aan, en wel zo:

#	Code
`1 2 3 4 5`	`.mijnstijl{ color: red; margin-left: 15px; text-decoration: none }`

Zo, de style is nu bekend in de stylesheet. Nu moeten we hem alleen nog koppelen aan een bepaalde alinea, of een <div>, of wat jij wilt. Willen we de vier alinea's uit de vorige les in mijnstijl hebben, dan doe je dat zo:

#	Code
`1 2 3 4 5 6`	`<div class="mijnstijl"> <p>Alinea 1</p> <p>Alinea 2</p> <p>Alinea 3</p> <p>Alinea 4</p> </div>`

We doen het dus met het attribuut class. Let erop dat we in de stylesheet een punt voor de style neerzetten, maar bij de class doe je dat niet!

«Inline stylesheets Meer over styles »

21 reacties

Robin18 Geplaatst op 22-09-2008 om 16:38

Regular ghehe mss domme vraag maar wat doet DIV eigenlijk =D

Peck Geplaatst op 18-06-2007 om 18:01

Moderator De decoratie van de text, underline=een lijntje onder de text, overline=een lijntje boven de text... Lijkt me vrij logisch, niet?

maarte Geplaatst op 18-06-2007 om 15:47

Regular wat is text-decoration

ThePlague Geplaatst op 24-04-2007 om 22:01

Regular eige schuld dikke buld? :p
mrjah echt goeje site mar CSS vinnek nu ok wel heel gemakkelijk

sjoenk Geplaatst op 04-02-2007 om 21:51

Regular ok, sorry, ben er al uit... : )
btw: complimenten aan de makers van deze site, fantastisch!
m'n vriendin heeft me een paar dagen geleden voor de computer gesleurd: "en nou ga je leren hoe je een website maakt zodat je er een voor mij kunt maken" ('onder de sloef' noemen ze dat zeker?) ze is die avond alleen naar bed gegaan ;)

sjoenk Geplaatst op 04-02-2007 om 19:39

Regular hoe maak je zo'n extern bestand dan? en hoe link je dat vanuit het html-document waarin je je eigen style wilt gebruiken?

joevan74 Geplaatst op 04-11-2006 om 10:51

Regular jup je kan het in een extern bestand zette

Onbekend lid Geplaatst op 22-05-2006 om 12:57

Spammer werkt echt mega !

Onbekend lid Geplaatst op 22-04-2006 om 15:41

Spammer Kan je het niet in een extern bestand zette want ik vind het een beetje lastig om dit in alle bestanden te zetten.. en die vorige reactie snap ik geen bal van :s

Rogier Geplaatst op 29-12-2005 om 15:18

Regular Ok heel erg bedankt! :)

Blizt Geplaatst op 10-12-2005 om 14:12

Webmaster Je moet het ofwel in 'n extern bestand zetten, ofwel tussen <style type="text/css"></style> in je <head />.

Rogier Geplaatst op 10-12-2005 om 12:54

Regular Heey!

Ik heb nu dit:

<html>

<head>

.mijnstijl{
color: red;
margin-left: 15px;
text-decoration= none;
}

</head>

<body>

<div class="mijnstijl">
<p>Alinea 1</p>
<p>Alinea 2</p>
<p>Alinea 3</p>
<p>Alinea 4</p>
</div>

</body>

Maar hij doet het niet. Moet ik het 'mijnstijl' gedeelte in het HTML bestand zetten, of moet ik hem linken? Want nu reageert hij niet op 'mijnstijl'.

Willem Geplaatst op 24-05-2005 om 09:50

Regular Hallo,
Ben weer opnieuw begonnen met les 1 html, eerste les is af.
Ik kom er wel bedankt nog voor al de antwoorden.

Gr.

Mirax Geplaatst op 04-02-2005 om 20:49

Moderator Gebruik dan je wel class="mijnstijl" ?

Willem Geplaatst op 04-02-2005 om 10:39

Regular Hallo,
Ik heb dit op mijn site staan.
Klopt er iets niet?
.mijnstijl{color: red;margin-left: 15px; text-decoration: none}
De text is ook niet rood, of haal ik die stijlen door elkaar.
Gr.

rogier.slag Geplaatst op 04-01-2005 om 14:07

Moderator geef hem eens de naam mijnstijl ipv naamloos

erik Geplaatst op 04-01-2005 om 09:48

Regular ik heb dit:
.mijnstijl{
color: red;
margin-left: 15px;
text-decoration: none}

en in het html bestand zelf heb ik dit:

</head>
<body>
<div style="margin-left: 15px;color: red">
<p>fojoioeijfoijosajio
<p>als het goed is dit hetzelfde als hierboven
<p>en deze ook
</div>
<div class="naamloos.">
<p>hallo
</div>
<table>
<tr>
<td>hallo
<td>hallo
</tr>
<tr>
<td>erik
<td>erik
</tr>
</table>
</body>
</html>

en de 2e div werkt niet kan iemand me helpen?

Mirax Geplaatst op 18-11-2004 om 20:23

Moderator Lees eerst de stukjes over linked en/of embedded stylesheets eens door.

Diomedes Geplaatst op 18-11-2004 om 12:32

Regular uuhm een vraag
mijnstijl{
color: red;
margin-left: 15px;
text-decoration: none} moet er nog wat boven te komen staan bijv eerst <html> en dergelijeke of kun je gewoon mijnstijl{ intype in begin van een lege pagina??

rogier.slag Geplaatst op 13-07-2004 om 11:28

Moderator

de code voor een hyperlink plaatje is

#	Code
`1`	`<a href="pagina.htm"><img alt="" src="plaatje.gif" border="0" width="100" height="100"></a>`

Als je hem wilt positioneren, moet je eerst deze cursus kunnen en kennen. Daarna kan je de tutorial van Zorzie gaan doen over positioneren in CSS

nielsieb Geplaatst op 12-07-2004 om 12:00

Regular ik snap t nog steeds niet:$ de code voor een hyperlink plaatje is : <a href="pagina.htm"><img alt="" src="plaatje.gif" border="0" width="100" height="100"</a> dit is me gelukt maar ik snap nou niet hoe ik deze kan positioneren moet er dan iets voor of erachter of waar???

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