Cascading Style Sheets AKA CSS er et stylingsspråk som brukes til å style HTML -elementer som vises på websider. CSS lar deg generere gjenbrukbare stilark som kan brukes til å style flere websider på en gang. Disse stilarkene sparer mye tid og er enkle å vedlikeholde. Men har du noen gang lurt på hvordan du kobler CSS -stilark til HTML -dokumenter? Vel, vi har fått svaret oppsummert for deg i denne bloggen.

De tre måtene du kan koble CSS til HTML. Disse er vervet nedenfor.

1. Inline CSS
2. Intern CSS
3. Ekstern CSS

Alle disse tilnærmingene har blitt diskutert i denne bloggen.

Hvordan du kobler inline css til html

Hvis du tar i bruk denne tilnærmingen, må du benytte deg av stilattributtet til det aktuelle elementet du ønsker å style. Bare sett inn stylingen i startkoden til elementet.

Denne tilnærmingen anbefales ikke, da stylingen gjøres innen startkoden til et bestemt element som gjør koden vanskelig å lese og vedlikeholde. Dessuten er den inline CSS ikke gjenbrukbar, derfor må du style hvert element separat å gjøre stylingoppgaven tungvint, og dermed drepe formålet bak å bruke CSS.

Her har vi demonstrert denne tilnærmingen med et eksempel.

Html

Hvordan du kobler CSS til HTML

Inline CSS

I koden over genereres det tre elementer som er; ,

, og

. Alle tre av dem blir stylet ved hjelp av stilattributtet. DIV -beholderen har fått noe polstring, og grensen, i mellomtiden, får overskriften og avsnittet en viss tekstfarge.

Produksjon

Elementene ble stylet med inline CSS.

Hvordan du kobler CSS til HTML internt

Denne tilnærmingen leder brukerne til å style elementer ved å bruke taggen i hodeseksjonen i HTML -dokumentet. Du kan enten bruke navnene på elementene, eller bruke klasser eller ID -er som er tilordnet elementer for å style dem med interne CSS.

For å forstå arbeidet med denne tilnærmingen, konsulter eksemplet nedenfor.

Html

Hvordan du kobler CSS til HTML

Inline CSS

Igjen tre elementer som er ,

, og

blir imidlertid generert for å style dem vi bruker taggen i hodeseksjonen i dokumentet. Legg merke til at siden koden ovenfor bare består av tre elementer, derfor bruker vi direkte navnene på elementene for å style dem, men når det er flere elementer av lignende type, kan du tilordne klasser og ID -er til dem for å style hver enkelt av dem annerledes. Koden vil generere samme utgang som ovenfor.

Hvordan du kobler CSS til HTML eksternt

Denne tilnærmingen lar deg koble CSS til HTML ved å bruke eksterne stilark. Denne tilnærmingen krever at du lager stilarkene dine i en egen fil og deretter kobler denne eksterne filen til HTML -filen din ved å bruke taggen.

Her har vi vedlagt skjermbilder av kodeditoren for å demonstrere denne tilnærmingen riktig.

Html

Dette skjermbildet over viser HTML -filen. I dette dokumentet trenger du ikke å style elementene, bare plassere elementene dine på en måte du vil at de skal vises på websiden. For å koble stilarken din, bruk ganske enkelt attributtet og oppgi lenken til CSS -filen til HREF -attributtet til taggen.

CSS

Dette skjermbildet representerer CSS -stilarket. I denne filen bruker du bare elementnavn eller klasser/ID -er som er tildelt å style dem. Koden som vises i skjermbildene vil også generere samme utgang.

Denne tilnærmingen anses som den beste tilnærmingen siden den lar deg generere stilark separat, og dermed gjøre koden ren, lesbar og vedlikeholdbar.

Konklusjon

For å koble CSS til HTML, er det tre tilgjengelige tilnærminger som er; Inline CSS, intern CSS og ekstern CSS. Inline CSS krever at du bruker stilattributtet til et bestemt element i startkoden for å style det, i mellomtiden lar intern CSS brukere å style elementer ved hjelp av taggen i hodeseksjonen i HTML -dokumentet. Til slutt betyr ekstern CSS at du må generere stilark i en annen fil og koble den til HTML -dokumentet med taggen. Ekstern CSS -tilnærming er å foretrekke fremfor resten fordi den gjør koden lesbar og vedlikeholdbar.