Lær det grunnleggende om CSS på ett minutt

CSS står for Cascading Style Sheet. CSS spesifiserer hvordan HTML -elementer skal vises på skjermen. Med andre ord, CSS beskriver presentasjonen av websider. Det gir forskjellige stylingegenskaper til HTML-elementene, for eksempel bakgrunnsfarge, fontstil, farge og mange flere. Det lar også en spesifisere hvordan websiden ser ut på forskjellige skjermstørrelser.

Denne bloggen handler om:

• Hvordan definere CSS -egenskaper?
• Hva er typene CSS -velgere?
• Ulike måter å definere CSS -egenskaper på
• Hvordan bruke inline CSS?
• Hvordan bruke et innebygd stilark?
• Hvordan bruke et eksternt stilark?

Hvordan definere CSS -egenskaper?

For å definere CSS -egenskaper for HTML -elementene, kan følgende syntaks brukes:

velger
Eiendomsverdi;
Eiendomsverdi;

Her:

• Den første komponenten i en CSS -regel er en CSS “velger”. Selgeren spesifiserer hvilke HTML -elementer som skal velges for å bruke CSS -egenskaper.
• Innenfor kroppen er egenskapene definert med sine respektive verdier.

Hva er typene CSS -velgere?

Velgerne er av tre typer som er definert nedenfor:

Elementvelger
Element CSS -velger brukes til å bruke CSS -egenskapene på elementene med spesifikke tagnavn:

H1
Farge: blå;

I eksemplet ovenfor, "H1”Er overskriftselementet.

Klassevelger
Klassevelgeren velger alle elementene som tilhører den nevnte klassen og bruker deretter de ekstra CSS -egenskapene for dem:

.hovedinnhold
Bredde: 300px

I henhold til den gitte koden vil breddeegenskapen bli brukt på elementet som har klassenavnet ".hovedinnhold”.

ID -velger
ID -velger velger et bestemt element basert på IDen:

#Para
tekst-align: sentrum;

Merk: I eksemplene ovenfor, "farge”,“bredde”, Og“Tekstalign”Er egenskapene.

Hvordan bruke inline CSS?

Inline CSS refererer til CSS når de brukes direkte på HTML -elementene våre. For å gjøre dette, bruk "stil”Attributt i elementets åpningsmerke og inkludere egenskaper.

Se på det gitte eksemplet:

HEI VERDEN!

Produksjon

Hvordan bruke innebygd stilark?

For å legge inn et CSS -stilark i HTML -filen, bruk "”Element inne i hodeseksjonen for å spesifisere egenskapene som følger:

Produksjon

Hvordan bruke et eksternt stilark?

Hvis prosjektet inneholder flere filer, er det bedre å lage et eksternt CSS -ark med utvidelsen ".CSS”. Bruk det deretter i prosjektet ved å legge til en lenke til det eksterne CSS -arket i HTML -filene.

For eksempel er elementet gitt i hodeseksjonen i HTML -filen som denne:

Innenfor det eksterne stilarket, legg til koden:

P
Font-størrelse: 30px;
Farge: lilla;
Fontvekt: fet;
tekst-align: sentrum;

Ovennevnte kode vises som gitt nedenfor:

Det handlet om det grunnleggende om CSS.

Konklusjon

Tre måter å definere stylingegenskaper til HTML -elementene er inline CSS, interne CSS og eksterne CSS. For å bruke stylingegenskaper på elementene, kan du bruke velgerne, for eksempel elementvalgere, klasseselger og ID -utvalgere. Spesifiser deretter egenskapene med deres verdier i de krøllete parentesene til utvalget. Denne bloggen har diskutert det grunnleggende om CSS med eksempler.