Hoe u de tekstkleur van uw website kunt wijzigen met CSS

Controle hebben over uw website is een belangrijk onderdeel van webdesign. In een ideale wereld zou u elk aspect van het ontwerp van uw site moeten kunnen veranderen zonder concessies te hoeven doen aan het eindproduct.

Natuurlijk kunnen websites echter vaak koppig zijn. Het is niet altijd mogelijk om de gewenste resultaten te bereiken zonder in de wereld van CSS te duiken. Laten we eens kijken hoe u de tekstkleur kunt wijzigen met CSS op uw website om u een idee te geven van hoe u meer kunt bereiken met de kracht van CSS.

De tekstkleur van de website wijzigen met CSS

CSS is zorgvuldig ontworpen om ervoor te zorgen dat het ontwerpers macht geeft over hun websiteprojecten. Het is ongelooflijk eenvoudig om tekstkleur te wijzigen met CSS op uw website; je hebt maar één regel nodig om het te doen.

kleur blauw;

Natuurlijk werken CSS-regels op zichzelf niet zo goed. U moet ze koppelen aan elementklassen, ID's en ID's om ervoor te zorgen dat webbrowsers weten waarop de stijl van toepassing is. U kunt voorbeelden zien van het gebruik van deze regel met een H1-kop, P-paragraaf en een knop hieronder.

h1 { kleur: blauw; }
p { kleur: rood; }
knop { kleur: rood; }

Dit zou u een basiskennis moeten geven van wat er moet gebeuren om de kleur van de tekst van uw website met CSS te veranderen. Meestal is er meer nodig, zeker als je verschillende kleuren wilt geven aan de verschillende tekst op je website.

Verwant: Het CSS Box-model uitgelegd met voorbeelden

De juiste CSS-klasse vinden

Voordat u de specifieke tekst op uw website kunt wijzigen, moet u weten hoe u deze kunt identificeren in uw CSS. De meeste webbrowsers hebben een set hulpprogramma's die zijn ontworpen om ontwikkelaars te helpen, en het is waarschijnlijk dat degene die u gebruikt iets heeft dat een Inspecteur. Dit kan worden gebruikt om in de HTML en andere code te kijken die een website bouwt.

De inspecteur openen

Het openen van de inspecteur is anders in elk van de browsers op de markt. We hebben hieronder een handvol van de meest populaire browsers behandeld om u een voorsprong te geven:

• Google Chrome: CTRL + Shift + C of Menupunten > Meer hulpmiddelen > Ontwikkelaarstools
• Microsoft Edge: CTRL + Shift + C of Menupunten > Meer hulpmiddelen > Ontwikkelaarstools
• Mozilla Firefox: CTRL + Shift + C of Menupunten > Meer hulpmiddelen > Hulpprogramma's voor webontwikkelaars
• Apple Safari: Voorkeuren > Geavanceerd > Toon Ontwikkel-menu in menubalk en dan Ontwikkelen > Webinspector tonen

De juiste CSS-tekststijl vinden

Het kan verwarrend zijn wanneer u de Inspector voor het eerst in uw browser opent. Er zullen veel dingen zijn die u misschien niet begrijpt, maar u hoeft zich hier voorlopig geen zorgen over te maken. U hoeft alleen de stijlnaam te vinden van de tekst die u probeert te wijzigen.

Als voorbeeld gaan we de CSS-tekststijl zoeken en wijzigen die wordt gebruikt voor de hoofdkop in het gedeelte MakeUseOf Programming. U kunt dit proces starten door het element te inspecteren dat moet worden gewijzigd.

• Google Chrome: Klik met de rechtermuisknop > Inspecteren
• Microsoft Edge: Klik met de rechtermuisknop > Inspecteren
• Mozilla Firefox: Klik met de rechtermuisknop > Inspecteren of Q
• Apple Safari: Klik met de rechtermuisknop > Inspecteer element

Als u dit doet, wordt uw websiteconsole/inspectorvenster gefocust op het element dat u probeert te wijzigen. In Chrome, Safari, Edge en Firefox zou u een sectie moeten zien met het label Stijlen die alle CSS-code bevat voor het element dat u inspecteert.

Je zou ook je HTML-element moeten zien gemarkeerd in een paneel ernaast. Dit kan worden gebruikt om de klasse of ID te achterhalen van het element dat u wijzigt. In ons geval kijken we naar de belangrijkste H1-kop op onze pagina, en deze behoort tot een klasse met de naam .listing-title.

Op dit punt kunt u de CSS-tekststijl testen die u aan uw website gaat toevoegen. Het bovenste gedeelte van het CSS-stijlgedeelte in de websiteconsole kan worden gebruikt om regels toe te passen op het specifieke element dat u heeft getarget. Dit is natuurlijk niet permanent.

