Cara Menghubungkan CSS Dengan HTML


CSS3

Selamat malam, sebelumnya kita telah belajar tentang Struktur Dan Penulisan Pada CSS. Sekarang kita akan belajar bagaimana caranya untuk menghubungkan CSS ke dalam HTML. Kalau kita sudah bersusah payah membuat CSS nya tapi kita salah menghubungkannya dengan HTML, itu sama saja seperti HTML kita tidak dicombine dengan CSS.

Secara umum, ada 3 cara menghubungkan kode CSS ke dalam HTML, yaitu.
  • Inline
  • Internal
  • External

ketiga cara diatas sama saja, tujuannya sama sama untuk menghias kerangka website kita. Perbedaannya hanya terletak pada letaknya saja. Langsung saja, akan dijelaskan satu per satu.

1. Inline

Cara yang pertama adalah inline. Dengan cara ini, CSS langsung dimasukkan ke dalam tag HTML dengan menambahkan style=" atribut: value; ". jadi dengan cara ini, kita tidak memerlukan selektor, karena kita langsung memasukkannya ke dalam tag yang akan diedit. Untuk yang belum paham apa itu selektor, attribut, dan value bisa dibaca di pos sebelumnya tentang Struktur Dan Penulisan Pada CSS. Kuncinya hanyalah ini.

style=" atribut: value; "

Misalnya, kita akan mengedit tag H1 pada HTML kita. Langsung masukkan properti di atas ke dalam tag H1 seperti ini.

<H1 style=" font-size: 20px;"> Belajar CSS </H1>

sudah paham cara menghubungkan CSS dengan metode inline? lanjut ke cara yang ke dua.

2. Internal

Cara yang kedua adalah Internal. Seperti namanya, kode css dimasukkan ke dalam satu file .html, namun dipisahkan dengan cara memberikan element <STYLE></STYLE> di dalam element HEAD atau kepala dari html itu sendiri. Agar tidak bingung, langsung kita lihat. Secara umum, struktur/syntax HTML adalah seperti ini.

<!DOCTYPE html>
<html>
    <head>
        <title> Judul </title>
    </head>
    <body>
        CONTENT
    </body>
</html>

Seperti yang disinggung sebelumnya, dengan metode Internal, kita menambahkan element STYLE ke dalam HEAD seperti di bawah ini.

<!DOCTYPE html>
<html>
    <head>
        <title> Judul </title>
        <style>          
            CSS HERE
        </style>  
    </head>
    <body>
        CONTENT
    </body>
</html>

Diantara element STYLE, kita bisa langsung menambahkan kode CSS. misalnya kita akan mengubah tag H1, langsung saja tuliskan di antara element STYLE. Ingat! diantara element STYLE. seperti di bawah ini.

<!DOCTYPE html>
<html>
    <head>
        <title> Judul </title>
        <style>        
            H1 { font-size: 20px;}      
        </style>
    </head>
    <body>
        CONTENT
    </body>
</html>

Tulisan warna biru adalah kode CSS sobat, silahkan tambah tambah sesuka hati. Kekurangan dari metode ini adalah terkesan tidak rapi, karena kode CSS akan tergabung secara langsung dengan HTML. Cara yang paling dianjurkan adalah dengan metode yang terakhir yaitu External. Langsung ke pembahasan.

3. External

Cara yang ketiga adalah external. Cara yang ini sangat dianjurkan, kenapa? karena kode HTML dan kode CSS akan terpisah menjadi file yang berbeda dan di segi kerapian, cara yang satu ini memang paling rapi dibanding kedua cara yang lain. Nantinya kita akan mempunyai 2 file, yaitu file dengan extensi .html dan extensi .css . Untuk menghubungkan file .css ke dalam HTML, kita menambahkan tag <link rel="stylesheet" type="text/css" href="file css.css"> ke dalam element HEAD di html kita. Seperti dibawah ini.

<!DOCTYPE html>
<html>
    <head>
        <title> Judul </title>
                <link rel="stylesheet" type="text/css" href="file.css">
    </head>
    <body>
        CONTENT
    </body>
</html>

nah, untuk href nya sendiri, ganti tulisan warna oranye dengan link menuju file css sobat. ingat yah, file css harus berada satu folder dengan file html sobat. Jika berbeda folder, tinggal masukkan juga foldernya ke dalam link. Seperi ini.

<!DOCTYPE html>
<html>
    <head>
        <title> Judul </title>
                <link rel="stylesheet" type="text/css" href="folder/file.css">
    </head>
    <body>
        CONTENT
    </body>
</html>


Nah, mudah bukan tentang cara menghubungkan css dengan html? jika ada kesulitan atau ingin bertanya, silahkan contact admin. Admin bersedia membantu. Selamat malam.

Cara Menghubungkan CSS Dengan HTML

Labels: ,

Post a Comment

Jangan buang waktu percuma untuk membuat komentar SPAM atau sekedar mencari backlink. Karena kedua komentar tersebut akan langsung dihapus.
Admin online 12/7

Author Name

MKRdezign

Contact Form

Name

Email *

Message *

Theme images by Ollustrator. Powered by Blogger.