Dasar Pemograman - Pengenalan CSS

PENGENALAN CSS
Bahan Materi : Dasar pemograman

Dosen : Irwan Ruswandi
Pengenalan CSS
CSS adalah singkatan dari Cascading Style Sheets.
• Cascading mengacu pada cara CSS menerapkan satu gaya di atas yang lain.
• Style Sheets mengontrol tampilan dan nuansa dokumen web.
CSS dan HTML Mempunyai Hubungan yang erat kaitannya antara lain :
• HTML memilah struktur halaman
• CSS mendefinisikan bagaimana elemen HTML ditampilkan.
Mengapa menggunakan CSS ?
CSS berfungsi menerapkan gaya tertentu ke

elemen HTML tertentu.
• Manfaat utama CSS adalah memungkinkan Anda memisahkan gaya dari
konten.
• Menggunakan hanya HTML, semua gaya dan format berada di tempat yang
sama, yang menjadi agak sulit dipertahankan saat halaman tumbuh
Inline CSS
• Menggunakan gaya inline adalah salah satu cara untuk memasukkan style
sheet. Dengan gaya inline, gaya unik diaplikasikan pada satu elemen.
• Untuk menggunakan gaya sebaris, tambahkan atribut gaya ke tag yang
relevan
Contoh di bawah ini menunjukkan bagaimana
membuat paragraf dengan latar belakang abu-abu
dan teks putih :
<p style="color:white; background-color:gray;">
This is an example of inline styling.
</p>
Internal CSS
Gaya internal didefinisikan dalam elemen <style>, di bagian kepala halaman HTML
Sebagai contoh, gaya kode berikut semua paragraf:
<html>
<head>
<style>
p{
color:white;
background-color:gray;
}
</style>
</head>
<body>
<p>This is my first paragraph. </p>
<p>This is my second paragraph. </p>
</body>
</html>
CSS eksternal
Dengan metode ini, semua aturan styling terkandung dalam satu file teks, yang
disimpan dengan ekstensi .css
File CSS ini kemudian dirujuk dalam HTML menggunakan tag <link>. Elemen
<link> masuk ke bagian kepala.
Berikut adalah contohnya:
Kode HTML: Kode css :
<head>
<link rel="stylesheet" href="example.css"> p{
</head> color:white;
<body>
<p>This is my first paragraph.</p> background-color:gray;}
<p>This is my second paragraph. </p>
<p>This is my third paragraph. </p>
</body>
Sintaks CSS
CSS terdiri dari aturan gaya yang diinterpretasikan browser dan kemudian
berlaku untuk elemen yang sesuai dalam dokumen.
Aturan gaya memiliki tiga bagian: pemilih, properti, dan nilai
Misalnya, warna utama dapat didefinisikan sebagai:
Kode CSS :
h1 { color: orange; }
Jenis Pemilih
Pemilih yang paling umum dan mudah dimengerti adalah penyeleksi tipe.
Pemilih ini menargetkan jenis elemen pada halaman.
Misalnya, untuk menargetkan semua paragraf pada halaman:
Kode CSS :
p{
color: red;
font-size:130%;
}
Pemilih id dan Kelas
Penyeleksi id memungkinkan Anda menata elemen HTML yang memiliki
atribut id, terlepas dari posisinya di pohon dokumen. Berikut adalah contoh
pemilih id:
KODE HTML:
<div id="intro"> KODE CSS :
#intro {
<p> This paragraph is in the intro section.</p> color: white;
</div> background-color: gray;
<p> This paragraph is not in the intro section.</p> }
Pemilih kelas bekerja dengan cara yang sama. Perbedaan utamanya adalah ID hanya dapat
diterapkan satu kali per halaman, sementara kelas dapat digunakan berkali-kali pada halaman
seperlunya.
Pada contoh di bawah ini, kedua paragraf yang memiliki kelas "pertama" akan terpengaruh oleh
CSS:
Kode HTML:
<div>
<p class="first">This is a paragraph</p>
<p> This is the second paragraph. </p>
</div>
<p class="first"> This is not in the intro section</p>
<p> The second paragraph is not in the intro section. </p>
Kode CSS :
.first {font-size: 200%;}
Pemilih Keturunan
Pemilih ini digunakan untuk memilih elemen yang merupakan keturunan elemen lain. Saat memilih level, Anda
dapat memilih sebanyak mungkin level yang Anda butuhkan.
• Misalnya, untuk menargetkan hanya <em> elemen di paragraf pertama bagian "intro":
Kode HTML:
<div id="intro">
<p class="first">This is a <em> paragraph.</em></p>
<p> This is the second paragraph. </p>
</div>
<p class="first"> This is not in the intro section.</p>
<p> The second paragraph is not in the intro section. </p>
Kode CSS :
#intro .first em {
color: pink;
background-color:gray;
}
Komentar
Komentar digunakan untuk menjelaskan kode Anda, dan dapat membantu
Anda saat Anda mengedit kode sumber nanti. Komentar diabaikan oleh
browser.
Komentar CSS terlihat seperti ini:

p{
color: green;
/* This is a comment */
font-size: 150%;
}
Riam
Adalah Tampilan akhir dari sebuah halaman web adalah hasil dari aturan gaya
yang berbeda.
Tiga sumber utama informasi gaya yang membentuk riam adalah:
- Lembar kerja dibuat oleh penulis halaman

- Gaya default browser
- Gaya yang ditentukan oleh pengguna
Warisan
Warisan mengacu pada cara properti mengalir melalui halaman. Elemen anak biasanya akan mengambil
karakteristik elemen induk kecuali ditentukan lain.
Sebagai contoh:
<html>
<head>
<style>
body {
color: green;
font-family: Arial;
}
</style>
</head>
<body>
<p>
This is a text inside the paragraph.
</p>
</body>
</html>
Latihan
Latihan ( Hasil Di Kumpulkan )
1. Kenapa Lembar HTML Harus Menggunakan CSS ?
2. Apakah Atribut yang mengatur Gaya inline !
3. Dimanakah tag gaya harus di nyatakan untuk mengatur CSS internal ?
4. Bagaimana cara mengatur Ulang Gaya CSS Yang valid !
5. Kode Apakah yang di butuhkan untuk komentar CSS !
6. Apakah gaya yang di butuhkan dalam membuat Internal CSS ?
Terima Kasih

Dasar Pemograman - Pengenalan CSS

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Dasar Pemograman - Pengenalan CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

PENGENALAN CSS

Bahan Materi : Dasar pemograman

CSS berfungsi menerapkan gaya tertentu ke

Komentar CSS terlihat seperti ini:

- Lembar kerja dibuat oleh penulis halaman

Anda mungkin juga menyukai