U kunt lettertypekleuren, -grootten en andere parameters opgeven in een externe CSS-stylesheet. Als u de kleur van slechts één woord of zin wilt wijzigen, is de eenvoudigste en eenvoudigste manier om de tag inline te gebruiken. Inline CSS is precies zoals het klinkt: het wordt toegevoegd in de HTML van de pagina, in plaats van in een externe stylesheet.
Vermijd het gebruik van de tag, die is verouderd.
Ga als volgt te werk om de kleur van een woord te wijzigen met behulp van de tag:
Gebruik uw favoriete tekst- of HTML-editor in de codeweergavemodus en plaats uw cursor voor de eerste letter van het woord of de groep woorden die u wilt kleuren.
Laat de tekst waarvan we de kleur willen veranderen omwikkelen met een tag, inclusief een class-attribuut. De hele alinea kan er als volgt uitzien: Dit is tekst waarop in een zin de nadruk ligt.
-
Geef die specifieke tekst een "haak" die we in CSS kunnen gebruiken. Onze volgende stap is om naar ons externe CSS-bestand te springen om een nieuwe regel toe te voegen.
Laten we in ons CSS-bestand het volgende toevoegen:
.focus-tekst {
kleur: #F00;
}
Met deze regel zou dat inline-element, de, in de kleur rood worden weergegeven. Als we een eerdere stijl hadden die de tekst van ons document op zwart zette, zou deze inline-stijl ervoor zorgen dat de spantekst wordt gefocust en opvalt door de andere kleur. We zouden ook andere stijlen aan deze regel kunnen toevoegen, misschien door de tekst cursief of vet te maken om het nog meer te benadrukken?
-
Sla je pagina op.
Test de pagina in uw favoriete webbrowser om te zien of de wijzigingen van kracht zijn.
Merk op dat naast de, sommige webprofessionals ervoor kiezen om andere elementen te gebruiken, zoals de of tag-paren. Deze tags waren vroeger specifiek voor vet en cursief, maar werden afgekeurd en vervangen door en. De tags werken nog steeds in moderne browsers, maar zoveel webontwikkelaars gebruiken ze als inline stylinghaken. Dit is niet de slechtste aanpak, maar als je verouderde elementen wilt vermijden, raden we je aan de tag voor dit soort stylingbehoeften te behouden.
Tips en dingen om op te letten
Hoewel deze aanpak prima werkt voor kleine stijlbehoeften, zoals wanneer u slechts één klein stukje tekst in een document hoeft te wijzigen, kan het snel uit de hand lopen. Als u merkt dat uw pagina bezaaid is met inline-elementen, die allemaal unieke klassen hebben die u in uw CSS-bestand gebruikt, kunt u het verkeerd doen, onthoud dat hoe meer van deze tags op uw pagina staan, hoe moeilijker het zal zijn om die pagina in stand te houden vooruit. Bovendien heeft goede webtypografie zelden zoveel kleurvarianten, enz. over de hele pagina.