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.

3 Metode cara menghubungkan CSS dengan HTML

  • Inline CSS
  • Embed/Internal CSS
  • Eksternal CSS

Video Tutorial

YouTube video

Cara Membuat CSS di HTML Dengan Inline

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

Cara Membuat dan Menghubungkan CSS Dengan HTML 1

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

2. Tambahkan atribut berikut di dalam tag heading tersebut.

<h1 style=””>Inwepo</h1>

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

<h1 style=” color : red ”>Inwepo</h1>

Efeknya adalah heading bertuliskan Inwepo akan berwarna merah.

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

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.

Cara Membuat dan Menghubungkan CSS Dengan HTML 2

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.

Cara Membuat dan Menghubungkan CSS Dengan HTML 3

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

<link rel=”stylesheet” href=”masukkan lokasi file css disini”>

Cara Membuat dan Menghubungkan CSS Dengan HTML 4

Di dalam atribut href masukkan lokasi file CSS kamu.

Cara Membuat dan Menghubungkan CSS Dengan HTML 5

Sekian. Demikian cara membuat dan menghubungkan CSS dengan HTML.

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

Komentar

Leave a Reply

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

Leave the field below empty!

Trending Minggu Ini

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 mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed

Inwepo Navigasi

Tentang Kami             Beranda

Hubungi Kami             Panduan Penulis

Kebijakan Privasi

FAQ

Partner

Copyright © 2014 - 2024 Inwepo - All Rights Reserved.

To Top