Scribd
Unggah
4 tayangan9 halaman

Modul Css

Diunggah oleh

komputeramanah5
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
4 tayangan9 halaman

Modul Css

Diunggah oleh

komputeramanah5
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 9

Bab 1: Konsep Dasar CSS

1.1 Apa itu CSS?

CSS adalah bahasa styling yang memungkinkan pengembang web untuk:

 Menentukan tata letak elemen di halaman.


 Menyesuaikan tampilan di berbagai perangkat (responsive).
 Memisahkan konten (HTML) dari desain (CSS).

1.2 Cara Menyisipkan CSS ke HTML

1. Inline CSS
CSS ditulis langsung di atribut elemen HTML.
html
Copy code
<p style="color: blue;">Teks ini berwarna biru</p>

2. Internal CSS
CSS ditulis di dalam tag <style> pada bagian <head> dokumen HTML.
html
Copy code
<head>
<style>
p {
color: red;
}
</style>
</head>

3. External CSS
CSS ditulis di file terpisah dengan ekstensi .css dan dihubungkan menggunakan tag
<link>.
html
Copy code
<head>
<link rel="stylesheet" href="style.css">
</head>

Contoh style.css:
css
Copy code
body {
background-color: lightgrey;
}
p {
font-size: 16px;
}

Bab 2: Selektor CSS

2.1 Selektor Dasar

1. Selektor Tag
Mengatur semua elemen dengan tag tertentu.
css
Copy code
h1 {
color: green;
}

2. Selektor ID
Mengatur elemen dengan atribut id.
css
Copy code
#judul {
font-size: 24px;
}

3. Selektor Kelas
Mengatur elemen dengan atribut class.
css
Copy code
.konten {
margin: 10px;
}

2.2 Selektor Lanjutan

1. Selektor Anak
Mengatur elemen anak langsung.
css
Copy code
div > p {
color: blue;
}

2. Selektor Grup
Mengatur beberapa elemen sekaligus.
css
Copy code
h1, h2, h3 {
font-family: Arial, sans-serif;
}

Bab 3: Properti Dasar CSS

3.1 Warna

1. Mengatur warna teks:


css
Copy code
p {
color: red;
}

2. Mengatur warna latar belakang:


css
Copy code
body {
background-color: yellow;
}

3.2 Font dan Teks

1. Mengatur jenis font:


css
Copy code
p {
font-family: "Times New Roman", serif;
}

2. Mengatur ukuran teks:


css
Copy code
p {
font-size: 18px;
}
3. Mengatur perataan teks:
css
Copy code
h1 {
text-align: center;
}

3.3 Margin dan Padding

 Margin: Ruang di luar elemen.


 Padding: Ruang di dalam elemen.
css
Copy code
div {
margin: 10px;
padding: 15px;
}

Bab 4: Layout dengan CSS

4.1 Flexbox

Flexbox adalah teknik layout modern yang memungkinkan pengaturan elemen secara fleksibel.
css
Copy code
.container {
display: flex;
justify-content: space-between;
}

4.2 Grid

CSS Grid digunakan untuk membuat tata letak berbasis grid.


css
Copy code
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}

Bab 5: Responsive Design

5.1 Media Query

Media query digunakan untuk menyesuaikan tampilan pada perangkat yang berbeda.
css
Copy code
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}

Latihan dan Proyek Akhir

Latihan

1. Buat halaman HTML sederhana dengan 3 paragraf, masing-masing memiliki warna teks
berbeda.
2. Atur layout menggunakan Flexbox atau Grid.
Proyek Akhir

1. Desain halaman landing page sederhana.


2. Gunakan kombinasi Flexbox dan Grid untuk tata letak.
3. Terapkan media query untuk responsivitas.

Jika modul ini sesuai, silakan beri tahu jika ingin tambahan! 😊
4o

You said:
tambahkan lebih banyak selektor di css
ChatGPT said:
ChatGPT

Berikut adalah tambahan lebih banyak selektor CSS yang bisa dimasukkan ke modul pembelajaran:

Bab 2 (Lanjutan): Selektor CSS yang Lebih Mendalam

2.3 Selektor Pseudo-class

Selektor pseudo-class digunakan untuk mengatur elemen berdasarkan status atau kondisinya.

1. Hover (Ketika Pointer Berada di Atas Elemen)


css
Copy code
a:hover {
color: red;
}

2. Focus (Ketika Elemen Mendapat Fokus)


css
Copy code
input:focus {
border-color: blue;
}

3. Nth-child (Mengatur Elemen Berdasarkan Posisi)

 Elemen ganjil:
css
Copy code
li:nth-child(odd) {
background-color: lightgrey;
}

 Elemen ke-3:
css
Copy code
li:nth-child(3) {
color: green;
}

4. First-child dan Last-child

 Elemen pertama:
css
Copy code
p:first-child {
font-weight: bold;
}
 Elemen terakhir:
css
Copy code
p:last-child {
text-decoration: underline;
}

5. Not (Elemen yang Tidak Sesuai dengan Kriteria)


css
Copy code
p:not(.highlight) {
color: grey;
}

2.4 Selektor Pseudo-element

Selektor pseudo-element digunakan untuk memilih bagian tertentu dari elemen.

1. First Line (Mengatur Baris Pertama Teks)


css
Copy code
p::first-line {
font-style: italic;
}

2. First Letter (Mengatur Huruf Pertama)


css
Copy code
p::first-letter {
font-size: 2em;
color: red;
}

3. Before dan After

 Sebelum elemen:
css
Copy code
h1::before {
content: "🌟 ";
}

 Setelah elemen:
