Slik endrer du nettstedets tekstfarge med CSS

Å ha kontroll over nettstedet ditt er et viktig element i webdesign. I en ideell verden bør du kunne endre alle aspekter av nettstedets design uten å måtte gå på kompromiss med det ferdige produktet.

Selvfølgelig kan nettsteder ofte være sta. Det er ikke alltid mulig å oppnå resultatene du ønsker uten å fordype deg i CSS -verdenen. La oss se på hvordan du kan endre tekstfarge med CSS på nettstedet ditt for å gi deg en ide om hvordan du kan oppnå mer med kraften i CSS.

Endre tekstfarge på nettstedet med CSS

CSS er nøye designet for å sikre at det gir designere makt over nettstedsprosjektene sine. Det er utrolig enkelt å endre tekstfarge med CSS på nettstedet ditt; du trenger bare en regel for å gjøre det.

farge: blå;

Selvfølgelig fungerer CSS -regler imidlertid ikke veldig bra alene. Du må koble dem til elementklasser, ID -er og identifikatorer for å sikre at nettlesere vet hva stilen gjelder. Du kan se eksempler på at denne regelen ble brukt med en H1 -overskrift, P -avsnitt og en knapp nedenfor.

h1 {farge: blå; }
p {farge: rød; }
knapp {farge: rød; }

Dette bør gi deg en grunnleggende forståelse av hva som må gjøres for å endre fargen på nettstedets tekst med CSS. Det tar vanligvis mer enn dette, spesielt hvis du vil gi forskjellige farger til den forskjellige teksten på nettstedet ditt.

I slekt: CSS -boksmodellen forklart med eksempler

Finne riktig CSS -klasse

Før du kan endre den spesifikke teksten på nettstedet ditt, må du vite hvordan du identifiserer den i CSS. De fleste nettlesere har et sett med verktøy som er utviklet for å hjelpe utviklere, og det er sannsynlig at den du bruker har noe som kalles en Inspektør. Dette kan brukes til å titte inn i HTML -koden og annen kode som bygger et nettsted.

Åpner inspektøren

Å åpne inspektøren er forskjellig i hver av nettleserne på markedet. Vi har dekket en håndfull av de mest populære nettleserne nedenfor for å gi deg et forsprang:

• Google Chrome: CTRL + Shift + C eller Meny Prikker > Flere verktøy > Utviklerverktøy
• Microsoft Edge: CTRL + Shift + C eller Meny Prikker > Flere verktøy > Utviklerverktøy
• Mozilla Firefox: CTRL + Shift + C eller Meny Prikker > Flere verktøy > Verktøy for webutviklere
• Apple Safari: Preferanser > Avansert > Vis Develop -menyen i menylinjen og så Utvikle > Vis webinspektør

Finne riktig CSS -tekststil

Det kan være forvirrende når du først åpner inspektøren i nettleseren din. Det vil være mange ting du kanskje ikke forstår, men du trenger ikke å bekymre deg for dette foreløpig. Du trenger bare å finne stilnavnet på teksten du prøver å endre.

Som et eksempel skal vi finne og endre CSS -tekststilen som brukes for hovedoverskriften i delen MakeUseOf Programming. Du kan starte denne prosessen ved å inspisere elementet som må endres.

• Google Chrome: Høyreklikk > Undersøke
• Microsoft Edge: Høyreklikk > Undersøke
• Mozilla Firefox: Høyreklikk > Undersøke eller Sp
• Apple Safari: Høyreklikk > Inspisér element

Hvis du gjør dette, vil nettstedskonsollen/inspektørvinduet fokusere på elementet du prøver å endre. I Chrome, Safari, Edge og Firefox bør du se en seksjon merket Stiler som inneholder all CSS -koden for elementet du inspiserer.

Du bør også se HTML -elementet uthevet i en rute ved siden av dette. Dette kan brukes til å finne ut klassen eller ID -en til elementet du endrer. I vårt tilfelle ser vi på hovedoverskriften på H1 på siden vår, og denne tilhører en klasse som heter .listing-title.

