TUTORIAL CSS PART 2 : CARA PENULISAN CSS - Bewok Tekno

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Responsive Ads Here

Thursday, May 5, 2016

TUTORIAL CSS PART 2 : CARA PENULISAN CSS

bewoksatukosong.com - Halo kembali lagi dengan om bewok Oke hari ini saya akan menjelaskan mengenai cara penulisan CSS. Sebenarnya penulisan css ada 3 cara. Untuk itu om bewok akan menjelaskan semuanya secara tuntas di artikel ini. Yuk kita pahami bersama - sama. 

Sebenernya dari 3 opsi yang ingin saya sebutkan ada kelebihan dan kekurangan nya masing - masing. Apa saja ? Yuk kita pahami satu - persatu.

1. Inline 
Yapp inline. inline kayak apa sih om bewok ? karena om bewok tau jadi om bewok bakal ngasih tau dengan detail dan tidak bertele - tele.
Pada suatu hari munculah sebuah inline, yang sebenernya hanya di pergunakan untuk html dasar, Jadi inline ini, css yang berada di dalam html. oke biar kita ga bingung, om bewok kasih contoh tutorial nya ya

<!Doctype html>
<html>
<head>
      <title>inline</title>
</head>
<body>
        <p style="color:green">hallo nama saya om bewok, dan huruf ini di ubah warna hijau menggunakan inline
        </p>
</body>
<html>

Hasilnya seperti ini ya

Gambar 1.1 CSS dengan Teknik Inline
WOW ternyata bisa toh kayak gitu doang menggunakan css, tapi ada kekurangannya lohhh.

HMM kalau kamu bikin website yang sampai benar - benar jadi, itu pasti bakal ngasih banyak code html, terlebih lagi css, dan ketika kamu ingin mengubah pasti agak susah karena mungkin faktor UMUR kamu bakal lupa menaruh CSS nya dimana, nah untuk itu tidak di rekomendasikan menggunakan CSS INLINE kecuali untuk belajar html dasar, ini hanya untuk pengetahuan saja ya.

2. Internal 
Apa Itu Internal ?Internal adalah sebuah internal yang di luar, maksud nya apa sih, jadi sebenernya internal ini berada di html tapi bukan di dalam perintah html nya, biar teman - teman ga bingung langsung om bewok kasih tutorial nya aja lah ya

<!DOCTYPE html>
<html>
<head>
 <title>internal</title>
 <style>
  p {
   color: red; 
  }
 </style>
</head>
<body>
 <p>halooooo tulisan ini berubah menjadi warna merah karena gara - gara si internal</p>
</body>
</html>

Hasilnya seperti dibawah ini ya
Gambar 2.1. Penulisan CSS dengan Teknik Internal
HMM <style></style> di mana kita untuk menuliskan css, kalau yang p itu di dapat dari p html, kalau teman - teman belum belajar HTML, teman - teman bisa belajar di sini TUTORIAL HTML LENGKAP. Nah sebenernya dari internal juga ada kekurangan nya sih, apa ? ga rapih, dan terlalu banyak di html nya, karena yang namanya css itu bisa sampe seribuan kalau pengerjaan website yang benar - benar sampai jadi ya. jadi tidak di rekomendasikan menggunakan ini kecuali untuk latihan - latihan css gapapa deh.LANJUT

3. EXTERNAL 
EXTERNAL ADALAH yang mana css nya di luar dari html. hmm sebelum om bewok kasih contoh, om kasih tempat naro nya ya. 
1.  Kamu buat seperti ini, nah kita bahas dari index.html dulu ya baru style.css
Gambar 3.1 Teknik External Pada CSS
2. Index.html nya kita tulis seperti ini ya : 
<!DOCTYPE html>
<html>
<head>
 <title>ini adalah html </title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <h1>halo nama saya om bewok dan ingin berubah jadi kuning ah</h1>
 <p>berubah warna menjadi biru menggunakan EXTERNAL CSS</p>
</body>
</html>
Saya Jelasin dulu ya, 
<link rel="stylesheet" type="text/css" href="style.css">
Artinya tempat menaruh cssnya, yang href="style.css" kita samain dengan nama file css yang kita buat ya.
3. style.css nya seperti di bawah ini ya 
h1 {
 color: yellow;
}

p {
 color: blue;
}

HAH ? Cuman gitu doang, ? yap betul sekali pak / ibu sekalian, hanya itu saja caranya, langsung tanpa perlu tulis <style></style>, saya jelasin satu - satu ya h1 yaitu heading 1 yang terdapat di html, nah color itu berfungsi untuk menganti warna huruf, yang p juga sama untuk mengubah warna huruf nya 

Hasilnya seperti apa ? penasaran? Simak gambar dibawah ini
Gambar 3.2 Tampilan browser menggunakan teknik external
Terima kasih buat kamu yang sudah belajar mengenai 
TUTORIAL CSS PART 2 : CARA PENULISAN CSS, Selanjutnya kita akan mempelajari TUTORIAL CSS PART 3 : CARA MEMBUAT KOMENTAR PADA CSS

No comments:

Post a Comment