heading_style

HTML Styles color (kleur)

Je kunt je html codes ook een style geven. Met de style kun je vele dingen veranderen, je kunt kleurr geven, lettergrootte aanpassen en nog veel meer. In deze bericht ga ik jullie laten zien hoe je de kleur kunt veranderen met de HTML style.

Voorbeeld:

Ik ben normaal

Ik ben rood

Ik ben blauw

Ik ga jullie nu uitleggen hoe je deze stylen kunt uitvoeren. De “Ik ben normaal” is alleen gemaakt met de <p> element (informatie over de <p> element kunt u hier vinden: https://nisatutucu.nl/html-paragraphs/).

De tweede paragraaf is rood. Om een style in je HTML code toe te voegen moet je eerst style=”” in je <p> element. Dat ziet er dan zo uit: <p style=””>. In de style=”” gebeurd alles. in de style=”” kun je alles zetten wat je wilt veranderd van de vormgeving als je de juiste code maar weet. We beginnen bij het makkelijkste en dat is de kleur veranderen. Kleur in het engels is color dus dat schrijf je dan ook in de style. Dat ziet er zo uit: <p style=”color”>. Maar dat is nog niet alles want je wilt het ook een bepaalde kleur geven en daarom zetten we de kleur dus rood, blauw, wit ect. na de ‘color’. Dat doe je bijvoorbeeld zo: color:red. In de HTML style zit het er als volgt uit: <p style=”color:red”>. We zijn bijna klaar. Er is nog één ding. Na elke style code gebruiken we de punt komma om het af te sluiten. <p style=”color:red;”> dus dit is de conclusie. Om de tekst nu rood te maken moet je de <p> element openen met het stukje style er in en daarna sluiten. Dus:
<p style=”color:red;”> Ik ben rood </p> =

Ik ben rood

Zo doe je het bij elke kleur dus om blauw te krijgen doe je: <p style=”color:blue”;> Ik ben blauw </p> =

Ik ben blauw

Om groen te krijgen doe je: <p style=”color:green”;> Ik ben groen </p> =

Ik ben groen

Zo kun je het met alle kleuren doen. Je hoeft niet altijd de kleur naar op te noemen je kunt ook de #-kleuren gebruiken. Duss….

Om andere kleur blauw te krijgen doe je: <p style=”color:#0085BA”;> Ik ben blauw </p> =

Ik ben blauw

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *