Konsep CSS

CSS adalah bahasa yang digunakan untuk mengatur tampilan dan tata letak elemen pada halaman web, dan dapat mengontrol gaya beberapa halaman sekaligus dengan menyimpan aturan gaya pada file eksternal."

Diunggah oleh

Dina Butterfly

Hak Cipta

Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.

Format Tersedia

Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd

0% menganggap dokumen ini bermanfaat (0 suara)

52 tayangan28 halaman

Konsep CSS

Diunggah oleh

Dina Butterfly

Hak Cipta

Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.

Format Tersedia

Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd

Anda di halaman 1/ 28

Konsep CSS

Oleh: Mujahid Robbani Sholahudin, S.Pd

Kelas Coding MTs Istiqlal Jakarta

Bagian Web - Pertemuan ke-2
Apa itu CSS?
• CSS adalah singkatan dari Cascading Style Sheets
• CSS adalah bahasa yang kita gunakan untuk menata dokumen HTML.
• CSS menjelaskan bagaimana elemen HTML ditampilkan di layar,
kertas, atau di media lain
• CSS menghemat banyak pekerjaan. CSS dapat mengontrol tata letak
beberapa halaman web sekaligus
• Stylesheet eksternal disimpan dalam file CSS
Perhatikan Halaman Web Berikut

Apakah
tampilannya
menarik??
Bagaimana jika seperti ini?
Kalau begini?
Yg ini?
Dan yang ini?
Keindahan itu bisa diwujudkan dengan CSS
• Aturan CSS terdiri dari selector
dan declaration block.

Belajar Sintaks • Selector menunjuk ke elemen

HTML yang ingin Anda

CSS
modifikasi.
• Declaration Block berisi satu
atau lebih deklarasi yang
dipisahkan oleh titik koma.
• Setiap deklarasi menyertakan
nama properti CSS dan nilai,
dipisahkan oleh titik dua.
• Beberapa deklarasi CSS
dipisahkan dengan titik koma,
dan declaration block dikelilingi
oleh kurung kurawal.
Contoh CSS
p {
color: red;
text-align: center;
}

• p adalah selector dalam CSS (menunjuk ke elemen HTML yang ingin

dimodifikasi: <p>).
• color adalah properti, dan red adalah nilai properti
• text-align adalah properti, dan center adalah nilai properti
Selector CSS
• Selektor CSS digunakan untuk "menemukan" (atau memilih) elemen
HTML yang ingin dimodifikasi.
• Terdapat 4 Selector Dasar:
• Elemen
• Id
• Class
• Universal
Selector Elemen
• Selector Elemen memilih elemen HTML berdasarkan nama elemen.

Contoh:
p {
  text-align: center;
  color: red;
}
Selector Id
• Selector id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu.
• Id dari sebuah elemen adalah unik dalam sebuah halaman, jadi selector id digunakan
untuk memilih satu elemen unik!
• Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti dengan id
elemen.
Contoh:
#para1 {
  text-align: center;
  color: red;
}

Catatan: Nama id tidak boleh diawali dengan angka!

Selector Class
• Selector class memilih elemen HTML dengan atribut class tertentu.
• Untuk memilih elemen dengan class tertentu, tulis karakter titik (.), diikuti dengan nama class. Contoh:
.center {
text-align: center;
color: red;
}
• Kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang harus terpengaruh oleh suatu
class. Contoh:
p.center {
text-align: center;
color: red;
}
• Elemen HTML juga dapat merujuk ke lebih dari satu class

Catatan: Nama class tidak boleh dimulai dengan angka!

