📘 CSS Properties Summary with Examples

Category	Property	Meaning / Purpose	Simple Example
Color & Background	color	Sets text color	<p style="color: red;">Red Text</p>
	background-color	Sets background color	<div style="background-color: yellow;">Hello</div>
Fonts & Text	font-family	Changes the font style	<p style="font-family: Arial;">Arial font</p>
	font-style	Italic, oblique, normal	<p style="font-style: italic;">Italic text</p>
	font-size	Sets size of text	<p style="font-size: 20px;">Big text</p>
	font-weight	Sets boldness	<p style="font-weight: bold;">Bold text</p>
	text-align	Aligns text left/right/center/justify	<p style="text-align: center;">Centered text</p>
Borders & Box Model	border-style	Sets border type	<p style="border-style: solid;">Solid border</p>
	border-width	Thickness of border	<p style="border-width: 3px; border-style: solid;">Thick border</p>
	border-color	Color of border	<p style="border-color: blue; border-style: solid;">Blue border</p>
	margin	Space outside border	<div style="margin: 20px;">Box with margin</div>
	padding	Space inside border	<div style="padding: 20px; border: 1px solid;">Box with padding</div>
	outline	Outer line (does not change layout)	<p style="outline: 2px solid red;">Outlined text</p>
Dimension & Layout	height	Sets height of an element	<div style="height: 100px; background: lightblue;">Tall Box</div>
	width	Sets width of an element	<div style="width: 200px; background: lightgreen;">Wide Box</div>
	float	Moves element left or right	<img src="pic.png" style="float: right;">
Alignment & Display	text-align	Aligns text horizontally	<h2 style="text-align: right;">Right aligned</h2>
	float	Places elements side-by-side	<div style="float:left; width: 100px;">Box</div>

---