CSS gebruiken om de letterkleur te wijzigen

Wilt u uw website opfleuren met een aantal verschillende lettertypekleuren? U kunt dit doen met behulp van CSS. CSS staat voor Cascading Style Sheets en is de standaardtaal die wordt gebruikt voor het maken en beheren van de stijl van een website.

Er zijn drie methoden om CSS toe te passen op een HTML-document. Dit zijn inline CSS, interne/embedded CSS en externe CSS.

Methode één: inline CSS

Als u de letterkleur in CSS wilt wijzigen, moet u een CSS-regel maken om de waarde van de kleureigenschap.

De inline-methode gebruikt de stijleigenschap die u op bijna elk element kunt toepassen. Hier is een voorbeeld waarbij de letterkleur van een HTML-paragraaf op rood wordt gezet:

Paragraaf van tekst

U kunt hetzelfde effect bereiken met interne/embedded CSS of externe CSS.

Methode twee: interne/ingesloten CSS

U kunt deze methode gebruiken als u CSS-regels wilt maken die van invloed zijn op meer dan één exemplaar van een HTML-element, maar alleen op één pagina. De CSS-regels worden vervolgens in de kop van de HTML-pagina geschreven met behulp van een stijlelement:

Methode drie: externe CSS

De derde manier om hetzelfde effect te bereiken, is door een externe CSS-stylesheet te gebruiken. Maak met een teksteditor een bestand met de extensie ".css". Het is gebruikelijk om dit bestand zo te noemen: stylesheet.css maar je kunt het alles noemen zolang je de extensie ".css" behoudt.

Om uw hoofdtekst bijvoorbeeld groen te kleuren met behulp van een externe stylesheet, plakt u de CSS-regel als volgt in:

p { kleur: blauw }

In uw HTML-document moet u een link naar uw stylesheet opnemen in het HTML-head-element:

Paragraaf van tekst

Letterkleur wijzigen in HTML, zonder toegepaste CSS

U kunt het beste CSS gebruiken, maar u kunt de kleur van het lettertype als volgt wijzigen met alleen HTML:

Paragraaf van tekst

Het font-element, samen met het kleurattribuut, is verouderd. Dit komt omdat ze presentatieve in plaats van structurele elementen zijn. Moderne HTML mag alleen uit structurele elementen bestaan.

Het wijzigen van de letterkleur in CSS is relatief eenvoudig

We hebben u drie methoden laten zien voor het wijzigen van de letterkleur in CSS. We hebben u ook laten zien hoe u dit op de oude manier doet met behulp van de HTML-lettertypetag. Probeer ze uit en kijk welke het beste bij jou past!

Als u het wijzigen van de letterkleur met CSS en HTML eenmaal onder de knie heeft, wilt u misschien het wijzigen van de lettergrootte in HTML onder de knie krijgen.

Hoe de HTML-lettergrootte in CSS te wijzigen

Lees volgende

Over de auteur