Verwant: Een responsieve navigatiebalk bouwen met HTML en CSS

Uw nieuwe CSS toevoegen

Het is nu tijd om uw nieuwe CSS aan uw website toe te voegen. De manier waarop u dit doet, hangt af van het type websiteplatform dat u gebruikt, met opties zoals Shopify die extensies vereisen zodat u CSS kunt toevoegen zonder uw bestanden te wijzigen.

Hoe u uw CSS-code ook toevoegt, u moet ervoor zorgen dat deze correct is. Het gebruik van CSS-regels in tekststijl is niet zo moeilijk, maar het kan frustrerend zijn als u niet weet hoe u uw tekstkleur kunt wijzigen. Voor ons voorbeeld is dit de code die we aan onze website moeten toevoegen.

.lijst-titel {
kleur blauw;
}

Wat als uw tekstkleur niet verandert?

Nadat u uw CSS-bestand heeft bewerkt, zou u de aangebrachte wijziging moeten kunnen zien zodra u uw pagina vernieuwt. Het is echter niet altijd zo eenvoudig als dit. CSS kan complexer zijn dan mensen verwachten, en het kan zijn dat u in dit stadium meer moet doen.

• De cache leegmaken: Websites gebruiken vaak caching om laadtijden te verkorten. Uw cache kan ervoor zorgen dat u geen websitewijzigingen ziet en u moet deze leegmaken wanneer u wijzigingen aanbrengt in CSS.
• Hoger in de stylesheet: CSS laadt stijlen opeenvolgend, en dit betekent dat de eerste regels in uw stylesheet degene zijn die op uw website worden weergegeven. Het verplaatsen van stijlen kan een goede manier zijn om ze voorrang te geven op andere stijlen.
• Belangrijke tags gebruiken: Deze volgende optie wordt niet als best practice beschouwd en kan het beste worden gereserveerd voor als je geen andere keuze hebt. U kunt een belangrijke tag aan uw CSS-tekststijlen toevoegen om ze prioriteit te geven boven alle andere stijlen, en dit is hieronder te zien:

.lijst-titel {
kleur: blauw !belangrijk;
}

Andere tekststijl CSS leuk

CSS is een ongelooflijk krachtige tool, die je toegang geeft tot een groot aantal verschillende opties wanneer je met tekst en andere elementen op je website werkt. Dit stopt niet alleen bij de CSS-tekstkleur, en u kunt veel met uw tekst doen wanneer u ervoor kiest om een ​​beetje CSS te leren. Hieronder vindt u enkele basisregels voor CSS-tekststijlen:

• Lettertypegrootte: Dit verandert de tekstgrootte op uw website, bijvoorbeeld font-size: 12px;
• Lettertype dikte: Gewicht verwijst naar de dikte van een lettertype, waarbij vet een hoog gewicht is en dunne tekst laag, bijvoorbeeld lettertype: 400;
• Tekst uitlijnen: Dit verandert de uitlijning van de tekst waarmee u werkt, bijvoorbeeld text-align: right;
• Schaduw tekst: Hiermee kunt u een schaduw aan uw tekst toevoegen met een reeks kenmerken, bijvoorbeeld tekstschaduw: 2px 2px 3px zwart;
• Tekst-transformatie: Dit verandert de hoofdletters van de tekst waarmee u werkt, bijvoorbeeld text-transform: hoofdletters;
• Tekst-decoratie: Hiermee kunt u onderstrepingen, streepjes en andere versieringen aan tekst toevoegen, bijvoorbeeld tekstdecoratie: onderstrepen;

Dit is slechts het oppervlak van wat u kunt doen met tekststijlen in CSS. Er zijn tal van handleidingen op internet die u kunnen helpen bij dit proces, en het is altijd een goed idee om wat onderzoek te doen als u aan de slag gaat.

Verwant: Hoe u de tekst van uw website kunt wijzigen met de CSS-lettertypefamilie-eigenschap

Leer meer dan CSS-tekstkleur

Oefening, experimenten en vallen en opstaan ​​zijn de beste manieren om een ​​tool als CSS te leren. Stylesheets kunnen ontmoedigend lijken wanneer je er voor het eerst mee gaat werken, maar ze zijn ongelooflijk gemakkelijk om mee te werken als je er eenmaal wat tijd mee hebt doorgebracht.

10 eenvoudige voorbeelden van CSS-codes die u in 10 minuten kunt leren

Hulp nodig bij CSS? Probeer deze standaard CSS-codevoorbeelden om mee te beginnen en pas ze vervolgens toe op uw eigen webpagina's.

Lees volgende

Over de auteur