CSS (Cascading Style Sheet) beskriver de HTML-elementer, som vises på skærm, papir , eller i andre medier . Det sparer en masse tid. Det styrer layoutet af flere websider på én gang. Det sætter font-size, font-family, color, baggrundsfarve på siden.

Det giver os mulighed for at tilføje effekter eller animationer til hjemmesiden. Vi bruger CSS at vise animationer synes godt om knapper, effekter, loaders eller spinnere , og også animerede baggrunde .

Uden at bruge CSS , vil hjemmesiden ikke se attraktiv ud. Der er 3 typer af CSS som er nedenfor:

• Inline CSS
• Intern/ Embedded CSS
• Ekstern CSS

1. Intern CSS

Den interne CSS har tag i afsnit af HTML dokument. Denne CSS-stil er en effektiv måde at style enkelte sider på. Brug af CSS-stilen til flere websider er tidskrævende, fordi vi kræver at placere stil på hver webside.

Vi kan bruge den interne CSS ved at bruge følgende trin:

1. Åbn først HTML side og find

2. Sæt følgende kode efter

3. Tilføj regler af CSS i den nye linje.

Eksempel:

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

4. Luk stiltagget.

Efter tilføjelse af den interne CSS ser den komplette HTML-fil ud som følgende:

 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å bruge vælgerne (klasse og ID) i stilarket.

Eksempel:

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

Fordele ved intern CSS

Intern CSSkan ikke uploade flere filer, når vi tilføjer koden med HTML-siden.

Ulemper ved intern CSS:

• Tilføjelse af kode i HTML dokument vil reducere sidestørrelse og indlæsningstid af websiden.

2. Ekstern CSS

I ekstern CSS linker vi websiderne til de eksterne .css fil. Den er skabt af tekst editor . CSS er en mere effektiv metode til at style en hjemmeside. Ved at redigere .css fil, kan vi ændre hele webstedet på én gang.

For at bruge den eksterne CSS skal du følge trinene nedenfor:

1. Opret en ny .css fil med tekst editor , og tilføj Cascading Style Sheet regler også.

For eksempel:

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

2. Tilføj en reference til den eksterne .css fil lige efter tag i afsnit af HTML ark :

Fordele ved ekstern CSS:

• Vores filer har en renere struktur og mindre i størrelse.
• Vi bruger det samme .css fil til flere websider i ekstern CSS.

Ulemper ved ekstern CSS:

• Siderne kan ikke leveres korrekt, før den eksterne CSS er indlæst.
• I ekstern CSS kan upload af mange CSS-filer øge downloadtiden for et websted.

3. Inline CSS

Inline CSS bruges til at style en bestemt HTML element. Tilføj en stil attribut til hvert HTML-tag uden at bruge vælgerne. Det kan være svært at administrere et websted, hvis vi kun bruger inline CSS . Dog Inline CSS i HTML er nyttig i nogle situationer. Vi har ikke adgang til CSS filer eller for at anvende stilarter på element.

I det følgende eksempel har vi brugt den inline CSS i

java farver