Modul CSS 1
Modul CSS 1
CSS adalah salah satu bahasa pemrograman style sheet yang harus Anda pahami saat
belajar membuat website. Tanpa adanya bahasa pemrograman, website jadi kurang
menarik sehingga Anda perlu melakukan perubahan pada tampilannya. Apalagi setiap
orang pastinya ingin memiliki website dengan penampilan menarik.
Itulah sebabnya Anda harus mengenal CSS untuk mengembangkan website Anda lebih
menarik dan rapi di setiap halamannya. CSS memiliki peran untuk membuat penampilan
website Anda jadi menarik. Nah, sebelum Anda membuat penampilan website jadi
menarik sebaiknya simak pengertian dari CSS, fungsi, jenis, cara kerja dan lainnya.
CSS adalah singkatan dari Cascading Style Sheet yang dipakai untuk memberikan
ukuran, style warna dan mengatur posisi di elemen-elemen halaman website. Hal ini
akan membuat website Anda jadi lebih menarik dilihat oleh pengunjung. Apabila Anda
membuat sebuah website tanpa memakai bahasa pemrograman ini, maka halaman
website terlihat pucat sebab hanya berupa tulisan dan gambar saja.
Dengan adanya CSS, Anda bisa mengatur warna tulisan hingga background halaman
dengan mudah. Sudah banyak pengembang website yang memakai dengan bahasa
mark up seperti HTML dan XML saat membangun website. CSS memiliki banyak
fungsinya dan penjelasan selengkapnya ada di bawah ini.
1
Tampilan Jadi Bervariasi
Salah satu fungsi menggunakan CCS yaitu memiliki tampilan website yang bervariasi.
Bagi Anda yang memakai HTML hanya bisa mengatur halaman website saja dan
terbatas.
Bedanya dengan CCS yaitu bisa mendapatkan sejumlah variasi tampilan sehingga
interface website Anda jadi terlihat lebih menarik. Contoh CSS yang bisa dicoba adalah
untuk membuat tombol warna yang sesuai dengan keinginan.
CSS ini juga memiliki properti yang dipakai dalam mengatur tampilan di website sesuai
dengan kebutuhan layar, seperti max-width. Hal ini bisa mengubah pada ukuran elemen
HTML seperti ukuran layar perangkat agar bisa menampilkan halaman website.
1. Internal
Internal merupakan salah satu jenis dari CSS yang ditulis di bagian header di file HTML.
Jenis bahasa ini memiliki fungsi untuk menentukan tampilan interface di suatu halaman
website. Anda bisa membuat halaman website dengan penampilan yang berbeda dari
halaman yang lainnya.
2. Inline
Inline juga jenis dari CCS yang merupakan kode yang Anda tulis di file HTML dan hanya
berpengaruh di satu baris kode HTML saja. Inline ini tidak bisa diaplikasikan di semua
halaman website sekaligus, berbeda dengan internal.
Kebanyakan pengembang website memakai jenis satu ini untuk membuat elemen HTML
memakai kode format secara khusus di suatu halaman website. Anda harus memahami
2
jenis-jenis dari CSS ini supaya bisa memasang CSS. Pahami juga cara menggunakan CSS
sesuai dengan kebutuhan Anda menggunakan ketiga jenis ini.
3. External
External merupakan jenis kode yang ditempatkan pada luar kode HTML. Fungsinya
adalah untuk mengatur tampilan interface di setiap halaman website yang sudah
ditentukan.
Anda bisa memakai jenis external ini apabila ingin mengatur sejumlah halaman
sekaligus. Supaya halaman website Anda bisa memakai jenis ini, Anda perlu
menambahkan kode di bagian header.
Keterangan :
Inline CSS
Inline CSS adalah kode CSS yang ditulis langsung pada atribut style di elemen HTML.
Kode CSS ditulis langsung tanpa menggunakan kurung kurawal { ... }. Kemudian properti
tetap dipisah dengan titik koma.
Contoh:
Internal CSS
Internal CSS adalah kode CSS yang ditulis di dalam tag <style>. Intarnal CSS juga dikenal
dengan sebutan Embeded CSS.
Tag <style> bisa ditulis di dalam tag <head>, bisa juga ditulis di dalam tag <body>. Namun
kebanyakan orang menulisnya di dalam <head>.
Penulisan css di dalam tag <head> akan lebih dahulu dibaca dibandingkan di <body>.
Karena lebih dahulu dibaca, style yang akan dipakai adalah yang terakhir.
Maka yang akan dipakai adalah yang terakhir, yakni yang color: blue.
Karena itu, biar konsisten dan tidak bentrok.. sebaiknya tulis CSS hanya dalam satu
tempat saja. Misal di <head> saja.
3
Eksternal CSS
Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS
ditulis di dalam file khusus yang berekstensi .css.
Contoh:
Kita akan membuat sebuah file bernama style.css yang di dalamnya berisi kode CSS.
Berikut ini isinya:
Contoh:
Cara 1: menggunakan tag <link>
4
Cara 2: menggunakan @import
Inline CSS.
inline1.html
inline2.html
5
warnalatarbelakang.html
Contoh di atas adalah cara mengubah warna latar belakang halaman HTML secara
keseluruhan karena atribut style dengan properti background-color diletakkan pada tag
body.
warnalatarbelakang1.html
Contoh di atas adalah cara mengubah warna latar belakang tag h1 dan paragraf.
Warna Huruf
Properti color digunakan untuk mengubah warna tulisan pada suatu tag.
warnahuruf.html
6
Jenis Huruf
Properti font-family digunakan untuk mengubah jenis huruf pada suatu tag.
jenishuruf.html
Ukuran Huruf
Properti font-size digunakan untuk mengubah ukuran huruf pada suatu tag.
ukuranhuruf.html
Posisi Huruf
Properti text-align digunakan untuk menentukan posisi text pada suatu tag.
posisihuruf.html
7
CSS Internal
internalcss.html
CSS Eksternal
index.html
8
style.css