CSS Basics

85min
Waa Maxay CSS ?
CSS waa language loogu talgalay in lagu style gareeyo html documents .
CSS wxuu. sheegayaa sidee elements-ka HTML-ka ay usoo muuqanayaan.
CSS Syntax
CSS wuxu rule-kiisa wuxu ka koobnayhay selector iyo declarion block.


css somali selector
﻿
Selector wuxu tilmaamaya elementga HTML-ka ee aad rabto in aad style- gareyso.
declaration block wuxu
u ka koobnan karaa hal ama 2 desclaration oo loo dhaxeysiiyay semicolon.
declarion walba wuxuu ka koobanyhay css property name iyo value oo loo dhexeysiiyay colon : .
css declarion badan waxaa loo dhaxeysiiyay semicolon ; , sidoo declarion blocks-na waxaa lagu hareereeyaa curly braces }.
﻿
Tusaale
CSS
p {
  color: red;
  text-align: center;
}
p {
  color: red;
  text-align: center;
}
﻿
﻿
Sharaxaada Example-ka
﻿p waa selector-ka marka lo joogo css (wuxu tilmaamayaa elementga aan rabno in aan wax k abadalno).
﻿color waa property , red waa property value 
﻿text-align waa property, center waa property value.
﻿
CSS Selectors
CSS Selectors waxaa loo isticmaalaa in lagu raadiyo elementga ad rabto in aad style gareyso .
waxaan u qaybinaynaa selectors-ka ilaa 5  qaybood.
 Simple Selector  (elements kuso qabo magaciisa ama id ama class)
Combinator Selector (elemntga kuso qabo xiriir gaar ah oo ka dhexeeya elements-ka)
﻿Pseudo-class selectors (emenetga kuso qabo ayado loo fiirninyo xaalda gaar ah)
﻿Pseudo-elements selectors (soo qabo sidoo kale style garey qeyb kamid ah elementga)
﻿Attribute selectors (so qaboo elemnts-ka adihoo u fiirinayaa attribute ama attribute value)
﻿
The CSS element Selector
Element selector waxaa uu soo qabanaya HTML element ayadoo loo firinyo elementga magaciisa .

Tusaale
CSS
p {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}
﻿
﻿
The CSS id Selector

Id selector waxaa loo isticmaala id attribute-ka HTML-ka element si loogu soo qabto element gaar ah .
elementga id-giisu waa unique oo pag-ka dhan waxaa loo ogolyhy in uu lahaado hall id.
si aad uso qabato element adigo u fiirinya id-giisa qor hash #  character  oo la raaciyay id-ga elementga.
Tusaale
CSS
#para1 {
  text-align: center;
  color: red;
}
#para1 {
  text-align: center;
  color: red;
}
﻿
﻿
The CSS class Selector

class selector wuxuu soo qabanaa HTML elements ayadoo loo fiirino attribute class gaar ah .
si aad usoo qabato class gaar ah qor . dot  oo la raaciyay class-ka magaciisa 
Tusaale
CSS
.center {
  text-align: center;
  color: red;
}
.center {
  text-align: center;
  color: red;
}
﻿
sidoo kale waxaad tilmaami kartaa element gaar ah oo leh claas gaar ah si uu u saameeyo elemetgaais kaliya .
Tusaale
CSS
p.center {
  text-align: center;
  color: red;
}
p.center {
  text-align: center;
  color: red;
}
﻿
HTML elements-ka waxaa loo refer gareyn karaa wax kabadan hal class 
HTML
<p class="center large">This paragraph refers to two classes.</p>

<p class="center large">This paragraph refers to two classes.</p>
﻿
The CSS Universal Selector
universal selector wuxuu soo qabanaa dhamamn elemenst-ka kujira htmlk

Tusaale
CSS
* {
  text-align: center;
  color: blue;
}
* {
  text-align: center;
  color: blue;
}
﻿
﻿
The CSS Grouping Selector

