FrontEnd dan BackEnd Pada Projek PHP

Assalamu alaikum Wr. Wb 

Salam Pinter Bareng Komputer, ...zero bit... 

Semoga artikel ini bermanfaat.

Read More

CSS - Transition

Assalamu alaikum Wr. Wb Salam Pinter Bareng Komputer, ...zero bit...

Semoga artikel ini bermanfaat.

Read More

CSS - Transform

Assalamu alaikum Wr. Wb Salam Pinter Bareng Komputer, ...zero bit...

Semoga artikel ini bermanfaat.

Read More

Inline CSS, Internal CSS dan External CSS

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Melanjutkan artikel sebelumnya tentang Pengenalan CSS, maka dalam artikel ini saya ingin membahas mengenai Jenis - jenis CSS dilihat dari posisi CSS tersebut dipanggil. Ada 3 jenis CSS berdasarkan posisinya dipanggil, yaitu INLINE CSS, INTERNAL CSS dan EXTERNAL CSS.

A. INLINE CSS

Inline CSS digunakan di dalam sebuah tag HTML tertentu, yaitu dengan memanggil atribute style di dalam tag HTML tersebut. 

Cara ini kurang direkomendasikan, jika ada style yang sama untuk beberapa tag HTML, karena setiap tag HTML harus diberikan style sendiri - sendiri. Sehingga jika ada perubahan style untuk semua tag tadi maka Anda akan lebih sulit dalam mengeditnya. Namun, di beberapa situasi justru inline CSS menjadi berguna. Contohnya, saat kalian harus mensetting style untuk 1 elemen/tag HTML saja.

Contoh penggunaan Inline CSS :

Manfaat Inline CSS :

1. Bisa digunakan untuk menguji perintah CSS di dalam sebuah tag HTML tertentu hasilnya seperti apa?
2. Untuk memperbaiki tampilan halaman web secara cepat.
3. Proses menjalankan hasil perubahan tampilannya lebih cepat.

Kekurangan Inline CSS :

Inline CSS harus dipanggil disetiap elemen HTML.

B. INTERNAL CSS

Ada kalanya sebuah style (setting tampilan) CSS harus diterapkan pada beberapa tag HTML yang berbeda. Jika menggunakan inline css ini menjadi kurang efektif dan efisien karena harus mengetikkan perintah style yang sama di beberapa tag HTML yang berbeda. Untuk mengatasi ini maka kalian sebaiknya membuat script style di dalam sebuah tag <style>... </style> yang ditempatkan di dalam tag HEAD. Style CSS yang dibuat di dalam tag STYLE yang ada di dalam tag HEAD ini disebut dengan INTERNAL CSS.

Style CSS yang dipasang dengan metode ini akan diload/dipanggil ulang semua scriptnya setiap kali halaman dipanggil. Hal ini akan menyebabkan waktu loading halaman akan bertambah. Namun, di beberapa kasus penggunaan internal CSS membawa manfaat yang besar. Contohnya, jika kita butuh menduplikate setting tampilan (style) sebuah halaman dapat dilakukan dengan mudah – karena semuanya bisa terlihat dalam style yang ada di tag HEAD.

Contoh penggunaan Internal CSS :

Manfaat Internal CSS :

1. Perubahan hanya terjadi pada 1 halaman.
2. Class dan ID bisa digunakan oleh internal stylesheet.
3. Tidak perlu meng-upload beberapa file karena HTML dan CSS bisa digunakan di file yang sama.

 Kekurangan Internal CSS :

1. Meningkatkan waktu akses website. Karena setiap halaman direfresh maka script internal CSS akan diload ulang.
2. Perubahan hanya terjadi pada 1 halaman menjadikan proses tidak efisien bila kalian ingin menggunakan CSS yang sama pada beberapa file.

C. EXTERNAL CSS

Disebut external CSS karena seluruh script CSS disimpan di dalam sebuah file CSS (file berekstensi .css). File ini disimpan di dalam folder khusus di dalam folder web (boleh dinamai CSS). Kemudian untuk menghubungkan dengan halaman HTML, file CSS ini dipanggil di dalam tag HEAD dengan menggunakan tag LINK.

Contohnya, buat sebuah file CSS dengan nama style.css dan simpan di folder CSS projek kalian.

Kemudian di dalam tag HEAD halaman HTML buat tag LINK seperti di bawah ini untuk menghubungkan halaman tersebut dengan file style.css.

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

 

Manfaat CSS eksternal:

1. Ukuran file HTML menjadi lebih kecil dan strukturnya lebih rapi.
2. Kecepatan loading menjadi lebih cepat.
3. File CSS yang sama bisa digunakan di banyak halaman.

Kekurangan CSS eksternal:

Halaman belum tampil secara sempurna hingga file CSS selesai dipanggil.

Semoga artikel ini bermanfaat.

Kembali ke menu CSS - Selector CSS

Read More

