Hur man använder CSS för att ändra teckensnittsfärg

Vill du piffa upp din webbplats med några olika teckensnittsfärger? Du kan göra detta med CSS. CSS står för Cascading Style Sheets och är standardspråket som används för att skapa och hantera stilen på alla webbplatser.

Det finns tre metoder för att tillämpa CSS på ett HTML-dokument. Dessa är inline CSS, intern/inbäddad CSS och extern CSS.

Metod ett: Inline CSS

För att ändra teckensnittsfärg i CSS måste du skapa en CSS-regel för att ställa in färgegenskapens värde.

Inline-metoden använder stilegenskapen som du kan tillämpa på nästan alla element. Här är ett exempel som ställer in teckensnittsfärgen för ett HTML-stycke till rött:

Textstycke

Du kan uppnå samma effekt med intern/inbäddad CSS, eller extern CSS.

Metod två: Intern/Inbäddad CSS

Du kan använda den här metoden när du vill skapa CSS-regler som påverkar mer än en instans av ett HTML-element men bara på en enda sida. CSS-reglerna skrivs sedan in i huvudet på HTML-sidan, med hjälp av ett stilelement:

Metod tre: Extern CSS

Det tredje sättet att uppnå samma effekt är att använda en extern CSS-stilmall. Använd en textredigerare och skapa en fil med filtillägget ".css". Vanlig praxis är att kalla denna fil något liknande stylesheet.css men du kan namnge det vad som helst så länge du behåller tillägget ".css".

För att färga din brödtext grön, till exempel med hjälp av en extern stilmall, klistra helt enkelt in CSS-regeln så här:

p { färg: blå }

I ditt HTML-dokument bör du inkludera en länk till din stilmall i HTML-huvudelementet:

Textstycke

Ändra teckensnittsfärg i HTML, utan CSS tillämpad

Den bästa praxisen är att använda CSS, men så här ändrar du teckensnittsfärg med enbart HTML:

Textstycke

Teckensnittselementet, tillsammans med dess färgattribut, är utfasade. Detta beror på att de är presentationsmässiga snarare än strukturella element. Modern HTML bör endast bestå av strukturella element.

Att ändra teckensnittsfärg i CSS är relativt enkelt

Vi har visat dig tre metoder för att ändra teckensnittsfärg i CSS. Vi har också visat dig hur du gör detta på det gamla sättet med HTML-teckensnittstaggen. Testa dem och se vilken som fungerar bäst för dig!

När du har bemästrat att ändra teckensnittsfärg med CSS och HTML, kanske du vill behärska att ändra teckenstorlek i HTML.

Hur man ändrar HTML-teckensnittsstorlek i CSS

Läs Nästa

Om författaren