group selector-ka wwaxaa. lgu soo qabanayaa dhamman HTML elements-ka isku style-ka ah .
﻿
Fiiri css element-kan soo socda 
CSS
h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}
h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}
﻿
﻿
Full Example
HTML
<!DOCTYPE html>
<html>
	<head>
		<title>HTML Semantic Elements</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#postone {
				color: aquamarine;
				background-color: black;
			}

			#posttwo {
				color: skyblue;
				background-color: #b20bb2;
			}
			#postthree {
				color: white;
				background-color: forestgreen;
			}
			h1.center {
				text-align: center;
			}
			/* h1 {
				text-align: center;
			} */
			p,
			h1 {
				padding: 20px;
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<article id="postone">
			<h1 class="center">Post one</h1>
			<p>
				Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos officiis
				et sit consequuntur ab quidem distinctio dicta repellendus qui alias?
			</p>
		</article>

		<article id="posttwo">
			<h1 class="center">Post two</h1>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque
				fuga nesciunt magnam eos alias, vero perspiciatis eligendi voluptas
				quasi esse?
			</p>
		</article>

		<article id="postthree">
			<h1 class="center">Post three</h1>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque
				fuga nesciunt magnam eos alias, vero perspiciatis eligendi voluptas
				quasi esse?
			</p>
		</article>
		<h2 class="center">Teams</h2>
		<h2 class="center">about us</h2>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Semantic Elements</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#postone {
				color: aquamarine;
				background-color: black;
			}

			#posttwo {
				color: skyblue;
				background-color: #b20bb2;
			}
			#postthree {
				color: white;
				background-color: forestgreen;
			}
			h1.center {
				text-align: center;
			}
			/* h1 {
				text-align: center;
			} */
			p,
			h1 {
				padding: 20px;
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<article id="postone">
			<h1 class="center">Post one</h1>
			<p>
				Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos officiis
				et sit consequuntur ab quidem distinctio dicta repellendus qui alias?
			</p>
		</article>

		<article id="posttwo">
			<h1 class="center">Post two</h1>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque
				fuga nesciunt magnam eos alias, vero perspiciatis eligendi voluptas
				quasi esse?
			</p>
		</article>

		<article id="postthree">
			<h1 class="center">Post three</h1>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque
				fuga nesciunt magnam eos alias, vero perspiciatis eligendi voluptas
				quasi esse?
			</p>
		</article>
		<h2 class="center">Teams</h2>
		<h2 class="center">about us</h2>
	</body>
</html>
﻿
﻿
Sidee CSS Ugu Soo Daraysaa Web-ka ?
Marki Browser-ka uu aqrinayo stylesheet-ka , wuxuu HTML documentga u format gareeyaa information-ka uu ka helay stylesheet file-ka.
3 Way Oo Aad CSS Ugu Soo Dari Karto Page-ka.
3 way ayaa jirta oo CSS ugu soo dari karto website-ka  :
External CSS
Internal CSS
Inline CSS
External CSS
External CSS stylesheet , muuuqaalka website waxaad ka badli kartaa adiga oo isticmaalaya hal file .
HTML document walba waa in uu ku jiraa refrence loo tix raacayo file-ka style sheetka.
Tusaale
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
﻿
External stylesheet-ka waxaad ku qori kartaa text editor walba oo aad isticmaali karto marka aad save gareynaysana waa in aad ku save gareynaysaa extention-ka .css .
External .css file-ka waa in uusan ka koobnaanin wax HTML tag ah.
sidan ayuu u muuqanayaa "mystyle.css"
CSS
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}
﻿
Internal CSS
Internal stylesheet waxaa loo isticmaali karaa marki hal page uu leeyhay design asiga u gaar ah.
internal stylesheet waxaa lagu qoraaa <style> tag elementiskiisa ee kujirat <head> ee page-ka.
Tusaale
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
﻿
Inline CSS

inline stylesheet waxaa loo adeegsadaa markii aad rabto in aad hal element u yeesho style gaar ah .
si aad u isticmaasho inline style element-ga a rabto in aad style gareyso ku dar style attribute .
﻿
style attribute wuxu ka koobnan karaa style walba oo aad doonayso oo css property kamid ah.
Tusaale
HTML
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>
﻿
Cascading Order

styele-kee ayaa la'isticmalaayaa markii dhowr style kala duwan aad kuso darto page-ka.
Dhamman styles-ka aad ku qeexdo waxay kala lahaan doona awoodo kala duwan oo waxaan ula jeeda waxay lahaan doonan periority kala duwan oo marka mid ayaa mudaan yeelan doona.
sidan ayayna mudanan ukala lahaan doonan 
﻿
Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default
so inline stylesheet-ka wuxu leeyhay mudnaanta 1aad marka lo eego inta kale.
﻿
CSS Colors
Colors-ka waxaa lagu isticmaala color names hore loo sameeyya or RGB, HEX, HSL, RGBA, HSLA values.
CSS Color Names 
marka CSS la joogo colors-ka waxaad ku qeexi kartaa magcyada horey loo sameeyay sida .
somali css colors
﻿
﻿
HTML
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body>
</html>
﻿
CSS Background Color

waxaad badali kartaa backround element kujira pgae-ka HTML-ka
HTML
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
﻿
﻿
CSS Text Color

waxaad badalli kartaa text color-ka element kujira pgae-ka HTML-ka .
HTML
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
﻿
﻿
CSS Border Color


waxaad badalli kartaa border-ka ama hareeraha element kujira pgae-ka HTML-ka .
HTML
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
﻿
CSS Color Values

Marka CSS la  joogo colors-ka waxaad ku qeexi kartaa adiga oo isticmalaalya RGB values, HEX values, HSL values, RGBA values, and HSLA values:
sida color-ka tomato 
css somali colors
﻿
CSS RGB Colors
RGB color wuxuu u taaganyhay RED, GREEN, and BLUE light sources.
RGB Value

