SlideShare a Scribd company logo
1 of 7
Pemerograman Berbasisi Web
Cascading Style Sheets(css)
1. Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis font,
ukurannya sama dengan paragraf pertama)
Hasilnya seperti ini :
Agar font bisa sama seperti ini dari segi warna,jenis,ukurannya yaitu :
Kita tinggal menduplikat saja dan hanya mengantinya seperti gambar diatas ini
2. Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna
teks dan background-nya berubah.
Hasilnya seperti ini semua panel menu ketika disorot dengan kursor :
Agar panel seperti diatas :
3. Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten (misalnya
daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda (tidak ada CSS berarti juga
TIDAK ADA NILAI)
Hasilnya seperti ini meskipun tidak secantik yang diperkirakan :
Ini codingnnya agar seperti diatas :
4. Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman
Ini codingnnya agar seperti diatas :
Awalnya seperti ini :
Lalu kita ganti seperti ini agar teks muncul di harder :
Dan saya akan tampilkan semuanya dari awal tugas tersebut :
Saya akan menampilkan codingnya :
CSS
CSS

More Related Content

What's hot

Panduan Membuat Artikel-Proyek Wikipedia Maanyan
Panduan Membuat Artikel-Proyek Wikipedia MaanyanPanduan Membuat Artikel-Proyek Wikipedia Maanyan
Panduan Membuat Artikel-Proyek Wikipedia MaanyanArief Ezagren
 
Perangkat Lunak Pengolah Kata - Novi, Yovan, Natalia - SMP Kristen Elkana Pas...
Perangkat Lunak Pengolah Kata - Novi, Yovan, Natalia - SMP Kristen Elkana Pas...Perangkat Lunak Pengolah Kata - Novi, Yovan, Natalia - SMP Kristen Elkana Pas...
Perangkat Lunak Pengolah Kata - Novi, Yovan, Natalia - SMP Kristen Elkana Pas...Satria
 
Cara membuat ukuran kertas yang berbeda
Cara membuat ukuran kertas yang berbedaCara membuat ukuran kertas yang berbeda
Cara membuat ukuran kertas yang berbedaDrs. HM. Yunus
 
Materi Dasar Microsoft Word
Materi Dasar Microsoft WordMateri Dasar Microsoft Word
Materi Dasar Microsoft WordDika Marpeti
 
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style SheetsLaporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheetskunidar
 
Buat daftar isi otomatis
Buat daftar isi otomatisBuat daftar isi otomatis
Buat daftar isi otomatisAkper Indah
 
Program aplikasi kelas 7
Program aplikasi kelas 7Program aplikasi kelas 7
Program aplikasi kelas 7Nensy Clear
 

What's hot (9)

Panduan Membuat Artikel-Proyek Wikipedia Maanyan
Panduan Membuat Artikel-Proyek Wikipedia MaanyanPanduan Membuat Artikel-Proyek Wikipedia Maanyan
Panduan Membuat Artikel-Proyek Wikipedia Maanyan
 
Perangkat Lunak Pengolah Kata - Novi, Yovan, Natalia - SMP Kristen Elkana Pas...
Perangkat Lunak Pengolah Kata - Novi, Yovan, Natalia - SMP Kristen Elkana Pas...Perangkat Lunak Pengolah Kata - Novi, Yovan, Natalia - SMP Kristen Elkana Pas...
Perangkat Lunak Pengolah Kata - Novi, Yovan, Natalia - SMP Kristen Elkana Pas...
 
Cara membuat ukuran kertas yang berbeda
Cara membuat ukuran kertas yang berbedaCara membuat ukuran kertas yang berbeda
Cara membuat ukuran kertas yang berbeda
 
Materi Dasar Microsoft Word
Materi Dasar Microsoft WordMateri Dasar Microsoft Word
Materi Dasar Microsoft Word
 
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style SheetsLaporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
 
Markah Wiki
Markah WikiMarkah Wiki
Markah Wiki
 
Buat daftar isi otomatis
Buat daftar isi otomatisBuat daftar isi otomatis
Buat daftar isi otomatis
 
Program aplikasi kelas 7
Program aplikasi kelas 7Program aplikasi kelas 7
Program aplikasi kelas 7
 
Teknologi informasi
Teknologi informasi Teknologi informasi
Teknologi informasi
 

Similar to CSS

tugas4.PBW_CSS
tugas4.PBW_CSStugas4.PBW_CSS
tugas4.PBW_CSSAjes92
 
Membuat Web Sederhana Dengan CSS (Cascading Style Sheets)
Membuat Web Sederhana Dengan CSS (Cascading Style Sheets)Membuat Web Sederhana Dengan CSS (Cascading Style Sheets)
Membuat Web Sederhana Dengan CSS (Cascading Style Sheets)Universitas Muhammadiyah Jember
 
Menggedit CSS
Menggedit CSSMenggedit CSS
Menggedit CSSgunarso88
 
Pemerograman berbasisi web
Pemerograman berbasisi webPemerograman berbasisi web
Pemerograman berbasisi webahmadyulianto93
 
Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)gufron_ar
 
Cara membuat daftar isi otomatis pada microsoft office
Cara membuat daftar isi otomatis pada microsoft office Cara membuat daftar isi otomatis pada microsoft office
Cara membuat daftar isi otomatis pada microsoft office RizkyAidulAdha
 
Pemrograman berbasis web (Luszara Lucky Viona)
Pemrograman berbasis web (Luszara Lucky Viona)Pemrograman berbasis web (Luszara Lucky Viona)
Pemrograman berbasis web (Luszara Lucky Viona)Luszara Part II
 
Aplikasi komputer pertemuan 3 2
Aplikasi komputer pertemuan 3 2Aplikasi komputer pertemuan 3 2
Aplikasi komputer pertemuan 3 2Dede Irawan
 

Similar to CSS (15)

Tugas4 css
Tugas4   cssTugas4   css
Tugas4 css
 
tugas4.PBW_CSS
tugas4.PBW_CSStugas4.PBW_CSS
tugas4.PBW_CSS
 
Membuat Web Sederhana Dengan CSS (Cascading Style Sheets)
Membuat Web Sederhana Dengan CSS (Cascading Style Sheets)Membuat Web Sederhana Dengan CSS (Cascading Style Sheets)
Membuat Web Sederhana Dengan CSS (Cascading Style Sheets)
 
Menggedit CSS
Menggedit CSSMenggedit CSS
Menggedit CSS
 
Pemerograman berbasisi web
Pemerograman berbasisi webPemerograman berbasisi web
Pemerograman berbasisi web
 
Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)
 
PENGENALAN CSS
PENGENALAN CSSPENGENALAN CSS
PENGENALAN CSS
 
Cara membuat daftar isi otomatis pada microsoft office
Cara membuat daftar isi otomatis pada microsoft office Cara membuat daftar isi otomatis pada microsoft office
Cara membuat daftar isi otomatis pada microsoft office
 
Laporan css
Laporan cssLaporan css
Laporan css
 
Pemrograman berbasis web (Luszara Lucky Viona)
Pemrograman berbasis web (Luszara Lucky Viona)Pemrograman berbasis web (Luszara Lucky Viona)
Pemrograman berbasis web (Luszara Lucky Viona)
 
Aplikasi komputer pertemuan 3 2
Aplikasi komputer pertemuan 3 2Aplikasi komputer pertemuan 3 2
Aplikasi komputer pertemuan 3 2
 
Laporan css
Laporan cssLaporan css
Laporan css
 
Modul 2 - CSS
Modul 2 - CSSModul 2 - CSS
Modul 2 - CSS
 
Yuk buat kolom
Yuk buat kolomYuk buat kolom
Yuk buat kolom
 
Presentation1
Presentation1Presentation1
Presentation1
 

Recently uploaded

11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx
11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx
11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptxMiftahunnajahTVIBS
 
