Cara Mudah Menghubungkan CSS ~ TechNeverDies

Assalamu'alaikum wr.wb Masih tetap bersama kami untuk terus menggali ilmu. Karena ilmu itu tidak pernah ada habisnya untuk di gali. Pada pembahasan kali ini kami ingin memberi tambahan sedikit ilmu yang kami beri judul :

Beberapa Teknik untuk menghubungkan File CSS Di HTML

Setelah beberapa waktu lalu membahas tentang "CARA BUAT PROGRAM HELLO WORD DI HTML" . Maka untuk pembahasan kali ini kami bakalan membahas tentang hal yang tadi kami sampaikan. Baik kawan - kawan sahabat Tech never dies tidak usah memperpanjang kata, kita akan langsung membahas.

Mas/Mbak Ane Belum Tahu ni?

Oke kami akan membahas secara tuntas bagaimana caranya dimulai dari tingkat yang mudah dulu, Supaya belajarnya semakin ada tantangan jika semakin keatas. Sebagai pemula yang kami berharap supaya kalian pantang menyerah dalam proses pembelajaran . Memang pada dasar ini terkadang kalian merasa membosankan tapi jika anda terus meningkatkan performa anda dalam bidang programming ini , Insya allah anda bakalan menjadi Programmer yang terkenal.

Bagaimana Cara nya ?

Oke kawan Sekalian untuk Memberi tahu caranya Ane bakalan caranya Satu Persatu

CARA I

Untuk menghubungkan css Di HTML kita menggunakan Teknik yang dinamakan Inline.

Apa itu Inline ?

Menurut kamus adek Inline itu terdiri dari dua kata yaitu in = didalam , line itu mungkin aplikasi ya.. gak line itu baris. Jadi Inline itu meletakkan css nya pada file html nya tepatnya di dalam baris masing - masing . Mungkin teman teman disini masih bingung dengan definisi untuk lebih lanjut bisa dicoba seperti cara di bawah .

Berikut tampilan dari gambar :

Untuk lebih jelas silahkan baca Script ini :

 
<html>
<head>
 <title> Belajar CSS </title>
</head>

<body>
 <!-- Cara masukkan CSS inline -->
 <h1 style="color:blue" > ini heading </h1>
 <p>ini Paragraph </p>
</body>
</html>

Pada Script di atas kita dapat melihat dimana kita bisa memainkan css pada line nya atau kita sebut dengan inline. Jadi pada inline kita dapat membuat css dengan cara sebagai berikut Misalkan kita ingin meng-gayakan paragraph ini saja . Maka yang dapat dilakukan yaitu seleksi paragraph, Lalu anda bisa beri Style pada tag paragraph. Seperti dibawah ini.

<h1 style="color:blue" > ini heading </h1>

Tampak jelas kita hanya membuat Css nya pada tag tertentu. Kita lanjut ke cara selanjutnya.

CARA 2

Setelah kita membahas Cara 1 tadi yang kita namakan dengan Inline yaitu cara dalam line. Kita akan melanjutkan teknik kedua kita namakan dengan teknik Internal. Jadi sesuai namanya yang kita namakan internal yang artinya didalam. Mungkin masih belum paham jadi kita akan bahas teknik Kedua ini ya.

Teknik internal ini merupakan salah satu teknik untuk Meletakkan CSS pada HTML. Jadi cara kerja yang di dapat dilakukannya seperti gambar di bawah ini Biar kalian paham.

Jika dari gambar diatas masih belum jelas karena masih menerawang kalian bisa Melihat List Kode seperti dibawah ini :

 
<html>
</head>
 <title>Belajar CSS </title>
 
 <style>
  p{color : red;}
  h1{color :blue;}
 </style>
</head>

<body>
 <!-- MASUKKAN CSS Internal -->
 <h1> Ini heading ku </h1>
 <p>Ini paragraph </p>

</body>
</html>

Jika Sudah melihat ane bakalan membahas nya . Pada Inline tadi kita meletakkan Style untuk Css nya berada pada Tag yang kita butuh kan saja. Berbeda pada Teknik internal ini dimana kita meletakkan Style diatara Tag head pembuka dan pada Tag Penutup. Jadi pada Cara internal ini kita sudah dapat melihat kode yang agak rapi tanpa terlalu melebar kesamping. Pada internal ini kita hanya memanggil selektor yang ingin kita beri CSS Seperti p , Jadi pada p atau di sebut paragraph kita akan beri CSS font color nya berwarna merah. Jadi kita hanya memandang di Script Css - nya Saja tanpa bersusah payah berfikir yang mana untuk di Css kan .

Jika Cara Kedua Sudah diamalkan Kita bakalan naik kesesi tingkat Dewa Dalam Menghubungkan Css . Tapi Kawan-kawan Tenang saja karena saya akan membantu agan sekalian . Karena dalam islam punya Semboyan "Tolong Menolonglah Dalam Urusan Kebaikan" . Ya kita bakalan lanjut ke pembahasan yakni Teknik ke 3.

Cara 3

Setelah kalian melewati perjalanan yang panjang Kita akan memasuki Teknik yang terakhir . Yang mana teknik ini paling sering digunakan didalam pembuatan web. Teknik ini dinamakan dengan teknik Eksternal. Maksud nya disini meletakkan file Css nya di luar file HTML . Jadi kawan-kawan bisa memaksimal kan kinerja sobat. Jadi pada Teknik Eksternal ini kita harus mempunyai 2 file , Dimana file pertama digunakan untuk Html nya Yang satu lagi untuk CSS nya.

Ada Hal yang Saya ingatkan Save file nya . Jika kita ingin Mengsave untuk HTML nya maka yang kita lakukan adalah save dalam format .HTML . Lalu jika agan sekalian ingin mengesave dalam bentuk CSS Maka yang dilakukan menyimpan dengan format .CSS

Oke kita lanjut silahkan Agan Preview dulu gambar dibawah ini.

Berikut Preview didalam File HTML

Dan ini untuk CSS nya.

Jika kalian masih melihat gambarnya buram silahkan deh liat atau tulis ulang kode ini.

Yang ini digunakan untuk File Html dan jangan lupa save dengan Format .HTML

 
<html>
</head>
 <title>Belajar CSS </title>

 <link href="eksternal.css" rel="stylesheet" type="text/css">
 
</head>

<body>
 <!-- MASUKKAN CSS Internal -->
 <h1> Ini heading ku </h1>
 <p>Ini paragraph </p>

</body>
</html>

Oke kita bahas dulu yang Css External, Pada html nya . Dikarenakan File Css kita buat berada di file yang lain maka yang dapat kita lakukan yaitu membuat jembatan penghubung file yang kita letakkan diantara Tag Head.

<link href="Lokasi LINK Nya.css" rel="stylesheet" type="text/css">

dengan cara di atas adalah teknik untuk menghubungkan file CSS Nya.

Lalu kita masuk ke CSS Nya seperti gambar berikut ini.

Pada Css nya kita hanya menggunakan Selektor yang gunanya untuk menseleksi tag mana yang ingin diberi Css nya. Seperti pada Gambar kita memberi perintan pemberian Css untuk font color pada paragraph berwarna hijau.

Oke kawan-kawan sekalian demikian teknik mudah menghubungkan Css ke html. Silahkan gunakan Sesuai kemampuan Dan kebutuhan anda sekalian tetap lah update bersama kami hanya di techneverdies . Wassalam