CSS kan legges til som en egen fil eller innebygd direkte i HTML -dokumentet. Hvis du vil inkludere CSS i HTML, så “Inline stiler”, "Innebygde stiler," og “Eksterne stilark” er de tre metodene for å oppnå denne funksjonaliteten. Den ideelle måten er imidlertid å lage og bruke stiler på HTML er ved å bruke de eksterne stilarkene, ettersom minimal markeringsmodifisering vil være nødvendig for å påvirke flere sider samtidig.

Denne oppskrivningen vil diskutere prosedyren for legge til an Ekstern CSS -fil i Html. Vi vil også forklare kobling og import en ekstern CSS -fil i HTML. Videre vil eksempler relatert til de nevnte metodene bli gitt. Så la oss starte!

Hvordan legge til en ekstern CSS -fil i HTML

Hvis du vil bruke en stil på flere websider samtidig, er det perfekt å legge til en ekstern CSS -fil. En ekstern CSS regnes som en egen fil som inneholder alle stilreglene, og den kan kobles til hvilken som helst HTML -side på nettstedet ditt. Å legge til en ekstern CSS -fil tillater deg å endre utseendet til nettstedet ditt ved bare å gjøre endringer i en enkelt fil. Å holde separate CSS, JavaScript og HTML -filer lar deg også opprettholde koden og forbedre lesbarheten.

Det er to metoder for å legge til en ekstern CSS -fil HTML: Kobling og import.

Koble en ekstern CSS -fil i HTML

Først av alt vil vi opprette en CSS -fil i HTML. For dette formålet kan du åpne din favorittkodeditor; Vi vil imidlertid bruke Visual Studio Code.

Etter å ha åpnet VS -koden, oppretter vi en "stil.CSS ” CSS -fil for å legge til stiler:

Deretter vil vi spesifisere stilen vi ønsker å bruke på websiden i den åpne CSS -filen. Her har vi tildelt verdiene til "bakgrunn" og “Font” Egenskaper for HTML "kropp" og la også til "farge" for overskriften:

kropp
Bakgrunn: rosa;
Font: 18px Arial, sans-serif;

H1
Farge: blå;

trykk “Ctrl+s” For å lagre den ekstra koden i "stil.CSS ” fil:

De "" Tag brukes til å koble en ekstern CSS til en HTML -fil. Denne taggen er lagt til i "" delen av et HTML -dokument. Vi har koblet HTML -filen vår med "stil.CSS ” I det undergitte programmet, ved å bruke taggen. Deretter har vi lagt til en overskrift med

tag og et avsnitt med

stikkord. Den spesifiserte stilen i "stil.CSS ” Filen vil bli brukt på disse HTML -elementene:

Dette er Linuxhint.com

Vi lærer hvordan du legger til en CSS -fil i HTML

Lagre dette JavaScript -programmet og åpne HTML -filen din i nettleseren:

Som du ser, har vi vellykket brukt den spesifiserte stilen på HTML -elementene våre ved å koble dem til den eksterne CSS -filen:

Importere en ekstern CSS -fil i HTML

En annen metode for å legge til en ekstern CSS -fil er å bruke "@import" Regel i HTML -dokument. JavaScript "@import" Erklæringer gir instruksjoner til nettleseren for lasting og bruk av stilene fra den eksterne CSS -filen.

Du kan importere en ekstern CSS -fil i HTML ved å legge til "@import" -erklæringen i taggen til HTML -dokumentet. På denne måten vil du få lov til å legge til andre CSS -regler for HTML -elementene, innenfor samme tag:

Dette er Linuxhint.com

Vi lærer å legge til en CSS -fil i HTML

I det medfølgende JavaScript -programmet har vi importert "stil.CSS ” fil, og stilen som er spesifisert med den nevnte filen vil bli brukt på overskriftene. Vi har også lagt til stil for avsnitt HTML -elementet:

Vår "mitt prosjekt.html ” Filen har følgende HTML -elementer med de anvendte stilene:

Konklusjon

Å legge til en CSS -fil i HTML er nyttig hvis du vil bruke en stil på flere websider samtidig. Når du holder HTML-, JavaScript- og CSS -filene hver for seg, blir koden din enkel å administrere. Denne oppskrivningen diskuterte prosedyren for å legge til en CSS-fil i HTML. Vi har også forklart å koble og importere en ekstern CSS -fil i HTML. Videre er det også gitt eksempler relatert til de nevnte metodene.