Så här ändrar du webbplatsens textfärg med CSS

Att ha kontroll över din webbplats är en viktig del av webbdesign. I en idealisk värld bör du kunna ändra alla aspekter av webbplatsens design utan att behöva kompromissa med den färdiga produkten.

Naturligtvis kan webbplatser dock ofta vara envisa. Det är inte alltid möjligt att uppnå de resultat du vill utan att gå in i CSS -världen. Låt oss ta en titt på hur du kan ändra textfärg med CSS på din webbplats för att ge dig en uppfattning om hur du kan uppnå mer med kraften i CSS.

Ändra textfärg på webbplatsen med CSS

CSS har noggrant utformats för att säkerställa att det ger designers makt över sina webbplatsprojekt. Det är otroligt enkelt att ändra textfärg med CSS på din webbplats; du behöver bara en regel för att göra det.

färgen blå;

Men självklart fungerar CSS -regler inte särskilt bra ensamma. Du måste para ihop dem med elementklasser, ID och identifierare för att säkerställa att webbläsare vet vad stilen gäller. Du kan se exempel på att denna regel används med en H1 -rubrik, P -stycke och en knapp nedan.

h1 {färg: blå; }
p {färg: röd; }
knapp {färg: röd; }

Detta bör ge dig en grundläggande förståelse för vad som behöver göras för att ändra färgen på din webbplats text med CSS. Det krävs vanligtvis mer än så, särskilt om du vill ge olika färger till den olika texten på din webbplats.

Relaterad: CSS -boxmodellen förklaras med exempel

Hitta rätt CSS -klass

Innan du kan ändra den specifika texten på din webbplats måste du veta hur du identifierar den i din CSS. De flesta webbläsare har en uppsättning verktyg som är utformade för att hjälpa utvecklare, och det är troligt att den du använder har något som kallas en Inspektör. Detta kan användas för att kika in i HTML och annan kod som bygger en webbplats.

Öppnar inspektören

Att öppna inspektören är annorlunda i varje webbläsare på marknaden. Vi har täckt en handfull av de mest populära webbläsarna nedan för att ge dig ett försprång:

• Google Chrome: CTRL + Skift + C eller Menypunkter > Fler verktyg > Utvecklarverktyg
• Microsoft Edge: CTRL + Skift + C eller Menypunkter > Fler verktyg > Utvecklarverktyg
• Mozilla Firefox: CTRL + Skift + C eller Menypunkter > Fler verktyg > Verktyg för webbutvecklare
• Apple Safari: Preferenser > Avancerad > Visa utvecklingsmenyn i menyraden och då Utveckla > Visa webbinspektör

Hitta rätt CSS -textstil

Det kan vara förvirrande när du först öppnar inspektören i din webbläsare. Det kommer att finnas många saker som du kanske inte förstår, men du behöver inte oroa dig för detta nu. Du behöver bara hitta stilnamnet på texten som du försöker ändra.

Som ett exempel kommer vi att hitta och ändra den CSS -textstil som används för huvudhuvudet i avsnittet MakeUseOf Programmering. Du kan starta denna process genom att inspektera elementet som behöver ändras.

• Google Chrome: Högerklicka > Inspektera
• Microsoft Edge: Högerklicka > Inspektera
• Mozilla Firefox: Högerklicka > Inspektera eller F
• Apple Safari: Högerklicka > Inspektera elementet

Om du gör detta kommer din webbplatskonsol/inspektörsfönster att fokusera på det element som du försöker ändra. I Chrome, Safari, Edge och Firefox bör du se ett avsnitt märkt Stilar som innehåller all CSS -kod för det element du inspekterar.

Du bör också se ditt HTML -element markerat i en ruta bredvid detta. Detta kan användas för att räkna ut klassen eller ID för elementet som du ändrar. I vårt fall tittar vi på huvud H1-rubriken på vår sida, och detta tillhör en klass som heter .listing-title.

