Mengembangkan website hanya menggunakan bahasa pemrograman HTML atau PHP saja belum cukup. Anda membutuhkan CSS, bahasa pemrograman yang berguna untuk mengatur seluruh tampilan website sehingga website terlihat lebih menarik yang dapat memberi pengalaman dan kenyamanan untuk visitor website anda. Itulah kenapa Anda perlu belajar tentang CSS dan apa fungsinya.

Pengertian CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet) adalah salah satu bahasa pemrograman untuk mendesain sebuah web yang mengontrol format tampilan sebuah halaman web. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumen XML, termasuk SVG dan XUL bahkan ANDROID.

Fungsi CSS (Cascading Style Sheet)

CSS sebagai inovasi pengembangan website, memungkinkan beberapa inovasi untuk tata letak halaman web, seperti kemampuan untuk :

• Menentukan font selain default untuk browser
• Menentukan warna dan ukuran teks dan tautan
• Menerapkan warna ke latar belakang
• Mengandung elemen halaman web dalam kotak dan mengapungkan kotak-kotak itu ke posisi tertentu di halaman
• Kemampuan dalam memasukkan style ke dalam style sheet, yang membuat untuk pertama kalinya, halaman web bisa dirancang.

Browser komersial pertama yang membaca dan menggunakan CSS adalah Microsoft Internet Explorer 3 pada tahun 1998. Hingga hari ini, dukungan untuk fungsi CSS tertentu bervariasi dari browser ke browser. W3C, yang masih mengawasi dan menciptakan standar Web, baru-baru ini merilis standar baru untuk CSS – CSS3. Dengan CSS3, pengembang berharap bahwa semua browser utama akan membaca dan menampilkan setiap fungsi CSS dengan cara yang sama.

Keuntungan Menggunakan CSS (Cascading Style Sheet)

CSS mudah dipelajari dan dipahami tetapi juga mampu memberikan kontrol yang kuat atas penyajian dokumen HTML. Paling umum, penggunaan sering CSS dikombinasikan dengan bahasa markup HTML atau XHTML. Berikut apa saja fungsi, kemampuan dan keuntungan yang didapatkan dari penggunaan CSS.

• CSS menghemat waktu

  Anda dapat menulis CSS sekali dan kemudian menggunakan kembali sheet yang sama di beberapa halaman HTML. Anda dapat menentukan gaya untuk setiap elemen HTML dan menerapkannya ke halaman Web sebanyak yang Anda inginkan.

• Memuat halaman lebih cepat

  Jika Anda menggunakan CSS, Anda tidak perlu menulis atribut tag HTML setiap kali. Cukup tulis satu aturan CSS dari sebuah tag dan terapkan pada semua kemunculan tag itu. Jadi lebih sedikit kode berarti waktu pengunduhan lebih cepat.

• Perawatan mudah

  Untuk membuat perubahan global, cukup ubah gaya, dan semua elemen di semua halaman web akan diperbarui secara otomatis.

• Gaya unggul ke HTML

  CSS memiliki array atribut yang jauh lebih luas daripada HTML, sehingga Anda dapat memberikan tampilan yang jauh lebih baik ke halaman HTML Anda dibandingkan dengan atribut HTML.

• Kompatibilitas terhadap beberapa perangkat

  Lembar gaya memungkinkan konten dioptimalkan untuk lebih dari satu jenis perangkat. Dengan menggunakan dokumen HTML yang sama, berbagai versi situs web dapat disajikan untuk perangkat genggam seperti PDA dan ponsel atau untuk dicetak.

• Mempunyai standar web global

  Sekarang atribut HTML sudah tidak digunakan lagi dan direkomendasikan untuk menggunakan CSS. Jadi itu ide yang baik untuk mulai menggunakan CSS di semua halaman HTML untuk membuatnya kompatibel dengan browser masa depan.

Ada 3 Macam CSS di HTML

Ada 3 macam penempatan CSS yang dapat dipakai ke dalam baris kode HTML, yaitu external, internal, atau inline. Penjelasannya sebagai berikut

Inline CSS

CSS inline merupakan penempatan CSS yang langsung dilakukan di dalam konten HTML. Penempatan CSS secara inline hanya akan mempengaruhi satu bagian baris kode. Berikut adalah contohnya.

			<h1  style="font-size:30px;color:blue;">Hello, World!</h1>		
		

CSS di atas berarti hanya akan mempengaruhi paragraf yang spesifik di dalam satu file .html dan muncul dengan warna biru (blue) ukuran font 30px.

External CSS

External CSS adalah penempatan baris kode CSS menggunakan file .css. Cata ini dapat digunakan untuk mendeklarasikan sebagian besar pengaturan tampilan website secara keseluruhan. Cara ini lebih sederhana dan simpel daripada menambahkan baris kode di setiap elemen HTML yang ingin Anda atur tampilannya. Jika menggunakan penempatan secara eksternal, Anda harus menambahkan header untuk memanggil file .css di dalam file HTML seperti contoh di bawah ini.

			<head>
				<link rel="stylesheet"  type="text/css"  href=nama_file.css">
			</head>
		

Baris kode di atas akan menghubungkan file .html dengan eksternal style sheet (CSS). Pada contoh di atas file CSS menggunakan nama 'nama_file.css' yang dapat Anda sesuaikan dengan letak file CSS di dalam direktori website. Ketika file HTML sudah terhubung dengan file CSS maka seluruh pengaturan CSS akan diterapkan di dalam kode HTML.

Internal CSS

Lalu, bagaimana penempatan CSS menggunakan cara internal? Internal CSS sekilas mirip dengan inline CSS, yaitu tipe penulisan tanpa file CSS terpisah. Namun di dalam penggunaan CSS secara internal, baris kode HTML dituliskan di bagian atas (header) file HTML. Cara ini akan sangat cocok dipakai untuk menciptakan halaman web dengan tampilan yang berbeda. Dengan kata lain, CSS ini bisa dipakai untuk menciptakan tampilan yang unik. Baris kode CSS secara internal contohnya seperti di bawah ini.

			<head>
				<style>
					body  { 
						background-color:blue;  
					}
					p{ 
						font-size:20px;  color:mediumblue;  
					}
				</style>
			</head>
		

Baris kode di atas akan menerapkan background dengan warna biru, paragraf berukuran 20px, dan 'medium blue' font ke dalam satu halaman HTML.

Di antara tiga jenis penempatan CSS, cara eksternal merupakan cara yang paling efektif untuk mengimplementasikan CSS ke dalam website. Cara ini juga paling populer atau sering dipakai oleh banyak pengembangan website dibandingkan dengan cara yang lainnya. Sedangkan cara internal dan inline juga bisa dipakai untuk menambahkan format konten yang khusus atau berbeda dengan konten yang lainnya.

Kesimpulan

HTML merupakan pondasi, kerangka, tembok, atau bahan baku semen untuk mendukung pembuatan website, CSS merupakan cat, desain jendela, dan berbagai macam pengaturan setelahnya. Menggunakan CSS adalah solusi dari pengambangan tampilan bangunan website anda.

Sampai disini dulu tutorial dari saya tentang codeigniter 3 dan nantikan tutorial selanjutnya, Semoga tutorial ini bermanfaat bagi anda, atas segala kekuranganya mohon dimaafkan dan jika ingin bertanya silahkan tinggalkan komentar.

Like, share & komen untuk dukung terus website ini agar terus berkembang, terimakasih.