CSS akronym av "Kaskaderende stilark”Er et designspråk som definerer hvordan du designer en iøynefallende webside. Den beskriver utseendet og formateringen av et nettsted som er opprettet på et markeringsspråk. Vanligvis brukes CSS sammen med HTML for å angi stilene til nettsteder og brukergrensesnitt.

Kaskaderende stilark

Kaskader betyr utseende, Stil betyr design på HTML -element/ legge til stil til nettdokumenter og Ark betyr side e.g. Webside -dokument.

Typer CSS

CSS kan brukes på tre måter:

• Inline CSS: Inline CSS implementerer stilen på en linje.
• Intern CSS: Intern CSS Bruk en spesifisert stil på en enkelt side.
• Ekstern CSS: Ekstern CSS er en egen fil, og den kan brukes av flere HTML -dokumenter/sider.

For dette formålet, bare importer den eksterne lenken til CSS -filen i hoveddelen.

CSS -syntaks

La oss se på følgende CSS -styling for å ha en bedre forståelse av CSS -syntaks:

I ovennevnte utdrag er P en velger som peker på et HTML-element du vil style. Mens "bakgrunnsfarge" er en eiendom, og "gull" er dens verdi.

Tilsvarende "fontstørrelse" og "tekst-align" er egenskaper, mens "middels" og "riktig" er verdier av disse egenskapene.

Eksempel 1: Dette eksemplet vil gi deg et dyptgående syn på hvordan Inline CSS fungerer:

Velkommen til Linuxhint.com

Det beste nettstedet for å lese artikler av høy kvalitet

Ovennevnte skript implementerte litt stil på den første

element ved bruk av inline CSS. Den vil vise følgende utgang:

I dette eksemplet har vi bare to

elementer og vi må implementere stilen på bare ett element, så vi benyttet Inline CSS. Så når vi må style noen få HTML -elementer, kan vi bruke inline CSS for hvert element.

Men hva om vi har hundrevis av HTML -elementer på en side E.g. Vi har hundre

Derfor når vi må implementere en unik stil på hele siden, vil vi bruke den interne CSS.

Eksempel-2: Følgende eksempel vil implementere den samme bakgrunnsfargen, tekstfargen til hele kroppen av HTML -dokumentet:

Velkommen til Linuxhint.com

Det beste nettstedet for å lese artikler av høy kvalitet

Ovennevnte utdrag vil gi følgende utdata:

Hva om vi må style mer enn en sider? I slike tilfeller vil den eksterne CSS bli implementert. Bare en enkelt fil kan endre hele utseendet på nettstedet. Derfor anbefales det at alltid bruker ekstern CSS.

Hvis du jobber med ekstern CSS, må du bestemme i seksjon.

Eksempel-3: Dette eksemplet vil opprette en CSS -fil for å definere stilen. Koblingen til denne filen vil bli gitt i hodeseksjonen. Både HTML- og CSS-filer er gitt-below:

Utvendig.html

Velkommen til Linuxhint.com

Det beste nettstedet for å lese artikler av høy kvalitet

Utvendig.CSS

kropp
bakgrunnsfarge: brun;
Farge: Goldenrod;
Font-stil: kursiv;

H1
farge svart;
tekst-align: sentrum;

Utgangen vil bekrefte at den eksterne CSS -filen er koblet til HTML -filen riktig:

Cascade Style Order

Nå har du kanskje et spørsmål? Hva om vi bruker inline, interne og eksterne CSS -stiler på en webside? Da vil hvilke av dem bli implementert? Hvilken stil har maksimal forrang?

Vi vil! Hvis det er en konflikt i CSS -stilerklæring, vil Inline CSS overstyre interne CSS som igjen vil overstyre det eksterne CSS. Dette betyr at Inline CSS har høyere forrang enn både interne og eksterne CSS. Nettleserens standardstiler har den laveste forrang.

Hvis de forskjellige CSS -stilene bestemmes på samme forrangnivå, vil stilen som er nærmest det målrettede elementet ha høyere forrang.

Eksempel-4: La oss vurdere følgende eksempel som bestemmer flere stiler:

Utvendig.CSS -fil

kropp
bakgrunnsfarge: brun;
Farge: Goldenrod;
Font-stil: kursiv;

Presedens.HTML -fil

Velkommen til Linuxhint.com

Det beste nettstedet for å lese artikler av høy kvalitet

Ovennevnte kode bestemmer tre stiler Utgangen vil bekrefte at den inline CSS har høyeste forrang:

Fordeler

1. Det sparer mye tid mens vi utvikler hvilken som helst webside fordi vi kan bruke en CSS -fil i flere HTML -filer. Vi har for eksempel flere HTML -filer, så må vi takle utseendet deres, stilen osv. I stedet for å implementere stilen på hver HTML -fil hver for seg, er det bedre å importere CSS -filen i et hvilket som helst HTML -dokument du vil style.
2. Websider lastes raskt fordi CSS ikke bruker HTML -attributter igjen og igjen i stedet for det oppretter bare en CSS -regel for en tag og implementerer den til alle forekomster i HTML -filen.
3. CSS gir enkelt vedlikehold, da vi kan håndtere det i en enkelt fil. Anta at vi har ti avsnitt i et dokument, og vi ønsker å endre stilen deres. I stedet for å gjøre det ti ganger, kan vi gjøre det en gang i CSS -filen, og den vil bli brukt på alle de ti forekomstene av

   element.

4. CSS gir kompatibilitet. Dette betyr at den er kompatibel med flere enheter.

Konklusjon

CSS er et designspråk som bygger attraktive websider. Den brukes til å lage stiler og tilpasse HTML -elementer tilgjengelig på en webside. Det forbedrer nettstedets hastighet og gir enkel tilpasning av enhver webside.

I dette innlegget vil du vite hva som er CSS, hvordan du bruker CSS, og hva er de viktigste fordelene med CSS. I tillegg vil du lære om de kaskaderende stilene Precedence Order.