Dasar CSS: 3 Cara Penempatan Kode CSS dalam HTML

Ada 3 Cara Penulisan atau Penempatan Kode CSS dalam Kerangka HTML yaitu Eksternal CSS, Internal CSS dan Inline CSS
Tehnosia Web
Dasar CSS: Dalam sebuah file HTML terdapat beberapa pengodingan untuk menyempurnakan tampilan dari sebuah halaman web, salah satu diantaranya adalah CSS.

CSS adalah singkatan dari Cascading Style Sheet yang merupakan kumpulan perintah untuk memanipulasi kode html, sehingga dengan atribut atribut CSS tampilan halaman sebuah web akan terlihat lebih indah dan rapi.


Dasar CSS: 3 Cara Penempatan Kode CSS dalam HTML


Penulisan tag dan atribut CSS dalam kerangka HTML tidak semuanya sama, tergantung dari programernya menggunakan cara yang mana, maka dalam memudahkan sobat tehnosia dalam mengedit templet dari sebuah website ada baiknya terlebih dahulu mengenali beberapa cara penempatan syntax CSS dalam sebuah HTML.

Ada 3 cara penulisan CSS dalam HTML yang lazim digunakan oleh para programer, yaitu :

A. Eksternal CSS

Seperti namanya, penempatan kode CSS pada metode ini berada pada file yang berbeda, artinya penulisan tag dan atribut CSS tidak berada dalam satu kerangka HTML itu sendiri, melainkan ditulis  pada file style sheet tersendiri dengan ekstensi .css .

Sebagai contoh, kita buat sebuah file CSS dengan nama "tehno-style.css"

#judul{
    color: orange;
    font-family: sans-serif;
    text-align: center;
}

p{
    color: black;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: justify;
  }

#kotak{
    width: 100px;
    color: #fff;
    background: blue;
  text-align: center;
    padding: 2px;


Untuk menjalankan semua perintah dalam file diatas, scrib harus dipanggil kedalam kode html, ada dua cara yang bisa dilakukan untuk menautkan file .css ini dengan file .html, yaitu :

1. Menggunakan tag "<link>" pada file html untuk memanggil file CSS.

Berikut kode yang harus sobat tempatkan pada file html 

<link rel="stylesheet" type="text/css" href="tehno-style.css">

2. Menggunkan kode @impor pada file html untuk memanggil file CSS.


<style type="text/css">
@import "tehno-style.css";
</style>


Note : Kedua file diatas (pilih salah satu yang sobat mau) diletakkan diantara tag <head> dan </head>  biasanya tepat dibawah title.

 Jika dilihat dalam tampilan file html posisi penempatannya akan terlihat seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Penulisan dalam File HTML</title>
    <!-- Pilih salah satu--> <link rel="stylesheet" type="text/css" href="tehno-style.css">
    <!-- Atau --> <style type="text/css"> @import "tehno-style.css";</style>
</head>

<body>

    <h1 id="judul">Belajar CSS di Blog<a href="https://www.tehnosia.com">Tehnosia</a></h1>
    <p>Paragraf 1 berisi Artikel</p>
    <p>Paragraf 2 berisi Artikel</p>
    <div id="kotak">Contoh Kotak</div> 
</body>
</html>

B. Internal CSS

Dikenal juga dengan sebutan Embeded CSS, internal css bisa dikatakan kebalikan dari eksternal css, karena tag dan atribut dari Internal CSS diletakkan langsung dalam  file html dalam tag  <style> diantara tag <head> dan </head> 

Contoh seperti pada file html dibawah ini :

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Penulisan dalam File HTML</title>
    <style type="text/css">
#judul{
    color: orange;
    font-family: sans-serif;
    text-align: center;
}

p{
    color: black;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: justify;
  }

#kotak{
    width: 100px;
    color: #fff;
    background: blue;
  text-align: center;
    padding: 2px;
</style>
</head>

<body>
    <h1 id="judul">Belajar CSS di Blog<a href="https://www.tehnosia.com">Tehnosia</a></h1>
    <p>Paragraf 1 berisi Artikel</p>
    <p>Paragraf 2 berisi Artikel</p>
    <div id="kotak">Contoh Kotak</div> 
</body>
</html>

C. Inline CSS

Sekilas sama dengan internal CSS berada dalam file yang sama dengan html, namun pada inline CSS ini penulisan tag <style> beserta dengan atributnya, langsung ditempatkan pada setiap atribut elemen HTML. Sehingga model penulisannya bisa di lihat pada contoh berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Penulisan dalam File HTML</title>
   
</head>

<body>
    <h1 style= "color: orange;font-family: sans-serif;text-align: center;">Belajar CSS di Blog<a href="https://www.tehnosia.com">Tehnosia</a></h1>
    <p style="color: black;font-family:Geneva;text-align: justify">Paragraf 1 berisi Artikel</p>
    <p style="color: black;font-family:Geneva;text-align: justify">Paragraf 2 berisi Artikel</p>
    <div style="width: 100px;color: #fff;background: blue;text-align: center;padding: 2px">Contoh Kotak</div> 
</body>
</html>

Tampilan penerapan dari ke 3 cara penulisan kode CSS diatas adalah seperti tampak dibawah ini :

See the Pen Belajar Coding by Tehnosia (@Tehnosia_CodePen) on CodePen.

Komentar
Silahkan Berkomentar Dengan Bahasa yang Santun dan Sesuai Topik Pembahasan
Terimakasih