Tips Cara menggunakan CSS pada HTML

Tips cara menggunakan css pada html: Dalam membuat halaman web, biasanya kita akan memberi style pada elemen HTML yang telah dibuat. Penggunaan CSS tidak sebatas untuk memberi warna dan merubah ukuran, dengan CSS kita bisa mengatur tata letak sebuah halaman HTML.
Banyak cara menerapkan css pada html, dalam tutorial kali ini kita akan membahas 3 metode cara menerapkan css pada html dan masing-masing metode memiliki kelebihan dan kekurangan. Oke, mari kita bahas satu persatu.

Cara menggunakan CSS: inline style

Inline style adalah penerapan kode css pada satu elemen HTML didalam satu halaman HTML, dengan cara ini kita bisa langsung memberikan style dengan cara memasukkan kode css pada atribut tag HTML. Atribut yang digunakan untuk menyisipkan kode css adalah atribut style, sebagai contoh perhatikan contoh skrip HTML dibawah:

1 2	Paragraf kesatu nih, ingin berubah warna biru

Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin berubah warna biru juga

Skrip HTML diatas jika dijalankan akan menampilkan tulisan yang bewarna hitam, jika kita ingin merubah warna paragraf ke warna biru, maka kita bisa langsung memberikan atribut style dengan nilai color: blue;.

1 2	style="color: blue;"> Paragraf kesatu nih, ingin berubah warna biru style="color: blue;"> Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin berubah warna biru juga

Perlu diketahui, bahwa metode inline style tidak efisien jika kita sering merubah dan menggunakan kembali kode CSS yang telah kita buat. Dengan metode ini, kita hanya bisa menerapkan style hanya pada satu elemen, bayangkan jika kita harus memberi dan merubah satu-satu style semua paragraf yang terdapat dalam dokumen HTML.

Cara menggunakan CSS: embedded style/Internal Styles

Jika inline style hanya bisa digunakan dalam satu elemen HTML dalam satu halaman HTML, maka embedded style bisa digunakan dalam beberapa elemen HTML. Meskipun bisa digunakan dalam beberapa elemen HTML, embedded style hanya bisa diterapkan hanya pada satu halaman HTML.
Metode ini menggunakan tag

Paragraf kesatu nih, ingin berubah warna biru

Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin berubah warna biru juga

Dengan metode ini baik paragraf kesatu atau kedua akan langsung berubah menjadi berwarna biru, kembali lagi jika kita menggunakan metode inline style maka kita harus merubah satu-satu elemen.

Cara menggunakan CSS: linked style/External Styles

Ini adalah metode yang bisa digunakan untuk merubah style pada semua elemen di semua page, cara ini mengharuskan kita untuk membuat file CSS. Setelah kita membuat file CSS, maka file tersebut kita panggil dalam tag .

Satu file CSS untuk semua file HTML

Sebagai contoh, pertama kita buat file dengan nama style.css, ketikkan skrip berikut untuk merubah semua tulisan elemen paragraf ke warna biru.

1	p{color:blue;}

Setelah itu, ketikkan skrip berikut untuk memanggil file style.css yang telah dibuat.

1	href="style.css" rel="stylesheet" type="text/css" media="screen" />

Letakkan skrip diatas dalam tag sehingga skrip akhir menjadi seperti ini.

</span><span class="crayon-i ">Cara Menggunakan CSS</span><span class="crayon-r ">

href="style.css" rel="stylesheet" type="text/css" media="screen" />

Paragraf kesatu nih, ingin berubah warna biru

Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin berubah warna biru juga

Ketika skrip diatas dijalankan akan memberikan hasil yang serupa seperti dua metode sebelumnya, kelebihan dalam metode ini adalah kemudahan untuk merubah dan menerapkan style pada elemen apapun dalam page manapun.
Cara ini hampir pasti dilakukan oleh para pengembang web. Pada kenyataannya ketiga metode diatas sering digunakan berbarengan ketika kita menggunakan tambahan skrip dari luar seperti penggunaan plugin atau sejenisnya.
Untuk melihat demo dari metode embedded style silahkan anda klik tombol “Run Skrip” dibawah ini.

Sekian tutorial Tips cara menggunakan css pada html, jika dirasa ada yang ingin ditanyakan silahkan memberikan kometar.
Happy Nyekrip! Terimakasih.

Siti Dara

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.