Sådan bruger du CSS til at ændre skriftfarve

Ønsker du at pifte din hjemmeside op med nogle forskellige skriftfarver? Du kan gøre dette ved hjælp af CSS. CSS står for Cascading Style Sheets og er standardsproget, der bruges til at oprette og administrere stilen på ethvert websted.

Der er tre metoder til at anvende CSS til et HTML-dokument. Disse er inline CSS, intern/embedded CSS og ekstern CSS.

Metode 1: Inline CSS

For at ændre skriftfarve i CSS, skal du oprette en CSS-regel for at indstille værdien af ​​farveegenskaben.

Inline-metoden bruger stilegenskaben, som du kan anvende på næsten ethvert element. Her er et eksempel, der sætter skriftfarven på et HTML-afsnit til rød:

Tekstafsnit

Du kan opnå den samme effekt ved at bruge intern/indlejret CSS eller ekstern CSS.

Metode 2: Intern/Embedded CSS

Du kan bruge denne metode, når du vil oprette CSS-regler, der påvirker mere end én forekomst af et HTML-element, men kun på en enkelt side. CSS-reglerne skrives derefter ind i hovedet på HTML-siden ved hjælp af et stilelement:

Metode tre: Ekstern CSS

Den tredje måde at opnå den samme effekt på er at bruge et eksternt CSS-stylesheet. Brug en teksteditor til at oprette en fil med filtypenavnet ".css". Almindelig praksis er at kalde denne fil noget lignende stylesheet.css men du kan navngive det hvad som helst, så længe du beholder ".css"-udvidelsen.

For at farve din brødtekst grøn, for eksempel ved hjælp af et eksternt stylesheet, skal du blot indsætte CSS-reglen sådan her:

p { farve: blå }

I dit HTML-dokument skal du inkludere et link til dit stylesheet i HTML-hovedelementet:

Tekstafsnit

Ændring af skriftfarve i HTML, uden CSS anvendt

Den bedste praksis er at bruge CSS, men her er, hvordan du ændrer skriftfarve ved hjælp af HTML alene:

Tekstafsnit

Skrifttypeelementet sammen med dets farveattribut er forældet. Dette skyldes, at de er præsentationsmæssige snarere end strukturelle elementer. Moderne HTML bør kun bestå af strukturelle elementer.

Ændring af skriftfarve i CSS er relativt ligetil

Vi har vist dig tre metoder til at ændre skriftfarve i CSS. Vi har også vist dig, hvordan du gør dette på den gamle måde ved hjælp af HTML-font-tagget. Prøv dem og se, hvad der fungerer bedst for dig!

Når du har mestret at ændre skriftfarve ved hjælp af CSS og HTML, vil du måske mestre at ændre skriftstørrelse i HTML.

Sådan ændres HTML-skriftstørrelse i CSS

Læs Næste

Om forfatteren