CSS DASAR : Pengantar
CSS adalah singkatan dari cascading style sheet yang merupakan sebuah mekanisme sederhana untuk mengatur gaya atau style pada sebuah halaman website. Jadi sebuah website jika posisi konten, warna, dan animasi terlihat rapih dan menarik, maka perlu diatur menggunakan CSS.
CSS juga berguna untuk mempersingkat koding HTML tidak perlu mengetik terlalu banyak tag pada file HTML dengan membuat file CSS pada aplikasi kode editor yang dihubungkan dengan file HTML yang sudah dibuat. Bahkan 1 file CSS bisa digunakan untuk banyak file HTML.
Dengan CSS kita hanya cukup menulis kode satu kali untuk elemen HTML untuk diterapkan ke semua halaman. Bahkan ketika akan melakukan perubahan, kita juga cukup melakukan perubahan pada satu kode CSS tadi. Sehingga pekerjaan mengedit sebuah website akan lebih mudah.
Jika kita mengatur tampilan web site dengan CSS, kecepatan loading website bisa menjadi lebih ringa. Karena ktia bisa menuliskan satu rangkaian kode untuk beberapa halaman website sekaligus. Dengan begitu, beban pada saat proses loading website lebih kecil Karena tidak perlu me-loading sebuah halaman website.
Jenis jenis CSS dibagi menjadi tiga berdasarkan penempatan kodenya, yaitu Inline, Internal dan Externa1l:
1. Inline CSS
inline CSS adalah kode CSS yang dituliskan di dalam file HTML. Jenis CSS ini hanya mempengaruhi satu baris kode HTML. Kode ini biasanya dituliskan menjadi atribut dalam tag pembuka HTML. contohnya
<h1 style="font-size:30px;color:blue;">legenda02.blogspot.com</h1>
atribut html berwarna hijau diatas adalah untk memodifikasi tulisan heading menjadi ukuran 30px dan berwarna biru. Dari kode atribut HTML diatas akan menjadi seperti
legenda02.blogspot.com
2. Internal CSS
Internal CSS dituliskan di bagian header file HTML. Fungsinya untuk menentukan tampilan keseluruhan halaman baik konten dan backgroud website. Contohnya, jika Anda ingin agar halaman memiliki latar belakang biru dan teks berukuran 20px yang berwarna putih, kodenya seperti di bawah ini:
<head>
<style>
Body { background-color:blue; }
P { font-size:20px; color:white; }
</style>
</head>
3. External CSS
Sesuai namanya, external CSS merupakan kode CSS yg diletakkan pada CSS tersendiri yang dibuat menggunakam code editor dan dihubungkan kepada file HTML.
Referensi :
1. https://www.niagahoster.co.id/blog/pengertian-css/ (diakses pada 18 August 2022)
2. https://www.youtube.com/watch?v=CleFk3BZB3g&list=PLFIM0718LjIUBrbm6Gdh6k7ZUvPIAZm7p&index=1 (diakses pada 18 August 2022)
Tidak ada komentar