Belajar CSS Sesi 4: Cara Mudah Input Kode CSS ke Halaman HTML

February 21, 2017
No Comments
Cara Mudah Input Kode CSS ke Halaman HTML – Pada kali ini saya selaku admin dari ShortCutID akan memberikan anda sebuah tutorial untuk kode CSS, disini nanti anda akan tahu bagaimana cara menginput kode CSS ke sebuah halaman HTML, pastinya cara yang saya sampaikan sangat mudah untuk dipahami dan juga mudah untuk dilakukan.

Banyak sekali cara untuk menginput kode CSS ke halaman HTML, dan disini saya akan mengajarkan anda 2 cara saja yang menurut saya termudah untuk dipahami dan dilakukan. 2 Cara yang akan saya berikan pada artikel ini bernama Internal Style Sheets dan Inline Style, walaupun sebenarnya masih ada lagi 1 metode yaitu metode yang bernama External Style Sheets.

1. Menggunakan cara Internal Style Sheets
Cara pertama ini juga biasa disebut Embedded Style Sheets. Metode ini berguna untuk memisah kode CSS dari tag HTML tetapi masih dalam satu halaman HTML yang sama. Atribut-atribut style yang berada di dalam tag akan digabungkan pada sebuah tag <style>. Dan tag <style> ini harus ditempatkan di bagian <head> di sebuah halaman HTML.

Berikut adalah contoh penerapan dari Internal Style Sheets

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <style type="text/css">
        h2 {
        background-color:black;
        color:white;
        }
    </style>
</head>
<body>
    <h2>

2. Menggunakan cara Inline Style
Cara yang bernama Inline Stle ini mudah sekali, karena cara ini langsung menginput kode CSS ke bagian tag HTML, dengan menggunakan atribut <style>. Disini saya sudah memberikan contoh penerapan dari metode Inline Style.

<!DOCTYPE html>
<html>
<head>
     <title>Contoh Inline Style CSS</title>
</head>
   <body>
      <h2 style="background-color:blue; color:white" >
         Contoh penerapan Inline Style, dan text ini akan bewarna putih dan background warna biru, dicoba ya...
      </h2>
   </body>
</html>

Mungkin hanya itu saja tutorial dasar CSS, semoga anda dapat memahami, jangan lupa di share jika menurut anda bermanfaat, terima kasih.

Tags: , , , , , ,