CSS colors-ka RGB waxa loo isticmaala qaacidadan 
rgb(red, green, blue)
parameter walba (red,green, iyo blue) waxaa u kaoobnayhay color ka bilowda 0 kuna dhamada 255.
Tusaale rgb(255, 0, 0) waxaa loo soo bandhigayaa red ahaan maxa yeelay red ayaa lga dhigay numberka ugu sareeya halka kuwa kalena la siiyay 0 .
si aad usoo bandhigto color madow ah waxaad dhamaan parameters-ka ka dhigaysaa 0 tusale rgb(0,0,0)  .
si aad usoo bandhigto color white ah dhmaman ;arametrs-ka waxaad ka dhigaysaa 255 tusaale rgb(255, 255, 255).
Tusaale ku saabsan RGB Colors-ka
HTML
<!DOCTYPE html>
<html>
<body>

<h1>Specify colors using RGB values</h1>

<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h1>Specify colors using RGB values</h1>

<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>

</body>
</html>
﻿


Tusaale kale 
HTML
<!DOCTYPE html>
<html>
<body>

<h1>Shades of gray</h1>

<p>By using equal values for red, green, and blue, you will get different shades of gray:</p>

<h2 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h2>
<h2 style="background-color:rgb(90, 90, 90);">rgb(90, 90, 90)</h2>
<h2 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h2>
<h2 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h2>
<h2 style="background-color:rgb(210, 210, 210);">rgb(210, 210, 210)</h2>
<h2 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h2>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h1>Shades of gray</h1>

<p>By using equal values for red, green, and blue, you will get different shades of gray:</p>

<h2 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h2>
<h2 style="background-color:rgb(90, 90, 90);">rgb(90, 90, 90)</h2>
<h2 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h2>
<h2 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h2>
<h2 style="background-color:rgb(210, 210, 210);">rgb(210, 210, 210)</h2>
<h2 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h2>

</body>
</html>
﻿
RGBA Value

RGBA waa extension lagu darayo RGB ayadoo la'isticmlaayo alpha channel - kaasi oo loogu talagalay in lagu qeexo opacity coolors-ka.
Opacity waxaa laga wadaa qaabka color-ka uu noqonayo qafiifnimadiisa .
RGB colors-ka waxaa loo qeexaa sidan 
rgba(red, green, blue, alpha)
alpha parameter-ka waa number u dhexeeya 0.0 oo ah (full transparent) iyo 1.0 (not transparent at all).
somali rgba colors 
﻿
Tusaale
HTML
<!DOCTYPE html>
<html>
<body>

<h1>Make transparent colors with RGBA</h1>

<h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
<h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2>

</body>
</html>



<!DOCTYPE html>
<html>
<body>

<h1>Make transparent colors with RGBA</h1>

<h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
<h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2>

</body>
</html>


﻿
CSS HEX Colors
hexadecimal colors-ka waxaa lgu qeexaa #RRGGBB  halka RR ay u taagnathay (red) , GG ay u taagnathay (green) BB -na ay u taaganathay blue.

somali hexa colors
﻿
somali hexa colors
﻿
CSS
body {
  background-color: #fc9; /* same as #ffcc99 */
}

h1 {
  color: #f0f; /* same as #ff00ff */
}

p {
  color: #b58; /* same as #bb5588 */
}
body {
  background-color: #fc9; /* same as #ffcc99 */
}

h1 {
  color: #f0f; /* same as #ff00ff */
}

p {
  color: #b58; /* same as #bb5588 */
}
﻿
CSS Backgrounds
CSS backround properties waxaa loogu talagalay in lagu isticmaal in lagu daro backround effect elements-ka .
cashirakn waxaan ku baran doonaa CSS backrounds-kaan soo oscda :
﻿
background-color
background-image
background-repeat
background-attachment
background-position
background (shorthand property)
CSS background-color

background-color   property waxaa lgu badlayaa backround color-ka elementga.
Tusaale
CSS
body {
  background-color: lightblue;
}
body {
  background-color: lightblue;
}
﻿
CSS background-image

CSS background-image waxaa loo isticmala in element aad backround uga dhigto sawir.
CSS
body {
  background-image: url("paper.gif");
}
body {
  background-image: url("paper.gif");
}
﻿

 CSS background-repeat

by deafult backround-image property wxuu soo celinayaa image-ka horizantally iyo vertically.
sawir qaar waxaa loo bahnayhay kaliya in lasoo celiyo horixontally ama verticlaly ama inadanba soo celininba .
x  waa horizontal oo waxay tarjumasyaa jiif ahaan 
y  waa vertical waxay ka tarjumaysaa joog ahaan

Tusaale
CSS
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
﻿
CSS background-repeat: no-repeat

si sawirka backround-ka aad uoso bandhigto hal jeer waxaad tsicmaali karta backround-repeat property .
CSS
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}
﻿
CSS background-position