Pengenalan CSS

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Selamat pagi semuanya!!! Semoga pagi kalian hari ini merupakan pagi yang luar biasa penuh kesyukuran dan juga semangat. Pagi ini saya ingin sharing mengenai CSS yang kepanjangannya adalah Cascading Style Sheet. 

Apa itu CSS ?

CSS merupakan syntaks yang dapat digunakan untuk mengatur style (format tampilan) elemen yang ditulis dalam bahasa Markup seperti HTML, sehingga dapat dipisahkan antara konten dan tampilan visualnya.

CSS dibuat oleh W3C (World Wide Web Consortium) pada tahun 1996, agar tampilan halaman - halaman HTML dapat diberikan format tampilan. Karena sebelumnya halaman HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman.

HTML dan CSS memiliki hubungan yang sangat erat. Karena HTML adalah bahasa markup (sebagai pondasi situs) dan CSS memperbaiki format tampilan dari halaman - halaman HTML, maka kedua bahasa pemrograman ini harus bisa berjalan bersama beriringan. Dengan adanya CSS maka sebuah situs website tidak terlihat seperti sebuah situs yang ‘telanjang’ tanpa adanya tampilan yang menarik.

Apa Keunggulan CSS?

Mungkin sebagian dari kalian ada yang bertanya, kelebihan CSS apa ya? Berikut ini saya akan menjelaskan keunggulan atau kelebihan dari CSS.

Sebelum dapat menggunakan CSS, semua format tampilan CSS harus disertakan ke dalam markup HTML. Itu berati Anda harus mendeskripsikan semua background, warna font, alignment, dan lain-lain secara terpisah.

Dengan sebuah file CSS yang telah kalian isi script lengkap, maka kalian dapat mengatur tampilan semua aspek pada file - file yang berbeda, lalu menentukan format tampilan untuk selanjutnya mengintegrasikan file CSS di atas markup HTML. Hasilnya, markup HTML bisa lebih mudah dimaintain.

Secara singkat dengan CSS, Kalian tidak perlu lagi mendeskripsikan format tampilan dari masing-masing elemen secara berulang-ulang. Anda tidak membuang-buang waktu, kode yang digunakan pun lebih singkat, dan error dapat diminimalisir. Dan karena pilihan kustomisasi yang disediakan CSS hampir tidak terbatas, maka dengan CSS memungkinkan kalian untuk menerapkan berbagai macam style/format tampilan pada satu halaman HTML semenarik mungkin.

Bagaimana Cara CSS Bekerja?

Bahasa yang digunakan di dalam CSS adalah bahasa Inggris basic berbasis syntax yang dilengkapi dengan sekumpulan rule yang mengaturnya. Seperti penjelasan di atas bahwa HTML tidak dibuat untuk menerapkan elemen style (format tampilan) jika adapun itu sangat - sangat sederhana (hanya markup halaman saja). Karena HTML dirancang hanya untuk mendeskripsikan konten.

Sebagai contoh: Tag Paragraf <p>Conten</p>, dirancang untuk menampilkan artikel yang dapat diformat seperti sebuah paragraf di dalam Microsoft Word. Seperti Format Perataan (Kiri, Tengah dan Kanan). Hanya sesederhana itu.

Kemudian muncul pertanyaan. Bagaimana caranya memberikan style (Format Tampilan) untuk  paragraf yang lebih komplek? Maka jawaban ini dapat dijawab dengan sintaks CSS. Struktur sintaks CSS memiliki SELECTOR dan DECLARATION BLOCK. Pilih elemen yang diinginkan, kemudian deklarasikan perintah CSS yang akan digunakan pada elemen tersebut.

SELECTOR mengarah ke elemen HTML yang ingin Anda ubah tampilannya.  Selector ini dapat juga berupa nama properti CLASS dari tag HTML ataupun nama properti ID dari tag HTML. DECLARATION BLOCK memuat satu atau lebih banyak deklarasi (declaration) yang dipisahkan dengan tanda titik koma.

Setiap deklarasi menyertakan NAME dan VALUE dari properti CSS yang dipisahkan dengan tanda koma. Umumnya deklarasi CSS diakhiri dengan tanda titik koma, sedangkan declaration block dikelilingi oleh tanda kurung kurawal.

Contoh Struktur Sintaks CSS :

Penjelasan :

Karena CSS bekerja secara hierarki (urut sesuai tingkatan), maka sasaran pemberian format tampilan dari script CSS di atas adalah untuk tag P yang berada di dalam tag H1 yang semuanya ada di dalam tag BODY. Format yang akan diterapkan adalah background-color (merubah warna latar belakang tulisan), color (merubah warna tulisan), text-align (mengatur perataan tulisan), font-family (memilih jenis font untuk tulisan), font-size (mengatur ukuran font tulisan). 

Semoga artikel ini bermanfaat.

Kembali ke menu CSS - Inline, Internal, dan External CSS

Read More