CSS (Cascading Style Sheet) kuvaa HTML-elementtejä, jotka näytetään näyttö, paperi , tai sisään muut tiedotusvälineet . Se säästää paljon aikaa. Se ohjaa useiden verkkosivujen asettelua kerralla. Se asettaa font-size, font-family, väri, taustaväri sivulla.

Sen avulla voimme lisätä tehosteita tai animaatioita verkkosivustolle. Käytämme CSS näyttää animaatioita Kuten painikkeet, tehosteet, kuormaajat tai spinnerit , ja myös animoidut taustat .

Käyttämättä CSS , sivusto ei näytä houkuttelevalta. On 3 tyyppisiä CSS jotka ovat alla:

• Sisäänrakennettu CSS
• Sisäinen/ upotettu CSS
• Ulkoinen CSS

1. Sisäinen CSS

Sisäinen CSS on -tunnisteen osio HTML asiakirja. Tämä CSS-tyyli on tehokas tapa muotoilla yksittäisiä sivuja. CSS-tyylin käyttäminen useilla verkkosivuilla on aikaa vievää, koska vaadimme tyyli jokaisella verkkosivulla.

Voimme käyttää sisäistä CSS:ää seuraavien vaiheiden avulla:

1. Avaa ensin HTML sivu ja etsi

2. Laita seuraava koodi koodin perään

3. Lisää säännöt CSS:stä uudella rivillä.

Esimerkki:

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

4. Sulje tyylitunniste.

Sisäisen CSS:n lisäämisen jälkeen koko HTML-tiedosto näyttää tältä:

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

Voimme käyttää myös valitsimia (luokka ja henkilöllisyystodistus) tyylisivulla.

Esimerkki:

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

Sisäisen CSS:n plussat

Sisäinen CSSei voi lähettää useita tiedostoja, kun lisäämme koodin HTML-sivulle.

Sisäisen CSS:n miinukset:

• Koodin lisääminen HTML asiakirja vähentää sivun koko ja latausaika verkkosivulta.

2. Ulkoinen CSS

Ulkoisessa CSS:ssä linkitämme verkkosivut ulkoiseen .css tiedosto. Sen on luonut tekstieditori . CSS on tehokkaampi tapa muotoilla verkkosivustoa. Muokkaamalla .css tiedostoa, voimme muuttaa koko sivustoa kerralla.

Jos haluat käyttää ulkoista CSS:ää, noudata alla olevia ohjeita:

1. Luo uusi .css tiedosto kanssa tekstieditori , ja lisää CSS Style Sheet säännöt myös.

Esimerkiksi:

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

2. Lisää viittaus ulkoiseen .css tiedosto heti perään -tunnisteen osio HTML-arkki :

Ulkoisen CSS:n plussat:

• Tiedostoillamme on selkeämpi rakenne ja pienempi koko.
• Käytämme samaa .css tiedosto useille verkkosivuille ulkoisessa CSS:ssä.

Ulkoisen CSS:n miinukset:

• Sivuja ei voida toimittaa oikein ennen kuin ulkoinen CSS on ladattu.
• Ulkoisessa CSS:ssä useiden CSS-tiedostojen lataaminen voi pidentää verkkosivuston latausaikaa.

3. Sisäinen CSS

Sisäistä CSS:ää käytetään tietyn tyylin luomiseen HTML elementti. Lisää tyyli attribuutti jokaiselle HTML-tunnisteelle käyttämättä valitsimia. Verkkosivuston hallinta voi olla vaikeaa, jos käytämme vain inline CSS . Kuitenkin Inline CSS HTML:ssä on hyödyllinen joissakin tilanteissa. Meillä ei ole pääsyä CSS-tiedostot tai soveltaa tyylejä elementtiin.

Seuraavassa esimerkissä olemme käyttäneet sisäistä CSS:ää

normaaleja muotoja