Prakarsa Perubahan ATAP (Awal - Tantangan - Aksi - Perubahan)
Prakarsa Perubahan ATAP (Awal - Tantangan - Aksi - Perubahan)Prakarsa Perubahan ATAP (Awal - Tantangan - Aksi - Perubahan)
Prakarsa Perubahan ATAP (Awal - Tantangan - Aksi - Perubahan)MustahalMustahal
 
MODUL P5 KEWIRAUSAHAAN SMAN 2 SLAWI 2023.pptx
MODUL P5 KEWIRAUSAHAAN SMAN 2 SLAWI 2023.pptxMODUL P5 KEWIRAUSAHAAN SMAN 2 SLAWI 2023.pptx
MODUL P5 KEWIRAUSAHAAN SMAN 2 SLAWI 2023.pptxSlasiWidasmara1
 
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMLaporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMmulyadia43
 
Aksi nyata disiplin positif Hj. Hasnani (1).pdf
Aksi nyata disiplin positif Hj. Hasnani (1).pdfAksi nyata disiplin positif Hj. Hasnani (1).pdf
Aksi nyata disiplin positif Hj. Hasnani (1).pdfDimanWr1
 
ppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 pptppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 pptArkhaRega1
 
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docxtugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docxmawan5982
 
LK.01._LK_Peta_Pikir modul 1.3_Kel1_NURYANTI_101.docx
LK.01._LK_Peta_Pikir modul 1.3_Kel1_NURYANTI_101.docxLK.01._LK_Peta_Pikir modul 1.3_Kel1_NURYANTI_101.docx
LK.01._LK_Peta_Pikir modul 1.3_Kel1_NURYANTI_101.docxPurmiasih
 
Paparan Refleksi Lokakarya program sekolah penggerak.pptx
Paparan Refleksi Lokakarya program sekolah penggerak.pptxPaparan Refleksi Lokakarya program sekolah penggerak.pptx
Paparan Refleksi Lokakarya program sekolah penggerak.pptxIgitNuryana13
 
Perumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxPerumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxadimulianta1
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5KIKI TRISNA MUKTI
 
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptxPERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptxRizkyPratiwi19
 
bab 6 ancaman terhadap negara dalam bingkai bhinneka tunggal ika
bab 6 ancaman terhadap negara dalam bingkai bhinneka tunggal ikabab 6 ancaman terhadap negara dalam bingkai bhinneka tunggal ika
bab 6 ancaman terhadap negara dalam bingkai bhinneka tunggal ikaAtiAnggiSupriyati
 
tugas karya ilmiah 1 universitas terbuka pembelajaran
tugas karya ilmiah 1 universitas terbuka pembelajarantugas karya ilmiah 1 universitas terbuka pembelajaran
tugas karya ilmiah 1 universitas terbuka pembelajarankeicapmaniez
 
Aksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptxAksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptxsdn3jatiblora
 
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxBAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxJamhuriIshak
 
Modul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdfModul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdfSitiJulaeha820399
 
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5ssuserd52993
 
2 KISI-KISI Ujian Sekolah Dasar mata pelajaranPPKn 2024.pdf
2 KISI-KISI Ujian Sekolah Dasar  mata pelajaranPPKn 2024.pdf2 KISI-KISI Ujian Sekolah Dasar  mata pelajaranPPKn 2024.pdf
2 KISI-KISI Ujian Sekolah Dasar mata pelajaranPPKn 2024.pdfsdn3jatiblora
 
Dinamika Hidrosfer geografi kelas X genap
Dinamika Hidrosfer geografi kelas X genapDinamika Hidrosfer geografi kelas X genap
Dinamika Hidrosfer geografi kelas X genapsefrida3
 

Recently uploaded (20)

11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx
11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx
11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx
 
Prakarsa Perubahan ATAP (Awal - Tantangan - Aksi - Perubahan)
Prakarsa Perubahan ATAP (Awal - Tantangan - Aksi - Perubahan)Prakarsa Perubahan ATAP (Awal - Tantangan - Aksi - Perubahan)
Prakarsa Perubahan ATAP (Awal - Tantangan - Aksi - Perubahan)
 
