CSS står for “Kaskaderende stilark”. Det er et språk som brukes til å definere presentasjonen av websider. Det brukes hovedsakelig til å strukturere og style HTML -sidene, for eksempel å justere skriftstørrelse, elementgrense, posisjon og mange flere. Mer spesifikt er CSS en viktig del av webutviklingen som gjør websider attraktive og brukervennlige.

Dette innlegget vil diskutere det grunnleggende om CSS og dets bruk.

Hva er CSS brukt til?

CSS brukes til å spesifisere utformingen og stilen på websider. Den kontrollerer stylingen av en webside ved hjelp av mange CSS -egenskaper.

Typer CSS

Følgende tre typer CSS er:

• Inline CSS
• Ekstern CSS
• Innebygd CSS

Hva er inline CSS?

I HTML er en inline CSS innebygd direkte med elementet ved hjelp av "stil" Egenskap. Det brukes til å justere unik styling til et bestemt element.

Eksempel
Eksemplet nedenfor viser en HTML -side som bruker en inline CSS på "

”Element:

Linuxhint

Her er forklaringen på de ovennevnte CSS-egenskapene i "stil" Egenskap:

• “farge”Definerer skriftfargen.
• “Font-familie”Bruker skriftstilen.
• “Tekstalign”Angir tekstjusteringen i midten, venstre eller høyre side.
• “skriftstørrelse”Bestemmer størrelsen på elementets skrift.

Produksjon

Hva er innebygd CSS?

Når CSS -egenskapene er erklært i "”Element i HTML -dokumentet, denne typen CSS blir referert til som innebygd CSS.

Eksempel
I det oppgitte eksemplet har vi innebygd CSS i HTML:

Linuxhint

Det kan observeres at vi har tilgang til HTML “

”Element med tagnavn og bruk farge, font-familie, tekstjustering og fontstørrelse CSS-egenskaper, som diskutert tidligere.

Produksjon

Hva er ekstern CSS?

Det eksterne stilarket refererer til det eksterne CSS, som er skrevet i en egen fil. Denne CSS -filen kobles deretter til HTML -filen ved å bruke "”Element i hodeseksjonen.

Eksempel
Først må du opprette en HTML -fil og spesifisere "”Element sammen med“ Rel ”og“ Href ”attributter. “rel”Attributt spesifiser forholdet mellom HTML og det koblede dokumentet, og“href”Attributt brukes til å definere filkilden:

Linuxhint

CSS
Legg til kodebiten nedenfor i “Stilen.CSS ”-fil:

H1
Farge: Darkred;
Font-family: Fantasy;
tekst-align: sentrum;
Fontstørrelse: 60px;

Produksjon

Hva er CSS -velgere?

HTML -elementene du vil stil kan velges ved å bruke en CSS -velger. Noen av de hovedsakelig utnyttede flere velgerne i CSS er listet opp nedenfor:

• Enkle velger
• Pseudoklasse-utvalgere
• Attributt velgere
• Combinator Selectors
• Pseudo-elementer velger

La oss ta et eksempel på noen velger for en bedre forståelse.

Eksempel: Hvordan bruke enkle CSS -velgere?
De enkle velgerne velger elementene basert på ID, navn eller klasse. Kodeblokkene nedenfor viser eksemplet med enkle velgere:

• Legg til en "”Element med klassen“eske”.
• Legg så til "

  ”Element inne i“ ”:

Linuxhint

CSS ID -velger
ID -velgeren refererer til “id”Attributt til et element. I CSS, “#”Symbol er skrevet for å velge elementet etter ID.

Stil "overskrift" id

#overskrift
Farge: Darkred;
Font-family: Fantasy;
Fontstørrelse: 60px;

CSS Class Selector
CSS -klasselektoren velger elementene som har spesielle “klasse" attributter. I CSS får klassen tilgang til ".”Symbol før klassenavnet.

Stil "boks" -klasse

.eske
Bredde: 300px;
Grense: 5px Solid RGB (214, 214, 214);
Margin: Auto;
tekst-align: sentrum;
bakgrunnsfarge: RGB (255, 227, 218);

“.eske”Brukes til å få tilgang til“eske”Klasse og tilordne følgende egenskaper:

• “bredde”Justerer elementets bredde.
• “grense”Eiendom brukes til å legge til en grense rundt elementet.
• “margin”Genererer plass rundt elementet.
• “Tekstalign”Angir tekstens justering.
• “bakgrunnsfarge”Angir bakgrunnsfargen.

Produksjon

Det var alt det grunnleggende i CSS.

Konklusjon

CSS eller Cascading Style Sheet beskriver utseendet til et HTML -dokument. Det gir hundrevis av stylingegenskaper for HTML -elementer som kan brukes ved hjelp av inline CSS, innebygd CSS og ekstern CSS. I CSS er HTML -elementet valgt av forskjellige CSS -velgere, for eksempel ID -velgeren, klassevelgeren og så videre. Dette innlegget har demonstrert hva CSS brukes til.