Tutorial cara membuat website statis (part 12) | Belajar membuat CSS
Kali ini saya akan menjelaskan cara membuat script CSS yang nantinya kita implementasikan pada website statis yang kita buat.
Dalam membuat CSS sebenarnya cukup mudah karena script yang dipergunakan tidak sulit, softholic mania hanya tinggal membuat id ataupun class yang nantinya dipanggil untuk memberikan pengaturan atau efek pada markup language yang sudah dibuat.
Cara membuat script CSS :
- Buka notepad++ ataupun bluefish editor softholic mania, langsung simpan dengan nama style.css
- Untuk membuat script CSS sama seperti membuat class, softholic mania tinggal memberikan nama class yang diinginkan lalu pada class tersebut diberi container (isi) yang ingin diberikan pada markup language.
- container clas harus berada diantara kurung kurawa { }.
- Container atau script yang kita masukkan harus diakhiri dengan ; (titik koma) pada bagian akhir script.
Untuk lebih jelasnya saya akan membuat sebuah script CSS dengan nama class efek, dimana pada class efek akan saya beri border style.
.efek /*nama kelas*/
{/*container pembuka*/
border-style:dotted; /*efek markup language border, diakhiri dengan titik koma;*/
color:red;
}/*container penutup*/
Setelah file style.css kita buat, sekarang kita coba implementasikan pada file HTML. Buat file HTML dengan nama contoh_css.html.
<head>
<title>Contoh CSS</title>
<link rel='stylesheet' type='text/css' href='style.css'/>
<body>
<div class='efek'>Welcome to www.softholic.net</div>
</body>
</head>
Jika softholic mania membuat seperti yang saya buat, maka hasil yang didapatkan akan seperti gambar 1.1 dibagian bawah.
gambar 1.1
Sekian tutorial tentang cara membuat CSS yang diimplementasikan pada website, tutorial ini saya harap diperdalam karena akan dipergunakan pada tutorial selanjutnya dalam membuat website.
Related Posts
- Tutorial cara membuat website statis (part 18) | Finishing website statis
- Tutorial cara membuat website statis part (17) | Validasi form contact dengan javascript
- Tutorial cara membuat website statis (part 16) | Pengenalan dasar javascript
- Tutorial cara membuat website statis (part 15) | Membuat contact form pada layout website
- Tutorial cara membuat website statis (part 14) | Pembuatan form dengan HTML
- Tutorial cara membuat website statis (part 13) | Menggabungkan HTML dengan CSS
- Tutorial cara membuat website statis (part 11) | Pengenalan dasar CSS
- Tutorial cara membuat website statis (part 10) | Membuat isi website
- Tutorial cara membuat website statis (part 9) | Memasukkan gambar pada layout
- Tutorial cara membuat website statis (part 8) | Cara buat layout di HTML
