Home css Cara menghubungkan file HTML dengan CSS

Cara menghubungkan file HTML dengan CSS



Untuk menghubungkan file HTML dengan CSS, Bisa di lakukan dengan 3 cara, yaitu Inline Style, Embedded Style, Link Style. Nah untuk jelas nya mari kita liat contoh dibawah ini.

1. Inline Style

Inline Style merupakan cara menghubungkan file CSS langsung ke dalam element HTML

Berikut contoh untuk penulisannya.

<html>
                <head>
                                <body style="background-color:#DFDFDF;">
                        <h1 style="color:red; font-size;15px ;text-align:center;"> Ini contoh menggunakan inline style </h1>
                                </body>
                </head>

</html>

 2. Internal Style

Internal Style hampir sama dengan Inline Style merupakan cara menghubungkan file CSS Tepat di didalam syntax HTML, Penulisannya tepat diantara pembuka tag <head> dan penutup tag </head>.

Berikut contoh untuk penulisannya.

<html>
                <head>
                                <style>
                                                                body        {
                                                                background-color:#DFDFDF;
                                                                }
                                                               
                                                                h1 {
                                                                text-align:center;
                                                                font-family:Century;
                                                                font-size:16pt;
                                                                }
                                                               
                                                                p {
                                                                text-align:left;
                                                                font-family:Century;
                                                                font-size:14pt;
                                                                }

                                </style>
               </head>

                                                <body>
                                                                <h1> Contoh Penulisan syntax untuk Internal Style </h1>
                                                                <h2>Contoh lain nya dari Point Website</h2>
                                                </body>
               
</html>

Pada contoh diatas dapat kita liat Syntax CSS berada tepat di antara tag pembukan <head> dan tag penutup </head>

3. Eksternal Style

Sama seperti nama nya, Eksternal Style merupakan cara menghubungkan file CSS terpisah dengan HTML dan penghubungannya menggunakan link, Penulisan linknya tepat berada di antara pembuka tag <head> dan penutup tag head </head>.

Berikut contoh penulisannya dari file CSS nya.

body {
     background-color:#DFDFDF;
     }
                               
h1  {
    text-align:center;
    font-family:Centuryl
    font-size:16pt;
    }
                               
h2  {
    text-align:left;
    font-family:Century;
    font-size:14pt;

    }

File di atas simpan dengan nama file.css ( Nama terserah anda, yang penting ekstensinya .css )
Berikut contoh penulisan untuk Link penghubung pada HTML nya.

<html>
                <head>
                <link href="file.css" rel="stylesheet" type="text/css">
                </head>
                        <body>
                                <h1> Contoh penulisan syntax untuk Eksternal Style </h1>
                                <h2> Point Website </h2>
                        </body>

</html

Untuk menggabungkan kedua file tersebut menggunakan Tag <link href=”nama file css yang anda buat” rel=”stylesheet” type=”text/css”>.

Sekian tutorial CSS dasar tentang Cara menghubungkan CSS dengan HTML, Untuk penggunaan CSS selanjutnya akan saya bahas pada tutorial selanjutnya.



10 comments:

  1. Ubung umagapiMay 5, 2017 at 9:49 AM

    thanks bro atas ilmunya

    ReplyDelete
  2. Alex MarcoJune 2, 2017 at 11:36 AM

    masama broo... moga bermanfaat.. :D

    ReplyDelete
  3. UnknownMarch 6, 2020 at 5:52 AM

    Terimakasih sudah membantu

    ReplyDelete
  4. Muhammad Intan ArfiesApril 3, 2020 at 8:18 AM

    Terimakasih kak. Artikel yang kakak buat sangat bagus. Semangat terus ya kak untuk membuat artikelnya.
    Dan sedikit Saran dari Saya untuk kedepannya Kakak menjelaskannya dengan gambar, supaya lebih mudah lagi untuk dipahami Dan sebagai acuan atau contoh untuk kami para pembaca. Perkenalkan Nim saya 1922500053, Nama Muhammad Intan Arfies, Kelompok SI2K, link kampus saya https://www.atmaluhur.ac.id/
    Salam kenal ya kak.

    ReplyDelete
  5. Ardila YunitaApril 3, 2020 at 11:13 PM

    Halo kak. Terimakasih atas ilmu baru yang diberikan kepada saya yang baru belajar HTML ini . Semoga kedepan dapat memberikan ilmu baru dan cara baru yang lebih dapat dimengerti dengan cepat ya kak hehe. Terimakasih kak,sukses kedepannya. Salam kenal kak. Perkenalkan saya Ardila Yunita, NIM 1922500096 , Kelompok SI2J , link kampus https://www.atmaluhur.ac.id/

    ReplyDelete
  6. UnknownApril 8, 2020 at 12:00 AM

    Hai kak, terimakasih atas ilmu yang kakak berikan pada artikel ini, tulisan kakak sangat membantu saya yang baru belajar tentang HTML ini, semangat terus kak. Perkenalkan nama saya Ranum Fatwa Aulia, NIM 1922500033, kunjungi website kampus saya di https://www.atmaluhur.ac.id/

    ReplyDelete
  7. Dita rahmandaApril 8, 2020 at 5:43 PM

    Selamat pagi kao,terimakasih atas ilmu nya,artikel ini sangat mudah dipahami,kata kata penyamapaian nya juga sangat singkat dan jelas,sangat membantu dalam menyelesaikan tugas perkuliahan saya,sukses selalu kak.perkenalkan nama saya dita rahmanda,nim 1922500076,dari kelompok si2j,dan link web kampus saya https://www.atmaluhur.ac.id

    ReplyDelete
  8. Edo renaldiApril 8, 2020 at 7:58 PM

    Terimakasih atas ilmuu dan artikel yang telah anda buaat ini sangat membantu saya sekali dalam proses belajar , sukses yaa kaak tetap membuat artikel artikel yang bermanfaat untuk orang banyak
    Nama:edo renaldi
    Kls:si2j
    Nim:1922500004
    Link web kampus saya https://www.atmaluhur.ac.id

    ReplyDelete
  9. wirantoApril 9, 2020 at 7:20 AM

    Terima kasih kak website ini sangat bermanfaat untuk saya dengan penjelasannya. Saya merasa senang dapat ilmu tentang Cara menghubungkan file HTML dengan CSS. Materi yang disampaikan oleh kakak sangat mudah dimengerti. trus webnya bagus,sangat jelas, lengkap dengan penjelasannya serta gambar kodingnya & mudah di pahami terus berkreasi kak .
    Salam kenal kak nama saya Wiranto kls (Si2K), kunjungi juga dong website kampus kami https://www.atmaluhur.ac.id

    ReplyDelete
  10. FarizanJuly 3, 2021 at 10:47 PM

    Terimakasih atas ilmunya, sehat selalu 🙏

    ReplyDelete

Subscribe to: Post Comments ( Atom )
(c) eLMarco94. Powered by Blogger.