CSS (سی ئێس ئێس) کە کورتکراوەی Cascading Style Sheetsـەو زمانێکە بەکاردێت بۆ پێناسەکردنی ڕووی دەرەوەی هەر پەڕگەیەک کە بە HTML یان XML دەنووسرێت. بەهۆی CSSـەوە دەتوانرێت ڕەونەقێکی جوان بدرێت بە ماڵپەڕ وەکو ڕەنگردن، فۆنتەکان، بەستەرەکان... هتد کەدەتوانیت خۆت بڕیار بدەیت بەچ شێوەیەک هەر یەک لەوانە دەربکەون. پەڕەی CSS درێژکراوەی پەڕگەکەی برێتییە لە css. و دەتوانرێت ببەسترێتەوە بە بێ پایان پەڕگەوە، لەهەر پەڕگەیەکدا بەکارببرێت یەوا ڕووی ئەو کاریگەرییانە پیشان ئەدات کە لەناو پەڕگەی css ـەکەدا پێناسەکراوەو نرخی پێدراوە.

چ دەستکاریکەرێک (Editor)؟

بۆ فێربوونی CSS تەنها پێویستت بە دەستکاریکەرێک (بۆ نووسینی کۆدەکان) و وێبگەڕێک (بۆ بینینی ئەنجام) دەبێت. هیچ ئامڕازێکی تر یان نەرمەکاڵایەکت پێویست نابێت. دەستکاریکەر لە ویندۆز وەک Notepad کە سادەترین دەستکاریکەری دەقە، بەڵام ئەوانەی کە ئامۆژگاریکراون وەک:

بەستنەوە یان بەکارهێنانی لە html دا

S دەتوانرێت بە سێ شێوە تێکەڵ بکرێت لەگەڵ HTML تاوەکو ئەو تەکنیکە بەدروستی کاربکات.

External Style Sheet

پەڕگەیەکی تایبەت و لەدەرەوە بە CSS بۆ نمونە style.css و ڕاکێشانی پێناسەکردنی بۆ ناو کۆدی html بەشیوەی rel لە کۆدەکانی head دا بۆ نمونە:

 <link rel="stylesheet" type="text/css" href="style.css" />

Internal Style Sheet

یان هەمان پەڕە و بەم شێوەیە:

    <head>
    <style type="text/css">
    body {
    background:#707070 none repeat scroll 0 0;
    font-family:"Unikurd Web", Tahoma, "DejaVu Sans", Arial, Verdana;
    font-size:10pt;
    direction: rtl;
    }
    p {
    position:absolute;
    top:10px;
    width:400px
    }
    </style>
    </head>

Inline Styles

بەتێکەڵکردنی لەگەڵ تاگی HTML یەکەدا بەم شێوەیە:

    <P style="font-size: x-large; color: #ff9900">
       Sillaw em Katetan bash, awha style dexrete ser TAG html _;)
    </p>

ڕستەکار - Syntax

داڕشتنی CSS پێک هاتووە لە سێ بەش: selector، property، value.

selector {property: value}

selector: بەشێکی/تاگێکی HTMLـەو کە دەتەوێت پێناسەی بکەیت.
property: تایبەتمەندییەکە کە دەتەوێت نرخەکەی بیگۆڕیت.
value: هەر تایبەتمەندییەک (property) نرخێکی (value) هەیە.

body {
font-size: 11px;
color: blue;
}

ئەگەر لەحاڵەتێکدا نرخەکە لەچەند وشەیەک پێک هاتبوو ئەوە باشتر وایە بخرێتە ناو دوو دەقەوە:

serdêrr {font-family: "unikurd Web"}

ڕەنگەکان - Colours

ئاشکرایە کە ڕەنگ بۆ خۆی جوانی تەواو دەبەخشێت بە پەڕگەکانی سەر وێب بەشێوەیەک کە لەگەڵ یەکتردا گونجاو بن. دەتوانرێت ڕەنگەکان بە ۳ شێوەی جیاواز بنووسرێن:

ناو - name
rgb - red/green/blue یان
hex

بۆ نموونە ڕەنگی سوور دەتوانرێت بەو چەند شێوەی خوارەوە بنووسرێت:

red

یان

rgb(255,0,0)

