Cara menggunakan linked style sheet adalah

Sebelumnya kalian pasti sudah mengetahui fungsi dan kegunaan css yang sudah dibahas pada artikel sebelumnya yaitu "Pengertian CSS (Cascading Style Sheet)"

Table of Contents Show

Kelebihan CSS
Bagaimana CSS Bekerja
Gaya CSS Internal, Eksternal, dan Inline
Apa itu style sheet Linked?
Untuk apa lembar gaya digunakan?
Bagaimana cara menggunakan Memanggil CSS dalam HTML?
Apa itu gaya tersemat?

Ada 3 cara untuk memasang kode CSS ke dalam HTML, yaitu

CSS sebaris
Embed / memasang kode CSS ke dalam bagian
Tautan ke CSS eksternal

CSS INLINE

Kode CSS ditulis langsung ke dalam tag HTML yang ingin diformat. Menulis dengan cara ini tidak memerlukan penyeleksi penulisan dalam kode CSS. Metode ini hanya digunakan jika Anda ingin memformat elemen hanya sekali

Contoh

<h1 style="color: red;">
H1 dengan CSS
</h1>

Pada contoh si atas, elemen

di format agar tulisannya menggunakan warna merah, elemen lain, tidak akan menggunakan warna merah karena format ini hanya berlaku pada elemen paragraf yang di tentukan kode CSS nya. Penulisan CSS dengan cara ini mulai dengan kata “style = lalu di ikuti dengan syntax Property:value;”

CSS TERSEMBUNYI

Kita bisa menempelkan kode CSS di antara tag & . penulisan CSS dengan cara ini awalnya diawali dengan tag .

Contoh

<head>
<style type=”text/css”>
h1 {color : red;}
</style>
</head>

CSS EKSTERNAL

Kode CSS eksternal ditulis dalam file terpisah yang disimpan dengan akhiran ". css" atau ekstensi ". css". Anda kemudian perlu memanggil file CSS ke semua halaman web yang Anda buat. Dengan cara ini, Anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web Anda. Jadi ada dua langkah dalam mengimplementasikan CSS dengan cara ini

CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang ditulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs

CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 karena alasan yang sederhana. Dulu, HTML tidak dilengkapi dengan tag yang berfungsi untuk memformat halaman. Anda hanya perlu menulis markup untuk situs tersebut

Tags, seperti , diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan masalah ini.

HTML dan CSS terkait erat. Karena HTML adalah bahasa markup (pondasi situs) dan CSS meningkatkan gaya (untuk semua aspek yang berkaitan dengan tampilan situs web), maka kedua bahasa pemrograman ini harus berjalan berdampingan.

Tidak hanya penting dari sisi teknis, CSS juga mempengaruhi tampilan sebuah website. Tentu Anda tidak ingin website Anda terlihat seperti situs 'telanjang' tanpa ada modifikasi bukan?

Unduh Lembar Curang CSS

Kelebihan CSS

Sangat mudah bagi Anda untuk mengetahui situs mana yang menggunakan CSS dan mana yang tidak

Anda pasti pernah membuka sebuah website, namun sesaat kemudian gagal loading dan malah menampilkan background putih yang didominasi teks hitam dan biru. Situasi ini menggambarkan bahwa CSS di situs tidak dapat dimuat dengan benar atau situs tersebut tidak memiliki CSS sama sekali. Umumnya, situs seperti ini hanya mengimplementasikan HTML

Sebelum menggunakan CSS, semua gaya harus disertakan dalam markup HTML. Artinya, Anda harus mendeskripsikan semua latar belakang, warna font, perataan, dll. secara terpisah.

Dengan CSS, Anda dapat mengatur tampilan semua aspek dalam file yang berbeda, kemudian menentukan style, lalu mengintegrasikan file CSS di atas markup HTML. Hasilnya, markup HTML dapat lebih mudahdipelihara.

Singkatnya, dengan CSS, Anda tidak perlu mendeskripsikan tampilan setiap elemen berulang kali. Anda tidak membuang waktu, kode yang digunakan lebih singkat, dan kesalahan dapat diminimalkan

Karena opsi penyesuaian yang tersedia hampir tidak terbatas, CSS memungkinkan Anda untuk menerapkan berbagai gaya pada satu halaman HTML.

Bagaimana CSS Bekerja

CSS menggunakan sintaks berbasis bahasa Inggris sederhana yang dilengkapi dengan sekelompok aturan yang mengaturnya. Seperti yang kami sebutkan sebelumnya, HTML tidak dibuat untuk menerapkan elemen style, hanya markup halaman. HTML dirancang semata-mata untuk mendeskripsikan konten. Sebagai contoh. .

Satu pertanyaan sekarang, bagaimana gaya paragraf? . Struktur ini memiliki pemilih dan blok deklarasi. Pilih elemen yang diinginkan, lalu deklarasikan (deklarasi) yang harus anda lakukan terhadap elemen tersebut. Sangat mudah, bukan?

Ada berbagai aturan yang harus diingat. Namun, struktur aturan cukup sederhana dan lugas.

Selektor menunjuk ke elemen HTML yang tampilannya ingin Anda ubah. Blok deklarasi berisi satu atau lebih deklarasi (deklarasi) dipisahkan dengan titik koma.

