CSS²

CSS - backgrounds
property Values Default value
name color
#000
background-color: no
rgb(0,0,0)
rgba(0,0,0,0.5)
background-image: url("path image or link") no
reoeat-x
background-repeat: repeat-y repeat
no-repeat
background-attachment: fixed scroll
tow value from [top right
background-position: buttom left] 0% 0%
tow value from x% x%
CSS - text
property Values Default value
name color
#000
color: no
rgb(0,0,0)
rgba(0,0,0,0.5)
letter-spascing: Xpx & (-Xpx) normal
Xpx
line-height: x% normal
em
underline
text-decoration: overline none
line-through
Xpx
text-indent: normal
x%
capitalize
text-transform: uppercase none
lowercase
white-space: nowrap normal
word-spascing: Xpx normal
center
text-align: left by aling page
right
ltr
direction: by dir page
rtl

CSS - fonts
property Values Default value
font-family: any fonts by d
italic
font-style: normal
and .....
Xpx
large larger xx-large
font-size: small smaller xx-small medium or 16px
x%
em
bold bolder
font-weight: normal
100 to 900
CSS - links
property Values Default value
text-decoration: go to box css - text > decoration underline in link
a:hover: css property a:hover { css property a {
a:active: css property a:active { css property a {

CSS - list - ul
property Values Default value
list-style-type: more type dis
list-style-postion: inside outside
list-style-image: url("image path") none

CSS - border
property Values Default value
border-width: Xpx 0
solid
border-style: dotit none
........
border-color: any color none
Xpx
border-radius: Xpx Xpx Xpx Xpx 0
X% X% X% X%
CSS - margin
property Values Default value
Xpx Xpx Xpx Xpx
margin: 0000
X% X% X% X%
Xpx
margin-top: 0
X%
Xpx
margin-right: 0
X%
Xpx
margin-buttom: 0
X%
Xpx
margin-left: 0
X%

CSS - padding
property Values Default value
Xpx Xpx Xpx Xpx
padding: 0000
X% X% X% X%
Xpx
padding-top: 0
X%
Xpx
padding-right: 0
X%
Xpx
padding-buttom: 0
X%
Xpx
padding-left: 0
X%
CSS - width & height
property Values Default value
Xpx
width: full width
X%
Xpx
min-width: full width
X%
Xpx
max-width: full width
X%
Xpx
height: auto
X%
Xpx
min-height: auto
X%
Xpx
max-height: auto
X%

CSS - display
property Values Default value
inline
block
display: by Attribute
inline-block
none

CSS - position
property Values Default value
fixed;
absolute;
top: Xpx; right: Xpx; left: Xpx; buttom:
position: Xpx; static
top: X% right: X%; left:X%; buttom:
X%;
relative; parent for absolute
CSS - float
property Values Default value
left
float: none
right
left
clear: right none
both - L and R

CSS - nisting & groups & selectors

name tag demo
dev p {
nesting spasc
.continer .child p {
group , body, dev, .main {
.main > p {
all direct child's >
.cont .story > p {
first element after the element + .story + .post {
all elements after the element ~ .story .post ~ p {

CSS - overflow
property Values Default value
hidden (‫يستخدم في البوكس االب اذا‬
‫كان داخله بوكسات تستخدم خاصية‬
overflow: ‫)الفلوت حتي التخرج من البوكس االب‬ visible
scroll
auto
CSS - visiblity
property Values Default value
hidden (‫ص ويحفظ مكانه‬
‫يخفي العن ي‬
visiblity: visible
‫نن‬:‫)في التصميم عكس ديسبلي‬

CSS - z-index
property Values Default value
number
z-index: auto
working with position

CSS - content
property Values Default value
element:after { content:"here":
color:#DDD;}
Elements: auto
element:before { content:"here":
color:#EEE;}

CSS - outline
property Values Default value
Xpx
outline-width: ‫عكس البوردر الياخذ العرض من حجم‬ 0
‫البوكس الخاص ب يه‬
solid
outline-style: dotit none
........
outline-color: any color none
 CSS - attributes
attribute demo property Default property
a a[target="_blank"] { none
img img[title="logo"]{ none
submit submit[value="login"]{ none
input input[type="email"]{ none

#More_Soon