แนวทางการเขียน CSS ในรูปแบบย่อ

Background (พื้นหลัง)

ค่าคุณสมบัติ Background

element {
  background-color: #FF0000;
  background-image: url(image.png);
  background-repeat: repeat;
  background-position: top left;
  background-attachment: scroll;
}

element {
  background:#FF0000 url(image.png) repeat top left scroll;
}

font (ตัวอักษร)

ค่าคุณสมบัติ font

element {
  font-style:normal;
  font-variant:normal;
  font-weight:bold;
  font-size:1em;
  line-height:1.2em;
  font-family:georgia,"times new roman",serif
}

ตัวอย่างการเขียน CSS ของ Font แบบย่อ

element {
  font:bold 1em/1.2em georgia,"times new roman",serif;
}

Border (ขอบ เส้นขอบ)

ค่าคุณสมบัติของ Border (1)

element {
     border-width:1px; 
     border-style:solid; 
     border-color:#000;
}

ตัวอย่างการเขียน CSS ของ Border แบบย่อ

element {
      border:1px solid #000; 
}

ค่าคุณสมบัติของ Border (2)

element {
     border-top-width:1px; 
     border-top-style:solid; 
     border-top-color:#000;
}

ตัวอย่างการเขียน CSS ของ Border แบบย่อ (2)

element {
      border-top:1px solid #000; 
}

List (สิสท์รายการ)

ค่าคุณสมบัติของ List

element {
     list-style-type:square; 
     list-style-position:inside; 
     list-style-image:url(image.gif);
}

ตัวอย่างการเขียน CSS ของ List แบบย่อ

element {
      list-style:square inside url(image.gif); 
}

Margin (บริเวณนอกเส้นขอบออกไป)

ค่าคุณสมบัติของ Margin

element {
     margin-top:1em; 
     margin-right:0; 
     margin-bottom:2em; 
     margin-left:0.5em; 
}

ตัวอย่างการเขียน CSS ของ Margin แบบย่อ

element {
     margin:1em 0 2em 0.5em; 
}

Padding (บริเวณในเส้นขอบเข้ามา)

ค่าคุณสมบัติของ Padding

element {
     padding-top:1em; 
     padding-right:0; 
     padding-bottom:2em; 
     padding-left:0.5em; 
}

ตัวอย่างการเขียน CSS ของ Padding แบบย่อ

element {
     padding:1em 0 2em 0.5em; 
}