Setiap deklarasi menyertakan nama dan nilai properti CSS, dipisahkan dengan koma. Umumnya, deklarasi CSS diakhiri dengan titik koma, sedangkan blok deklarasi diapit oleh kurung kurawal

Mari kita lihat contoh di bawah ini

Semua elemen

ditandai dengan warna biru dan hurufnya dicetak tebal (tebal).

<style>
p {
 color: blue;
 text-weight: bold;
}
<style>

Contoh lainnya, semua elemen

diletakkan di tengah (center-aligned), dengan lebar 16x, dan diwarnai Merah Jambu.

<style>
p {
   text-align: center;
   font-size: 16px;
   color: pink;
  
}
</style>

Lihat lembar contekan CSS untuk contoh lainnya

Mari kita bahas beberapa style CSS, yaitu Inline, External, dan Internal.

Gaya CSS Internal, Eksternal, dan Inline

Kita akan membahas masing-masing Style CSS secara singkat. Untuk informasi atau diskusi lebih mendalam, kami sertakan tautan di bawah ikhtisar

Gaya CSS Internal dimuat setiap kali situs web disegarkan, dan kerugiannya adalah waktu loading yang semakin lama. Gaya CSS yang sama tidak dapat digunakan di halaman lain karena sudah aktif di satu halaman.

Namun dibalik kekurangannya, CSS Style Internal memiliki beberapa kelebihan. Salah satunya adalah kemudahan dalam berbagi template untuk pratinjau (pratinjau) karena CSS hanya ada di satu halaman.

Eksternal adalah gaya CSS yang paling sederhana dan tidak rumit. Semuanya dilakukan secara eksternal pada file . css . Penataan gaya dilakukan di file terpisah, lalu terapkan CSS ke halaman mana pun yang Anda inginkan. Sayangnya, CSS Style External juga memperpanjang waktu loading.

CSS Style Inline menggunakan elemen khusus yang berisi tag digayakan, maka Inline bukanlah metode yang tepat jika ingin cepat menggunakan CSS.

Namun di sisi lain mendatangkan keuntungan. Misalnya, jika Anda ingin mengubah suatu elemen, atau menampilkan pratinjau dengan cepat, atau Anda tidak memiliki akses ke file CSS

Untuk mempelajari lebih lanjut, silakan baca artikel kami tentang perbedaan antara CSS internal, eksternal, dan inline

Situs web anti-lambat ekstra cepat. Dapatkan domain gratis dengan langganan hosting web 1 tahun. Pilih Hosting Web

Kesimpulan

Berikut adalah beberapa poin yang dapat disimpulkan dari artikel ini .

CSS dibuat untuk dapat bekerja sama dengan bahasa markup seperti HTML. Biasanya CSS digunakan untuk mengatur tampilan halaman
Ada tiga gaya dalam CSS, dan untuk menerapkan CSS ke banyak halaman sekaligus, gunakan gaya Eksternal
Saat ini sudah banyak website yang menggunakan CSS. Ini karena CSS adalah salah satu bahasa markup yang diperlukan

Semoga artikel ini dapat bermanfaat bagi anda. Jika ada pertanyaan tentang apa itu CSS, silahkan tulis di kolom komentar di bawah

Penulis

Ariata C

Ariata suka menulis dan menerjemahkan, dan saat ini bekerja sebagai penerjemah di Hostinger Indonesia. Melalui artikel dan tutorial yang dipublikasikan di blog Hostinger, Ariata ingin berbagi ilmu tentang website, WordPress, dan hal-hal terkait hosting lainnya kepada para pembaca.

Apa itu style sheet Linked?

Menulis gaya CSS secara eksternal ( ditautkan ) adalah salah satu tentang metode menata halaman HTML. Cara ini dilakukan dengan menulis kode CSS dan menyimpannya sebagai file terpisah dengan file dokumen HTML. File yang berisi kode CSS disimpan dengan ekstensi. css .

Untuk apa lembar gaya digunakan?

CSS atau Cascading Style Sheets adalah sekumpulan perintah yang digunakan untuk menentukan tampilan halaman situs web dalam bahasa mark-up .

Bagaimana cara menggunakan Memanggil CSS dalam HTML?

Untuk menyisipkan CSS ke dalam file HTML kita akan menggunakan tag . Jika Anda . Jika Anda . Jika Anda . Jika Anda . Jika Anda . Jika Anda . Jika Anda . Jika Anda . Jika Anda membuat proyek web besar, sebaiknya menggunakan mode eksternal CSS karena akan lebih mudah untuk pemeliharaan dan juga efisiensi ukuran CSS .

Apa itu gaya tersemat?

Embedded style yang merupakan pemanggilan kode css yang biasanya terletak tepat di bawah namun masih berada di halaman yang sama, yang dapat dipanggil dengan kode kelas. namun masih berada di halaman yang sama, yang dapat dipanggil dengan kode kelas. namun masih berada di halaman yang sama, yang dapat dipanggil dengan kode kelas. namun masih berada di halaman yang sama, yang dapat dipanggil dengan kode kelas. namun masih berada di halaman yang sama, yang dapat dipanggil dengan kode kelas. namun masih berada di halaman yang sama, yang dapat dipanggil dengan kode kelas. namun masih berada di halaman yang sama, yang dapat dipanggil dengan kode kelas. namun masih berada di halaman yang sama, yang dapat dipanggil dengan kode kelas. namun masih berada di halaman yang sama, yang dapat dipanggil dengan kode kelas.