background-position waxaa loo isticmalaa in aad ku sheegto position-ka uu sawirka kaso muuqan doono.
CSS
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}
﻿
CSS background - Shorthand property

si aad u yareyso code aad qoroyso waa dsoo koobi kartaa lines-ka adiga oo istimclaya wadada gaaban .
wadad dheer waa sidan :
CSS
body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}
body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}
﻿
waxaad usoo gaabin kartaa sidan :
CSS
body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}
﻿
CSS Borders
CSS borders-ka wuxu kuu souuro gelinayaa in wax ka dabasho  style, width, and color ee HTML elementga.
CSS Border Style

border-style waxaa loogy talagalay in aad ku sheegta nuuca border-ka uu noqonayo.
﻿
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
Tusaale
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>
﻿
CSS Border Width

border-width property waxaa loogu talaglay in aad ku sheegto cabirka border-ka 
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

p.five {
  border-style: double;
  border-width: 15px;
}

p.six {
  border-style: double;
  border-width: thick;
}
</style>
</head>
<body>

<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>

<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>

<p><b>Note:</b> The "border-width" property does not work if it is used alone. 
Always specify the "border-style" property to set the borders first.</p>

</body>
</html>



<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

p.five {
  border-style: double;
  border-width: 15px;
}

p.six {
  border-style: double;
  border-width: thick;
}
</style>
</head>
<body>

<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>

<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>

<p><b>Note:</b> The "border-width" property does not work if it is used alone. 
Always specify the "border-style" property to set the borders first.</p>

</body>
</html>


﻿

 
CSS Border Color

border-color property waxaa loogu talaglay in aad ku sheegto colorka border-ka
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
} 

p.three {
  border-style: dotted;
  border-color: blue;
} 
</style>
</head>
<body>

<h2>The border-color Property</h2>
<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>

<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>
</html>



<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
} 

p.three {
  border-style: dotted;
  border-color: blue;
} 
</style>
</head>
<body>

<h2>The border-color Property</h2>
<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>

<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>
</html>


﻿
CSS Border - Shorthand Property

sidaan horey usoo aragrany bacground proterty border-kan waxad u qori kartaa qaab gaaban .
border-width
border-style
border-color
CSS
p {
  border: 5px solid red;
}
p {
  border: 5px solid red;
}
﻿
﻿
CSS Rounded Borders

border-radius property  waxaa loo itsicmala in aad page-ka ku darto rounded borders elementga-ga.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  border: 2px solid red;
  padding: 5px;
}

p.round1 {
  border: 2px solid red;
  border-radius: 5px;
  padding: 5px;
}

p.round2 {
  border: 2px solid red;
  border-radius: 8px;
  padding: 5px;
}

p.round3 {
  border: 2px solid red;
  border-radius: 12px;
  padding: 5px;
}
</style>
</head>
<body>

<h2>The border-radius Property</h2>
<p>This property is used to add rounded borders to an element:</p>

<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>

</body>
</html>



<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  border: 2px solid red;
  padding: 5px;
}

p.round1 {
  border: 2px solid red;
  border-radius: 5px;
  padding: 5px;
}

p.round2 {
  border: 2px solid red;
  border-radius: 8px;
  padding: 5px;
}

p.round3 {
  border: 2px solid red;
  border-radius: 12px;
  padding: 5px;
}
</style>
</head>
<body>

<h2>The border-radius Property</h2>
<p>This property is used to add rounded borders to an element:</p>

<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>

</body>
</html>


