Site icon Pesona Informatika

Belajar CSS (4. Penempatan Style Sheet)

Akhi Syabab

Penempatan CSS

Kita tentu sudah mengetahui bahwa file css akan membuat sesuatu yang ditampilkan oleh web browser menjadi terhias, namun bagaimana cara memasukan stylesheet ?
ada 3 cara memasukan stylesheet
1.inline
2.internal
3.eksternal

1. INLINE
Dari segi nama inline berarti didalam baris, maksutnya style dimasukan langsung dalam suatu tag tag html.
ex.

<!DOCTYPE html>
<html>
  <body>
    <h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
    This is a paragraph.
  </body>
</html>

Inline cocok digunakan jika hanya satu atau tag tertentu yang ingin diedit.

2. Internal
Internal stylesheet yaitu style yang dimasukan di kode file html namun berdiri sendiri, bukan didalam tag-tag selector seperti cara inline di atas. perhatikan contoh berikut

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      background-color: linen;
      }
      h1 {
        color: maroon;
        margin-left: 40px;
      } 
      p {
        color:blue;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>ini paragraf 2</p>
  </body>
</html>

kita dapat melihat bahwa dalam internal, stylesheet berdiri sendiri dan kita letakan di dalam tag head, tapi tidak harus di tag head, kami hanya meletakan di tag head karena paling sering digunakan. Jika kita bandingkan dengan cara inline sebelumnya, tentunya cara internal lebih ringkas karena kita mengatur style untuk tag <p> hanya sekali. tidak perlu menyisipkan color : blue pada semua tag <p> satu persatu

3. Eksternal
Eksternal stylesheet adalah cara memasukan style ke dalam kode html dengan memanggil melalui tag <link> yang kita sisipkan di tag <head>. Kita membuat file baru berformat .css.

Dengan style sheet eksternal, kita dapat mengubah tampilan seluruh situs Web dengan mengubah hanya satu file.
sebagai contoh kita buat 2 file, satu file html dan satu file css dalam satu folder

kode pada file latihan.html seperti berikut

<!DOCTYPE html>
<html>
  <head>
    <title>latihan</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
<body>
   <h1>JUDUL UTAMA</h1>
    <p>paragraf ini saya edit menggunakan css</p>
    <p>ini juga paragraf saya edit menggunakan css</p>
</body>
</html>

lalu kode dalam file mystyle.css kita isi

body {
    background-color: lightblue;
}
h1 {
    color: navy;
    margin-left: 20px;
}
p{
    color: yellow;
}

Kita telah belajar cara menempatkan stylesheet, sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab

Exit mobile version