Skip to main content

Belajar Css untuk pemula #0 mengenal CSS

Belajar CSS untuk pemula. #0 mengenal CSS

Pendahuluan

CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk menampilkan dan merender tampilan dari sebuah Html, sehingga bisa membuat sebuah halaman web tampil lebih menarik, sederhananya CSS ini digunakan untuk menghias sebuah tampilan web baik memberi warna, ukuran, layout, animasi, dan sebagainya.


Jika diibaratkan maka Html adalah sebuah tulang belulang atau kerangka dari sebuah website sedangkan CSS sendiri adalah kulit atau tampilan luar dari halaman, sehingga penggunaan CSS ini hanya diperuntukkan bagi sisi client saja (only front-end)

Dengan CSS ini kita bisa membuat style dari satu atau banyak halaman sehingga dapat memudahkan kita sebagai kalangan developer untuk menghias banyak tag di satu halaman atau bahkan memberikan style pada banyak halaman hanya dengan satu file dengan ekstensi .css saja.

keunggulan menggunakan CSS

 Misalnya kita ingin memberikan style pada sebuah paragraf dengan menambahkan attribut style pada tag yg ingin kita beri style, dalam kasus ini kita memberi style pada tag <p> 

<p style="color:red">

sederhananya dengan contoh diatas juga kita bisa menambahkan style pada sebuah elemen html, namun cara ini kurang efektif apabila kode-kode kita sudah mulai banyak sehingga sebaiknya cara tersebut dihindari.
perhatian

maka solusi dari masalah ini adalah dengan memisahkan CSS dari HTML nya, caranya adalah sebagai berikut.

menambahkan tag style pada bagian head html kita (embedded CSS)

 cara ini efektif untuk kamu yang baru belajar tentang CSS, atau jika kamu ingin memberikan style khusus pada sebuah halaman, karena sejatinya tag <style> ini memang diperuntukkan untuk menampung style sheet dari sebuah halaman. 

namun jika halaman web kamu sudah lumayan banyak cara ini juga kurang efektif karena kamu juga harus menambahkan tag style dan css nya satu persatu sehingga cukup merepotkan. jadi solusi nya adalah dengan cara yang ke dua..

tambahkan CSS eksternal. 

Jika halaman kamu sudah banyak, dan kamu ingin memberikan style pada semua halamanmu. maka kamu tidak perlu mengcopy paste semua CSS nya ke dalam Html kita, tapi kita cukup menghubungkan sebuah file CSS terpisah dengan HTML kita yaitu dengan menambahkan tag <link> diantara tag <head> kita seperti ini. 

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

catatan : cukup namai file dengan ekstensi nya saja jika ia berada di dalam folder yang sama, pastikan file nya ber ekstensi .css

jika sudah maka simpan file html kalian dan buka file nya di web browser kalian. jika benar maka akan terjadi perubahan berdasarkan apa yg kalian berikan pada css nya. lakukan hal ini jika kalian ingin memberikan design yang sama pada tiap-tiap halaman kalian, kalian juga dapat memakai dua file css atau lebih dalam satu halaman web.

kesimpulannya dengan menggunakan CSS ini kita bisa memisahkan antara struktur (html) dengan tampilan(css) sehingga memudahkan kita untuk mengatur style di banyak halaman tanpa harus menyentuh file html nya..

mungkin sampai sini dulu penjelasan kita tentang css ini. mohon maaf apabila ada kekurangan dalam hal penulisan maupun materi, kita bertemu lagi di tutorial selanjutnya..

Labels:

Popular posts from this blog

Pengertian Front end, Back End, Dan Full Stack Developer

Pengertian Front end, Back end, Dan Full stack Developer Illustrasi web sederhana Perkembangan teknologi web yang pesat membuat pemrograman web menjadi lebih luas untuk dipelajari, sehingga dibuatlah cabang cabang dalam ilmu ini agar seorang developer bisa mengembangkan sklill nya berdasarkan pada passion mereka, terlebih untuk kamu yang baru belajar tentang pengembangan web, maka penting bagi kamu untuk mengetahui tentang front-end, back-end, dan full stack. Front end secara garis besar front-end adalah pengembangan web yang difokuskan pada sisi client atau apapun yang ditampilkan pada user dalam web browser mereka, seorang front-end developer bertugas untuk menciptakan halaman web yang menarik, responsif, mudah diakses, dan menciptakan kenyamanan bagi pengunjung yang mengaksesnya. lantas apa saja hal-hal yang diperlukan untuk menjadi seorang front-end developer, simaklah uraian berikut ini. 1. Html dan CSS. kedua bahasa ini diperlukan untuk kamu yang ingin menjadi seorang front-...
Read more

Belajar Html #1.Struktur Html

Belajar Html #1.Struktur dasar Html   Assalamualaikum wr wb Kembali lagi di tutorial Html untuk pemula, kali ini kita akan membahas mengenai struktur dari Html, apa saja yang akan kita bahas, mari kita simak berikut ini. Struktur dasar Html    Pada dasarnya struktur dasar html itu terdiri dari dua bagian yakni bagian head dan body yg dibungkus antara tag html. Struktur dasar html   Seperti gambar diatas. Bagian tag pada html mirip seperti sandwich dan tag penutup pada html biasa ditandai dgn tanda slash "/" pada akhir tag nya.. lantas apa saja fungsi dari si tag head dan body ini? Untuk itu mari kita simak uraian berikut ini. Fungsi tag head Secara umum tag <head> berfungsi untuk menampung metadata atau deskripsi dari sebuah data, dan tag ini ditempatkan diantara tag <html> dan <body> Metadata ini bisa berupa data dari sebuah dokumen html yang berupa deskripsi dokumen, definisi judul, karakter set, ...
Read more