CSS: Pengertian, Fungsi, Jenis dan Cara Kerjanya

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.

Apa itu CSS ?

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.

Fungsi dari CSS

CSS dicarankan untuk mengatur tampilan website bersama dengan bahasa mark up.
Nah, beberapa fungsi CSS adalah :

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.

Pengelolaan Kode Lebih Mudah

CSS juga berfungsi untuk mengelola kode jadi lebih mudah sebab Anda tidak perlu ubah
kode di setiap halaman apabila ingin melakukan perubahan pada tampilan website.
Contohnya Anda ingin mengubah background, jadi cukup edit kode yang berkaitan
dengan background saja. Dengan demikian, bahasa pemrograman satu ini lebih sudah
untuk mengelola kode sesuai dengan kebutuhan Anda.

Loading Halaman Web Dipercepat

fungsi lain dari CSS adalah membuat loading halaman lebih cepat. Anda bisa membuat
serangkaian kode untuk seluruh halaman web dan juga jumlah kode bisa diminimalisir.
Hal ini akan membuat beban selama proses loading lebih kecil dan juga kecepatan
loading website akan meningkat.

Tampilan Website Lebih Rapi di Setiap Ukuran Layar

Secara umum ukuran layar di setiap perangkat yang dipakai oleh pengguna akan
berbeda-beda. Fungsi dari CSS adalah untuk membuat tampilan website jadi optimal
untuk beberapa ukuran layar milik pengguna. Bagi Anda yang memakai tablet,
smartphone atau laptop saat membuka suatu website akan tetap rapi.

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.

Jenis-jenis dari CSS

Jenis CSS sesuai dengan penempatan kodenya adalah:

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.

Misalnya kita punya style seperti ini di dalam <head>:

Lalu di body kita buat lagi seperti ini:

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:

Untuk menggunakan CSS ini, kita harus menghubungkannya dengan HTML.

Ada dua cara yang bisa kita lakukan:
1. Menggunakan tag <link>
2. Menggunakan @import

Contoh:
Cara 1: menggunakan tag <link>

4
Cara 2: menggunakan @import

PRAKTIK CSS dasar

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

Jadi kita memiliki dua buah file:

1. Yang pertama index.html
2. dan yang kedua adalah style.css

index.html

8
style.css