PENGERTIAN
SleepingCodings - CSS (CASCADING STYLE SHEET) memeiliki fungsi dan tujuan untuk memberikan, menambahkan serta mengatur dan mendesign agar halaman website yang sebelumnya, hanya menggunakan HTML tampilannya kurang menarik tapi ketika di gabungkan dengan file css halaman website menjadi lebih indah dan menarik untuk di kunjungi.
CSS menggunakan penanda / selector (id dan class) untuk mempermudah element / syntax mana yang akan dimodifikasi atau yang akan di beri sentuhan css, jika di ibartakan HTML sebagai tiang pada sebuah bangunan rumah, maka CSS berfungsi sebagai cat dan dekorasi untuk memperindah pada bangunan rumah tersebut.
Ada tiga teknik metode penulisan CSS, yaitu :
1. Inline CSS Style
2. Internal CSS Style
3. External CSS Style
Ketiga teknik metode cara penulisan CSS (inline, internal, external) tersebut akan kita bahas dan pelajari pada tutorial ini.
Teknik Penulisan CSS Inline Style
Teknik penulisan syntax css dengan cara Inline style adalah teknik cara penulisan syntax CSS yang tidak memerlukan selecter (id dan class). Sehingga syntax CSS di letakkan atau langsung di sisipkan pada element HTML, Syntax CSS di letakkan di dalam atribut style="".
contoh penulisan inline style :
Contoh Belajar CSS Dasar Cara Penulisan CSS. Untuk membuat contoh penulisan CSS dengan gaya inline caranya sediakan sebuah file HTML atau PHP, nah di sini Author akan menggunakan HTML, dan membuat sebuah file dengan nama index.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sleeping-Codings | Penulisan CSS dengan Inline Style</title>
</head>
<body>
<h1 style="color:red;">Text h1 ini akan berwarna merah | <a href="sleeping-codings.blogspot.com">klik disini</a>untuk belajar lebih lengkap di sleeping-codings</h1>
</body>
</html>
Nah, perhatikan script / codingan di atas tadi, syntax css di letakkan dalam element h1 menggunakan atribut style="" . Perintah color adalah perintah css yang di gunakan untuk mengatur warna font/text.
dan saat di jalankan di browser maka akan tampil seperti gambar di bawah ini :
 |
| Gambar 1.1 Tutorial CSS Part 2 Inline Style |
 |
| Gambar 1.2 Tutorial CSS Part 2 Inline Style |
Teknik Penulisan CSS Internal Style
Teknik penulisan syntax CSS dengan cara Internal Style adalah teknik cara penulisan syntax CSS yang di letakkan satu file dengan file HTML atau file PHP, syntax CSS di letakkan dalam <head> di bawah syntax <title>, dan cara menuliskan tag CSS nya yaitu dengan <style> dan di akhiri dengan tag </style>.
Contoh Penulisan Internal Style :
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sleeping-Codings | Penulisan CSS dengan Internal Style</title>
<style type="text/css">
#tulisan{
color:10px;
}
.box{
color:red;
background:grey;
padding:10px;
}
</style>
</head>
<body>
<div class="box">
<h1 id="tulisan">Text ini akan berwarna merah</h1>
</div>
</body>
</html>
Nah, jika di jalankan di web browser maka kurang lebih akan tampil seperti ini :
 |
| Gambar 1.3 Tutorial CSS Part 2 Internal Style |
 |
| Gambar 1.4 Tutorial CSS Part 2 Internal Style |
Nah, coba temen" liat nih penulisan CSS secara Internal, syntax style di letakkan 1 file dengan file HTML. Syntax CSS di letakkan di syntax <style>,
"#tulisan" maksudnya kita akan mengedit sebuah id yang bernama "tulisan", sedangkan untuk memanggil id awal untuk menuliskan namanya harus di awali dengan tanda "#" (pagar), nah sedangkan class itu cuman bedanya waktu awal kita memanggil kita menggunakan tanda "." (titik).
Teknik Penulisan CSS Internal Style
Teknik penulisan Syntax CSS dengan External Style adalah teknik penulisan yang apabila file CSS dengan HTML tidak 1 folder, maka kita perlu menggunakan metode External CSS Style ini, Nah teknik penulisan External CSS ini sangat baik atau malah di sarankan untuk temen" yang mau ngoding, karena apa? karena kode program yang akan kita buat tidak akan berantakan karena syntax CSS kita simpan pada file CSS. Nah File CSS dengan HTML kita hubungkan dengan perintah / script <link rel="stylesheet" type="text/css" href="file css temen-temen">. Untuk membuat contoh penulisan CSS dengan External Style siapkan satu buah file html dan satu buah file css. Nah, disini Author akan membuat sebuah file HTML yang akan Author beri nama index.html dan file CSS dengan nama style.css.
Contoh penulisan CSS menggunakan External Style :
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
<body>
<div class="box">
<h1 id="text">Text ini akan berwarna biru</h1>
</div>
</body>
</html>
style.css
.box{
background-color:lightblue;
width:500px;
height:200px;
text-align:center;
}
#text{
color:darkblue;
font-size:30px;
}
Dan ketika kita jalankan ke Browser :
 |
| Gambar 1.5 Tutorial CSS Dasar Part 2 External Style |
 |
| Gambar 1.6 Tutorial CSS Dasar Part 2 External Style |
 |
| Gambar 1.7 Tutorial CSS Dasar Part 2 External Style |
KESIMPULAN
Nah, jadi Cara Penulisan CSS ada 3 jenis / type, entah temen" mau pake yang mana, tp di sarankan sih External Style, karena lebih mempermudah dan untuk membedakan file CSS dan HTML agar tidak tercampur aduk scriptnya, Nah, temen" pasti udah punya gambaran kan, gampangannya CSS Inline itu kita menaruh / mengeditnya tepat di dalam tag / biasa di sebut atribute, yang kedua CSS Internal, terletak diantara tag <head> pembuka dan tag </head> penutup, dibawah <title> dan kita hanya perlu menuliskan <style> dan jangan lupa tutup </style>, Nah kalau External kita memanggil file CSS nya dengan cara <link rel="stylesheet" type="text/css" href="nama file css yang akan temen-temen panggil">, nah begitulah singkatnya.
Semoga Bermanfaat~.
Wassalamu'alaikum Wr.Wb
No comments:
Post a Comment