Pengenalan CSS: Dasar yang Wajib Diketahui untuk Membuat Website
CSS, atau Cascading Style Sheets, adalah salah satu bahasa yang esensial saat Anda mempelajari cara membuat website. Tanpa CSS, tampilan website akan terlihat kurang menarik dan memerlukan upaya lebih untuk melakukan perubahan pada elemen tampilan. Pada artikel ini, Anda akan mengenal apa itu CSS, berbagai fungsi CSS, jenis-jenis CSS, serta beberapa contoh penerapannya. Mari kita mulai dengan memahami pengertian CSS.
Apa Itu CSS?
CSS, singkatan dari Cascading Style Sheets, adalah bahasa yang digunakan untuk menentukan tampilan dan format halaman website. Dengan CSS, Anda bisa mengatur berbagai elemen desain seperti jenis font, warna tulisan, dan latar belakang halaman. CSS digunakan bersama dengan bahasa markup seperti HTML dan XML untuk membangun sebuah website yang menarik dan memiliki fungsi yang berjalan baik.
CSS berperan penting dalam mengatasi keterbatasan HTML dalam mengatur format halaman website. Mengapa demikian? Apabila hanya menggunakan HTML saat membangun website dengan beberapa halaman, Anda harus menulis tag untuk sebuah elemen HTML di semua halaman tersebut. Dengan CSS, Anda cukup menulis kode satu kali untuk sebuah elemen HTML untuk diterapkan ke semua halaman. Ketika melakukan perubahan, Anda cukup mengubah satu kode tersebut, membuat prosesnya lebih praktis.
Meski sering dianggap sebagai bahasa pemrograman, CSS lebih tepat disebut sebagai bahasa style sheet yang umumnya digunakan bersamaan dengan JavaScript. Untuk lebih mengenal JavaScript, Anda bisa merujuk ke artikel terkait.
Fungsi CSS
Secara umum, CSS berfungsi untuk mengatur tampilan halaman website berbasis HTML atau bahasa markup lainnya. Namun, ada beberapa fungsi CSS lainnya yang perlu Anda ketahui:
1. Mempercepat Loading Halaman Web
Dengan menggunakan CSS, Anda dapat meningkatkan kecepatan loading website. Karena Anda bisa menuliskan satu rangkaian kode untuk beberapa halaman website sekaligus, jumlah kode bisa diminimalkan. Dengan begitu, beban pada saat proses loading website menjadi lebih kecil.
2. Memudahkan Pengelolaan Kode
CSS memudahkan pengelolaan kode website. Anda tidak perlu merubah kode di setiap halaman apabila ingin mengganti tampilan website. Misalnya, untuk mengubah latar belakang semua halaman website, cukup edit kode CSS terkait latar belakang, maka perubahan itu akan diterapkan di semua halaman.
3. Menawarkan Lebih Banyak Variasi Tampilan
CSS menawarkan lebih banyak variasi tampilan dibandingkan HTML. Dengan CSS, Anda bisa lebih bebas membuat antarmuka website, misalnya membuat tombol dengan warna yang diinginkan atau menu dropdown.
4. Membuat Website Tampil Rapi di Semua Ukuran Layar
CSS juga memungkinkan tampilan website optimal di berbagai ukuran layar, baik di laptop maupun smartphone. CSS memiliki berbagai properti untuk mengatur tampilan konten sesuai kebutuhan layar, seperti menggunakan max-width untuk mengubah ukuran elemen HTML sesuai ukuran layar.
Jenis-Jenis CSS yang Perlu Anda Ketahui
Jenis-jenis CSS dibagi menjadi tiga berdasarkan penempatan kodenya, yaitu Inline, Internal, dan External. Berikut penjelasannya:
1. Inline CSS
Inline CSS adalah kode CSS yang dituliskan di dalam file HTML dan hanya mempengaruhi satu baris kode HTML. Contohnya:
html<br /> <br />
Inline CSS tepat digunakan ketika Anda ingin membuat elemen HTML dengan format khusus di sebuah halaman.
2. Internal CSS
Internal CSS dituliskan di bagian header file HTML dan berfungsi untuk menentukan tampilan sebuah halaman. Contohnya:
“`html
Ini adalah contoh kalimat.
“`
Internal CSS sangat membantu ketika Anda ingin membuat halaman website yang tampilannya berbeda dari halaman lain.
#### 3. External CSS
External CSS adalah kode CSS yang diletakkan di luar dokumen HTML sebagai file .css. Jenis CSS ini berfungsi untuk mengatur tampilan semua halaman website yang Anda tentukan. Contohnya:
“`html
“`
External CSS berguna ketika Anda ingin mengatur tampilan beberapa halaman sekaligus.
### Bagaimana Cara Kerja CSS?
CSS bekerja ketika browser memuat halaman website. Prosesnya meliputi beberapa langkah. Pertama, browser memuat file HTML dan CSS. Kemudian, browser mengubah keduanya menjadi Document Object Model (DOM), komponen yang mewakili file HTML dan CSS dalam memori perangkat pengunjung website. Setelah itu, browser melakukan rendering, yaitu proses menerapkan pengaturan di kode CSS pada elemen-elemen HTML. Hasilnya adalah halaman website yang tampil di layar perangkat Anda.
### Contoh Penerapan CSS
Berikut adalah beberapa contoh penerapan CSS yang mudah:
#### 1. Menentukan Format Paragraf
Untuk mengatur format paragraf agar semua paragraf dalam sebuah halaman website berukuran 120% dan berwarna abu-abu tua, Anda bisa menambahkan kode berikut:
“`css
p { font-size: 120%; color: dimgray; }
“`
#### 2. Mengubah Warna Link
Anda bisa mengubah warna link dengan CSS. Warna link yang ditentukan ada empat jenis: normal, visited, hover, dan active. Contohnya:
“`css
a:link { color: gray; }
a:visited { color: green; }
a:hover { color: purple; }
a:active { color: teal; }
“`
#### 3. Menentukan Huruf Kapital/Kecil
Jika ingin agar sebuah paragraf berisi huruf kecil saja, Anda bisa menggunakan kode berikut:
“`html
Paragraf Anda.
“`
#### 4. Membuat Kotak Teks
CSS memungkinkan Anda membuat kotak teks untuk menonjolkan informasi penting. Contohnya:
“`css
p.important { border-style: solid; border-width: 5px; border-color: purple; }
“`
Untuk menandai teks dengan class tersebut, tambahkan kode berikut:
“`html
Paragraf Anda.
“`
#### 5. Membuat Tombol Link
Untuk membuat tombol link dengan CSS, gunakan kode berikut:
“`css
a:link, a:visited, a:hover, a:active {
background-color: green;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
“`
#### 6. Meng-highlight Baris dalam Tabel
Jika ingin agar baris dalam sebuah tabel memiliki warna berbeda ketika ditunjuk dengan kursor, tambahkan kode berikut:
“`css
tr:hover { background-color: #ddd; }
“`
### Kesimpulan
Di artikel ini, Anda telah mengenal pengertian, fungsi, dan jenis-jenis CSS. Selain itu, Anda juga menyimak beberapa contoh penerapan CSS. CSS adalah bahasa yang perlu Anda kuasai agar bisa membuat tampilan website yang baik dengan cepat. Anda tinggal menambahkan kode CSS ke dalam file HTML atau membuat file CSS untuk mengatur beberapa halaman sekaligus.
Untuk memastikan website Anda bisa diakses semua orang, Anda memerlukan layanan hosting yang andal. Layanan web hosting sobatcloud.com adalah pilihan yang tepat. Dengan uptime 99,99%, website Anda akan online 24 jam non-stop. Selain itu, sobatcloud.com dilengkapi dengan fitur Imunify360 yang mampu memindai dan menghapus malware dari website Anda, sehingga keamanan website terjamin. Anda bisa berlangganan layanan hosting mulai dari Rp26.813/bulan dengan tambahan domain gratis.
Ayo, segera dapatkan paket hosting terbaik untuk website Anda!