SlideShare a Scribd company logo
PENGENALAN
CSS
BELAJAR BARENG
SERI FUNDAMENTAL WEBSITE
ARFIAN CAHYA DWI SETYA
Goals
• Memahami apa itu CSS
• Memahami Struktur Kode CSS
• Memahami Penggunaan CSS
• Memahami Penamaan Class
pada CSS
• Memahami Atomic Desain
• Memahami Penulisan class
dengan BEM dan Atomic
Pseudo Selector
Pseudo Class Selector adalah selector CSS yang
digunakan untuk mengakses bagian tertentu dalam
HTML yang tidak ‘terlihat’ (tidak tertulis di
dalam HTML) atau bagian dari HTML yang tidak
bisa diakses dengan selector sederhana lain.
Jika pseudo-class selector lebih berfokus kepada
kondisi khusus dari HTML, maka pseudo-element
selector akan menyeleksi ‘potongan’ tag atau
mengakses sebuah elemen yang sebelumnya tidak
ada.
CSS untuk Background
PROPERTY BACKGROUND
Background-Color
Background-Color (Opacity)
Background-Color (RGBA)
Background-Color (Linear Gradien)
Background-Color (Linear Gradien)
Background-Color (Linear Gradien)
Background-Color (Linear Gradien)
Background-Color (Repeat Linear Gradien)
Background-Color (Radial Gradien)
Background-Color (Radial Gradien)
Background-Image
Background-Image (Repeat)
Background-Image (Position)
Background-Image (attachment)
Background (shorthand)
Pertemuan 4 - Belajar Breng Seri Website
Pertemuan 4 - Belajar Breng Seri Website
Pertemuan 4 - Belajar Breng Seri Website

More Related Content

Recently uploaded

Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdfTugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
muhammadRifai732845
 
LK 1 - 5T Keputusan Berdampak PERMATA BUNDA.pdf
LK 1 - 5T Keputusan Berdampak PERMATA BUNDA.pdfLK 1 - 5T Keputusan Berdampak PERMATA BUNDA.pdf
LK 1 - 5T Keputusan Berdampak PERMATA BUNDA.pdf
UditGheozi2
 
Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdfPaparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
SEMUELSAMBOKARAENG
 
Koneksi Antar Materi modul 1.4 Budaya Positif
Koneksi Antar Materi modul 1.4 Budaya PositifKoneksi Antar Materi modul 1.4 Budaya Positif
Koneksi Antar Materi modul 1.4 Budaya Positif
Rima98947
 
Karier-Dan-Studi-Lanjut-Di-Bidang-Informatika.pptx
Karier-Dan-Studi-Lanjut-Di-Bidang-Informatika.pptxKarier-Dan-Studi-Lanjut-Di-Bidang-Informatika.pptx
Karier-Dan-Studi-Lanjut-Di-Bidang-Informatika.pptx
adolfnuhujanan101
 
INSTRUMEN PENILAIAN PRAKTIK KINERJA KS Dok Rating Observasi (1).docx
INSTRUMEN PENILAIAN PRAKTIK KINERJA KS Dok Rating Observasi (1).docxINSTRUMEN PENILAIAN PRAKTIK KINERJA KS Dok Rating Observasi (1).docx
INSTRUMEN PENILAIAN PRAKTIK KINERJA KS Dok Rating Observasi (1).docx
lindaagina84
 
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptx
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptxBab 3 Sejarah Kerajaan Hindu-Buddha.pptx
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptx
nawasenamerta
 
Form B1 Rubrik Observasi Presentasi Visi Misi -1.docx
Form B1 Rubrik Observasi Presentasi Visi Misi -1.docxForm B1 Rubrik Observasi Presentasi Visi Misi -1.docx
Form B1 Rubrik Observasi Presentasi Visi Misi -1.docx
EkoPutuKromo
 
ppt landasan pendidikan Alat alat pendidikan PAI 9_
ppt landasan pendidikan Alat alat pendidikan PAI 9_ppt landasan pendidikan Alat alat pendidikan PAI 9_
ppt landasan pendidikan Alat alat pendidikan PAI 9_
setiatinambunan
 
