Hva er et eksternt stilark?

Et eksternt stilark definerer hvordan en webside ser ut. Du kan bruke et stilark for å spesifisere ting som størrelse, farge og skrift på teksten, fargen på knappene eller plasseringen av menyer og sidefelt.

Kode brukt i et eksternt stilark

Det er to typer koder som brukes til å lage en grunnleggende webside:

  • HyperText Markup Up Language (HTML): Definerer innholdet på en webside. Den inneholder selve teksten med en markering som identifiserer om tekstdeler er avsnitt, overskrifter eller lister. Den inneholder også lenker til bilder som vises på siden og hyperkoblinger til eksterne sider.
  • Cascading Style Sheets (CSS): Et kodingspråk som brukes til å spesifisere hvordan innholdet skal vises. Den definerer hvordan hver type tekstelement vises og kan vise den samme typen element forskjellig hvis de tilhører forskjellige klasser eller har en annen id. Dette gjør at ting som menyer og lister kan oppføre seg veldig annerledes i hovedteksten til en webside.

Generelt er det en god ide å skille stil fra innhold, da det lar deg fokusere på en ting om gangen. Dette blir enda viktigere i et team, slik at spesialister innen innhold og presentasjon kan jobbe uavhengig av resten. Kanskje enda viktigere, det gjør det også mulig å bruke et enkelt sett med stilinstruksjoner jevnt over et helt nettsted.

instagram viewer

Den visuelle presentasjonen av nettstedet kan deretter endres fra ett enkelt stilark uten å redigere hver webside individuelt. For større komplekse nettsteder kan en rekke stilark brukes til å kontrollere tekst, menyer og inndelinger på sider. Denne samlingen av stilark kan kalles et "tema".

Bruke en ekstern CSS for å koble HTML til CSS

Det er mulig å inkludere CSS-stil direkte i HTML-en på en webside, ved hjelp av CSS for å individuelt style hvert avsnitt og overskriften annerledes. Denne typen innebygd styling generelt er det ikke en god ide, ettersom du mister alle fordelene ved å skille stil fra innhold. Spesielt mister du muligheten til å oppdatere hele nettstedet ditt konsekvent fra en enkelt fil.

Den riktige måten å bruke en stil på et nettsted er å lage en enkelt ekstern stilarkfil for hver type stil du vil bruke, og deretter referere til disse filene fra hver HTML-fil. For eksempel kan du ha følgende eksterne stilark:

  • text.css
  • menyer.css
  • layout.css

Du kan gjøre endringer i CSS-koden i de eksterne stilarkene uten å endre deres filnavn, som betyr at referansene til disse filene, innenfor HTML-en på alle websidene dine, ikke vil være endret.

Eksempler på HTML og CSS

En veldig enkel HTML-side kan inneholde følgende kode:




 Alt om meg!

Denne siden handler om meg og hvorfor jeg er fantastisk.


Hvis du vil se hvordan dette ser ut i en nettleser, kan du kopiere teksten til et tekstredigeringsprogram Notisblokk. Lagre filen som "index.html" og dra den inn i nettleseren din for å se den gamle skolestilen.

Et enkelt eksternt stilark kan lenkes til denne siden ved å legge til følgende kode under.

type = "tekst / css"
href = "myStyle.css" />

Opprett en annen tekstfil kalt myStyle.css, som ligger i samme mappe som index.html som inneholder følgende kode:

h1 {
farge: # FF7643;
font-face: Arial '
}
p {
fargen rød;
skriftstørrelse: 1,5 em;
}

Det er mye mer du kan gjøre med CSS. Hvis du vil lære mer, W3 skoler er et flott sted å starte.

instagram story viewer