Vid det här laget kan du testa CSS -textstilen som du kommer att lägga till på din webbplats. Den övre delen av CSS -stilavsnittet i webbplatskonsolen kan användas för att tillämpa regler på det specifika elementet du har riktat in dig på. Naturligtvis är detta dock inte permanent.

Relaterad: Hur man bygger en responsiv navigeringsfält med HTML och CSS

Lägga till din nya CSS

Det är nu dags att lägga till din nya CSS på din webbplats. Hur du gör detta beror på vilken typ av webbplatsplattform du använder, med alternativ som Shopify som kräver tillägg för att du ska kunna lägga till CSS utan att ändra dina filer.

Hur du än lägger till din CSS -kod måste du se till att den är korrekt. Att använda textstil CSS-regler är inte för svårt, men det kan vara frustrerande när du inte kan komma på hur du ändrar din textfärg. För vårt exempel är detta koden som vi skulle behöva lägga till på vår webbplats.

.listing-title {
färgen blå;
}

Vad händer om din textfärg inte ändras?

När du har redigerat din CSS -fil bör du kunna se ändringen du har gjort så snart du uppdaterar din sida. Det är dock inte alltid så enkelt som detta. CSS kan vara mer komplext än vad folk förväntar sig, och du kan behöva göra mer i detta skede.

• Tömmer cachen: Webbplatser använder ofta cachning för att minska laddningstider. Din cache kan hindra dig från att se webbplatsändringar, och du måste tömma den när du gör ändringar i CSS.
• Högre i stilarket: CSS laddar in stilar i följd, och det betyder att de första reglerna i ditt stilblad är de som visas på din webbplats. Att flytta stilar kan vara ett bra sätt att ge dem prioritet framför andra stilar.
• Använda viktiga taggar: Detta nästa alternativ anses inte vara bästa praxis och är bäst reserverat för när du inte har något annat val. Du kan lägga till en viktig tagg i dina CSS -textstilar för att ge dem prioritet framför alla andra stilar, och detta kan ses nedan:

.listing-title {
färg: blå! viktigt;
}

Annat textstil CSS kul

CSS är ett otroligt kraftfullt verktyg som ger dig tillgång till en mängd olika alternativ när du arbetar med text och andra element på din webbplats. Detta slutar inte bara med CSS -textfärg, och du kan göra massor med din text när du väljer att lära dig lite CSS. Du kan hitta några mer grundläggande CSS -textstilregler nedan:

• Textstorlek: Detta ändrar storleken på texten på din webbplats, t.ex. teckenstorlek: 12px;
• Font-vikt: Vikt avser tjockleken på ett teckensnitt, med fet stil hög vikt och tunn text är låg, t ex teckensnitt: 400;
• Textjustera: Detta ändrar justeringen av texten du arbetar med, t.ex. text-align: right;
• Text-skugga: Detta låter dig lägga till en skugga till din text med en rad attribut, t.ex. textskugga: 2px 2px 3px svart;
• Text-transform: Detta ändrar fallet för texten du arbetar med, t.ex. text-transform: versaler;
• Text-dekoration: Detta låter dig lägga till understrykningar, streck och andra dekorationer i text, t.ex. textdekoration: understruken;

Detta är bara att skrapa ytan på vad du kan göra med textstilar i CSS. Det finns massor av guider på webben som kan hjälpa dig med denna process, och det är alltid en bra idé att göra lite research när du kommer igång.

Relaterad: Så här ändrar du webbplatsens text med egenskapen CSS font-family

Läs mer än CSS -textfärg

Övning, experiment och prövning och fel är de bästa sätten att lära sig ett verktyg som CSS. Stilark kan verka skrämmande när du börjar arbeta med dem, men de är otroligt enkla att arbeta med när du har umgåtts med dem.

10 enkla CSS -kodexempel du kan lära dig på 10 minuter

Behöver du hjälp med CSS? Prova dessa grundläggande CSS -kodexempel till att börja med och applicera dem sedan på dina egna webbsidor.

Läs Nästa

Om författaren