Introduction to CSS Styling

Habaynta Qoraalka ee CSS

CSS waxay bixisaa habab badan oo lagu habeeyo qoraalka HTML, sida midabka, cabirka, foomka, iyo wax ka badan. Casharkan, waxaan diiradda saari doonaa saddex ka mid ah guryaha ugu muhiimsan: color, font-size, iyo font-family.

Midabka Qoraalka (color)

Guryaha color wuxuu kuu ogolaanayaa inaad beddesho midabka qoraalka. Waxaad isticmaali kartaa magacyo midab caadi ah (sida 'red', 'blue', 'green'), qiimayaasha hexadecimal (sida '#FF0000' oo u dhiganta casaan), ama qiimayaasha RGB (sida 'rgb(255, 0, 0)' oo sidoo kale u dhiganta casaan).


p {
  color: blue;
}

h1 {
color: #00FF00; /* Cagaar */
}


span {
color: rgb(255, 165, 0); /* Liimi */
}

Tusaalahan, dhammaan qoraalka ku jira qaybta <p> wuxuu noqon doonaa buluug, cinwaanka <h1> wuxuu noqon doonaa cagaar, qoraalka ku jira <span> wuxuu noqon doonaa liimi.

Cabbirka Qoraalka (font-size)

Guryaha font-size wuxuu xakameynayaa cabbirka qoraalka. Waxaad ku qeexi kartaa cabbirka pixels (px), ems (em), ama boqolkiiba (%).


h2 {
  font-size: 20px;
}

div {
font-size: 1.2em; /* 1.2 jeer cabbirka caadiga ah */
}


body {
font-size: 100%; /* Cabbirka caadiga ah */
}

Tusaalahan, cinwaanka <h2> wuxuu yeelan doonaa cabbir 20 pixels ah, qoraalka ku jira qaybta <div> wuxuu noqon doonaa 1.2 jeer cabbirka caadiga ah, cabbirka qoraalka guud ee jidhka (<body>) wuxuu noqon doonaa cabbirka caadiga ah.

Foomka Qoraalka (font-family)

Guryaha font-family wuxuu qeexayaa foomka loo isticmaali doono qoraalka. Waxaad dooran kartaa dhowr foom, haddii foomka ugu horreeya uusan diyaar ahayn, biraawsarku wuxuu isku dayi doonaa kan ku xiga liiska.


p {
  font-family: "Arial", sans-serif;
}

h3 {
font-family: "Times New Roman", serif;
}

Tusaalahan, qoraalka ku jira qaybta <p> wuxuu isticmaali doonaa foomka Arial haddii uu diyaar yahay, haddii kale wuxuu isticmaali doonaa foomka sans-serif caadiga ah. Cinwaanka <h3> wuxuu isticmaali doonaa foomka Times New Roman haddii uu diyaar yahay, haddii kale wuxuu isticmaali doonaa foomka serif caadiga ah.

Isku day inaad ku celceliso adigoo isticmaalaya guryahan si aad u aragto sida ay u saameeyaan muuqaalka qoraalkaaga.