Tutorial Cascading Style Sheet (CSS) - Shorthand Property

Bebarapa value dari properties CSS dapat diisi dengan teks selain dengan angka, ataupun campuran keduanya. Kita bahkan juga bisa memperpendek penulisan properti dengan menggunakan spasi saja. hal ini yang dikenal dengan shorthand properties, menulisakan properti yang digabung dalam 1 baris.
Properti-properti yang mendukung penulisan semacam ini misalnya margin, padding dan border. Tetapi tidah menutup kemungkinan properti yang lain bisa digunakan. Adapun urutan penulisan secara default bila kita ingin mempersingkat properti ini syntaxnya adalah :


selector {property : top right bottom left}

misalnya kita akan mengatur properti dari selektor border

div {
     background-color:#CC9;
     border-top-width:1px;
     border-right-width:5px;
     border-bottom-width:10px;
     border-left-width:20px;

     border-top-color:red;
     border-right-color:green;
     border-bottom-color:blue;
     border-left-color:yellow;

     border-top-style:solid;
     border-right-style:solid;
     border-bottom-style:solid;
     border-left-style:solid;
     }

Dan skrip tersebut diterapkan dalam halaman HTML contoh sebelum-sebelumnya seperti berikut :


<html>
<head>
<title>Belajar</title>

<style>
div {
     background-color:#CC9;
     border-top-width:1px;
     border-right-width:5px;
     border-bottom-width:10px;
     border-left-width:20px;

     border-top-color:red;
     border-right-color:green;
     border-bottom-color:blue;
     border-left-color:yellow;

     border-top-style:solid;
     border-right-style:solid;
     border-bottom-style:solid;
     border-left-style:solid;
     }

</style>

</head>
<body>
  <div>  
    <h1>Coding Pertamaku</h1>
    <p>Percayalah kalo kita belajar pasti akan menemukan kesulitan. dan kesulitan itulah <br> 
       bumbu-bumbu dapur yang akan bisa membuat kita berhasil jika kita mampu melewati kesulitan <br>
       yang ada baik rintangan, ancaman, hambatan dan gangguan <b>(HTAG)</b>dari luar diri kita.<p>
    <a href="http://www.google.com"> Google</a>
  </div>         

</body>
</html>

Maka setelah disimpan dengan .html dan dipanggil pada browser akan menghasilkan seperti gambar dibawah ini :

Nah selanjutnya kita akan memperpendek skrip CSS diatas agar penulisannya lebih simpel sesuai dengan syntax defaultnya, sehingga penulisannya adalah seperti berikut :


<html>
<head>
<title>Belajar</title>

<style>
div {
     border-width:1px 5px 10px 20px;
     border-color:red green blue yellow;
     border-style:solid;
     background-color:#CC9;
     }

</style>

</head>
<body>
  <div>  
    <h1>Coding Pertamaku</h1>
    <p>Percayalah kalo kita belajar pasti akan menemukan kesulitan. dan kesulitan itulah <br> 
       bumbu-bumbu dapur yang akan bisa membuat kita berhasil jika kita mampu melewati kesulitan <br>
       yang ada baik rintangan, ancaman, hambatan dan gangguan <b>(HTAG)</b>dari luar diri kita.<p>
    <a href="http://www.google.com"> Google</a>
  </div>         

</body>
</html>

Maka setelah di simpan dengan .html dan dipanggil melalui browser akan menghasilkan tampilan yang sama.
Selanjutnya bagaimana jika yang di terapkan itu adalah bukan warna tapi gambar seperti tutorial sebelumnya? Berikut cara penulisan selengkapnya.


<html>
<head>
<title>Belajar</title>

<style>

/* shorthand properties */
body{
    background:#DFC url(mawar.jpg) repeat-y right; 
}

div {
     border-width:1px 5px 10px 20px;
     border-color:red green blue yellow;
     border-style:solid;
     background-color:#CC9;
     }

</style>

</head>
<body>
  <div>  
    <h1>Coding Pertamaku</h1>
    <p>Percayalah kalo kita belajar pasti akan menemukan kesulitan. dan kesulitan itulah <br> 
       bumbu-bumbu dapur yang akan bisa membuat kita berhasil jika kita mampu melewati kesulitan <br>
       yang ada baik rintangan, ancaman, hambatan dan gangguan <b>(HTAG)</b>dari luar diri kita.<p>
    <a href="http://www.google.com"> Google</a>
  </div>         

</body>
</html>

Maka setelah dipanggil melalui browser akan menghasilkan gambar seperti berikut :

Demikianlah tutorial cara penulisan CSS dengan metode Shorthand properties, silahkan berkreasi dengan imajinasi kita masing-masing sehingga web ang kita tampilkan bisa menjadi indah, dan cepat dalam membuat karena tidak terlalu banyak script yang ditulis karena ada fasilitas ini.
Semoga tulisan ini bermanfaat dan jika masih ada yang perlu di diskusikan bisa tulis melalui kolom komentar (add comment) di bawah judul post.
Selamat berkarya, selamat belajar dan salam coding.
Thx

Lautan Pasir

Tutorial Cascading Style Sheet (CSS) - Shorthand Property