CSS Dasar : Penempatan CSS

Penempatan CSS : Sebelum kita melakukan koding pada CSS di file HTML kita, alangkah baiknya kita pelajari dulu bagaimana cara menempatkan CSS didalam dokumen HTML kita, jadi nanti CSS nya akan kita taruh didalam file terpisah, ada beberapa cara dalam menempatkan CSS didalam HTML, kita bisa simpan didalam halaman yang sama  atau kita bisa buat file sendiri atau file terpisah dengan ekstensi filenya CSS nanti kita hubungkan dengan cara file HTML dan file CSS.

 

Yang pertama yang bisa kita lakukan adalah dengan cara yang namanya embed , kita bisa simpan didalam file yang sama, nanti simpannya didalam head HTML, seperti waktu dimateri sebelumnya CSS nya bisa didalam head pada HTML.

 

  • Embed
  • Inline
  • External

 

Dengan menggunakn tag <style></style> kita bisa simpan CSS didalam head, itu yang pertama.

 

Lalu yang kedua kita bisa lakukan masih didalam file yang sama tapi kita gunakan atribut dari HTML yang Namanya style=”” , itu disebut inline, jadi nanti kita cari elemen HTML mana yang mau dirubah CSS nya setelah itu kita tambahkan atribut style lalu simpan sintaks CSS nya.

 

Dan yang ketiga ini adalah dimana kita buat file CSS terpisah dengan HTML nanti kita hubungkan antara file HTML dengan CSS menggunkan tag link, ketiga hal ini nanti akan kita coba gunakan dilatihan  pada kali ini.

 

Kita coba yang pertama untuk yang embed :

 


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS Dasar | Penempatan CSS</title>


    <style>

        body {

           font-family: arial;

        }

        h1 {

           color: lightblue;

        }

        p {

           line-height: 1.6em;

           color: grey;

        }

    </style>

</head>

<body>

    <h1>Hellow World!</h1>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi alias molestiae odio cum tempore deserunt vero sunt similique aspernatur nemo illo quos voluptates laudantium, fugiat, quidem, fuga quaerat tempora? Deleniti!</p>

</body>

</html>

 

Yang pertama kita coba embed : Misalkan kalian punya HTML seperti diatas, didalam body terdapat h1 dan p lalu kita tambahkan tag style didalam head baru didalamnya kita tulis sintaks CSSnya, itulah yang disebut embed.

 

Yang kedua kita bisa gunakan inline, jadi CSS kita sisipkan langsung dielemen HTML yang mau kita ubah stylenya, perhatikan dibawah ini :

 


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS Dasar | Penempatan CSS</title>

</head>

<body>

    <h1 style="text-align: center; font-size: 60px;">Hellow World!</h1>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi alias molestiae odio cum tempore deserunt vero sunt similique aspernatur nemo illo quos voluptates laudantium, fugiat, quidem, fuga quaerat tempora? Deleniti!</p>

</body>

</html>

 

Saya punya h1 dan p sama seperti yang pertama, untuk membuat inline CSS kita bisa saja menempatkan CSS di dalam h1 dan bisa juga di tag HTML yang lain, seperti contohnya diatas ada sedikt CSS yang sudah saya terapkan didalam h1, nah menggunakan inline ini tiak saya sarankan karena kita kembali lagi sama aja waktu kita belajar di HTML sebelumnya jangan mencampurkan antara style dengan konten ini artinya HTML dan CSS kita gabungkan lagi, tapi ada saatnya kalian memang harus menggunakan ini, jadi gunakan  inline CSS hanya ketika kalian tau apa yang akan kalian lakukan.

 

Dan yang terakhir ini yang sering kita coba itu menggunakan external, jadi ceritanya kita punya file lain terpisah dengan HTML nya nantinya file tersebut kita hubungkan, seperti dibawah ini :

 


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS Dasar | Penempatan CSS</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <h1 style="text-align: center; font-size: 60px;">Hellow World!</h1>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi alias molestiae odio cum tempore deserunt vero sunt similique aspernatur nemo illo quos voluptates laudantium, fugiat, quidem, fuga quaerat tempora? Deleniti!</p>


</body>

</html>

 

Dengan menambahkan baris  <link rel=”stylesheet” href=”nama-file.css”> tersebut ini artinya saya sudah menghubungkan antara file HTML dan file CSS.

 

Jadi itulah 3 cara dimana kita bisa menyimpan file CSS, sampai sini dulu mungkin bagaimana cara menempatkan CSS jadi sekarang kalian tau cara bikinnya lalu menuliskan dibagian HTML seperti apa silahkan kalian pilih dari 3 penempatan yang akan kita sering coba mungkin yang embed atau yang external, yang inline mungkin kita jarang coba, mungkin sampai segitu dulu materi kali ini nanti kita akan lanjutkan berikutnya untuk bagaimana cara memberikan style pada text dan font karena CSS memisahkan kedua hal itu, nanti kita lihat apa bedanya dimateri berikutnya. Saya ABDUL ROSYID pamit, Terimakasih.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *