Introduction to CSS Styling

Isku-dubaridka CSS

CSS (Cascading Style Sheets) waxaa loo isticmaalaa in lagu qeexo sida walxaha HTML loogu soo bandhigayo. Waxay xakameysaa midabka, farta, cabbirka, booska, iyo dhinacyo kale oo badan oo muuqaalka ah.

Sintaksiska CSS

Qaanuunka CSS wuxuu ka kooban yahay xulasho iyo block-ga ku dhawaaqidda:


selector {
  property: value;
}

Xulashada waxay tilmaamaysaa walxaha HTML ee aad rabto inaad habayso. Hantida waa sifo CSS ah (sida midabka, cabbirka farta, iwm), qiimuhuna wuxuu qeexayaa qiimaha hantida.

Tusaale

Tusaalahan, waxaan ku habayn doonnaa dhammaan walxaha <p> si ay u yeeshaan midab buluug ah iyo cabbirka farta oo ah 16 pixels:


p {
  color: blue;
  font-size: 16px;
}

Ku darista CSS

CSS waxaa lagu dari karaa HTML saddex siyaabood:

  • Inline: Adigoo isticmaalaya sifooyinka qaabka gudaha walxaha HTML.
  • Internal: Adigoo isticmaalaya sheyga <style> ee ku dhex jira qaybta <head>.
  • External: Adigoo isticmaalaya faylal CSS oo dibadda ah.

Tusaale - Inline CSS

Halkan waxaa ah tusaale sida loo isticmaalo CSS-ta tooska ah:


<p style="color: green;">Qoraalkan wuxuu noqon doonaa midab cagaaran.</p>

Tusaale - Internal CSS


<head>
  <style>
    p {
      color: purple;
    }
  </style>
</head>
<body>
  <p>Qoraalkan wuxuu noqon doonaa midab guduudan.</p>
</body>

Tusaale - External CSS

Faylka CSS (tusaale ahaan, styles.css):


p {
  color: orange;
}

HTML:


<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>Qoraalkan wuxuu noqon doonaa midab oranji.</p>
</body>

Muhiimadda

CSS waxay awood kuu siinaysaa inaad si gooni ah uga ilaaliso waxyaabaha ku jira (HTML) iyo qaabka (CSS), taasoo ka dhigaysa mid sahlan in la maareeyo oo la cusboonaysiiyo muuqaalkaaga.