Cara Penulisan CSS ~ Belajar Koding YUK !!

Jadi kita sudah tahu kan bagaimana cara menulis CSS. Namun alangkah baiknya saya sedikit akan menjelaskan terlebih dahulu bahwa untuk menuliskan file CSS, ada dua metode yang bisa dilakukan. Diantaranya adalah :

On File CSS

Dengan menggunakan metode ini, penulisan perintah CSS berada pada satu halaman dengan HTML. Dan biasanya CSS diletakkan di antara tag <style>...</style> yang berada di antara tag <head>...</head>. Seperti apa penulisannya. Perhatikan script di bawah ini :

<html>
<head>
        <title> Hallo Nemukabarcom </title>
<style>
h1 { 
color : red; 
font-size : 20px;
}
</style>
</head>
<body>
        <h1> Selamat Datang di Heading 1 </h1>
</body>
</html>

Inline CSS

Untuk metode yang satu ini, penulisan CSS berada pada satu baris dengan tag HTML yang dituju. Hanya saja metode yang satu ini jarang sekali digunakan lantaran dianggap sudah tidak efisien. Dengan metode ini, maka penulisan CSS harus dilakukan secara berulang-ulang walaupun ada tag HTML yang sama. Sebagai contohnya, perhatikan script di bawah ini :

<html>
<head>
        <title> Hallo Nemukabarcom </title>
</head>
<body>
        <h1 style=”color: red; font-size: 20px;”> Selamat Datang di Heading 1 </h1>
    <h1 style=”color: green; font-size: 30px;”> Selamat Datang di Heading 1 bag 2 </h1>
</body>
</html>

External CSS

Untuk metode yang satu ini lebih sering digunakan untuk pembuatan desain template web saat ini. Penulisan CSS dibuat pada satu file khusus dengan ekstension dot css (.css). Dengan menggunaan metode External CSS, kita bisa menentukan desain untuk setiap tag HTML yang sama tanpa mengulang sintaks CSS itu sendiri.

Namun untuk pemanggilannya, kita bisa menyisipkan tag <LINK> pada halaman HTML yang akan disisipkan CSS. Perhatikan script HTML dibawah ini:

<!DOCTYPE HTML>
<html>
 <head>
  <title>Penulisan CSS Belajar Koding Yuk</title>
  <link rel="stylesheet" href="belajarkodingyuk.css" type="text/css">
 </head>
 <body>
  <h1>Ini Heading 1</h1>
  <h2>Ini Heading 2</h2>
  <h1>Ini Heading 2 lagi</h1>
 </body>
</html>

keterangan :

<LINK merupakan tag pembuka.
rel="stylesheet", fungsi ini menerangkan bahwa halaman akan di kenal efek style sheet.
type="text/css", Menerangkan bahwa file yang akan kita panggilberupa file css.
href="belajarkodingyuk.css", di dalam tag ini kita meletakan alamat file dokumen style sheet yang akan kita panggil, kamu bisa merubah nama sesuai denga file css yang kamu buat.

Setelah kamu membuat file HTML diatas lalu buatlah file CSS, seperti script CSS dibawah ini :

/** Dokumen CSS **/
h1 {
  color: red;
  font-size: 20px;
  }

h2 {
  color: green;
  font-size: 15px;
  }

Lalu simpan file CSS dengan nama belajarkodingyuk.css atau dengan nama sama saat kamu memanggilnya pada file HTML tadi dan simpan ditempat yang sama dengan file HTML. Untuk mempermudah perhatikan gambar di bawah ini :