کە ئەویش هاوشێوەیە لەگەڵ

rgb(100%,0%,0%)

بەهەمان شێوەش

#ff0000

یان هەروەها

#f00

هەریەک لەو کۆدانەی سەرەوە هاوشێوەن بۆ ڕەنگی سوورو هەرکامێکیان بەکارببەی ئەوە ڕەنگی سوور دەبەخشن.

تاوەکو ئێستا تەنها ۱۷ ناوی ڕەنگ پێناسەکراون تاوەکو بتوانرێت بەکار ببرێت، ئەوانیش بریتین لە:

qua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange,
purple, red, silver, teal, white, and yellow

چۆنیەتی بەکارهێنانی ڕەنگەکان لەناو پەڕەیەکی css‌ ـدا بەم شێوەیە ئەبێت:

h1 {
color: #00ff00
}
h2 {
color: #dda0dd
}
p {
color: rgb(0,0,255)
}

ڕەنگی پاشبنەمای نووسین

بۆ ئەوەی کە پاشبنەما ڕەنگ بکەیت واتە ئەگەر پاشبنەمای نووسینەکە ڕەنگ بکەیت ئەوە دەنووسیت ( ئەو کۆدە بەواتای نووسینێکی سوورو بەپاشبنەمایەکی خۆڵەمێشی):

h1 {
color: red;
background-color: gray;
}

دەق - Text

هەموو ماڵپەڕێک پێکهاتووە لە کەم یان زۆر لە دەق، ئیتر ئەو دەقانە بۆ ڕوونکردنەوە بێت یان بۆ هەر مەبەستێک بنووسرێت. لە پەڕەی css ـدا دەتوانیت جۆری ئەو دەقانە دیاری بکەیت، قەبارەکەی، ڕەنگی، شوێن (ڕاست، چەپ، ناوەڕاست یان justify)، ئاڕاستە (direction).

خێزانی جۆرەپیت - font-family

ئەمەش جۆری فۆنتەکە ئەگرێتەوە واتا ناوی فۆنتەکە, ئەگەر لە جۆرەپیتێک (فۆنت) زیاتر بوون ئەوە بەهۆی کۆماوە (،) لێک جیادەکرێنەوە.

nawerok {
font-family: "Unikurd Web", tahoma, arial, helvetica;
}

تێبینی: ئەگەر لە حاڵەتێکدا ناوی فۆنتەکە لە ووشەیەک زیاتر بوو ئەوە پێویستە بکرێتە نێوان دوو کۆماوە، بەم شێوەیە: "Unikurd Web".

قەبارەی فۆنت - font-size

لێرەدا قەبارەی فۆنتەکە دیاری دەکرێت و ئەو تیکستەی کە هەیە بەو قەبارەیە دەردەکەوێت کە لێرەدا نرخی بۆ دادەنرێت.

body
{
font-size: 13px
}

بێجگەلە ژمارە دەتوانین بەم نرخانەش قەبارەی فۆنتەکان دیاری بکەین:

x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%

font-weight

لێرەدا دەریدەخەین کە فۆنتەکە / دەقەکان ئاسایی (normal)، ئەستور (bold) بن. بۆ نموونە:

font-weight: bold;

یان

font-weight: normal;

شێوازی فۆنت - font-style

بۆ شێوازی فۆنتەکان ئەوە ۳ نرخمان هەیە ئەویش : normal، italic، oblique. هەروەها بەم شێوەیە بەکاردێن لەناو پەڕەی css ـدا:

font-style: italic;

دیکۆری دەق - text-decoration

لێرەدا ئەو تێکستەی (دەق) کە هەیە دەتوانرێت بە ۳ نرخی جیاواز پیشان بدرێن :

overline : هێڵ بەسەرووی دەقەکەوە بێت.
line-through : هێڵ بەناو دەقەکەدا بڕوات.
underline : هێڵ بەژێردا هاتوو.

 text-decoration: overline;
/* yan */
 text-decoration: line-through;  
/* yan */
 text-decoration: underline;

هەروەک نموونەیەک بۆ زانیاری زیاتر ئەوانەی لەسەرەوە باسکران بەم نمونەیە ئەیخەینەڕوو کە چۆن بەکاردێن لەناو پەڕەی css‌ ـدا:

