Belajar CSS Part 1 Pengertian Dasar
Assalamualaikum Wr. Wb.
PENGERTIAN
CSS merupakan singkatan dari "Cascading Style Sheets" yang artinya memberikan gaya atau desain pada sebuah halaman atau web. Jadi CSS ini adalah sejenis bahasa pemrograman yang berfungsi untuk mendesain halaman agar halaman tersebut terlihat lebih menarik, indah, dan hidup. Cara penggunaan CSS ini menggunakan penanda ID & Class. Yang mana kedua penanda sudah tidak asing lagi bagi kita. Pada CSS penulisan CSS sendiri terbagi menjadi tiga yaitu :
- Inline CSS Style penulisan CSS dengan Inline CSS Style adalah cara penulisan syntax CSS yang tidak memerlukan selector atau penanda (id dan class). Tapi langsung disisipkan ke dalam element HTML. Penulisan dengan cara ini menggunakan attribute (style=" ").
- Internal CSS Style penulisan CSS dengan Internal CSS Style adalah cara penulisan syntax CSS yang di tuliskan dalam file HTML atau PHP. Syntax CSS ini diletakkan di dalam tag <style> dan diakhiri dengan tag </style>. Biasanya tag <style> isi CSS</style> di letakkan pada tag <head> pada HTML.
- Eksternal CSS Style penulisan CSS dengan External CSS Style adalah cara penulisan yang memisahkan file CSS dan HTML. Penulisan CSS ini merupakan cara penulisan yang efektif dan tidak ribet. Penulisan CSS ini menggunakan tag <link> kemudian di dalamnya diisi dengan alamat file CSS.
LATAR BELAKANG
Pada sebuah website kita dapat menjumpai desain dari web tersebut. Pada setiap website memiliki desain yang berbeda-beda. Dan untuk mendesain website, kita harus menambahkan element, attribut, dan tag-tag yang mungkin bila kita tuliskan dengan HTML tidaklah sedikit bisa jadi banyak dan itu membutuhkan waktu yang lama. Dengan CSS kita dapat memudahkan pekerjaan kita, karena CSS dapat meringkas semua tag yang sama dijadikan satu dalam satu tag. Penulisan CSS sangatlah gampang, dengan menuliskan id dan class kemudian kita cukup memanggilnya dan memasukkannya ke dalam tag yang kita inginkan.
MAKSUD & TUJUAN
- Memudahkan dalam mendesain sebuah website dengan CSS.
- Memudahkan dalam mengatur font, layout, size, background, dll.
- Memperingan pekerjaan kita dalam mendesain suatu web.
ALAT & BAHAN
- Laptop/PC
- Browser
- Text Editor
LANGKAH KERJA
Sudah kita bahas di atas penulisan CSS ada tiga yaitu : Inline, Internal, Eksternal. Pada kesempatan kali ini kita akan belajar cara penulisan dan syntax dari ketiga cara tersebut. Langsung saja kita mulai dari yang pertama.
- Inline CSS Style
Pada HTML penulisan Inline CSS Style ini kita menggunakan attribute "style" di dalam sebuah tag. Contoh penulisannya sebagai berikut.
<h1 style="color:blue">Belajar CSS Dasar</h1>
Nb: Di syntax di atas "h1" merupakan tag yang di tuju, kemudian "style" merupakan syntax CSS inline, kemudian "color : blue" merupakan isi dari CSS tersebut. Cara penggunaan syntax ini dapat kita lihat pada contoh berikut ini.
 |
| Inline CSS Style |
Gambar di atas adalah hasil dari penulisan CSS Inline style. Sangan sedikit penulisan CSS dengan cara ini, karena terlalu rumit dalam penggunaannya. Selanjutnya kita coba cara yang lain.
- Internal CSS Style
Pada HTML penulisan Internal CSS Style ini menggunakan tag pembuka <style> dan tag penutup </style>. Penulisan dengan cara ini ditempatan di dalam tag <head>. Berikut adalah contoh dari penulisan syntaxnya.
Nb: Penulisan CSS dengan Internal CSS Style ini sangat mudah dan efektif karena tinggal menuliskan tag/class/id ke dalam tag <style> dan diisi dengan desain yang anda inginkan. Cukup mudah bukan, dan berikut adalah hasil dari gambar di atas.
- Eksternal CSS Style
Di dalam HTML, cara penulisannya dengan menggunakan attribute <link> kemudian diisi dengan alamat dari CSS yang telah dibuat. Jadi sebelumnya kita sudah menyiapkan file CSSnya. Untuk lebih jelasnya lihatlah contoh berikut.
Nb: Pertama kita buat terlebih dahulu file CSSnya seperti di atas dengan ekstensi .css.
Nb: Selanjutnya untuk memanggil file tersebut dengan menggunakan tag <link> seperti gambar di atas. Kemudian jalankan filenya, kita lihat hasilnya berikut.
Nah di atas merupakan contoh - contoh dari penulisan CSS, Bagaimana pendapatnya kalian lebih mudah bukan ?. Mungkin itu sedikit dari saya kurang lebihnya mohon maaf.
Syukron
Wassalamualaikum Wr. Wb.
Referensi
No comments:
Post a Comment