CSS (Cascading Style Sheet) beskriver HTML-elementene som vises på skjerm, papir , eller i andre medier . Det sparer mye tid. Den kontrollerer utformingen av flere nettsider på en gang. Det setter font-size, font-family, color, bakgrunnsfarge på siden.

Det lar oss legge til effekter eller animasjoner til nettstedet. Vi bruker CSS å vise animasjoner som knapper, effekter, lastere eller spinnere , og også animerte bakgrunner .

Uten å bruke CSS , vil nettstedet ikke se attraktivt ut. Det er 3 typer av CSS som er nedenfor:

• Innebygd CSS
• Intern/ innebygd CSS
• Ekstern CSS

1. Intern CSS

Den interne CSS har tag i delen av HTML dokument. Denne CSS-stilen er en effektiv måte å style enkeltsider på. Å bruke CSS-stilen for flere nettsider er tidkrevende fordi vi krever å plassere stil på hver nettside.

Vi kan bruke den interne CSS ved å bruke følgende trinn:

1. Først åpner du HTML siden og finn

2. Sett følgende kode etter

3. Legg til regler av CSS i den nye linjen.

Eksempel:

 body { background-color: black; } h1 { color: white; padding: 50px; } 

4. Lukk stiletiketten.

Etter å ha lagt til den interne CSS, ser den komplette HTML-filen slik ut:

 body { background-color: black; } h1 { color: red; padding: 50px; } <h2>CSS types</h2> <p>Cascading Style sheet types: inline, external and internal</p> 

Vi kan også bruke velgerne (klasse og ID) i stilarket.

Eksempel:

 .class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; } 

Fordeler med intern CSS

Intern CSSkan ikke laste opp flere filer når vi legger til koden med HTML-siden.

Ulemper med intern CSS:

• Legger til kode i HTML dokumentet vil redusere sidestørrelse og lastetid av nettsiden.

2. Ekstern CSS

I ekstern CSS lenker vi nettsidene til de eksterne .css fil. Den er skapt av tekstredigerer . CSS er en mer effektiv metode for å style en nettside. Ved å redigere .css fil, kan vi endre hele nettstedet på en gang.

For å bruke den eksterne CSS, følg trinnene nedenfor:

1. Opprett en ny .css fil med tekstredigerer , og legg til Cascading Style Sheet regler også.

For eksempel:

 .xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; } 

2. Legg til en referanse til den eksterne .css fil rett etter tag i delen av HTML-ark :

Fordeler med ekstern CSS:

• Våre filer har en renere struktur og mindre i størrelse.
• Vi bruker det samme .css fil for flere nettsider i ekstern CSS.

Ulemper med ekstern CSS:

• Sidene kan ikke leveres riktig før den eksterne CSS-en er lastet inn.
• I ekstern CSS kan opplasting av mange CSS-filer øke nedlastingstiden til et nettsted.

3. Innebygd CSS

Inline CSS brukes til å style en bestemt HTML element. Legg til en stil attributt til hver HTML-tag uten å bruke velgerne. Det kan være vanskelig å administrere et nettsted hvis vi bare bruker innebygd CSS . Imidlertid Inline CSS i HTML er nyttig i noen situasjoner. Vi har ikke tilgang til CSS-filer eller for å bruke stiler på element.

I følgende eksempel har vi brukt inline CSS i

java farger