﻿
﻿
JS
<!DOCTYPE html>
<html>
	<head>
		<title>HTML Semantic Elements</title>
		<link rel="stylesheet" href="mystyle.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.border {
				border: 1px solid rgb(229, 78, 32);
				border-radius: 10px;
				border-top-left-radius: 0;
			}
			.profile {
				width: 50px;
				height: 50px;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<img
			class="profile"
			src="https://images.unsplash.com/photo-1619895862022-09114b41f16f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8cHJvZmlsZSUyMHBpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"
			alt=""
		/>
		<p
			style="
				background-color: aquamarine;
				border-radius: 20px;
				border-bottom-left-radius: 0;
			"
		>
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis
			cumque repellendus eum quibusdam mollitia fugit nam dolore, facere dicta
			ratione harum voluptates quae? Hic doloribus eius perspiciatis fugit
			accusantium voluptatem!
		</p>
		<p class="border">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nostrum
			corrupti maiores laboriosam, ducimus pariatur aut dolore harum corporis
			beatae.
		</p>
		<p class="border">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nostrum
			corrupti maiores laboriosam, ducimus pariatur aut dolore harum corporis
			beatae.
		</p>
		<p class="border">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nostrum
			corrupti maiores laboriosam, ducimus pariatur aut dolore harum corporis
			beatae.
		</p>
		<p style="border: 1px dashed orange">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nostrum
			corrupti maiores laboriosam, ducimus pariatur aut dolore harum corporis
			beatae.
		</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Semantic Elements</title>
		<link rel="stylesheet" href="mystyle.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.border {
				border: 1px solid rgb(229, 78, 32);
				border-radius: 10px;
				border-top-left-radius: 0;
			}
			.profile {
				width: 50px;
				height: 50px;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<img
			class="profile"
			src="https://images.unsplash.com/photo-1619895862022-09114b41f16f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8cHJvZmlsZSUyMHBpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"
			alt=""
		/>
		<p
			style="
				background-color: aquamarine;
				border-radius: 20px;
				border-bottom-left-radius: 0;
			"
		>
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis
			cumque repellendus eum quibusdam mollitia fugit nam dolore, facere dicta
			ratione harum voluptates quae? Hic doloribus eius perspiciatis fugit
			accusantium voluptatem!
		</p>
		<p class="border">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nostrum
			corrupti maiores laboriosam, ducimus pariatur aut dolore harum corporis
			beatae.
		</p>
		<p class="border">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nostrum
			corrupti maiores laboriosam, ducimus pariatur aut dolore harum corporis
			beatae.
		</p>
		<p class="border">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nostrum
			corrupti maiores laboriosam, ducimus pariatur aut dolore harum corporis
			beatae.
		</p>
		<p style="border: 1px dashed orange">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nostrum
			corrupti maiores laboriosam, ducimus pariatur aut dolore harum corporis
			beatae.
		</p>
	</body>
</html>
﻿
CSS Margins

CSS margin property waxaa loo itsicmaala in space loogu sameeyo hareeraha element-ga.
, banaanka borders-ka elementga.
Marka aad CSS isticmaalaysid waxad haysataa full control oo aad ku maamulaysid margins-ka.waxaa jira properties aad ku maaraynaysid margin-ka si aad u maarayse dhamamn geeaha element-ga (top, right, bottom, and left).
Margin - Individual Sides

CSS waxa uu leeyahay properties oo aad ku maamuli karto geesaha elementga waliba si gaar ah .
margin-top
margin-right
margin-bottom
margin-left
﻿
Dhamman margin properties-ka waxay lahaan karaan values-kaan soo socda :

Margin - Shorthand Propertyauto - brwoser-ka ayaa xisaabin doona margin-ka.


length
 -wxaad u qeexeysaa margin adiga oo isticmaalaya px, pt, cm, etc.
%
 - waxaad margin-ka u qeeeysaa  qaab % oo ku koobanayhay elementga cabirkiisa .
inherit - waxaad u qeexeysaa in margin-ka uu ka dhaxlo parent element-ga.
Tusaale
CSS
p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}
p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}
﻿
Margin - Shorthand Property

Si aad usoo koobto code-ka waxa macquul ah in aad sheegto dhamman margin properties-ka hal property.margin properrty waa wadada gaaban ee ku qeexi karto propetries-ka :
margin-top
margin-right
margin-bottom
margin-left
wakan sida ay u shaqayso 
Hadii margin-ka uu leeyahy afar property margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px

Tusaale
CSS
p {
  margin: 25px 50px 75px 100px;
}
p {
  margin: 25px 50px 75px 100px;
}
﻿
Hadii margin-ka uu leeyhay 3 property :margin: 25px 50px 75px;

top margin is 25px
right and left margins are 50px
bottom margin is 75px
Tusaale
CSS
p {
  margin: 25px 50px 75px;
}
p {
  margin: 25px 50px 75px;
}
﻿
Hadii margin-ka uu leeyhay laba property values :margin: 25px 50px;
top and bottom margins are 25px
right and left margins are 50px
Tusaale
CSS
p {
  margin: 25px 50px;
}
p {
  margin: 25px 50px;
}
﻿
Haduu margin-ka leeyhay Hal property values :margin: 25px;
all four margins are 25px
Tusaale
CSS
p {
  margin: 25px;
}
p {
  margin: 25px;
}
﻿
The auto Value

margin property waad siin kartaa auto si uu u geeyo dhex bartamaha qaab horinzantally isga oo ku base gareynayo container-ka uu ku jiro.
Tusaale
CSS
div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
﻿
CSS Padding
Padding waxaa loo isticmaalaa in space aad ku geliso elementga gudihiisa .
css padding somali
﻿
CSS padding waxaa loo isticmaala in aad space ku geliso elementga dhexdiisa .
farqiga u dhexeeya isaga iyo margin ayaa ah in margin-ka loo isticmaalo in space aad ku siiso element-ga banaankiisa halka padding uu siinayo elementga gudihiisa.
Sidoo kale dhamman properties-ka uu qaato margin-ka yauu padding-ka qaataa waxaan sameyn doona tusaalihii hore oo kale.
CSS Height, Width and Max-width
CSS height iyo width properties waxa loo isticmaalaa in lagu badalo balaca iyo dhirirka element-ga .
CSS max-width waxaa loo isticmaala in lagu badalo cabirka balaca ugu sareeya ee uu gaari karo element-ga .

