Sådan ændres dit websteds tekstfarve med CSS

At have kontrol over dit websted er et vigtigt element i webdesign. I en ideel verden burde du være i stand til at ændre alle aspekter af dit websteds design uden at skulle gå på kompromis med det færdige produkt.

Selvfølgelig kan websteder ofte være genstridige. Det er ikke altid muligt at opnå de resultater, du ønsker, uden at fordybe dig i CSS -verdenen. Lad os se på, hvordan du kan ændre tekstfarve med CSS på dit websted for at give dig en idé om, hvordan du kan opnå mere med CSS -kraften.

Ændring af webstedets tekstfarve med CSS

CSS er omhyggeligt designet til at sikre, at det giver designere magt over deres webstedsprojekter. Det er utroligt let at ændre tekstfarve med CSS på dit websted; du skal bare bruge en regel for at gøre det.

farve: blå;

Selvfølgelig fungerer CSS -reglerne dog ikke særlig godt alene. Du skal parre dem med elementklasser, ID'er og identifikatorer for at sikre, at webbrowsere ved, hvad stilen gælder for. Du kan se eksempler på, at denne regel bruges med en H1 -overskrift, P -afsnit og en knap herunder.

h1 {farve: blå; }
p {farve: rød; }
knap {farve: rød; }

Dette skulle give dig en grundlæggende forståelse af, hvad der skal gøres for at ændre farven på dit websteds tekst med CSS. Det kræver normalt mere end dette, især hvis du vil give forskellige farver til den forskellige tekst på dit websted.

Relaterede: CSS -boksmodellen forklaret med eksempler

At finde den rigtige CSS -klasse

Inden du kan ændre den specifikke tekst på dit websted, skal du vide, hvordan du identificerer den i din CSS. De fleste webbrowsere har et sæt værktøjer, der er designet til at hjælpe udviklere, og det er sandsynligt, at den, du bruger, har noget, der kaldes en Inspektør. Dette kan bruges til at kigge ind i HTML og anden kode, der bygger et websted.

Åbner inspektøren

Åbning af inspektøren er forskellig i hver af browserne på markedet. Vi har dækket en håndfuld af de mest populære browsere herunder for at give dig et forspring:

• Google Chrome: CTRL + Shift + C eller Menupunkter > Flere værktøjer > Udvikler værktøjer
• Microsoft Edge: CTRL + Shift + C eller Menupunkter > Flere værktøjer > Udvikler værktøjer
• Mozilla Firefox: CTRL + Shift + C eller Menupunkter > Flere værktøjer > Webudviklerværktøjer
• Apple Safari: Præferencer > Fremskreden > Vis udviklingsmenu i menulinjen og så Udvikle > Vis webinspektør

Find den rigtige CSS -tekststil

Det kan være forvirrende, når du først åbner inspektøren i din browser. Der vil være mange ting, som du måske ikke forstår, men du behøver ikke bekymre dig om dette nu. Du skal bare finde stilnavnet på den tekst, du prøver at ændre.

Som et eksempel vil vi finde og ændre den CSS -tekststil, der bruges til hovedoverskriften i afsnittet MakeUseOf Programmering. Du kan starte denne proces ved at inspicere det element, der skal ændres.

• Google Chrome: Højreklik > Inspicere
• Microsoft Edge: Højreklik > Inspicere
• Mozilla Firefox: Højreklik > Inspicere eller Q
• Apple Safari: Højreklik > Efterse element

Hvis du gør dette, får dit websteds konsol/inspektørvindue fokus på det element, du prøver at ændre. I Chrome, Safari, Edge og Firefox bør du se et afsnit mærket Stilarter der indeholder hele CSS -koden for det element, du inspicerer.

Du bør også se dit HTML -element fremhævet i en rude ved siden af ​​dette. Dette kan bruges til at finde klassen eller ID'et for det element, du ændrer. I vores tilfælde ser vi på hovedoverskriften på H1 på vores side, og dette tilhører en klasse kaldet .listing-title.

På dette tidspunkt kan du teste den CSS -tekststil, du vil tilføje til dit websted. Den øverste del af CSS -stilafsnittet i webstedskonsollen kan bruges til at anvende regler på det specifikke element, du har målrettet mod. Selvfølgelig er dette dog ikke permanent.

