CSS Essentials: Decorating and Structuring the Modern Web

1. Hordhac: Waa Maxay CSS?

CSS waa ereyga kooban ee Cascading Style Sheets, waxaana lagu qeexaa sida walxaha HTML ay u muuqdaan marka lagu soo bandhigayo bogga webka. Waa luuqad loo adeegsado in lagu kala hago midabka, font-ka, meel dhigga, cabbirka, margin-ka, borders, iyo dhammaan qaybaha la xiriira qurxinta iyo qaabaynta webka.

Tusaale:

<p style="color: blue;">Qoraalkan waa buluug.</p>

Tani waa hal tusaale oo muujinaya sida CSS loo adeegsan karo si loo qurxiyo walxaha HTML. Laakiin CSS waxay leedahay awood aad uga badan tan.

2. Taariikhda CSS

1996: Bilowgii CSS

Håkon Wium Lie oo ahaa cilmi-bare ka tirsan W3C ayaa soo jeediyay fikradda CSS si loo xakameeyo qurxinta bogagga HTML.
Ka hor CSS, qurxinta HTML waxaa lagu sameyn jiray iyada oo la adeegsanayo attributes gudaha HTML sida <font>, taasoo keentay koodh wasakh ah oo la akhrin karin.

Horumarka:

CSS1 (1996): Noocii ugu horreeyay, wuxuu taageeray midabyo, fonts, iyo layout-yada aasaasiga ah.
CSS2 (1998): Waxaa lagu daray support for positioning (absolute, relative), media types, iyo selectors horumarsan.
CSS3 (2011-iyo wixii ka dambeeyay): Waxaa lagu soo bandhigay qaybo (modules) kala duwan sida Flexbox, Grid, Animations, Media Queries, iwm. CSS3 waa tiirka quruxda bogagga maanta la arko.

3. Sida CSS ula shaqeyso HTML

HTML waxay dhistaa qaab-dhismeedka bogga (sida laf-dhabar), halka CSS ay bixiso muuqaalka iyo qaabka.

Tusaale:

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: darkgreen;
      font-size: 36px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Ku soo dhawoow boggayga</h1>
</body>
</html>

4. Noocyada CSS

4.1 Inline CSS

Waxaa lagu daro styles gudaha element-ka HTML.
Tusaale:

<p style="color: red;">Tani waa inline CSS.</p>

Faa’iido: Degdeg ah, laakiin adag in la xakameeyo markay bogga weynaado.

4.2 Internal CSS

Waxaa lagu qoray gudaha <style> tag ee <head> qaybta HTML.
Tusaale:

<head>
  <style>
    body {
      background-color: lightgrey;
    }
  </style>
</head>

4.3 External CSS

Waxaa lagu qoray file gaar ah (.css), kadibna lagu xiro HTML-ka.
Tusaale:

<link rel="stylesheet" href="style.css">

Faylka style.css wuxuu ku jiri karaa:

body {
  background-color: white;
  font-family: Arial, sans-serif;
}

Faa’iidooyinka External CSS:

Koodh nadiif ah oo la maamuli karo
Bogag badan ayaa wada isticmaali kara hal stylesheet
Sahlan in la cusbooneysiiyo naqshadda

5. Faa’iidooyinka CSS

Kala soocid muuqaal iyo nuxur: HTML ayaa qaabilsan nuxurka, halka CSS u xil saaran yahay qurxinta.
Bog degdeg u shaqeeya: Maadaama CSS la keydiyo (cache), waxay ka dhigtay webka mid dhakhso ah.
Taageerada qalab badan: CSS waxay u suurtagelisaa bogagga inay la jaanqaadaan shaashado kala duwan, laga bilaabo telefoon ilaa kombuyuutar weyn.
Responsive Design: CSS waxaa lagu adeegsadaa media queries si boggu ugu muuqdo si habboon aalad kasta.

6. Qaybo Muhiim ah oo CSS ah

6.1 Selectors

Waxay doortaan walxaha HTML ee la rabto in la qaabeeyo.
Tusaalooyin:

p {} → dhammaan cutubyada <p>
.class-name {} → walxo leh class gaar ah
#id-name {} → walxo leh ID gaar ah

6.2 Properties iyo Values

Property: Waa astaanta la beddelayo (e.g., color, font-size).
Value: Waa qiimaha la siinayo (e.g., red, 16px).

6.3 Box Model

Bogagga HTML walxahooda waxaa lagu cabiraa iyadoo la adeegsanayo:

Content (Qoraalka/sawirka)
Padding (Dhex dhexaadinta gudaha)
Border (Xariiqda ku wareegsan)
Margin (Bannaan banaanka walxaha)

7. Layouts Casri ah

7.1 Flexbox

Waa qaab sahlan oo lagu xakameeyo walxaha gudaha hal xariiq ama tiir.
Waxay bixisaa flexibility buuxda, waxayna yareyneysaa isticmaalka floats iyo positioning.

.container {
  display: flex;
  justify-content: space-between;
}

7.2 CSS Grid

Waxaa loo adeegsadaa in lagu sameeyo naqshado isku dhafan (2D layouts).
Waxay si fudud u xallisaa layout-yada adag ee hore dhibka u lahaa.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

8. Responsive Design iyo Media Queries

Waxaad u sameyn kartaa bog si uu ula jaanqaado shaashad kasta:

@media screen and (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

Tani waxay beddelaysaa midabka asalka haddii shaashadda ka yar tahay 768px — taasoo muhiim u ah mobilada.

9. Gunaanad

CSS waa luuqad muhiim ah oo aan laga maarmin marka la dhisayo bog internet. Waxay kuu oggolaanaysaa inaad boggaaga ka dhigto mid muuqaal qurxoon leh, la jaan qaadi kara qalab kasta, isla markaana la maamuli karo si habboon.

Haddii HTML yahay lafta bogga, CSS waa maqaarka iyo muuqaalka.

Talo: Sidee Loogu Bilaabaa CSS?

Ku tijaabi HTML + CSS gudaha CodePen.io ama JSFiddle.net.
Baro aasaaska selectors, properties, iyo values.
Ku ciyaar Flexbox iyo CSS Grid.
Qaado koorsooyin bilaash ah sida:

freeCodeCamp
W3Schools CSS Tutorial

Hayaan Tech