css
Copy code
h1::after {
content: " 🔥";
}

2.5 Selektor Atribut

Selektor atribut digunakan untuk memilih elemen berdasarkan atributnya.

1. Memilih Elemen dengan Atribut Tertentu


css
Copy code
input[type="text"] {
border: 2px solid blue;
}

2. Atribut yang Dimulai dengan Nilai Tertentu


css
Copy code
a[href^="https"] {
color: green;
}

3. Atribut yang Berakhir dengan Nilai Tertentu


css
Copy code
a[href$=".pdf"] {
font-weight: bold;
}

4. Atribut yang Mengandung Nilai Tertentu


css
Copy code
a[href*="google"] {
text-decoration: underline;
}

2.6 Selektor Universal

Memilih semua elemen di halaman web.


css
Copy code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

2.7 Selektor Kombinasi

1. Selektor Anak Langsung


css
Copy code
div > p {
color: red;
}

2. Selektor Saudara (Adjacent Sibling)


Mengatur elemen yang langsung berada setelah elemen lainnya.
css
Copy code
h1 + p {
font-size: 18px;
}

3. Selektor Saudara Umum (General Sibling)


Mengatur semua elemen saudara setelah elemen tertentu.
css
Copy code
h1 ~ p {
color: blue;
}

Latihan Tambahan untuk Selektor

1. Gunakan pseudo-class untuk membuat tombol yang berubah warna saat di-hover.
2. Buat elemen list (<ul>) dengan elemen ganjil memiliki warna latar abu-abu dan elemen
genap memiliki warna latar putih.
3. Tambahkan ikon sebelum setiap item dalam daftar menggunakan ::before.
4. Buat form dengan input teks yang memiliki border biru saat difokuskan.

Semoga modul ini semakin membantu! 😊


4o

You said:
tambah lagi
ChatGPT said:
ChatGPT

Berikut adalah tambahan selektor CSS lebih lanjut untuk memperdalam pembelajaran:

Bab 2 (Lanjutan Lagi): Selektor CSS yang Lebih Kompleks

2.8 Selektor Grup

Mengatur beberapa elemen sekaligus dengan memisahkan selektor menggunakan koma.


css
Copy code
h1, h2, h3 {
color: navy;
text-transform: uppercase;
}

2.9 Selektor Descendant

Mengatur elemen di dalam elemen lain (keturunan langsung atau tidak langsung).
css
Copy code
div p {
font-size: 14px;
}

2.10 Selektor Parent (Selektor Langka)

Selektor ini digunakan untuk memilih elemen induk dari elemen tertentu. Dukungan browser untuk
ini masih terbatas.
css
Copy code
!section > p {
font-style: italic;
}

2.11 Selektor State Pseudo-class

1. :checked (Mengatur Elemen yang Dicentang)


css
Copy code
input[type="checkbox"]:checked {
background-color: yellow;
}

2. :disabled (Mengatur Elemen yang Dinonaktifkan)


css
Copy code
input:disabled {
cursor: not-allowed;
opacity: 0.5;
}

3. :enabled (Mengatur Elemen yang Aktif)


css
Copy code
input:enabled {
border: 2px solid green;
}

2.12 Selektor Spesifik CSS Grid

1. Memilih Elemen Grid Tertentu


css
Copy code
.grid-container > div:nth-child(2) {
grid-column: 2 / 4;
grid-row: 1 / 2;
}

2. Selektor untuk Item Grid di Area Spesifik


css
Copy code
.item {
grid-area: header;
}

2.13 Selektor Langka dan Unik

1. Langsung Memilih Elemen Kosong


css
Copy code
p:empty {
display: none;
}

2. Langsung Memilih Elemen yang Tersembunyi


css
Copy code
div:hidden {
border: 1px solid red;
}

3. Mengatur Elemen yang Menjadi Target (#id dalam URL)


css
Copy code
:target {
border: 2px dashed orange;
}

2.14 Selektor Khusus untuk Print Media

Selektor ini digunakan saat mencetak halaman web.


css
Copy code
@media print {
body {
color: black;
background: none;
}
a {
text-decoration: none;
color: blue;
}
}

2.15 Selektor :is() dan :where()


1. :is() - Memilih elemen yang sesuai dengan salah satu dari daftar.
css
Copy code
:is(h1, h2, h3) {
font-family: Arial, sans-serif;
}

2. :where() - Mirip dengan :is() tetapi dengan prioritas lebih rendah.


css
Copy code
:where(section, article) {
margin: 20px;
}

2.16 Selektor Elemen Tertentu Berdasarkan Bahasa

Mengatur elemen berdasarkan bahasa dokumen.


css
Copy code
html:lang(en) {
font-family: Arial, sans-serif;
}

2.17 Selektor untuk Animasi dan Transisi

1. Mengatur Elemen yang Sedang dalam Animasi


css
Copy code
div:in-progress {
opacity: 0.5;
}

2. Mengatur Elemen yang Sedang dalam Transisi


css
Copy code
button:playing {
background-color: lightgreen;
}

Latihan Lanjutan untuk Selektor

1. Gunakan selektor :nth-child() untuk membuat tabel dengan baris bergantian warna.
2. Terapkan selektor :checked untuk menampilkan teks tambahan jika checkbox dicentang.
3. Gunakan selektor :is() untuk mengatur semua heading (<h1> hingga <h6>) dengan satu
aturan.
4. Buat navigasi yang menyoroti elemen saat berada di targetnya dengan :target.

Dengan tambahan ini, modul CSS menjadi lebih kaya dan membantu memahami kemampuan CSS
yang lebih mendalam! 😊

Anda mungkin juga menyukai