CSS height and width Values

height iyo width waxay lahaan karaan values-kan soo socda: 
auto
 - Kani waa default brawser-ka ayaa xisaabin doona balaca iyo dhirirka elementga.
length
 - waxaa lagu qeexaa  height/width in px, cm, etc.
%
 - waxaa lagu qeexaa height/width adiga oo isticmaalaya percentage.
initial
 - Sets the height/width to its default value
inherit
 - The height/width waxay dhirirka iyo balaca ka dhaxlayaan parent elemetga.
CSS height and width Examples
﻿
CSS
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}
﻿
Setting max-width
SS max-width waxaa loo isticmaala in lagu badalo cabirka balaca ugu sareeya ee uu gaari karo element-ga .
proplem-ka dhacaayo wuxuu yahay marki aad elemet siiso cabir 500px oo website-ka lagu fiiriyo shaashad ka yar 500px browserka wuxu si autmatic ah u gelinayaa horizontal scroll.
si aad ugu hortagto arinakaasi waxaad isticmaalaysaa max-width .
For Some Reason hadii aad wada isticmaasho width iyo max-width marwalba waxaa mudnaanta lahaan doono max-with , width waa la inkiri doona .
﻿
CSS
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}
﻿
The CSS Box Model
Marka CSS la joogo ereyga "box model" waxaa loo isticmaala marka aan ka hadlayno design-ka iyo layout-ka.
CSS box modal caadiyan waa box kaasi lagu wrap gareeyay every html element kaais oo ka kooban margins, borders, padding, and the actual content.
sawirkan hoose wuxuu sharxayaa qaabka uu u sameysanyhay box modal.

css box modal somali
﻿
Sharaxaad ku saabsan dhamman qaybaha oo ka koobanyahay box modal :

Content :  waa content-ga box ku jirta waa halka ay kasoo muuqanayaan images-ka iyo qoraalada. Padding : waa space-ka ku jira gudaha content-ga. 
Border : waa soodinta elementga.
Margin : waa space-ka element-ga banankiisa.
Box model wuxu kuu ogolaanayaa in aad in aad ku darto border soodinta elementga sidoo kalena in aad qeexdo space u dhexeeya elements-ka.
Tusaale
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>

<h2>Calculate the total width:</h2>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>

</body>
</html>






<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>

<h2>Calculate the total width:</h2>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>

</body>
</html>





﻿
 
Width and Height of an Element

Si aad u badasho ama aad si sax ah u sheegto element-ga dhirikiisa iyo balaciisa dhamman browsers-ka waxaa u baahantahay in aad fahanto sida uu u shaqeeyo box model-ka.

Important : Marki aad elementga siiso cabirka dhirirka iyo balaca adiga oo isticmaalaya CSS , kaliya waxaad cabir siisay content area .si aad u xisaabiso full size of element , waa in aad ku dartaa padding , margin iyo borders.
Tusaale
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>

<h2>Calculate the total width:</h2>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>

</body>
</html>



<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>

<h2>Calculate the total width:</h2>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>

</body>
</html>


﻿
﻿
Sidaan ayaa lo xisaabinayaa
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
﻿
cabirka guud ee balaca element-ga waxaa loo xisaabiyaa sida soo socota:
 
Total element width = width + left padding + right padding + left border + right border + left margin + right margin .

The total height of an element should be calculated like this: 

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin .
CSS Layout - The display Property
display property waa property-ga ugu muhiimsan ee aad isticmaalayso si aad u controosha layout.
The display Property

display Property wuxuu qeexayaa if/how elementga uu usoo muuqanayaa.

html element kaste wuxu leeyahy default value tasi oo ku xiran waa maxa type-ka elementga , default value-ga inta badan html elements waa block ama inline.
﻿
Block-level Elements
block-level elements-ka marwalba waxay ka bilowdaan new line wuxuuna qaadanayaa dhamman space-ka banaan.
Examples of block-level elements:


<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
Inline Elements

Inline Elements kama bilwodaan new line sido kale waxay qaatan kaliya space-ka loo baahnan karo.
Examples of inline elements:
<span>
<a>
<img>
Display: none;

display: none; waxaa inat badan loo isticmaalaa in jabvascript ayadoo la'isticmaalayo elemntga lagu qariyo ama lagu soo bandhigo.