body {
	font-family: "Unikurd Web", Tahoma, arial, helvetica;
	font-size: 11pt;
	text-decoration: none;
	font-style: italic;
	text-align: right;
}

فۆنت - Font

فۆنتیش بەهەمان شێوەی دەقەکان وایە. بەواتای ئەوەی هەمان تایبەتمەندی و نرخ کەبەکاری دەهێنین بۆ دەقەکان دەتوانین بۆ فۆنتەکانیش بەکاری ببەین. نموونەیەک:

h5 {
font-family: "Unikurd Web", tahoma, arial;
font-size:13px;
font-weight:bold;
text-decoration: underline;
}

پێویست بەدووبارە کردنەوە ناکات چونکە وەک ووترا کە هەمان شێوەو تایبەتمەندی دەقەکان دەتوانیت بەکارببەیت بۆ فۆنتەکانیش.

Margins and Padding

تایبەتمەندی margin بەکاردەبرێت بۆ پێناسەکردنی بۆشایی لەدەورووبەری توخمێک (element). دەتوانرێت هەروەها نرخی نێگەتیڤ بەکار بهێنرێت بۆ نرخەکان کە ئەیدرێتێ. چوار جۆر نرخ هەیە بۆ margin :

1. margin-top
2. margin-right
3. margin-bottom
4. margin-left

وە بۆ هەر یەک لەو نرخانە تەنها ۳ نرخی جیاواز هەیە کە بەکاری بهێنیت:

1. auto
2. length
3. %

تایبەتمەندی padding بۆ پێناسەکردنی بۆشایی لەنێوان borderـی توخمێک (element border)لەگەڵ ناوەڕۆکی توخمێک (element content). بەهەمان شێوە چوار جۆر نرخ هەیە بۆ تایبەتمەندی padding کە هەمان نرخن وەک لە margin باس کراون بەڵام ئەم جارە تەنها ۲ نرخ هەیە بۆ هەریەک لەمانە‌ :

1. length
2. %

بەم شێوەیە بەکاری ئەهێنین لەناو پەڕگەی css ـدا:

h3 {
	font-size: 13px;
	background-color: #eee;
	margin: 3px;
	padding-top: 5%;
}

قەراغ - Border

مەبەست لە Border ئەوەیە کە قەراغێک درووست بکەیت بەدەوری توخمێکدا (element)، جا ئەو توخمە نووسین، وێنە ...هتد بێت. بۆ ناسینەوەی قەراغەکان لە پەڕگەی css ـدا ئەوە بە پێشگری border دەست پێ دەکات.
لە HTML ـدا خشتە (table) بەکارئەهێنین بۆ درووستکردنی قەراغێک بۆ نووسینێک بەڵام لە css ـدا ئەوە قەراغ بەکار دێنین و کاریگەری وەکو ڕەنگ دەتوانین بیدەینێ. هەروەها دەتوانرێت بەکاربهێنرێت بۆ چەندەها توخم (element) لەهەمان کاتدا. تایبەتمەندیborder بەم شێوازانەی خوارەوە پێناسە دەکرێت:

شێوازی قەراغ - border-style

border-style : دیاریکردنی هەموو قەراغەکانی هەر توخمێک بە گشتی.

border-top-style : دیاریکردنی شێوازی سەرەوەی توخمەکە (element).

border-right-style : دیاریکردنی شێوازی توخمەکە بەشی لای ڕاست.

border-bottom-style : دیاریکردنی شێوازی توخمەکە بەشی خوارەوەی.

border-left-style : دیاریکردنی شێوازی توخمەکە بەشی لای چەپ.

نرخە گونجاوەکانی ژێر ئەم تایبەتمەندییە

none, dotted, dashed, solid, double, groove, ridge, inset, outset, hidden

بەم شێوەیە بەکاری ئەهێنین لە پەڕگەیەکی css ـدا:

.solid {
border-right-style: solid;
}

هەروەها دەتوانیت لەهەمان کاتدا چەند نرخێک پێکەوە بەکارببرێت، بۆ نموونە :

.table {
border-style: dotted dashed;
}

پانی قەراغ - border-width

