HTML (Hypertext Markup Language) er standardspråket for å strukturere websider. Mens det kaskaderende stilarket brukes til å gi flere stylingegenskaper til HTML -elementene. Mer spesifikt kan du få tilgang til elementene i HTML i CSS etter elementnavn, etter klasseselger eller etter ID -velgere.

Tre metoder for å legge til et CSS -stilark i en HTML -fil er intern CSS, inline CSS og ekstern CSS. Imidlertid vil denne artikkelen veilede hvordan du legger til et eksternt stilark i HTML.

Hva er et eksternt CSS -stilark?

Det eksterne stilarket er nyttig på en måte som vi kan endre utseendet til nettstedet vårt ved å endre bare en fil. HTML -filen må ha en lenke til stilarket i "”Element, som vil bli nevnt inne i hodekomponenten på HTML -siden.

Eksemplet nedenfor viser flere HTML -elementer som vil bli stylet med CSS -egenskaper ved å bruke det eksterne stilarket.

Eksempel: Hvordan lage og koble eksterne stilark til HTML -fil?

I HTML -filen, først, legg til et DIV -element som har et klassenavn "hoved-”. Inne i dette, legg til

element som har klassenavn som “overskrift”For å gi overskrift. De

element med id som "para”Blir deretter lagt til for å gi tekstinnhold.

Trinn 1: Opprett HTML -fil

Nedenfor er HTML -koden for det diskuterte scenariet:

Dette er overskriftselementet

Dette er hoveddiven

Siden vi ikke har gitt noen av HTML -elementene med stylingegenskaper, vil utgangsskjermen se slik ut:

I neste avsnitt vil vi lage et stilark som inneholder stylingegenskapene til elementene vi har laget i HTML -filen.

Trinn 2: Lag ekstern stilark

Opprett en ny fil, og navngi den med en utvidelse “.CSS”. Åpne den og skriv kode som gitt i kodeblokken nedenfor.

Style Main Div

.hoved
Bredde: 500px;
Høyde: 200px;
Bakgrunnsfarge:#001253;
tekst-align: sentrum;
Padding-top: 20px;
Margin: 0px Auto;
Border: 5px Solid RGB (194, 194, 189);
Font-family: Cursive;

Egenskapene som brukes på HTML -elementene i det eksterne stilarket er beskrevet nedenfor:

• “.hoved-”Brukes til å få tilgang til klassen til DIV -elementet, der“.”Etterfulgt av klassenavnet er kjent som klassevelgeren.
• “bredde”Eiendom brukes til innstilling av elementets bredde.
• “høyde”Eiendom brukes til innstilling av elementets høyde.
• “bakgrunnsfarge”Eiendom brukes til å stille bakgrunnsfargen.
• “Tekstalign”Er eiendommen som brukes til justering av tekst.
• “Padding-top”Er eiendommen som brukes til å legge til plass over innholdet i Div.
• “margin”Med verdi 0px Auto representerer plass 0px fra topp og bunn og lik plass til venstre og høyre for elementet.
• “grense”Eiendommen er satt med verdien 5px solid RGB (194, 194, 189), der 5px refererer til bredden på grensen, Solid er linjetypen, og RGB (194, 194, 189) er grensen fargekode.
• “Font-familie”Med verdien Cursive får skriftstilen til å virke som om de ble håndskrevet.

Style ID Para

#Para
Font-størrelse: 25px;
Fontvekt: fet;
Farge: #FFB9B9;

ID -elementet med navn para for

Element -ID stylet med egenskapene som er forklart nedenfor:

• “#para”Brukes for å få tilgang til ID -elementet i HTML. “#”Tegn er kjent som ID -velgeren.
• “skriftstørrelse”Eiendom brukes til innstillingen av skriftstørrelsen.
• “Fontvekt”Med verdien som fet, gjør skriften fet fet.
• “farge”Eiendom brukes til innstilling av skriftfarge.

Stiloverskrift

.overskrift
Farge: Whitesmoke;

Overskriftenes fontfarge er satt som "Whitesmoke”Ved å bruke eiendommen”farge”.

Trinn 3: Koble ekstern stilark til HTML

Nå, i hodeseksjonen i HTML -filen, vil vi spesifisere lenken til det eksterne stilarket:

Flere attributter kan brukes i HTML -lenketappen. Attributtene som er spesifisert i koblingselementet er beskrevet nedenfor:

• “rel”Attributt brukes til å informere nettleseren om den importerte filen, for eksempel Stylesheet.
• “href”Attributt spesifiserer filstien.
• “type”Attributt brukes til å indikere innholdet i den importerte filen.

Som vist i bildet nedenfor, blir stylingegenskapene som er gitt i det eksterne stilarket vellykket brukt:

Vi har lært å koble CSS -filen til HTML -filen.

Konklusjon

CSS er det kaskaderende stilarket som gir forskjellige stylingegenskaper til HTML -elementene. Det er tre måter å koble CSS til HTML: Inline CSS, ekstern CSS og intern CSS. I HTML, inne i hodeseksjonen, vil lenken til det eksterne stilarket bli spesifisert ved hjelp av elementet. Denne artikkelen har demonstrert prosedyren for å opprette og koble eksterne stilark til HTML.