MODUL P5 KEWIRAUSAHAAN SMAN 2 SLAWI 2023.pptx
MODUL P5 KEWIRAUSAHAAN SMAN 2 SLAWI 2023.pptxMODUL P5 KEWIRAUSAHAAN SMAN 2 SLAWI 2023.pptx
MODUL P5 KEWIRAUSAHAAN SMAN 2 SLAWI 2023.pptx
 
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMLaporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
 
Aksi nyata disiplin positif Hj. Hasnani (1).pdf
Aksi nyata disiplin positif Hj. Hasnani (1).pdfAksi nyata disiplin positif Hj. Hasnani (1).pdf
Aksi nyata disiplin positif Hj. Hasnani (1).pdf
 
ppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 pptppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 ppt
 
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docxtugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
 
LK.01._LK_Peta_Pikir modul 1.3_Kel1_NURYANTI_101.docx
LK.01._LK_Peta_Pikir modul 1.3_Kel1_NURYANTI_101.docxLK.01._LK_Peta_Pikir modul 1.3_Kel1_NURYANTI_101.docx
LK.01._LK_Peta_Pikir modul 1.3_Kel1_NURYANTI_101.docx
 
Paparan Refleksi Lokakarya program sekolah penggerak.pptx
Paparan Refleksi Lokakarya program sekolah penggerak.pptxPaparan Refleksi Lokakarya program sekolah penggerak.pptx
Paparan Refleksi Lokakarya program sekolah penggerak.pptx
 
Perumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxPerumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptx
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5
 
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptxPERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
 
bab 6 ancaman terhadap negara dalam bingkai bhinneka tunggal ika
bab 6 ancaman terhadap negara dalam bingkai bhinneka tunggal ikabab 6 ancaman terhadap negara dalam bingkai bhinneka tunggal ika
bab 6 ancaman terhadap negara dalam bingkai bhinneka tunggal ika
 
tugas karya ilmiah 1 universitas terbuka pembelajaran
tugas karya ilmiah 1 universitas terbuka pembelajarantugas karya ilmiah 1 universitas terbuka pembelajaran
tugas karya ilmiah 1 universitas terbuka pembelajaran
 
Aksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptxAksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptx
 
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxBAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
 
Modul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdfModul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdf
 
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
 
2 KISI-KISI Ujian Sekolah Dasar mata pelajaranPPKn 2024.pdf
2 KISI-KISI Ujian Sekolah Dasar  mata pelajaranPPKn 2024.pdf2 KISI-KISI Ujian Sekolah Dasar  mata pelajaranPPKn 2024.pdf
2 KISI-KISI Ujian Sekolah Dasar mata pelajaranPPKn 2024.pdf
 
Dinamika Hidrosfer geografi kelas X genap
Dinamika Hidrosfer geografi kelas X genapDinamika Hidrosfer geografi kelas X genap
Dinamika Hidrosfer geografi kelas X genap
 

CSS

  • 2. 1. Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis font, ukurannya sama dengan paragraf pertama) Hasilnya seperti ini : Agar font bisa sama seperti ini dari segi warna,jenis,ukurannya yaitu : Kita tinggal menduplikat saja dan hanya mengantinya seperti gambar diatas ini
  • 3. 2. Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna teks dan background-nya berubah. Hasilnya seperti ini semua panel menu ketika disorot dengan kursor : Agar panel seperti diatas : 3. Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten (misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda (tidak ada CSS berarti juga TIDAK ADA NILAI) Hasilnya seperti ini meskipun tidak secantik yang diperkirakan : Ini codingnnya agar seperti diatas :
  • 4. 4. Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman Ini codingnnya agar seperti diatas : Awalnya seperti ini :
  • 5. Lalu kita ganti seperti ini agar teks muncul di harder : Dan saya akan tampilkan semuanya dari awal tugas tersebut : Saya akan menampilkan codingnya :