Assalamu’alaikum Warohmatullah Wabarokatuh Selamat Pagi
Pengertian CSS Hofar Ismail (13.230.0004) Anggota Kelompok Hofar Ismail (13.230.0004) Arief Mukti Wibowo (13.230.0132) Imanuel Paksi (13.230.0140) Septianto Sepono (13.230.0018) Tsara Dian Aziza (13.230.0130)
Pengertian CSS Secara Bahasa CSS atau Cascading Style Sheets. Menurut bahasa: Cascading adalah air terjun. Style adalah gaya. Sheets adalah lembaran / halaman. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.
Pengertian CSS Secara Istilah Secara Istilah CSS adalah Kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / gaya tampilan suatu halaman HTML.
Syntax / kalimat CSS Adapun Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value. Ket : Selector, untuk menunjukkan bagian mana yang hendak diatur / diformat. Property, untuk menunjukkan, bagian (properti) dari selector yang hendak diatur. Value, adalah nilai dari pengaturannya.
Contoh syntax CSS Contoh di atas menunjukkan Selector : h1 Property : color Value : red Syntak diatas dapat di baca seperti ini: Mengatur color dari h1 ke warna merah (red).
Implementasi penulisan CSS Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu: Inline CSS. Embed atau memasang kode css ke dalam bagian <head>. Nge link ke external CSS. Import CSS file.
Inline CSS Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS, digunakan jika anda mau memformat suatu elemen satu kali saja. Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value, dalam tag.
External CSS Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran *.css. Memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan </head>
Embedded CSS menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>.
Import CSS Kita bisa juga meng-import CSS ke dalam suatu halaman website dari alamat url dari internet menggunakan tag import. Ket: url dapat diganti dengan alamat folder di Hardisk atau alamat url web server tempat kita menyimpan file .css
Menerapkan CSS Untuk Suatu Dokumen HTML Ada tiga cara yang dapat diterapkan CSS untuk suatu dokumen HTML. Diantaranya : Metode 1: In-line (gaya atribut) Metode 2: Internal (gaya tag) Metode 3: Eksternal (link ke style sheet)
Metode 1: In-line (gaya atribut) Salah satu cara untuk menerapkan CSS untuk HTML adalah dengan menggunakan gaya atribut HTML.
Tampilan CSS Metode 1 dan 2
Metode 2: Internal (gaya tag) Dengan memasukkan kode CSS menggunakan <style> tag HTML.
Metode 3: Eksternal (link ke style sheet) Caranya adalah dengan membuat link dari dokumen HTML (file.html) ke style sheet (style.css). Link tersebut dapat dibuat dengan satu baris kode HTML: Contoh :
Class Selector Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali. Cara penulisan Class Selector: Untuk menempelkan class ke dalam tag HTML:
Contoh Class Selektor:
Tampilan CSS Class Selektor
ID Selector ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu / sidebar. Cara penulisan ID Selector: Untuk menempelkan ID selector ke dalam tag HTML: Ket: Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.
Contoh ID Selector
Keuntungan Penggunaan CSS Dengan menggunakan css, dimana semua halaman web memakai css yang sama, kita cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet. Jadi, keuntungan menggunakan CSS, lebih praktis dalam hal pengetikan kode / syntax.
Kekurangan Penggunaan CSS Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi kita harus menambahkan kode-kode khusus agar tampilan web terlihat di semua browser.
Perbedaan denga HTML tanpa CSS Pendeklarasian dalam setiap satu tag Menggunakan tanda = dan “ ” HTML dengan CSS Pendeklarasian di buat satu kelompok Biasanya dtempatkan di antara <style> dan </style> sebelum <body> Di dalam sebuah kurung kurawal { } dan menggunakan tanda : dan ;
Sekian Dan Terimakasih Salam Sukses Untuk Kita Semua