Tusaalooyin ku saabsan display
HTML
<!DOCTYPE html>
<html>
	<head>
		<title>HTML Semantic Elements</title>

		<style>
			li {
				display: inline;
			}
			a {
				text-decoration: none;
				text-transform: uppercase;
			}
			.box {
				/* si box-yada ay isu dhinac tagaan waa in aan isticmaalna inline-block maxa yeelay div elements-ka by default waa block oo la macno ah in u qaadanyoo line dhan marka am suura galayspo in element kale aad soo garab istaajiso */
				display: inline-block;
				width: 30%;
				background-color: #f7f3f3;
				padding: 20px;
				margin-bottom: 10px;
				border-radius: 10px;
			}
			img {
				display: block;
				/* display auto ma shaqaynayso hadusan ahayn display block
				maxa yeelay image by default waa inline element so wa in aan u badalnaa block si uu dhexda u tago
				*/
				margin: auto;
			}
		</style>
	</head>
	<body>
		<!-- display inline -->
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Me</a></li>
		</ul>

		<!-- inline Block -->

		<div class="box">
			<h1>Heading Title</h1>
			<p>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
				exercitationem ab tenetur voluptas adipisci dolore vero libero corrupti
				quidem suscipit!
			</p>
		</div>
		<div class="box">
			<h1>Heading Title</h1>
			<p>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
				exercitationem ab tenetur voluptas adipisci dolore vero libero corrupti
				quidem suscipit!
			</p>
		</div>
		<div class="box">
			<h1>Heading Title</h1>
			<p>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
				exercitationem ab tenetur voluptas adipisci dolore vero libero corrupti
				quidem suscipit!
			</p>
		</div>

		<!-- block -->
		<img
			src="https://images.unsplash.com/photo-1602934445884-da0fa1c9d3b3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fGxvZ298ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60"
			alt="logo"
		/>
	</body>
</html>



<!DOCTYPE html>
<html>
	<head>
		<title>HTML Semantic Elements</title>

		<style>
			li {
				display: inline;
			}
			a {
				text-decoration: none;
				text-transform: uppercase;
			}
			.box {
				/* si box-yada ay isu dhinac tagaan waa in aan isticmaalna inline-block maxa yeelay div elements-ka by default waa block oo la macno ah in u qaadanyoo line dhan marka am suura galayspo in element kale aad soo garab istaajiso */
				display: inline-block;
				width: 30%;
				background-color: #f7f3f3;
				padding: 20px;
				margin-bottom: 10px;
				border-radius: 10px;
			}
			img {
				display: block;
				/* display auto ma shaqaynayso hadusan ahayn display block
				maxa yeelay image by default waa inline element so wa in aan u badalnaa block si uu dhexda u tago
				*/
				margin: auto;
			}
		</style>
	</head>
	<body>
		<!-- display inline -->
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Me</a></li>
		</ul>

		<!-- inline Block -->

		<div class="box">
			<h1>Heading Title</h1>
			<p>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
				exercitationem ab tenetur voluptas adipisci dolore vero libero corrupti
				quidem suscipit!
			</p>
		</div>
		<div class="box">
			<h1>Heading Title</h1>
			<p>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
				exercitationem ab tenetur voluptas adipisci dolore vero libero corrupti
				quidem suscipit!
			</p>
		</div>
		<div class="box">
			<h1>Heading Title</h1>
			<p>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
				exercitationem ab tenetur voluptas adipisci dolore vero libero corrupti
				quidem suscipit!
			</p>
		</div>

		<!-- block -->
		<img
			src="https://images.unsplash.com/photo-1602934445884-da0fa1c9d3b3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fGxvZ298ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60"
			alt="logo"
		/>
	</body>
</html>


﻿
CSS Layout - The position Property
position property waxaa loo isticmaalaa in lagu qeexo habka uu noqonayo position-ka element-ga la'isticmaalo sida (static, relative, fixed, absolute or sticky).
The position Property

waxaa jirta ilaa 5 qaab oo aad u itsicmaali karto position element-ga :
static
relative
fixed
absolute
sticky
kadib elements-ka ayaad u yeeleysaa posion adiga oo isticmaalaya top, bottom, left, and right properties.
Si walba ha'ahaate propetries-kaan ma shaqyanyaan ilaa aad ka set gareyso position property-ga.sidoo kale siyaabo kala duwan ayay u shaqeeyaan ayada oo ay ku xirantahay habka aad u set gareysay posiotion-ka.
position: static;

HTML elements-ka by default waa static.
Elements-ka position-kooda uu yahay static waxa saameyn ah kuma yeeshaan top, bottom, left, and right properties.

Element-ga uu position-kiisu yahay static looma qaabayn karo si special ah , marwalba waxay usoo muuqan doonan sida normal-ka caadiga ah ee web page-ka uso muuqanyo .




position: relative;
Element-ga position-kiisu uyu yahay position: relative;  waxaa loo qaabeeya si normal ah.
marka aad set gareyso top, right, bottom, and left properties wuxuu noqonayaa relatively-positioned element .
elementga wuxuu raacaya wayga normal-ka ah ee uu page-ka ku xusanyhay , kadib position-ka waxaa go'aaminaya value-ga aad siiso top, right, bottom, and left .element-ga ma saameyn doono elements-ka kale posiotion-kooda .
﻿
position: fixed;