border-width: پانی border‌ ـە کە لەهەموو لایەکەوە.
border-top-width: پانی قەراغەکە (بەشی سەرەوە - top).
border-right-width: پانی قەراغەکە (بەشی لای ڕاست - right).
border-bottom-width: پانی قەراغەکە (بەشی خوارەوە - bottom).
border-left-width: پانی قەراغەکە (بەشی لای چەپ - left).

نرخە گونجاوەکانی ژێر ئەم تایبەتمەندییە

thin, medium, thick

چەند نموونەیەک (لێرەش بەهەمان شێوە دەتوانرێت زیاتر لە نرخێک بەکار ببرێت):

table {
border-width: thin medium
}

/*bekarhênanî zyatr le nrxêk*/
table {
border-width: thin medium thick
}

/*pîksl le cyatî nûsînî nrxekan*/
ttable { 
border-left-width: 2px 4px;
}

ڕەنگی قەراغ - border-color

ئەم تایبەتمەندییەش بریتی دەبێت لە ڕەنگکردنی قەراغ (border)و پێک دێت لە چەند نرخێک بەهەمان شێوەی ئەوانەی لەسەرەوە باس کراون:

border-color
border-top-color
border-right-color
border-bottom-color
border-left-color

چۆنیەتی نووسینی ئەم تایبەبەتمەندییە (بەچەند شێوەیەکی جیاواز)لە پەڕگەی css ـدا:

p.reng1 {
border-right-color: red;
}

p.reng2 {
border-color: #cc3421;
}

p.reng3 {
border-color: #fc0 blue #cf0;
}

لیستە - List

مەبەستمان لە لسیتە لێرەدا ئەوەیە کە بتوانرێت ژمارە و خاڵ یان بازنەی بچووک یان چوارگۆشەی بچووک دابنێیت لەهەر پەڕەیەکی سەر وێب هەروەها لە جیاتی ئەوەش‌ دەتوانرێت وێنە دابنرێت.

لێرەدا ئێمە ٤ تایبەتمەندیمان هەیەو هەریەک لەوانەش نرخی جۆراوجۆریان هەیە کە دەتوانرێت بەکاربهێنرێت:

list-style: 	- list-style
		- list-style-position
		- list-style-image

list-style-image:	- none
	   		- url

list-style-position:	- inside
			- outside

list-style-type:	- none
			- disc
			- circle
			- square
			- decimal
			- decimal-leading-zero
			- lower-roman
			- upper-roman
			- lower-alpha
			- upper-alpha
			- lower-greek
			- lower-latin
			- upper-latin
			- hebrew
			- armenian
			- georgian
			- cjk-ideographic
			- hiragana
			- katakana
			- hiragana-iroha
			- katakana-iroha 

marker-offset:		- auto
			- length

چۆنیەتی بەکارهێنانیان بەم شێوەیە ئەبێت لەناو پەڕگەیەکی css ـدا:

disc {
	list-style-type: disc;
     }

circle {
	list-style-type: circle;
       }

square {
	list-style-type: square;
       }

none {
 	list-style-type: none;
     }

خۆ ئەگەر بمانەوێت وێنەیەک دابنێین لەجیاتی بەکارهێنانی نرخەکان لە لیستێک (list)ـدا ئەوە بەم شێوەیە دەینووسین:

ol { 
	list-style-image: url("nawî_wêneke.gif"); 
   }

خشتە - Table

خشتە ڕێگە ئەدات کە بتوانیت خشتەیەک درووست بکەیت و بەپێی پێویستی کە بەکارهێنەر ئەخوازێت لەنێو ماڵپەڕەکەیدا بیکات. بەهەمان شێوە تایبەتمەندی جیاواز هەیەو بۆ هەریەک لەوانە نرخی جیاوازیش هەیە.

نرخەکان	تایبەتمەندی
collapse separate	border-collapse
length length	border-spacing
top bottom left right	caption-side
show hide	empty-cells
auto fixed	table-layout

هەریەک لەو تایبەتمەندیانە بەم شێوەیە بەکاردەهێنرێت لەناو پەڕگەیەکی CSS ـدا:

xişte.yekem
{
table-layout: auto
}
xişte.dûhem
{
table-layout: fixed
}
xişte.sêhem
{
border-collapse: separate;
empty-cells: show
}

لاکان - Dimension

