A. PENDAHULUAN
- Pengertian
Css(Cascading Style Sheets))adalah bahasa yang kita gunakan untuk menata dan mempercantik Dokumen HTML. Tanpa adalanya CSS ini tampilan website akan kurang menarik.
- Latar belakang masalah
Belum mengerti dan mengetahui apa itu CSS, fungsi, cara kerja, dan kenapa harus menggunakan CSS.
B. MAKSUD DAN TUJUAN
Membaca dan memahami pengertian dari CSS, dan tujuannya adalah biar bisa mengimpelementasikan ketika membuat sebuah halaman website.
C. RUANG LINGKUP PEKERJAAN
- Pengertian CSS
- Fungsi CSS
- Cara kerja CSS
- Kenapa Harus menggunakan CSS
D. TARGET DAN HASIL YANG DIHARAPKAN
Dapat mengerti dan memahami pengertian, fungsi, cara kerja dari CSS
E. METODE PELAKSANAAN
- Membaca referensi
- Coding
F. ALAT DAN BAHAN
Laptop
Text Editor
Koneksi internet
G. TARGET WAKTU
08.30 - 16.00
H. TAHAPAN PELAKSANAAN
- Pengertian CSS
Css(Cascading Style Sheets))adalah bahasa yang kita gunakan untuk menata dan mempercantik Dokumen HTML. Tanpa adalanya CSS ini tampilan website akan kurang menarik.
Apabila hanya menggunakan HTML ketika membangun website dengan beberapa halaman, Anda harus menulis tag untuk sebuah elemen HTML di semua halaman tersebut.
Dengan adanya CSS ini, Kalian cukup menulis code satu kali untuk sebuah elemen HTML untuk diterapkan ke semua halaman. Nantinya, ketika akan melakuka perubahan, Kalian jupercepat Loading Halaman Web
Jika anda mengatur tampilan websga cukup perubahan pada satu kode tadi.
Karena demikian, CSS sering dianggap sebuah bahasa pemrograman. Padahal, CSS lebih tepat di panggil dengan bahasa style sheet.
- Fungsi CSS
Secara umum, Css berfungsi untuk mengatur tampilan website berbasis HTML atau bahasa markup lainnya. Tapi, masih ada beberapa fungsi CSS lainya. Yaitu :
1. Memudahkan pengelolaan kode
Dengan CSS, Kalian tidak perlu merubah kode di setiap halaman apabila ingin mengganti tampilan website. Sebagai contoh, Kalian ingin mengubah latar belakang semua halaman website. Maka, cukup edit kode CSS terkait latar belakang, perubahan itu akan diterapkan di semua halaman.
2. Menawarkan Lebih Banyak Variasi Tampilan
HTML bisa untuk mengatur tampilan website, tetapi terbatas. Nah, CSS menawarkan lebih banyak style tampilan, sehingga Kalian bisa lebih bebas membuat atarmuka website. Contohnya, Kalian bisa menggunakan CSS untuk membuat tulisan menjadi berwarna dan dapat mengubah font nya dengan CSS tersebut.
3. Membuat Website Tampil Rapi di Semua Ukuran Layar
Fungsi CSS yang tidak kalah menarik adalah membuat tampialan website optimal di berbagai ukuran layar. Baik itu laptop maupun di smartphone. Mengapa kok bisa begitu?
Css memiliki berbagai property untuk mengatur tampilan konten sesuai kebutuhan layar, misalnya dengan max-width. Ketika menggunakan property ini mengubah ukuran elemen HTML sesuai ukuran layar yang digunakan untuk menampilkan website.
- jenis-jenis CSS
1. Inline CSS
Inline CSS adalah CSS yang dituliskan didalam file HTML. jenis CSS ini hanya mempengaruhi satu baris kode HTML.
Perhatikan baris kode di bawah ini sebagai contohnya :
<h1 style="font-size:30px;color:blue;text-align:center;">AdelwinNL</h1>
Dengan kode tersebut jadinya akan menjadi ini :
Inline Css tidak bida di implementasikan ke semua halaman website sekaligus. Namun, jenis CSS ini tepat digunakan ketika Kalian ingin membuat elemen HTML dengan format khusus di sebuah halaman.
2. Internal CSS
Internal css ini dituliskan langsung di dokumen HTMLnya. Fungsinya untuk menentukan tampuilan sebuah halaman.
Contohnya, jika anda ingin agar halaman memiliki latar belakang kuning dan teksnya berukuran 20px yang berwarna merah, kodenya seperti ini :
<head>
<style>
body {
background-color:blue;
}
p {
font-size:20px;
color: red;
}
</style>
</head>
<body>
<p> Ini adalah contoh kalimat yang berwarna merah</p>
Hasilnya akan seperti ini :
Internal css sangat membantu ketika anda ingin membuat halaman website yang tampilannya berbeda dari halaman lain.
3. External CSS
Sesua namanya, external CSS adalah kode css yang dituliskan di file yang berbeda/atau diluar dokumen HTML sendiri dengan berformat .css. Jenis CSS ini berfungsi untuk mengatur tampilan semua halaman website yang anda tentukan. Jadi, external CSS berguna ketika Kalian ingin mengatur tampilan beberapa halaman sekaligus.
Nah untuk mengundan file CSS yang ada diluar, Kalian perlu menambahkan kode di bagian head kode HTML-nya. Contohnya seperti ini.
<head>
<link rel="stylesheet" type="text/css" href="namafile-cssmu.css">
</head>
Nahh dengan kode di atas tersbut itulah untuk memanggil kode css yang ada di buat dokumen HTML sendiri.
- Cara kerja CSS
Css bekerja ketika browser membuat halaman website. Untuk menerapkan pengaturan tampilan HTML yang telah ditentukan dengan kode CSS, prosesnya meliputi beberapa langkah.
Mulainya, browser akan memuat file HTML dan CSS (Jika kodenya ditulis sebagai external CSS). Kemudian, browser mengubah keduanya menjadi dokumen objek model (DOM). Ini adalah komponen yang mewakili file HTML dan CSS dalam memori perangkat pengunjung website.
Setelah HTML dan CSS diubah menjadi DOM, browser akan melakukan rendering, proses dimana browser menerapkan pengaturan di kode CSS pada elemen-elemen HTML. Hasilnya adalah halaman website yang tampil di layar perangkat Kalian.
- Kenapa harus menggunakan CSS?
Pada dasarnya, CSS berfungsi untuk mendesain, membentuk, serta mengubah tampilan halaman sebuah website. CSS dapat bekerja dan berlaku melalui tag HTML. Dengan adanya CSS, tag HTML yang sederhana dapat di percantik yang lebih menarik dan efisien.
I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA
-
J. KESIMPULAN YANG DIDAPAT
Dengan menggunakan CSS kita bisa mempercanti Halaman website kita.
K. REFERENSI
- https://w3schools.com/css/default.asp
- https://niagahoster.co.id