Element-ga postion-kiisa laga dhigo position: fixed; waxaa u ahaanayaa mid fixed ah even hadii page-ka scroll lagu sameeyo .
position: absolute;
Element-ga postion-kiisa laga dhigo position: absolute; waxaa uu ku dhagayaa position element-ga ugu dhow .
Si walba ha'ahaato hadii absolute postion-ka uu lahayn elemnt uu posioned ah waxa uu isticmaalaya document body-ga. and wuuna dhaqaaayaa markii page-ka scroll loo sameeyo.


position: sticky;

elementga posiotion-kiisa uu yahay position: sticky; waxaa laga dhigaa posion-kiisa ayadaoo lo fiirinayo user scroll-ka halka uu joogo .


Full Example
HTML
<!DOCTYPE html>
<html>
	<head>
		<title>HTML Semantic Elements</title>
		<style>
			body {
				/* for position fixed */
				height: 5000px;
				position: relative;
			}
			.box {
				width: 100px;
				height: 100px;
			}
			.container {
				position: relative;
				width: 500px;
				height: 500px;
				background-color: rgb(173, 16, 94);
			}

			#box1 {
				position: relative;
				left: 10%;
				background-color: aquamarine;
			}
			#box2 {
				position: fixed;
				bottom: 10%;
				right: 10%;
				border-radius: 50%;
				background-color: tomato;
			}
			#box3 {
				position: absolute;
				background-color: steelblue;
				top: 10%;
				left: 50%;
			}
			#box4 {
				position: absolute;
				bottom: 10%;
				right: 30%;
				background-color: green;
			}
			#box5 {
				position: sticky;
				top: 0;
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<!-- positions -->

		<div id="box1" class="box"></div>
		<div id="box2" class="box"></div>
		<div class="container">
			<div id="box3" class="box"></div>
			<div id="box4" class="box"></div>
		</div>

		<div id="box5" class="box"></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Semantic Elements</title>
		<style>
			body {
				/* for position fixed */
				height: 5000px;
				position: relative;
			}
			.box {
				width: 100px;
				height: 100px;
			}
			.container {
				position: relative;
				width: 500px;
				height: 500px;
				background-color: rgb(173, 16, 94);
			}

			#box1 {
				position: relative;
				left: 10%;
				background-color: aquamarine;
			}
			#box2 {
				position: fixed;
				bottom: 10%;
				right: 10%;
				border-radius: 50%;
				background-color: tomato;
			}
			#box3 {
				position: absolute;
				background-color: steelblue;
				top: 10%;
				left: 50%;
			}
			#box4 {
				position: absolute;
				bottom: 10%;
				right: 30%;
				background-color: green;
			}
			#box5 {
				position: sticky;
				top: 0;
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<!-- positions -->

		<div id="box1" class="box"></div>
		<div id="box2" class="box"></div>
		<div class="container">
			<div id="box3" class="box"></div>
			<div id="box4" class="box"></div>
		</div>

		<div id="box5" class="box"></div>
	</body>
</html>
﻿
﻿
HTML Basics
Advanced CSS
CSS Basics

Waa Maxay CSS ?

CSS Syntax

Tusaale

Sharaxaada Example-ka

CSS Selectors

The CSS element Selector

Tusaale

The CSS id Selector

Tusaale

The CSS class Selector

Tusaale

Tusaale

The CSS Universal Selector

Tusaale

The CSS Grouping Selector

Full Example

Sidee CSS Ugu Soo Daraysaa Web-ka ?

3 Way Oo Aad CSS Ugu Soo Dari Karto Page-ka.

External CSS

Tusaale

Internal CSS

Tusaale

Inline CSS

Tusaale

Cascading Order

CSS Colors

CSS Color Names

CSS Background Color

CSS Text Color

CSS Border Color

CSS Color Values

CSS RGB Colors

RGB Value

Tusaale ku saabsan RGB Colors-ka

Tusaale kale

RGBA Value

Tusaale

CSS HEX Colors

CSS Backgrounds

CSS background-color

Tusaale

CSS background-image

CSS background-repeat

Tusaale

CSS background-repeat: no-repeat

CSS background-position

CSS background - Shorthand property

CSS Borders

CSS Border Style

Tusaale

CSS Border Width

CSS Border Color

CSS Border - Shorthand Property

CSS Rounded Borders

Tusaale Full ah code

CSS Margins

Margin - Individual Sides

Tusaale

Margin - Shorthand Property

Tusaale

Tusaale

Tusaale

Tusaale

The auto Value

Tusaale

CSS Padding

CSS Height, Width and Max-width

CSS height and width Values

CSS height and width Examples

Setting max-width

The CSS Box Model

Tusaale

Width and Height of an Element

Tusaale

CSS Layout - The display Property

The display Property

Block-level Elements

Inline Elements

Display: none;
