การเขียนโค้ด CSS แบบย่อ (Short hand)

background-color: red;  // สีของ background
background-image: url(image/bg.gif);  // รูปภาพ background
background-repeat: repeat-x;  // การทำซ้ำ
background-attachment: fixed;  // เลื่อนตาม หรืออยู่กับที่
background-position: left top;  //ตำแหน่งของ background (ค่าแรกคือแนวแกน x ค่าที่สองคือแนวแกน y)

// เมื่อย่อแล้วจะได้ดังนี้
background: red  url(images/bg.gif) no-repeat fixed left top;
// ควรเรียงตามลำดับตามนี้ครับ ไม่เช่นนั้น IE6 อาจไม่แสดงในบางกรณี

การย่อโค้ด background เขียนแบบสั้นสุด ๆ

border-width: 1px;  // ความหนาของเส้น
border-style: solid;  // แบบของเส้น เช่น เส้นทึบ เส้นประ เส้นคู่ เป็นต้น
border-color: red;  // สีของเส้น

// เมื่อย่อแล้วจะได้ดังนี้
border: 1px solid red; // ควรเรียงตามลำดับตามนี้ครับ ไม่เช่นนั้น IE6 อาจไม่แสดงในบางกรณี
// border คือ ทั้ง 4 ด้าน

// ** ในส่วนด้านล่าง เป็น border ของแต่ละด้าน ทำเช่นเดียวกันกับด้านบน
border-bottom: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;
border-top: 1px solid red;

การย่อโค้ด border เขียนแบบสั้นสุด ๆ

font-style: italic;  // รูปแบบตัวอักษร เช่น ตัวเอียง
font-variant: small-caps;  // ตัวแปรตัวอักษร
font-weight: bold;  // น้ำหนักตัวอักษร
font-size: 12px;  // ขนาดตัวอักษร
line-height: 130%;  // ระยะห่างระหว่างบรรทัด (ค่ามาตรฐาน 130%)
font-family: Arial, Helvetica, sans-serif;  // รูปแบบตระกูลอักษร

// เมื่อย่อแล้วจะได้ดังนี้
font: italic bold 12px/130% Arial, Helvetica, sans-serif;
// ควรเรียงตามลำดับตามนี้ครับ ไม่เช่นนั้น IE6 อาจไม่แสดงในบางกรณี

การย่อโค้ด font เขียนแบบสั้นสุด ๆ

margin-top: 10px;  // ด้านบน
margin-right: 5px;  // ด้านขวา
margin-bottom: 30px;  // ด้านล่าง
margin-left: 20px;  // ด้านซ้าย

// เมื่อย่อแล้วจะได้ดังนี้
margin: 10px 5px 30px 20px;  // จะเรียงเริ่มจาก บน ขวา ล่าง ซ้าย (ตามเข็มนาฬิกา)

// ** ในกรณี ทุกด้านเท่ากัน
margin-top: 10px;  // ด้านบน
margin-right: 10px;  // ด้านขวา
margin-bottom: 10px;  // ด้านล่าง
margin-left: 10px;  // ด้านซ้าย

// เมื่อย่อแล้วจะได้ดังนี้
margin: 10px; // ทุกด้านเท่ากัน รวบเหลือค่าเดียว

// *** ในกรณี บน,ล่าง เท่ากัน และ ซ่าย,ขวา เท่ากัน
margin-top: 20px;  // ด้านบน
margin-right: 10px;  // ด้านขวา
margin-bottom: 20px;  // ด้านล่าง
margin-left: 10px;  // ด้านซ้าย

// เมื่อย่อแล้วจะได้ดังนี้
margin: 20px 10px; // ค่าแรกคือ บน,ล่าง  ค่าที่สองคือ ซ้าย,ขวา

การย่อโค้ด margin เขียนแบบสั้นสุด ๆ

// outline คือ เมื่อเราคลิกลิ้งจะมีค่าเอาท์ไลน์ออกมา ค่ามาตรฐาน จะเป็นเส้นประ ๆ

outline-width: 1px;  // ความหนาของเส้น
outline-style: solid;  // แบบของเส้น เช่น เส้นทึบ เส้นประ เส้นคู่ เป็นต้น
outline-color: red;  // สีของเส้น

// เมื่อย่อแล้วจะได้ดังนี้
outline: 1px solid red; // ควรเรียงตามลำดับตามนี้ครับ ไม่เช่นนั้น IE6 อาจไม่แสดงในบางกรณี

// ส่วนมากไมนิยมให้เส้นแสดง
outline: none;

การย่อโค้ด outline เขียนแบบสั้นสุด ๆ

padding-top: 10px;  // ด้านบน
padding-right: 5px;  // ด้านขวา
padding-bottom: 30px;  // ด้านล่าง
padding-left: 20px;  // ด้านซ้าย

// เมื่อย่อแล้วจะได้ดังนี้
padding: 10px 5px 30px 20px;  // จะเรียงเริ่มจาก บน ขวา ล่าง ซ้าย (ตามเข็มนาฬิกา)

// ** ในกรณี ทุกด้านเท่ากัน
padding-top: 10px;  // ด้านบน
padding-right: 10px;  // ด้านขวา
padding-bottom: 10px;  // ด้านล่าง
padding-left: 10px;  // ด้านซ้าย

// เมื่อย่อแล้วจะได้ดังนี้
padding: 10px; // ทุกด้านเท่ากัน รวบเหลือค่าเดียว

// *** ในกรณี บน,ล่าง เท่ากัน และ ซ่าย,ขวา เท่ากัน
padding-top: 20px;  // ด้านบน
padding-right: 10px;  // ด้านขวา
padding-bottom: 20px;  // ด้านล่าง
padding-left: 10px;  // ด้านซ้าย

// เมื่อย่อแล้วจะได้ดังนี้
padding: 20px 10px; // ค่าแรกคือ บน,ล่าง  ค่าที่สองคือ ซ้าย,ขวา

การย่อโค้ด padding เขียนแบบสั้นสุด ๆ

// Hexadecimal เป็นค่าสีที่ได้จากการผสมของ เลขฐาน 16 ทั้งหมด 6 ค่าโดยมีเครื่องหมาย # นำหน้า

#RRGGBB;

// ค่า RGB
// R คือ Red
// G คือ Green
// B คือ Blue

// ตัวอย่างการย่อ

#ff0022;

// เมื่อย่อแล้วจะได้ดังนี้

#f02;  
// คู่ที่หนึ่ง คือ f 
// คุ่ที่สอง คือ 0
// คู่ที่สาม คือ 2

// *** ในกรณีที่แต่ละคู่ไม่เหมือนกันเพียงคู่เดียวก็ไม่สามารถย่อได้ ต้องเขียนแบบเต็มเท่านั้น
// ยกตัวอย่างเช่น

#fd0022;
// จะเห็นได้ว่า ค่า R คือ fd ซื่งไม่เหมือนกัน ดังนั้นจึงไม่สามารถย่อได้

การย่อโค้ด Color (Hexadecimal) เขียนแบบสั้นสุด ๆ