Cara Menerapkan CSS Pada HTML Untuk Pemula (Newbie)

Cara Menerapkan CSS Pada HTML - Dalam sebuah halaman web, design merupakan salah satu daya tarik yang bisa menjadi pacuan para pembaca web itu. Kode HTML dan CSS menjadi senjata yang paling utama untuk membuat design pada sebuah halaman web. Biasanya kita akan memberi style pada elemen HTML yang telah kita buat. Penggunaan CSS sangat bervariasi, diantaranya bisa memberi warna, merubah ukuran, mengatur tata letak pada sebuah halaman HTML, dan bisa juga untuk membuat animasi agar lebih mempunyai daya jual yang tinggi.

Banyak sekali cara menerapkan css pada html. Pada kesempatan ini kita akan membahas 3 cara menerapkan css pada html. Berikut ini adalah cara-cara yang bisa diterapkan, yaitu :

1. Inline Style

Inline style merupakan penerapan kode css pada satu elemen html yang berada dalam satu halaman html. Maksud dari cara ini yaitu dengan langsung memberi style dengan meletakkan kode css pada atribut tag html. Atribut yang digunakan untuk menyisipkan kode css yaitu atribut style. Contoh sebagai berikut:

<p>Hello World</p>

<p>Hai World</p>

Jika skrip html diatas dijalankan, maka tulisan akan berwarna hitam. Kita bisa saja merubah warna tulisannya menjadi warna hijau, maka kita bisa langsung memberikan atribut style dengan value color: green; contohnya seperti berikut:

<p style="color: green;">Hello World</p>

<p style="color: green;">Hai World</p>

Perlu diketahui, metode inline sangat tidak efisien. Sebab, kita hanya dapat menerapkan style untuk satu elemen itu saja. Bisa dibayangkan jika pada satu halaman html ada banyak paragraf, ini bisa membuat pekerjaan anda menjadi lambat.

2. Embedded style atau Internal Style

Kalau tadi inline style hanya dapat digunakan pada satu elemen html di dalam 1 halaman html, maka lain halnya dengan internal style. Internal style bisa digunakan di beberapa elemen html dalam satu halaman html. Metode ini menggunakan tag style didalam elemen head.

Sebagai contoh, kita akan merubah semua elemen paragraf dengan warna hijau.

Dengan menggunakan metode ini, baik paragraf 1 dan 2 dapat berubah semuanya menjadi warna hijau.

3. Linked style atau External style

Metode ini merupakan metode yang bisa digunakan untuk merubah style pada semua halaman. Dengan cara ini, kita harus membuat sebuah halaman css. Setelah kita membuat file css, maka file tersebut akan dipanggil dalam halaman yang ingin diberi style css nantinya. contohnya sebagai berikut ini:

Halaman css. Beri nama style.css (nama file terserah)

Ketikkan kode css berikut: 

p{

color: green;

}

Pada halaman html, tambahkan tag link untuk memanggil file style.css

Jika metode ini dijalankan, maka hasilnya juga seperti kedua metode diatas. Intinya, file css itulah sebagai kunci untuk merubah style yang ada pada setiap halaman html. Dan cara ini terbilang cukup efektif.

Sekian saja tentang cara menerapkan css pada html untuk pemula (newbie). Semoga bermanfaat bagi setiap insan yang membacanya.