Tutorial Pemrograman

Cara Membuat dan Menghubungkan CSS Dengan HTML

HTML dan CSS merupakan sebuah hal yang tidak bisa dilepaskan dari sebuah web. Bagi kamu yang baru belajar HTML dan CSS, di tutorial ini akan membahas cara menghubungkan CSS dengan HTML.

Html merupakan sebuah struktur dari sebuah web, dan CSS adalah penghias dari HTML nya. Mulai dari warna, jenis font, letak ,dan lain-lain. Untuk melakukan cara ini, kamu bisa menggunakan software text editor apa saja. Karena apapun text editornya, cara penulisannya tetap sama. Pada tutorial ini menggunakan text editor dari Adobe Dreamweaver.

Ada 3 metode cara menghubungkan CSS dengan HTML:

  • Inline CSS
  • Embed/Internal CSS
  • Eksternal CSS

I. Cara Membuat CSS di HTML Dengan Inline

1. Buat elemen yang akan kamu beri style terlebih dahulu.

Pada contoh di sini kita akan membuat elemen heading dengan tag h1.

2. Tambahkan atribut berikut di dalam tag heading tersebut.

Isikan nilai dari atribut style dengan kode CSS yang kamu mau. Berikut ini contohnya:

Efeknya adalah heading bertuliskan Inwepo akan berwarna merah.

Metode ini dinamakan inline karena kode CSS dituliskan langsung didalam elemen yang akan diubah.

II. Cara Membuat CSS di HTML Dengan Embed/Inline CSS

1. Buat tag pembuka dan penutup style di dalam tag head.

2. Isi tag style dengan kode css yang kamu inginkan.

Metode ini dinamakan embed / internal karena kode style dituliskan diluar tag body namun masih didalam file html

Cara menghubungkan css dengan html dengan eksternal css

1. Buat file document baru dengan ekstensi css

2. Tuliskan kode css didalam file ini

Cara penulisannya adalah tuliskan tag elemen yang akan kamu beri style, contohnya adalah h1 yaitu heading. Lalu beri kurung buka dan tutup (“{ }”). Tuliskan kode css yang akan kamu berikan kepada elemen h1.

3. Buka file html yang akan kamu hubungkan. Lalu tambahkan kode berikut ini di dalam tag head.

Di dalam atribut href masukkan lokasi file CSS kamu.

Sekian. Demikian cara membuat dan menghubungkan CSS dengan HTML.

Baca juga: Cara Membuat Efek Hover Link Dengan CSS dan HTML






Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk menyelesaikan masalahnya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

 

Berlangganan tutorial Inwepo melalui email

Copyright © 2018 Inwepo - All Rights Reserved.

To Top