På dette tidspunktet kan du teste CSS -tekststilen du vil legge til på nettstedet ditt. Den øverste delen av CSS -stildelen i nettstedskonsollen kan brukes til å anvende regler på det spesifikke elementet du har målrettet deg mot. Selvfølgelig er dette imidlertid ikke permanent.

I slekt: Hvordan bygge en responsiv navigasjonslinje ved hjelp av HTML og CSS

Legger til din nye CSS

Det er nå på tide å legge til din nye CSS på nettstedet ditt. Måten du gjør dette på, avhenger av hvilken type nettstedplattform du bruker, med alternativer som Shopify som krever utvidelser for å la deg legge til CSS uten å endre filene dine.

Uansett hvordan du legger til CSS -koden, må du kontrollere at den er riktig. Å bruke CSS-regler i tekststil er ikke så vanskelig, men det kan være frustrerende når du ikke kan finne ut hvordan du endrer tekstfargen din. For vårt eksempel er dette koden vi må legge til på nettstedet vårt.

.listing-title {
farge: blå;
}

Hva om tekstfargen din ikke endres?

Når du har redigert CSS -filen, bør du kunne se endringen du har gjort så snart du oppdaterer siden din. Det er imidlertid ikke alltid så enkelt som dette. CSS kan være mer komplekst enn folk forventer, og du må kanskje gjøre mer på dette stadiet.

• Tøm cachen: Nettsteder bruker ofte hurtigbufring for å redusere lastetiden. Cachen din kan forhindre deg i å se endringer på nettstedet, og du må tømme den når du gjør endringer i CSS.
• Høyere i stilarket: CSS laster inn stiler i rekkefølge, og dette betyr at de første reglene i stilarket er de som vises på nettstedet ditt. Flytte stiler kan være en god måte å prioritere dem foran andre stiler.
• Bruke viktige tagger: Dette neste alternativet regnes ikke som beste praksis og er best forbeholdt når du ikke har noe annet valg. Du kan legge til en viktig tag i CSS -tekststilene dine for å gi dem prioritet over alle andre stiler, og dette kan sees nedenfor:

.listing-title {
farge: blå! viktig;
}

Annen tekststil CSS moro

CSS er et utrolig kraftig verktøy, som gir deg tilgang til en rekke forskjellige alternativer når du jobber med tekst og andre elementer på nettstedet ditt. Dette stopper ikke bare med CSS -tekstfarge, og du kan gjøre mye med teksten din når du velger å lære litt CSS. Du finner noen mer grunnleggende CSS -tekststilregler nedenfor:

• Skriftstørrelse: Dette endrer størrelsen på teksten på nettstedet ditt, f.eks. Skriftstørrelse: 12px;
• Font-vekt: Vekt refererer til tykkelsen på en skrift, med fet skrift høy vekt og tynn tekst lav, f.eks. Skriftvekt: 400;
• Juster tekst: Dette endrer justeringen av teksten du jobber med, f.eks. Tekstjustering: høyre;
• Tekst-skygge: Dette lar deg legge til en skygge i teksten din med en rekke attributter, f.eks. Tekstskygge: 2px 2px 3px svart;
• Tekst-transform: Dette endrer tilfellet for teksten du jobber med, f.eks. Tekst-transform: store bokstaver;
• Tekst-dekorasjon: Dette lar deg legge til understreker, bindestreker og andre dekorasjoner i tekst, f.eks. Tekstdekorasjon: understreking;

Dette skraper bare på overflaten av det du kan gjøre med tekststiler i CSS. Det er mange guider rundt på nettet som kan hjelpe deg med denne prosessen, og det er alltid en god idé å gjøre noen undersøkelser når du kommer i gang.

I slekt: Slik endrer du nettstedets tekst med egenskapen CSS font-family

Lær mer enn CSS -tekstfarge

Øvelse, eksperimentering og prøving og feiling er de beste måtene å lære et verktøy som CSS. Stilark kan virke skremmende når du begynner å jobbe med dem, men de er utrolig enkle å jobbe med når du har brukt litt tid med dem.

10 enkle CSS -kodeeksempler du kan lære på 10 minutter

Trenger du hjelp med CSS? Prøv disse grunnleggende CSS -kodeeksemplene til å begynne med, og bruk dem deretter på dine egne websider.

Les neste

Om forfatteren