مەبەست لە لاکان لێرەدا ئەوەیە کە ڕیگە ئەدات بە کۆنتڕۆڵکردنی بەرزی‌و پانی هەر توخمێک (element) وە هەروەها دەتوانرێت بۆشایی نێوان دوو هێڵ (بۆ نموونە وەکو دوو دێڕ لە نووسین) پێ زیادو کەم بکرێت.

ڕوونکردنەوە	نرخەکان	تایبەتمەندی
دیاریکردنی بەرزی بۆ توخمەکە.	auto length %	height
دانانی دووری نێوان هێڵەکان	normal number length %	line-height
دانانی ئەوپەڕی بەرزی بۆ توخمەکە	none length %	max-height
دانانی ئەوپەڕی پانی بۆ توخمەکە	none length %	max-width
دانانی کەمترین بەرزی بۆ توخمەکە	length %	min-height
دانانی کەمترین پانی بۆ توخمەکە	length %	min-width
دیاریکردنی پانی بۆ توخمەکە.	none length %	width

چۆنیەتی بەکارهێنانی ئەو تایبەتماندییانە لەناو CSS ـدا:

img {
height : 200px;
} 

p.small {
line-height: auto
}
p.big {
line-height: 0.9cm
}

p { 
max-height:100px;
}

p { 
min-height: 50px;
} 

p {
max-width: 500px
}

نموونە بۆ لاکان - Dimension :

ئێستا پەڕەیەک بکەرەوە بەهەر یەکێکی لەو پرۆگرامانەی کەنابراوە لەسەرەوەو ئەم کۆدانە بخەرە ناوی‌و بە شێوەی style.css پاشەکەوتی بکە:

img.normal {
height : 300px; /* Lêreda berzî wêneke 300px abêt*/
width: 400px; /* Panî wêneke 400px abêt */ 
} 

p.small {
line-height: auto; /* berzî nêwan nûsênekan */  
}
p.big {
line-height: 0.7cm; 
max-width: 600px; /* her dêrrêk tenha 600px debêt */ 
}

هەروەها پەڕەیەکی تریش بکەرەوەو ئەو کۆدانەی خوارەوە بخەرە ناوی‌و بە ناوی index.html پاشەکەوتی بکە:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
<img class="normal" src="nawî-wêneke.jpg" />
 
<p class="small">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since 
the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
It has survived not only five centuries,
</p>
 
<p class="big">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since 
the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged. 
</p>
 
</body>
</html>

هاوپۆل - Classification

هاوپۆل پێمان دەڵێت کە چۆن‌و لەکوێ هەر توخمێک دەربکەوێت لە پەڕەیەکەی هتمل (HTML)ـدا. هاوپۆلەکان ئەم تایبەتماندییانە لە خۆ دەگرێت:

نرخەکان	تایبەتمەندی
left right both none	clear
url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help	cursor
none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption	display
left right none	float
static relative absolute fixed	Position
visible hidden collapse	visibility

نموونە بۆ هاوپۆل - Classification

تایبەتمەندی display : لە پەڕگەیەکی css ـدا ئەمە دابنێ:

p {
display: inline;
}
div {
display: none;
}

لە پەڕگەیەکی html ـیشدا ئەو کۆدانە ڕەنووس بکە:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
<p>Eme tenha pêk hatiwe le tekstêkî bînraw</p>
<p>em dêrreş deçête pal ewey serewe.</p>

<div>Em dêrre behîç şêweyek dernakewêt.</div>

</body>
</html>

تایبەتمەندی cursor : لە پەڕگەی css ـدا:

span {
cursor: help;
}

لە پەڕگەی html ـدا:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>

<span>Ger mişkeke bxeyte ser em risteye ewe nîşaneyekî pirsyar ebînît.</span>

</body>
</html>

بۆ هەریەک لەو تایبەتمەندییانەی سەرەوە کە ناویان هێنراوە هیچ جیاوازییەکی ئەوتۆیان نییە لە بەکارهێنانیان لەناو پەڕگەیەکی css ـدا، بۆیە دەتوانیت خۆت زیاتر هەوڵ بدەیت‌و تاقیان بکەیتەوە‌و تاوەکو زیاتر شارەزایی لەبەکارهێنانیان هەبێت.

