Tertarik jadi Front End Developer? Artinya, Anda wajib tahu apa itu CSS!
Ketika mengembangkan sebuah website, ada sisi front end dan back end. Nah, di sisi front end, biasanya menggunakan HTML dan Javascript. Namun, dua hal tersebut tidaklah cukup. Salah satu skill front end developer yang harus dimiliki adalah kemampuan menguasai CSS.
Mengapa demikian?
Hal ini karena HTML dan CSS memiliki keterkaitan erat dan saling melengkapi. Dimana Anda melihat HTML, di situ juga Anda melihat CSS. Singkatnya, CSS dapat melengkapi HTML sehingga tampilan sebuah website menjadi lebih menarik.
Namun, bagaimana sebenarnya cara kerja CSS?
Di artikel ini, Anda akan mempelajari apa itu CSS, kelebihan, macam-macam style, serta cara kerja CSS. Yuk simak pembahasan lengkapnya melalui poin-poin berikut!
- Apa Itu CSS?
- Kelebihan CSS
- 1. Lebih Lengkap Daripada HTML
- 2. Sederhana dan Efisien
- 3. Menghemat Waktu Pengembangan Software
- 4. Standar Pengembangan Website
- 3 Macam Style CSS
- 1. Inline CSS
- 2. External CSS
- 3. Internal CSS
- Cara Kerja CSS
- Kesimpulan
Apa Itu CSS?
Apa itu CSS?
CSS adalah singkatan dari Cascading Style Sheets. Perlu diingat, CSS bukanlah bahasa pemrograman. Sama halnya dengan HTML.
Jika HTML merupakan bahasa markup, maka CSS adalah bahasa styling. Jadi, seperti namanya, CSS ini memang bertujuan untuk menambahkan gaya pada struktur sebuah website dan untuk menentukan tampilan dan format halaman web. Tujuannya agar tampilannya lebih menarik.
Sekarang, pertanyaannya, kenapa CSS selalu berdampingan dengan HTML?
Jadi, HTML adalah fondasi dari sebuah website. Struktur website seperti paragraf, heading, dan text bergantung pada HTML. Anda bisa melihat Contoh HTML agar lebih paham bahasa tersebut.
Nah, pastinya, Anda ingin paragraf, heading, dan text tadi terlihat menarik kan? Di sinilah CSS berperan. Contohnya seperti mengubah jenis font, warna font, maupun desain lain untuk mempercantik tampilan website.
CSS adalah satu bahasa yang wajib Anda ketahui saat belajar membuat website. Sampai sini, Anda sudah cukup paham apa itu CSS, bukan? Yuk kita lanjut ke pembahasan kedua mengenai manfaat CSS. Simak di bawah ini!
Fungsi CSS
Setelah mengetahui pengertiannya, tentunya anda juga harus mengetahui fungsi CSS.
Seperti pengertiannya sebagai bahasa style, fungsi CSS utamanya berkaitan erat dengan bagaimana developer memberikan inovasi dan mengatur tampilan halaman yang menarik. Dengan CSS, proses kerja HTML akan lebih sederhana sesuai dengan fungsi-fungsi yang dimiliki.
Fungsi-fungsi tersebut adalah bisa menentukan tampilan warna baik untuk tautan dan latar belakang, menentukan font, hingga bisa memasukan style ke dalam style sheet. Semua fungsi ini akan membuat tampilan website menjadi semakin menarik. Selain itu, CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.
Kelebihan CSS
1. Lebih Lengkap Daripada HTML
Masih ingat kalau CSS bisa memberikan “warna” pada struktur website?
Sebenarnya, HTML juga memiliki fungsi tersebut. Anda bahkan bisa mengubah warna background halaman menggunakan HTML. Begitu juga dengan mengubah warna font.
Namun, CSS jauh lebih lengkap daripada HTML. Hal ini karena CSS memang didesain untuk mempercantik website. Sehingga, atributnya pun lebih lengkap. Maka dari itu, Anda memiliki banyak pilihan untuk mendesain website Anda jika menggunakan CSS.
2. Sederhana dan Efisien
Sederhana dan efisien? Apa maksudnya?
Misal, Anda sudah selesai mendesain tampilan website Anda. Namun, ternyata ada beberapa bagian yang ingin Anda ubah. Akan sulit bukan jika Anda harus menggantinya satu per satu?
Namun, Anda tidak perlu khawatir jika menggunakan CSS. Anda cukup mengubah fungsi style di file CSS. Nanti, otomatis tampilan website yang menggunakan fungsi tersebut akan ikut berubah. Jauh lebih efisien, kan?
3. Menghemat Waktu Pengembangan Software
Nah, poin ketiga ini kurang lebih sama dengan poin kedua.
Misal, Anda ingin mempercantik beberapa halaman HTML dengan desain yang sama. Salah satu caranya adalah dengan menyalin kode CSS untuk setiap halaman HTML. Namun, hal tersebut akan membuang waktu Anda.
Dengan CSS, Anda hanya cukup menuliskan kode satu kali saja. Setelah itu, Anda bisa menggunakannya berkali-kali tanpa harus menyalin kode di setiap halaman HTML yang ingin Anda desain.
4. Standar Pengembangan Website
CSS sangat populer loh!
Faktanya, sebanyak 55.9% developers di dunia menyukai CSS dan HTML untuk pengembangan website. Mereka menduduki posisi kedua pada survei Stack Overflow di tahun 2021.
Inilah yang membuat CSS menjadi standar pengembangan website. Berbagai browser pun sudah mendukung CSS.
Coba Anda klik kanan pada halaman ini dan klik “Inspect”. Di situ, Anda bisa melihat kode-kode CSS untuk mempercantik halaman ini. Menarik, ya!
3 Macam Style CSS
Apa yang dimaksud dengan Style CSS?
Dalam praktiknya, Anda akan menempatkan kode CSS pada halaman HTML. Nah, penempatan kode itulah yang disebut dengan Style CSS.
Terdapat tiga macam style CSS, yaitu Inline CSS, External CSS, dan Internal CSS. Berikut adalah penjelasan lengkapnya!
1. Inline CSS
Tipe yang pertama adalah Inline CSS. Seperti namanya, kode CSS ini langsung ditempatkan di dalam baris kode HTML. Contohnya adalah seperti ini:
<h1 style="color:blue;text-align:center;">Ini adalah heading</h1>
Jadi, kode HTML nya sendiri hanyalah penjelasan tentang heading. Namun, kode CSS dimasukkan untuk menambahkan style di sana, yaitu dengan menambahkan warna biru dan meratakan tulisan menjadi di tengah.
Yang terpenting dari Inline CSS adalah pengaruhnya. Style yang diberikan di sini spesifik hanya untuk heading, tidak untuk elemen HTML lainnya.
2. External CSS
Kalau Inline CSS hanya mempengaruhi satu baris, External CSS bisa mempengaruhi keseluruhan website. Tentunya hal ini dilakukan dengan mengubah file CSS, tanpa perlu menuliskan kode secara berulang.
Perlu diperhatikan, ciri khas dari External CSS adalah menggunakan tag <head>. Setelah itu, baru sisipkan file CSS sesuai kebutuhan. Contohnya seperti ini:
<head> <link rel="stylesheet" href="mystyle.css"> </head>
“mystyle.css” adalah file CSS yang ingin Anda sisipkan. Nah, di dalam file tersebut, kurang lebih seperti ini gambarannya:
body {
background-color: green;
}
h1 {
color: red;
margin-left: 20px;
}3. Internal CSS
Tipe yang terakhir adalah Internal CSS. Kurang lebih, tipe yang satu ini mirip dengan Inline CSS. Namun, kodenya tidak dituliskan di baris yang sama.
Contohnya adalah sebagai berikut:
<head>
<style>
body {
background-color: blue;
}
h1 {
color: green;
margin-left: 40px;
}
</style>
</head>Nah, itu dia kira-kira 3 Macam Style CSS yang wajib Anda ketahui. Dari penulisan kodenya, External CSS paling efektif untuk digunakan. Hal ini karena Anda hanya perlu mengganti file CSS saja, tanpa perlu menuliskan kode satu per satu.
Cara Kerja CSS
CSS bekerja ketika sebuah browser menampilkan dokumen, karenanya pada saat itu browser harus menggabungkan konten dokumen dengan gaya informasi atau gaya presentasi dalam halaman web.
Prosesnya terdapat beberapa langkah. Pertama, browser akan memuat file HTML dan CSS (jika kodenya ditulis sebagai external CSS). Setelah itu, browser akan mengubah keduanya menjadi Document Object Model (DOM). Ini adalah komponen yang mewakili file HTML dan CSS dalam memori perangkat pengunjung website.
Selanjutnya, setelah HTML dan CSS diubah menjadi DOM, browser akan melakukan rendering yaitu proses ketika browser menerapkan pengaturan di kode CSS pada elemen-elemen HTML. Akhirnya, hasilnya adalah tampilan halaman website yang ada di layar perangkat Anda.
Kesimpulan
CSS memiliki andil yang besar dalam pembuatan website karena tanpa CSS maka tampilan web akan terlihat membosankan. Selain itu, dari sisi web designer sendiri, CSS akan sangat membantu mereka untuk menghemat waktu karena tidak harus mengetikan hal yang sama.
Saat ini, sudah banyak loh media online yang menyediakan meteri pembelajaran CSS. Untuk kamu yang ingin mempelajari CSS, ada banyak sumber seperti buku, sumber website, hingga video-video tutorial yang bisa diakses secara online. Semoga informasi ini membantu ya!
