Bagaimana sih cara menulis code css? Buat anda yang masih pemula dan baru tahu tentang yang namanya css (Cascading Style Sheet) pasti dibenak kalian terselip sebuah pertanyaan seperti itu kan? kalo betul iya, silakan anda baca post kali ini yang khusus membahas tentang bagaimana cara menulis dan merangkai sebuah code css untuk memperindah tampilan web atau blog kalian dengan benar dan teratur berdasarkan pengalaman admin dalam menulis css selama kurang lebih 3 tahun yang lalu.
Sebenarnya untuk menulis css tidaklah sesulit yang kalian bayangkan sebab css bukanlah bahasa pemrograman melainkan sebuah code untuk memperindah tampilan sebuah web yang tentunya tidak akan bersifat sensitive jika ada kode yang salah pada salah satu baris kode. Berbeda sekali dengan code program php dan javascript, jika salah satu suku kata program yang dimasukan tidak benar maka tentunya akan berimbas pada seluruh kode yang dibuat dan untungnya sifat dari css tidaklah seperti bahasa pemrograman php dan javascript yang sensitive.
Untuk menulis css langkah pertama yaitu menulis selector css, property dan value. oh iya untuk isi dari selector css yaitu pembuka dan penutup diberi sebuah simbol khusus yaitu kurung kurawal.
Contoh penulisan css yang benar yaitu seperti dibawah ini :
#header { background: black; color: white; }
Berikut adalah penjelasan dari satu baris kode di atas yang tentunya sangat mudah dihafal.
#header
Pada bagian #header disebut dengan selector, fungsi selector yaitu untuk menamai suatu id atau class yang ingin dibuat jika ingin membuat selector id maka pada bagian depan ditambah simbol pagar (#) dan jika ingin membuat selector class maka pada bagian depan ditambah tanda titik (.) contoh (.header)
Background: dan Color:
Pada bagian Background: dan Color: disebut dengan Property, fungsi dari property yaitu untuk menulis sifat-sifat dari suatu value, contoh lain dari property adalah margin, padding, border, font-size, width, height dan masih banyak lagi yang tidak mungkin saya sebutkan semua. Tanda Titik dua (:) digunakan untuk menunjukan isi dari property yaitu value.
Black dan White
Black dan white adalah sebuah value yang fungsinya adalah untuk menentukan isi dari sifat property yang umumnya bukan hanya berisi huruf saja tetapi angka juga ada pada value contohnya yaitu dalam penulisan propery width ataupun height yang penulisan valuenya berisi angka untuk menentukan besarnya.
Dalam mengakhiri suatu perintah dari property kita gunakan simbol Titik Koma (;) yang fungsinya selain untuk mengakhiri printah property tetapi juga berfungsi untuk memisahkan antara satu property dengan property yang lain.
Dalam kasus menulis sebuah elemen css kita dapat menulisnya dalam sebuah file dalam format css yang dapat kita panggil dengan code stylesheet ataupun kita juga bisa menulisnya langsung di dalam sebuah dokumen html yang penulisanya didalam tag style <style> , biasanya diletakan di bagian header dok html.
Berikut adalah dua cara penulisan code css di html yang sering admin pakai selama ini.
1. Menulis Eksternal
Untuk menulis eksternal kita bisa menulisnya di file lain yang berformat css dan dalam hal ini antara code html dan css bersifat berjauhan yang tentunya harus kita panggil dengan code html. Metode ini sangat praktis jika anda membuat banyak halaman yang ingin diberi style css yang sama.
Untuk lebih jelasnya silakan anda praktekan langkah menulis css dengan metode eksternal di bawah ini :
Pertama-tama buatlah file dengan nama style yang memiliki format css (style.css) di Notepad++ atau di webhost kalian. lalu isilah file tersebut dengan code css berikut
#fikri { background: blue; color: white; } #Bayu { background: red; color: white; } #muslim { background: white; color: black; }
Dan setelah itu kita panggil code css di atas dengan membuat sebuah dok html yang akan menampilkan style css yang telah kita buat. Dok html itu kita beri nama (Teman.html).
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="fikri" >Fikri</div>
<div id="bayu" >Bayu</div>
<div id="muslim" >Muslim</div>
</body>
</html>
* Perhatikan Huruf Tebal
Pada bagian code di atas adalah contoh dari menulis css dengan metode eksternal dan bagi anda yang masih belum paham silakan anda pahami dulu codenya.
2. Menulis Internal
Dalam menulis internal jauh lebih mudah dari menulis eksternal tetapi kerugianya juga ada yaitu kita dituntut untuk menulisnya di setiap halaman yang ingin kita beri style css berbeda dengan metode eksternal yang dapat digunakan di berbagai halaman.
Untuk cara menulis dengan metode internal silakan anda ikuti langlah-langkah berikut ini.
- Buatlah sebuah dok html dengan nama (coba.html).
- Lalu isi dengan code berikut
<!DOCTYPE HTML>
<html>
<head>
<style> #coba { background: black; color: white; font-size: 12px; padding: 3px; } </style>
</head>
<body>
<div id="coba">Coba</div>
</body>
</html>
Code di atas adalah contoh pemanggilan dengan metode internal dan bagi yang kurang paham silakan anda pahami lagi code di atas dengan cermat dan teliti.
Sekiranya sekian dulu post kali ini. Semoga artikel ini bisa bermanfaat bagi anda semua yang sedang lagi belajar coding, jika ada pertanyaan silakan komen di kolom komentar.
Sekian dan sampai jumpa lagi di postingan selanjutnya!
0 Response to "Cara Menulis Css (Cascading Style Sheet) Dengan Benar"
Posting Komentar