Cara Mudah Membuat CSS Sederhana - Assalamualaikum Wr.Wb,Selamat datang di Kesetrum Kabel,Dikarenakan
tugas kuliah yang numpuk dan sekarang ane juga udah kerja,jadi baru bisa
posting sekarang nih,tapi syukur halaman dashboard adminya belum berdebu atau
banyak sarang laba-labanya hehheh.
Ok,pada artikel kali ini ane mau berbagi kepada kalian
tentang Cara Membuat CSS.Sederhana Apa sih
CSS.?
CSS adalah Singkatan dari Casscading Style Sheet yang mana
adalah salah satu dari sekian banyak bahasa pemrograman,CSS sendiri berfungsi
untuk memperindah tampilan website dan mengendalikan beberapa komponen dalam
sebuah website sehingga akan lebih terstruktur dan seragam,dengan kata lain CSS
adalah bahasa pemrograman yang dipakai untuk keperluan web design.
CSS Di bagi
kedalam tiga jenis :
1.Inline CSS
2.Embedded CSS
3.External CSS
Dalam artikel ini
Kesetrum Kabel akan memberikan tutorial membuat CSS Eksternal
karena CSS Eksternal adalah tipe CSS yang paling sering digunakan oleh
kebanyakan web designer.
Sebelum memulai membuat CSS anda terlebih dahulu harus
memahami tentang HTML dan PHP.
Jika sudah kita akan langsung terjun ke TKP.Untuk membuat
sebuah program CSS kita membutuhkan sebuah software text editor,dalam tutorial
ini saya memakai Notepad++.
Ok sekarang buka Notepad++ anda maka tampilanya akan seperti
ini.
Setelah itu kalian buka tab language dan pilih CSS
Untuk menghubungkan halaman html kalian ke CSS tambahkan tag
ini
<link href=”namafolder/nama_file-css_anda.css”
rel=”stylesheet” type=”text/css” />
Letakan kode tersebut dibawah tag <head>,Maka otomatis file html anda akan terhubung otomatis
ke file CSS nya.Perhatikan Gambar.
Setelah itu mulailah anda menulis script CSS,dalam menulis
script CSS ada 3 selector yang akan dipakai,fungsi dari selector sendiri adalah
untuk menentukan element mana yang akan diatur style nya.
1.Class Selector
Contoh : .body {
Background-color:
#f00;
Margin-top:
20px;
Padding:
76px;
}
2.ID Selector
Contoh : #sidebar-left {
Padding : 20px;
Padding-bottom: 58px;
Background-color: #000;
}
3.Tag Selector
Contoh: p {
Font-family: Georgia;
Size: 14px;
Float: left;
}
Dari ketiga contoh diatas bisa kita lihat perbedaan
penulisanya,Class Selector menggunakan symbol(.) ID Selector menggunakan symbol (#) Sementara Tag Selector tidak menggunakan symbol apapun.
Untuk format penulisan CSS sendiri sebenarnya cukup simpel
yaitu kita tinggal menulis tag apa yang ingin kita atur lalu ditambah dengan
tanda kurung kurawal { } Sebagai pembuka dan
penutupnya,setelah itu kita tinggal menuliskan scriptnya yang diakhiri dengan
tanda (;) di setiap akhir penulisanya.Lihat Gambar.
Ok,Sekarang kita lanjut bagaimana menambahkan tag selector
kedalam file html agar bisa terhubung ke file CSS,Caranya mudah saja silahkan
anda buka file html nya,Contoh kita akan mengatur sebuah element pada website
kita,tinggal kita tambahkan tag <div
class=”nama-tagnya”> atau <div
id=”nama-tagnya”> dan diakhiri dengan </div> dan otomatis akan terhubung ke file CSS kalian,Contoh
:
Pada File HTML
<html>
<head>
<link
href=”ini-file_CSS.css” rel=”stylesheet” type=”text/css” />
<title>Nama
Website Anda</title>
</head>
<body>
<h1>Judul
Artikel</h1>
<p>Isi Artikel
blab la bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla </p><br />
<div class=”Isi-bebas_sesuai-selera”><p> bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla </p></div>
</body>
</html>
Pada File CSS
.Isi-bebas_sesuai-selera
{
Text-align:
left;
Color: #000;
Margin-left:
10px;
Font-family:
arial;
}
Maka otomatis teks yang berada di depan tag <div class=”Isi-bebas_sesuai-selera”>
akan terhubung ke CSS sementara teks yang hanya menggunakan tag <p> tidak.
Untuk lebih lengkapnya lihat gambar.
Lalu bagaimana cara
menggunakan tag selector.?
Sebenarnya caranya tidak berbeda jauh dengan ID Selector
atau Class Selector,hanya saja pada halaman html kita tidak perlu menggunakan
tag <div untuk
menghubungkanya,Contoh kita ingin mengatur keseluruhan penjudulan pada artikel
kita yang mana menggunakan tag <h1>.
Lihat gambar.
Bagaimana.? Mudah bukan,sekian untuk tutorial Cara Mudah Membuat CSS Sederhana kali
ini,untuk lebih lengkapnya silahkan tunggu part 2 nya Ok.!
Selamat Mencoba.
