CSS | DASAR CSS
Assalamualaikum wr.wb, apa kabar semua? semoga selalu dalam keadaan yang baik. Bertemu lagi dengan saya, kali ini saya akan memahami tentang dasar-dasar CSS.
B.LATAR BELAKANG
Karena saya kurang paham dan belum mengerti tentang dasar-dasar CSS.
C.MAKSUD DAN TUJUAN
-agar paham dan mengerti apa itu CSS.
-dapat menggunakan elemen CSS.
-dapat menggabungkan dengan HTML
D.HASIL YANG DIHARAPKAN
Supaya saya bisa menggabungkan antara HTML dan CSS dalam pembuatan sebuah tampilan website.
E.PEMBAHASAN
CSS adalah kependekan dari Cascading Style Sheet.
CSS merupakan salah satu kode pemrograman yang mempunyai fungsi untuk menghias dan mengatur gaya tampilan/layout suatu halaman web agar terlihat lebih elegan dan menarik.
Dalam membuat sebuah website, kita akan sangat memerlukan penggunaan CSS (Cascading style sheet). Ini berfungsi untuk membuat sebuah antarmuka atau tampilan website yang bisa menarik. Tanpa menggunakan css kemungkinan hasil websitemu akan terlihat kurang maksimal.
Menggunakan CSS juga bisa mengantikan beberapa fungsi penggunaan gambar yang akan membuat loading websitemu lebih cepat. Ketika kamu sudah menguasai penggunaan (X)HTML maka untuk memperkuat kemampuanmu dibidang web desain, kamu perlu mempelajari penggunaan CSS lebih dalam lagi. Penggunaan CSS file juga dapat memungkinkan kamu memisahkan konten situs web (X)HTML dari style. Seperti biasanya, kamu menggunakan file (X)HTML untuk mengatur konten, tapi semua presentasi (seperti font, warna, background, border, format teks, efek link & seterusnya) dibuat dalam file CSS. Tentu ini akan sangat mempermudah dalam mendesain sebuah website.
Mengenal dasar-dasar css
Dalam hal ini kita memiliki beberapa pilihan tentang bagaimana menggunakan CSS, baik secara internal maupun eksternal.
Internal Stylesheet
Pertama kita akan coba mengeksplorasi metode internal. Dengan cara ini kamu hanya menempatkan kode CSS dalam tag pada setiap (X)HTML file yang ingin kamu berikan style dengan CSS. Mari kita lihat kode dibawah ini :
1 2 3 4 5 6 7 8 9 10 11 12 | <html><head><title><title><style type="text/css">CSS Content Goes Here</style></head><body></body></html> |
External Stylesheet.
Pada tahap berikutnya kita akan mengeksplorasi metode eksternal. Sebuah file CSS eksternal dapat dibuat dengan teks atau HTML editor apapun seperti Notepad ++, Sublime Text, Dreamweaver. Maksudnya kita akan membuat sebuah file CSS tidak berisi kode (X) HTML, hanya file CSS. Kamu cuma perlu menyimpannya dengan ekstensi file.css. Kemudian kamu dapat memasukan link file css kebagian head setiap (X) HTML file yang ingin kamu berikan style atau antarmuka yang sesuai. Berikut contoh kode yang bisa kamu gunakan saat menempatkan file CSS ke file HTML :1 | <link rel="stylesheet" type="text/css" href="File path/stylesheet.css" /> |
@import seperti contoh berikut :1 | <style type="text/css">@import url(File path/stylesheet.css);</style> |
1 2 3 4 5 6 7 8 | <html><head><title><title><link rel="stylesheet" type="text/css" href="File path/stylesheet.css" /></head><body></body></html> |
1 2 3 4 5 6 7 8 9 10 | <html><head><title><title><style type="text/css">@import url(File path/stylesheet.css);</style></head><body></body></html> |
Dengan menggunakan eksternal style sheet, semua file (X) HTML yang kamu punya hanya perlu di-link-an ke satu file CSS untuk style sebuah halaman. Ini berarti, ketika kamu ingin mengubah desain dari semua halaman, kamu hanya perlu mengedit satu file CSS untuk membuat perubahan global keseluruh situs web kamu. Berikut adalah beberapa alasan kenapa metode ini lebih baik.
- Maintenace (Pemeliharaan) lebih mudah
- Mengurangi Ukuran File
- Mengurangi penggunaan bandwitch
- Peningkatan fleksibilitas / Lebih fleksibel
susah memahami konsepnya.
G.KESIMPULAN
Kesimpulannya yaitu,css adalah sebuah bahasa yang berfungsi untuk mempercantik tampilan dan apabila css digabungkan dengan html maka akan berkesinambungan.
H.REFERENSI
W3SCHOOL.COM
I.PENUTUP
Sekian dari saya semoga bermanfaat untuk kalian semua, sampai jumpa dipost selanjutnya..
No comments:
Post a Comment