Inline stylesheets

Info 
Door: Admin Moeilijkheidsgraad: 1/3
Views:33.264Reacties: 9(Bekijken)
  Log in om zelf te reageren
 Waardering:1/10 (1 stem)

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




De laatste manier om een style in je html document op te nemen is de inline-style. Hiermee kun je een bepaald deel van je pagina een style toekennen, bijvoorbeeld alleen een alinea, een link of een tabel. We moeten hiervoor CSS en HTML gaan combineren, en dat gaat vrij simpel. Willen we bijvoorbeeld een alinea 15 pixels laten inspringen vanaf de rand, en moet de kleur rood zijn, dan doen we dat zo:

#Code
1
<p style="margin-left: 15px; color: red">Dit is de alinea waar het allemaal over gaat</p>

Je ziet het, het is helemaal niet moeilijk. tussen style=" en " komt de style te staan. De verschillende dingen die je opgeeft scheidt je van elkaar door middel van de punt-komma;.

Wil je nu bijvoorbeeld dat een bepaalde style op 4 alinea's van toepassing is, dan zou je dus bij alle vier de <p> tags de style moeten opgeven. Dat is behoorlijk veel werk, maar daar is gelukkig iets op bedacht: het element <div>. Hiermee kun je een bepaald gedeelte van je site markeren. De vier aliena's uit ons voorbeeld omringen we dan met de openingstag <div> en de sluitingstag </div>. Daartussen staan de vier alinea's.

Het enige wat je nu nog moet doen is in de openingstag de style opgeven, ook weer erg makkelijk:

#Code
1
2
3
4
5
6
<div style="margin-left: 15px; color: red">
<p>Alinea 1</p>
<p>Alinea 2</p>
<p>Alinea 3</p>
<p>Alinea 4</p>
</div>

Je ziet het, stylesheets kunnen je een hoop werk schelen. Maar er zijn nog meer voordelen, dat vertellen we je in deel 5.

«Embedded stylesheets Je eigen styles maken »

9 reacties
own4be Geplaatst op 29-08-2009 om 13:17
 

Regular
Willem omdat je p {font-size: 11 pt; font-family: Arial, Swiss, Helvetia, Times New Roman; color: black;} hebt; zal alles van je allineas waar <p></p> staat ook zwart worden. verwijder color: black; en je tekst wordt rood.
willie1992 Geplaatst op 16-09-2007 om 22:10
 

Regular
wat is het verschil tussen <div> en de hele style moet opgeven ?
gozer7777777 Geplaatst op 11-09-2007 om 19:54
 

Regular
probeer dit eens:

<html>
<head>
<title>Welkom op mijn website!</title>
<style type="text/css">
<!--
p
{
font-size: 11 pt;
font-family: Arial, Swiss, Helvetia, Times New Roman;
color: red;
}
-->
</style>
</head>
<body>
<div>
<p>Dit is mijn website</p>
<p>alinea 1</p>
<p>De eerste</p>
<p>De tweede</p>
</div>
</body>
</html>
FritzZ Geplaatst op 10-05-2007 om 20:27
 

Regular
...

Chalk Geplaatst op 02-03-2006 om 11:21
 

Regular
ja je doet iets fout, het is heel simpel
zie je
<!--p {font-size: 11 pt; font-family: Arial, Swiss, Helvetia, Times New Roman; color: black;}-->
staan..

daar staat color: black;} ==> color: red;}
als je rood wilt natuurlijk

Pagina 1 2 

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