Diseminasi Budaya Positif Lucy Kristina S.pptx
Diseminasi Budaya Positif Lucy Kristina S.pptxDiseminasi Budaya Positif Lucy Kristina S.pptx
Diseminasi Budaya Positif Lucy Kristina S.pptx
LucyKristinaS
 
untuk observasi kepala sekolah dengan pengawas
untuk observasi kepala sekolah dengan pengawasuntuk observasi kepala sekolah dengan pengawas
untuk observasi kepala sekolah dengan pengawas
TEDYHARTO1
 
Karakteristik Manusia Komunikan dalam Bingkai Psikologi Komunikasi
Karakteristik Manusia Komunikan dalam Bingkai Psikologi KomunikasiKarakteristik Manusia Komunikan dalam Bingkai Psikologi Komunikasi
Karakteristik Manusia Komunikan dalam Bingkai Psikologi Komunikasi
AdePutraTunggali
 
Modul Projek - Modul P5 Kearifan Lokal _Menampilkan Tarian Daerah Nusantara_...
Modul Projek  - Modul P5 Kearifan Lokal _Menampilkan Tarian Daerah Nusantara_...Modul Projek  - Modul P5 Kearifan Lokal _Menampilkan Tarian Daerah Nusantara_...
Modul Projek - Modul P5 Kearifan Lokal _Menampilkan Tarian Daerah Nusantara_...
MirnasariMutmainna1
 
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBIVISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
gloriosaesy
 
RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pptx
RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pptxRANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pptx
RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pptx
SurosoSuroso19
 
SOAL SHB PKN SEMESTER GENAP TAHUN 2023-2024.docx
SOAL SHB PKN SEMESTER GENAP TAHUN 2023-2024.docxSOAL SHB PKN SEMESTER GENAP TAHUN 2023-2024.docx
SOAL SHB PKN SEMESTER GENAP TAHUN 2023-2024.docx
MuhammadBagusAprilia1
 
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdfINDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
NurSriWidyastuti1
 
Laporan Kegiatan Pramuka Tugas Tambahan PMM.pdf
Laporan Kegiatan Pramuka Tugas Tambahan PMM.pdfLaporan Kegiatan Pramuka Tugas Tambahan PMM.pdf
Laporan Kegiatan Pramuka Tugas Tambahan PMM.pdf
UmyHasna1
 
Form B8 Rubrik Refleksi Program Pengembangan Kompetensi Guru -1.docx
Form B8 Rubrik Refleksi Program Pengembangan Kompetensi Guru -1.docxForm B8 Rubrik Refleksi Program Pengembangan Kompetensi Guru -1.docx
Form B8 Rubrik Refleksi Program Pengembangan Kompetensi Guru -1.docx
EkoPutuKromo
 
UNTUK DOSEN Materi Sosialisasi Pengelolaan Kinerja Akademik Dosen
UNTUK DOSEN Materi Sosialisasi Pengelolaan Kinerja Akademik DosenUNTUK DOSEN Materi Sosialisasi Pengelolaan Kinerja Akademik Dosen
UNTUK DOSEN Materi Sosialisasi Pengelolaan Kinerja Akademik Dosen
AdrianAgoes9
 

Recently uploaded (20)

Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdfTugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
 
LK 1 - 5T Keputusan Berdampak PERMATA BUNDA.pdf
LK 1 - 5T Keputusan Berdampak PERMATA BUNDA.pdfLK 1 - 5T Keputusan Berdampak PERMATA BUNDA.pdf
LK 1 - 5T Keputusan Berdampak PERMATA BUNDA.pdf
 
Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdfPaparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
 
Koneksi Antar Materi modul 1.4 Budaya Positif
Koneksi Antar Materi modul 1.4 Budaya PositifKoneksi Antar Materi modul 1.4 Budaya Positif
Koneksi Antar Materi modul 1.4 Budaya Positif
 
Karier-Dan-Studi-Lanjut-Di-Bidang-Informatika.pptx
Karier-Dan-Studi-Lanjut-Di-Bidang-Informatika.pptxKarier-Dan-Studi-Lanjut-Di-Bidang-Informatika.pptx
Karier-Dan-Studi-Lanjut-Di-Bidang-Informatika.pptx
 
INSTRUMEN PENILAIAN PRAKTIK KINERJA KS Dok Rating Observasi (1).docx
INSTRUMEN PENILAIAN PRAKTIK KINERJA KS Dok Rating Observasi (1).docxINSTRUMEN PENILAIAN PRAKTIK KINERJA KS Dok Rating Observasi (1).docx
INSTRUMEN PENILAIAN PRAKTIK KINERJA KS Dok Rating Observasi (1).docx
 
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptx
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptxBab 3 Sejarah Kerajaan Hindu-Buddha.pptx
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptx
 
Form B1 Rubrik Observasi Presentasi Visi Misi -1.docx
Form B1 Rubrik Observasi Presentasi Visi Misi -1.docxForm B1 Rubrik Observasi Presentasi Visi Misi -1.docx
Form B1 Rubrik Observasi Presentasi Visi Misi -1.docx
 
ppt landasan pendidikan Alat alat pendidikan PAI 9_
ppt landasan pendidikan Alat alat pendidikan PAI 9_ppt landasan pendidikan Alat alat pendidikan PAI 9_
ppt landasan pendidikan Alat alat pendidikan PAI 9_
 
Diseminasi Budaya Positif Lucy Kristina S.pptx
Diseminasi Budaya Positif Lucy Kristina S.pptxDiseminasi Budaya Positif Lucy Kristina S.pptx
Diseminasi Budaya Positif Lucy Kristina S.pptx
 
untuk observasi kepala sekolah dengan pengawas
untuk observasi kepala sekolah dengan pengawasuntuk observasi kepala sekolah dengan pengawas
untuk observasi kepala sekolah dengan pengawas
 
Karakteristik Manusia Komunikan dalam Bingkai Psikologi Komunikasi
Karakteristik Manusia Komunikan dalam Bingkai Psikologi KomunikasiKarakteristik Manusia Komunikan dalam Bingkai Psikologi Komunikasi
Karakteristik Manusia Komunikan dalam Bingkai Psikologi Komunikasi
 
Modul Projek - Modul P5 Kearifan Lokal _Menampilkan Tarian Daerah Nusantara_...
Modul Projek  - Modul P5 Kearifan Lokal _Menampilkan Tarian Daerah Nusantara_...Modul Projek  - Modul P5 Kearifan Lokal _Menampilkan Tarian Daerah Nusantara_...
Modul Projek - Modul P5 Kearifan Lokal _Menampilkan Tarian Daerah Nusantara_...
 
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBIVISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
 
RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pptx
RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pptxRANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pptx
RANCANGAN TINDAKAN AKSI NYATA MODUL 1.4.pptx
 
SOAL SHB PKN SEMESTER GENAP TAHUN 2023-2024.docx
SOAL SHB PKN SEMESTER GENAP TAHUN 2023-2024.docxSOAL SHB PKN SEMESTER GENAP TAHUN 2023-2024.docx
SOAL SHB PKN SEMESTER GENAP TAHUN 2023-2024.docx
 
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdfINDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
 
Laporan Kegiatan Pramuka Tugas Tambahan PMM.pdf
Laporan Kegiatan Pramuka Tugas Tambahan PMM.pdfLaporan Kegiatan Pramuka Tugas Tambahan PMM.pdf
Laporan Kegiatan Pramuka Tugas Tambahan PMM.pdf
 
Form B8 Rubrik Refleksi Program Pengembangan Kompetensi Guru -1.docx
Form B8 Rubrik Refleksi Program Pengembangan Kompetensi Guru -1.docxForm B8 Rubrik Refleksi Program Pengembangan Kompetensi Guru -1.docx
Form B8 Rubrik Refleksi Program Pengembangan Kompetensi Guru -1.docx
 
UNTUK DOSEN Materi Sosialisasi Pengelolaan Kinerja Akademik Dosen
UNTUK DOSEN Materi Sosialisasi Pengelolaan Kinerja Akademik DosenUNTUK DOSEN Materi Sosialisasi Pengelolaan Kinerja Akademik Dosen
UNTUK DOSEN Materi Sosialisasi Pengelolaan Kinerja Akademik Dosen
 

Featured

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
Christy Abraham Joy
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
MindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
Project for Public Spaces & National Center for Biking and Walking
 

Featured (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

Pertemuan 4 - Belajar Breng Seri Website