Relaterede: Sådan opbygges en responsiv navigationslinje ved hjælp af HTML og CSS

Tilføjelse af din nye CSS

Det er nu tid til at tilføje din nye CSS til dit websted. Den måde, du gør dette på, afhænger af den type webstedsplatform, du bruger, med muligheder som Shopify, der kræver udvidelser, så du kan tilføje CSS uden at ændre dine filer.

Men du tilføjer din CSS -kode, du skal sørge for, at den er korrekt. At bruge tekststil CSS-regler er ikke for svært, men det kan være frustrerende, når du ikke kan finde ud af at ændre din tekstfarve. For vores eksempel er dette den kode, vi skulle tilføje til vores websted.

.listing-title {
farve: blå;
}

Hvad hvis din tekstfarve ikke ændres?

Når du har redigeret din CSS -fil, skulle du kunne se den ændring, du har foretaget, så snart du opdaterer din side. Det er dog ikke altid så enkelt som dette. CSS kan være mere kompleks, end folk forventer, og du skal muligvis gøre mere på dette stadium.

• Tømning af cachen: Websites bruger ofte caching til at reducere lastetider. Din cache kan forhindre dig i at se ændringer på webstedet, og du skal tømme den, når du foretager ændringer i CSS.
• Højere i stilarket: CSS indlæser stilarter i rækkefølge, og det betyder, at de første regler i dit typografiark er dem, der vises på dit websted. Flytende stilarter kan være en god måde at prioritere dem frem for andre stilarter.
• Brug af vigtige tags: Denne næste mulighed betragtes ikke som bedste praksis og er bedst forbeholdt, når du ikke har noget andet valg. Du kan tilføje et vigtigt tag til dine CSS -tekstformater for at give dem prioritet over alle andre typografier, og dette kan ses herunder:

.listing-title {
farve: blå! vigtig;
}

Anden tekststil CSS sjov

CSS er et utrolig kraftfuldt værktøj, der giver dig adgang til en lang række forskellige muligheder, når du arbejder med tekst og andre elementer på dit websted. Dette stopper ikke bare med CSS -tekstfarve, og du kan gøre masser af din tekst, når du vælger at lære en lille smule CSS. Du kan finde nogle mere grundlæggende CSS -tekststilregler herunder:

• Skriftstørrelse: Dette ændrer tekststørrelsen på dit websted, f.eks. Skrifttype: 12px;
• Font-vægt: Vægt refererer til tykkelsen af ​​en skrifttype, med fed skrift høj vægt og tynd tekst lav, fx skrifttype: 400;
• Juster tekst: Dette ændrer justeringen af ​​den tekst, du arbejder med, f.eks. Tekstjustering: højre;
• Tekst-skygge: Dette giver dig mulighed for at tilføje en skygge til din tekst med en række attributter, f.eks. Tekstskygge: 2px 2px 3px sort;
• Tekst-transform: Dette ændrer sagen for den tekst, du arbejder med, f.eks. Tekst-transform: store bogstaver;
• Tekst-dekoration: Dette giver dig mulighed for at tilføje understregninger, bindestreger og andre dekorationer til tekst, f.eks. Tekst-dekoration: understregning;

Dette er blot at ridse overfladen af, hvad du kan gøre med tekstformater i CSS. Der er masser af guider rundt omkring på nettet, der kan hjælpe dig med denne proces, og det er altid en god idé at undersøge lidt, når du kommer i gang.

Relaterede: Sådan ændres dit websteds tekst med CSS font-family-ejendommen

Lær mere end CSS -tekstfarve

Øvelse, eksperimentering og forsøg og fejl er de bedste måder at lære et værktøj som CSS på. Style sheets kan virke skræmmende, når du først begynder at arbejde med dem, men de er utroligt nemme at arbejde med, når du har brugt lidt tid sammen med dem.

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

Brug for hjælp til CSS? Prøv disse grundlæggende CSS -kodeeksempler til at starte med, og anvend dem derefter på dine egne websider.

Læs Næste

Om forfatteren