شێوەی دانان/وەستان - Positioning

ئەم تایبەتمەندییە لە css ـدا ڕێگەئەدات بە دانانی هەر توخمێک کە چۆن دەربکەوێت لەسەر پەڕەیەکی سەر نێتدا، جا ئایا ئەو توخمە نووسین (تێکست) بێت یاخوود وێنە.
ئەم تایبەتمەندیەش وەکو هەموو ئەوانەی پێشووتر باس کراون لەچەند تایبەتمەندییەک پێکهاتووە کە هەریەکەیان چەند نرخێکی (values) جیاوازیان هەیە.

نرخەکان	تایبەتمەندی
auto % length	bottom
shape auto	clip
auto % length	left
visible hidden scroll auto	overflow
static relative absolute fixed	Position
auto % length	right
auto % length	top
baseline sub super top text-top middle bottom text-bottom length %	vertical-align
auto number	z-index

لێرەدا چەند نمونەیەک بۆ شێوەی دانان/وەستان - Positioning دەخەینەڕوو :

نمونەی ۱:

p {
position:absolute;
top:10px;
width:400px
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since 
the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged. 
</p>

</body>
</html>

نمونەی ۲:

p {
position:fixed;
left:100px;
top:10px;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since 
the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged. 
</p>

</body>
</html>

نمونەی ۳:

div.scroll
{
width:300px;
height:80px;
overflow:scroll;
}

div.hidden 
{
background-color:#eee;
width:200px;
height:100px;
overflow:hidden;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>

<p>Ger lêre seyr bikeyt ewe scroll dirust bwe.</p>
<div class="scroll">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since 
the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged. 
</div>

<p>Lêreda scroll şardraweteweê be watay ewey nîşan nadrêt.</p>
<div class="hidden">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since 
the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged. 
</div>

</body>
</html>

pseudo-classes

pseudo-classes بەکاردێت بۆ پێدانی کاریگەرییەک بۆ هەر selector ـێک (selector: بەشێکی/تاگێکی HTMLـەو کە دەتەوێت پێناسەی بکەیت).
ڕستەکار (syntax) بۆ pseudo-classes بریتییە لە:

selector:pseudo-class {property:value}

دەتوانرێت پۆل (class) لەگەڵ pseudo-classes بەکارببرێت :

selector.class:pseudo-class {property:value}

هەر بەستەرێک دەتوانرێت پیشان بدرێت بەچەند شێوازێکی جیاواز لە وێبگەڕێکدا:

a:link {color:#FF0000} /* Besterî serdan nekraw (unvisited link) */
a:visited {color:#00FF00} /* besterî serdan kraw (visited link) */
a:hover {color:#FF00FF} /* Dananî mişkeket leser bestrêk (mouse over link) */
a:active {color:#0000FF} /* selected link */

نمونەی ۱:

لێرەدا بەستەرێک دانراوە لە پەرگەیەکی html ـدا کە بەڕەنگی ڕەش دەردەکەوێت وە کاتێک کە بە مشکەکەت دەچیتەسەری ئەوە ڕەنگی بەستەرەکە دەگۆڕێت بۆ سوور، ئەوەشمان لە پەڕگەیەکی css ـدا پێناسە کردووە وەک لەخوارەوە دیارە.

a:link {color: #000000}
a:visited {color: #00FF00}
a:hover {color: #FF0000}
a:active {color: #0000FF}

<p><a href="http://chawg.org" target="_blank">Bester bo perrey seretay Chawg</a></p>

pseudo-elements

pseudo-elements بەهەمان شێوەی pseudo-classes بەکاردێت بۆ پێدانی کاریگەرییەک بۆ هەر selector ـێک.
ڕستەکار (syntax) بۆ pseudo-elements بریتییە لە:

selector:pseudo-elements {property:value}

دەتوانرێت پۆل (class) لەگەڵ pseudo-elements بەکارببرێت :

selector.class:pseudo-elements {property:value}

نمونەی ۱:

p:first-letter {
color:#ff0000;font-size:xx-large
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
<p>Bibîne ke pîtî yekem be gewreyî u rengî sûre.</p> 
</body>
</html>

نمونەی ۲:

p:first-letter {
color:#ff0000;font-size:xx-large
}
p:first-line {
color:#0000ff
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
<!-- Dêrrî yekem hemuy be rengî şîn ebêt -->
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
It has survived not only five centuries,but also the leap into electronic typesetting, remaining essentially unchanged.</p>  

</body>
</html>

پاشبنەما - background

تایبەتمەندی پاشبنەما لە CSS ـدا دەتوانین پێناسەی بکەین بە پێدانی کاریگەری ڕەنگی لەسەر هەر توخمێک کە لە پەڕگەکەدا دەکرێت. تایبەتمەندی پاشبنەما ئەمانە لەخۆ دەگرێت، بەواتای ئەوەی کە بەو چەند شێوەیە پێناسە دەکرێت:

background-color
background-image
background-repeat
background-attachment
background-position

ڕەنگى پاشبنەما - Background Color

ئەم تایبەتمەندییە پێناسەی ڕەنگی پاشبنەما دەکات لە پەڕگەیەکی css ـدا، بەڵام ئەگەر ڕەنگی بدەین بە پاشبنەما پەڕەیەکی HTMLـدا، ئەوە دەبێت لەناو body selector ـدا بینوسین بەو شێوەی خوارەوە:

body {
background-color:#eeeeee
}

هەروەها دەتوانرێت ڕەنگی پاشبنەما بۆ رەنگکردنی پاشبنەمای تری وەک نوسین‌و ...هتد بەکاربهێنرێت:

h1 {
background-color:#cccccc
}

p {
background-color:#e0ffff
}

div {
background-color:#b0c4de
}

نموونەیەک

لە پەڕگەیەکی css ـدا ئەمە بنووسەو پاشەکەوتی بکە بە ناوی style.css

body
{
background-color:#dbcb35;
}

ئەم کۆدانەش لە پەڕگەیەکی htmlـدا بنووسە:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>

<h1>Serdêrri Babet</h1>
<p>Seyrî  pasbnema bike ke rengman dawetê le perrgey css da.</p> 
 
</body>
</html>

پاشبنەمای وێنەیی - Background Image

ئەم تایبەتمەندییە بەکاردێت بۆ دانانی وێنە وەک پاشبنەمایەک، پاشبنەمای پەڕەیەک بەم شێوەیە پێناسە دەکرێت:

body {
background-image:url('wêneke.png')
}

نموونەیەک‌و کۆکردنەوەی ۳ تایبەتمەندی

لەم نموونەیەدا ۳ تایبەتمەندی کۆکراوەتەوەو کراوە (background-image، background-repeat، background-position) بە نموونەیەک، بۆ ئەوەی زیاتر لەو تایبەتمەندیانە بگەیت ئەوە ئەبێت گۆڕانکاری بکەیت تاوەکو بزانیت کاریان چییە.

پەڕەیەکی css دەرووست بکەو ئەو کۆدانەی تێدا دابنێ و پاشان پاشەکەوتی بکە:

body
{
background-image:url('wêneke.png');
background-repeat:no-repeat;
background-position:top right;
margin-right:150px;
}

ئەو کۆدانەش لە پەڕەیەکی html ـدا پاشەکەوت بکەو پاشان سەیری بکە بزانە چۆن دەردەکەوێت:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
 
<h1>Lem Nimuneyeda,</h1>
<p>bekarhênani paşbinema bê dubare kirdnewe (no-repeat) u herweha (set postion).</p>
<p>Lêreda paşbinemake tenha 1 car derdekewêt wate dubare nabêtewe.</p>

 </body>
</html>

Class and ID Selectors

لەهەر پەڕەیەکی CSS ـدا دەتوانین ID Selector بەوە بناسینەوە کە (#) پێش وشەیەک بێت، بەڵام Class بە نیشانەی (.) دەناسینەوە.

بـۆ نـمـوونــە: لەپەڕەی css ـدا ئەمە بنووسە:

#serder {
	background-color: #ccc;
	padding: 1em
}

.sereta {
	color: #fff;
	font-weight: bold;
}

هەروەها ئەمەش لە پەڕەی html ـدا بنووسە:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
<div id="serder">

<h1>Serdêrrî Babet</h1>

<p class="sereta">Hemû şitêk seretayekî heye, emeş beşêke lew seretaye!</p>

</div>

</body>
</html>