Selector Universal
• Selector universal (*) memilih semua elemen HTML pada halaman.
Contoh:
* {
  text-align: center;
  color: blue;
}
Penggabungan Selector
• Selector Group memilih semua elemen HTML dengan definisi style
yang sama. Lihat kode CSS berikut (elemen h1, h2, dan p memiliki
definisi style yang sama)
• Akan lebih baik untuk mengelompokkan selector, untuk
meminimalkan kode. Untuk mengelompokkan selector, pisahkan
setiap selector dengan koma. Contoh:
h1, h2, p {
text-align: center;
  color: red;
}
Daftar Selector CSS Sederhana
Cara Menyisipkan CSS
• Eksternal CSS
• Internal CSS
• Inline CSS
Eksternal CSS
• Dengan eksternal CSS, mengubah tampilan seluruh • Eksternal CSS dapat ditulis dalam text editor apa pun,
situs web hanya dengan mengubah satu file dan harus disimpan dengan ekstensi .css.
• Setiap halaman HTML harus menyertakan referensi ke • File .css eksternal tidak boleh berisi tag HTML apa pun.
file eksternal CSS di dalam elemen <link>, di dalam • Berikut adalah tampilan file "mystyle.css":
bagian head.
body {
<!DOCTYPE html>   background-color: lightblue;
<html> }
<head>
<link rel="stylesheet" href="mystyle.css" h1 {
>   color: navy;
</head>   margin-left: 20px;
<body> }
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body> Catatan: Jangan tambahkan spasi antara nilai properti
</html> dan unit
Internal CSS
• Internal CSS dapat digunakan jika satu h1 {
halaman HTML memiliki style yang unik. color: maroon;
• Internal CSS didefinisikan di dalam margin-left: 40px;
elemen <style>, di dalam bagian head. }
</style>
<!DOCTYPE html> </head>
<html> <body>
<head>
<style> <h1>This is a heading</h1>
body { <p>This is a paragraph.</p>
background-color: linen;
} </body>
</html>
Inline CSS
• Inline CSS dapat digunakan untuk menerapkan style unik untuk satu elemen.
• Untuk menggunakan inline CSS, tambahkan atribut style ke elemen yang relevan.
• Atribut style dapat berisi properti CSS apa pun.
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Inline CSS kehilangan banyak keuntungan dari CSS (dengan mencampur konten dengan presentasi). Gunakan
metode ini sesuai kebutuhan.
Multiple CSS
• Jika beberapa properti telah ditentukan untuk selector (elemen) yang sama di CSS yang
berbeda, nilai dari CSS yang terakhir dibacalah yang akan digunakan.
• Contoh, jika di external CSS sebagai berikut
• Lalu di internal CSS sebagai berikut
• <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
• Jika internal CSS ditentukan setelah link ke external CSS, elemen <h1> akan menjadi "oranye":
Komentar di CSS
• Komentar CSS tidak ditampilkan di browser, tetapi dapat membantu
mendokumentasikan kode kita.
• Komentar digunakan untuk menjelaskan kode, dan dapat membantu
saat kita mengedit kode di kemudian hari.
• Komentar diabaikan oleh browser.
• Komentar CSS ditempatkan di dalam elemen <style>, dan dimulai
dengan /* dan diakhiri dengan */
• Komentar juga dapat menjangkau beberapa baris
Manipulasi Background
• background-color  Mengubah warna latar belakang dari elemen
• background-image  Mengubah latar belakang menjadi gambar
• background-repeat  Mengatur pengulangan gambar latar
belakang
• background-position  Mengatur posisi gambar latar belakang
• background  Mengatur seluruh property tentang background
Manipulasi Text
• color  Mengubah warna teks
• font-size  Mengubah ukuran teks
• text-align  Mengatur perataan teks secara horizontal
• direction  Mengatur arah teks
• font-family  Mengubah jenis font teks
Manipulasi Elemen
• border-width  Mengatur ketebalan pinggiran elemen
• border-style  Mengubah style pinggiran elemen
• border-radius  Mengatur kelengkungan pojok elemen
• border  Mengatur seluruh property tentang border
• opacity  Mengatur transparansi elemen
• margin  Membuat ruang di sekitar elemen, di luar batas yang ditentukan
• padding  Membuat ruang di sekitar konten elemen, di dalam batas yang ditentukan
• width  Mengatur panjang elemen
• height  Mengatur tinggi elemen
• display  Mengubah jenis tampilan elemen
Box Model
!important
• !important di CSS digunakan untuk menambahkan nilai penting ke properti/nilai dari biasanya.
• Bahkan, jika kita menggunakan !important, itu akan menimpa SEMUA aturan styling
sebelumnya untuk properti tertentu pada elemen itu!
#myid {
background-color: blue;
}