TUTORIAL CSS PART 2 : CARA PENULISAN CSS |

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

Share this: