SlideShare a Scribd company logo
1 of 10
CSS
PENGENALAN CSS
CSS = CASCADING STYLE SHEET

FUNGSI : MENGENDALIKAN
BEBERAPA KOMPONEN DALAM
SEBUAH WEB SEHINGGA AKAN
LEBIH TERSTRUKTUR DAN
SERAGAM.
CSS

HTML

HTML

HTML
Style definitions : adalah defenisi style yang ingin
dibuat.
Format penulisannya adalah :
Selector { property1 : value1 ;
property2 : value2;….
propertyN : valueN ; }

Selector adalah tag yang digunakan web browser.
Property : value adalah efek dari style yang
diinginkan untuk selector.
CONTOH :

<STYLE TYPE=“TEXT/ CSS” >
HR { COLOR : RED ; HEIGHT : 5PX ;
WIDTH : 50%; }
</STYLE>
KETERANGAN :
TA G
AT R I B U T
SELECTOR
P R O P E RT Y
VA L U E

ADALAH
ADALAH
ADALAH
ADALAH
ADALAH

STYLE
TYPE=“TEXT/CSS”
HR
C O L O R , H E I G H T, W I D T H
RED, 5PX, 50%
ID SELECTOR dan CLASS
ID selector didefenisikan sendiri
ID selector diawali tanda # ( octothorpe)
CLASS diawali dengan tanda titik ( . )
MEMBUAT CSS
 CARA PERTAMA :

mengetikkan langsung dalam tag html sebagai
atribut .

<body>
<b style = “color : blue”> teks tebal dan biru </b>

</body>
 CARA KEDUA :

Menggunakan tag style di dalam tag head.

<head>
<style type=“text/css”>
……… style definitions ………
</style>
</head>
 CARA KETIGA :

Menyimpan informasi style ke dalam sebuah file
dengan ekstensi/type file css
Memanggil file css dalam html dengan tag link yang
diletakkan dalam tag head.

<head>
<link rel=“stylesheet” type=“text/css” href=“namafile.css”/>
</head>
CSS40

More Related Content

Similar to CSS40 (20)

Praktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdfPraktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdf
 
Materi CSS Dasar
Materi CSS DasarMateri CSS Dasar
Materi CSS Dasar
 
05 css
05 css05 css
05 css
 
dmi css.pptx
dmi css.pptxdmi css.pptx
dmi css.pptx
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis web
 
Pertemuan 8 a
Pertemuan 8 aPertemuan 8 a
Pertemuan 8 a
 
Pertemuan 8 a
Pertemuan 8 aPertemuan 8 a
Pertemuan 8 a
 
CSS
CSSCSS
CSS
 
modul CSS tugas Pemrograman Berbasis Web
modul CSS tugas Pemrograman Berbasis Webmodul CSS tugas Pemrograman Berbasis Web
modul CSS tugas Pemrograman Berbasis Web
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis web
 
Pert 05 HTML dan Web Programming
Pert 05 HTML dan Web ProgrammingPert 05 HTML dan Web Programming
Pert 05 HTML dan Web Programming
 
chap CSS.pptx
chap CSS.pptxchap CSS.pptx
chap CSS.pptx
 
Modul macam macam selector
Modul macam macam selectorModul macam macam selector
Modul macam macam selector
 
Pertemuan 3 - Pengenalan dasar CSS
Pertemuan 3 - Pengenalan dasar CSSPertemuan 3 - Pengenalan dasar CSS
Pertemuan 3 - Pengenalan dasar CSS
 
PENGENALAN CSS.ppt
PENGENALAN CSS.pptPENGENALAN CSS.ppt
PENGENALAN CSS.ppt
 
PWEB CSS
PWEB CSSPWEB CSS
PWEB CSS
 
Pengenalan css
Pengenalan cssPengenalan css
Pengenalan css
 
Pengenalan Dasar Dasar web dengan CSS.docx
Pengenalan Dasar Dasar web dengan CSS.docxPengenalan Dasar Dasar web dengan CSS.docx
Pengenalan Dasar Dasar web dengan CSS.docx
 
Modul Pembelajaran dasar dasar PPLG Pemrograman web
Modul Pembelajaran dasar dasar PPLG Pemrograman webModul Pembelajaran dasar dasar PPLG Pemrograman web
Modul Pembelajaran dasar dasar PPLG Pemrograman web
 
5 pemrograman internet css
5 pemrograman internet   css5 pemrograman internet   css
5 pemrograman internet css
 

Recently uploaded

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
 
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdf
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdfHARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdf
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdfkustiyantidew94
 
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
 
DEMONSTRASI KONTEKSTUAL MODUL 1.3 PENDIDIKAN GURU PENGGERAK
DEMONSTRASI KONTEKSTUAL MODUL 1.3 PENDIDIKAN GURU PENGGERAKDEMONSTRASI KONTEKSTUAL MODUL 1.3 PENDIDIKAN GURU PENGGERAK
DEMONSTRASI KONTEKSTUAL MODUL 1.3 PENDIDIKAN GURU PENGGERAKirwan461475
 
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxKONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxawaldarmawan3
 
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptx
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptxPanduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptx
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptxsudianaade137
 
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docxModul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docxherisriwahyuni
 
Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)3HerisaSintia
 
Prakarsa Perubahan dengan Kanvas ATAP & BAGJA.pptx
Prakarsa Perubahan dengan Kanvas ATAP & BAGJA.pptxPrakarsa Perubahan dengan Kanvas ATAP & BAGJA.pptx
Prakarsa Perubahan dengan Kanvas ATAP & BAGJA.pptxSyaimarChandra1
 
tugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDtugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDmawan5982
 
Kelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdfKelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdftsaniasalftn18
 
Model Manajemen Strategi Public Relations
Model Manajemen Strategi Public RelationsModel Manajemen Strategi Public Relations
Model Manajemen Strategi Public RelationsAdePutraTunggali
 
Kelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfKelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfCloverash1
 
LAPORAN PKP KESELURUHAN BAB 1-5 NURUL HUSNA.pdf
LAPORAN PKP KESELURUHAN BAB 1-5 NURUL HUSNA.pdfLAPORAN PKP KESELURUHAN BAB 1-5 NURUL HUSNA.pdf
LAPORAN PKP KESELURUHAN BAB 1-5 NURUL HUSNA.pdfChrodtianTian
 
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
 
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docxTugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docxmawan5982
 
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptx
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptxMODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptx
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptxarnisariningsih98
 
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptxJurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptxBambang440423
 
04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau triplet04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau tripletMelianaJayasaputra
 
Aksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru PenggerakAksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru Penggeraksupriadi611
 

Recently uploaded (20)

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
 
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdf
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdfHARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdf
HARMONI DALAM EKOSISTEM KELAS V SEKOLAH DASAR.pdf
 
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
 
DEMONSTRASI KONTEKSTUAL MODUL 1.3 PENDIDIKAN GURU PENGGERAK
DEMONSTRASI KONTEKSTUAL MODUL 1.3 PENDIDIKAN GURU PENGGERAKDEMONSTRASI KONTEKSTUAL MODUL 1.3 PENDIDIKAN GURU PENGGERAK
DEMONSTRASI KONTEKSTUAL MODUL 1.3 PENDIDIKAN GURU PENGGERAK
 
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxKONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
 
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptx
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptxPanduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptx
Panduan Substansi_ Pengelolaan Kinerja Kepala Sekolah Tahap Pelaksanaan.pptx
 
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docxModul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
 
Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)
 
Prakarsa Perubahan dengan Kanvas ATAP & BAGJA.pptx
Prakarsa Perubahan dengan Kanvas ATAP & BAGJA.pptxPrakarsa Perubahan dengan Kanvas ATAP & BAGJA.pptx
Prakarsa Perubahan dengan Kanvas ATAP & BAGJA.pptx
 
tugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDtugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SD
 
Kelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdfKelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdf
 
Model Manajemen Strategi Public Relations
Model Manajemen Strategi Public RelationsModel Manajemen Strategi Public Relations
Model Manajemen Strategi Public Relations
 
Kelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfKelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdf
 
LAPORAN PKP KESELURUHAN BAB 1-5 NURUL HUSNA.pdf
LAPORAN PKP KESELURUHAN BAB 1-5 NURUL HUSNA.pdfLAPORAN PKP KESELURUHAN BAB 1-5 NURUL HUSNA.pdf
LAPORAN PKP KESELURUHAN BAB 1-5 NURUL HUSNA.pdf
 
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
 
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docxTugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
 
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptx
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptxMODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptx
MODUL 2 BAHASA INDONESIA-KELOMPOK 1.pptx
 
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptxJurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
Jurnal Dwi mingguan modul 1.2-gurupenggerak.pptx
 
04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau triplet04-Gemelli.- kehamilan ganda- duo atau triplet
04-Gemelli.- kehamilan ganda- duo atau triplet
 
Aksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru PenggerakAksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru Penggerak
 

CSS40

  • 1. CSS
  • 2. PENGENALAN CSS CSS = CASCADING STYLE SHEET FUNGSI : MENGENDALIKAN BEBERAPA KOMPONEN DALAM SEBUAH WEB SEHINGGA AKAN LEBIH TERSTRUKTUR DAN SERAGAM.
  • 4. Style definitions : adalah defenisi style yang ingin dibuat. Format penulisannya adalah : Selector { property1 : value1 ; property2 : value2;…. propertyN : valueN ; } Selector adalah tag yang digunakan web browser. Property : value adalah efek dari style yang diinginkan untuk selector.
  • 5. CONTOH : <STYLE TYPE=“TEXT/ CSS” > HR { COLOR : RED ; HEIGHT : 5PX ; WIDTH : 50%; } </STYLE> KETERANGAN : TA G AT R I B U T SELECTOR P R O P E RT Y VA L U E ADALAH ADALAH ADALAH ADALAH ADALAH STYLE TYPE=“TEXT/CSS” HR C O L O R , H E I G H T, W I D T H RED, 5PX, 50%
  • 6. ID SELECTOR dan CLASS ID selector didefenisikan sendiri ID selector diawali tanda # ( octothorpe) CLASS diawali dengan tanda titik ( . )
  • 7. MEMBUAT CSS  CARA PERTAMA : mengetikkan langsung dalam tag html sebagai atribut . <body> <b style = “color : blue”> teks tebal dan biru </b> </body>
  • 8.  CARA KEDUA : Menggunakan tag style di dalam tag head. <head> <style type=“text/css”> ……… style definitions ……… </style> </head>
  • 9.  CARA KETIGA : Menyimpan informasi style ke dalam sebuah file dengan ekstensi/type file css Memanggil file css dalam html dengan tag link yang diletakkan dalam tag head. <head> <link rel=“stylesheet” type=“text/css” href=“namafile.css”/> </head>