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

UT PGSD PDGK4103 MODUL 2 STRUKTUR TUBUH Pada Makhluk Hidup
UT PGSD PDGK4103 MODUL 2 STRUKTUR TUBUH Pada Makhluk HidupUT PGSD PDGK4103 MODUL 2 STRUKTUR TUBUH Pada Makhluk Hidup
UT PGSD PDGK4103 MODUL 2 STRUKTUR TUBUH Pada Makhluk Hidupfamela161
 
Keterampilan menyimak kelas bawah tugas UT
Keterampilan menyimak kelas bawah tugas UTKeterampilan menyimak kelas bawah tugas UT
Keterampilan menyimak kelas bawah tugas UTIndraAdm
 
PEMANASAN GLOBAL - MATERI KELAS X MA.pptx
PEMANASAN GLOBAL - MATERI KELAS X MA.pptxPEMANASAN GLOBAL - MATERI KELAS X MA.pptx
PEMANASAN GLOBAL - MATERI KELAS X MA.pptxsukmakarim1998
 
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptxPERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptxRizkyPratiwi19
 
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
 
aksi nyata - aksi nyata refleksi diri dalam menyikapi murid.pdf
aksi nyata - aksi nyata refleksi diri dalam menyikapi murid.pdfaksi nyata - aksi nyata refleksi diri dalam menyikapi murid.pdf
aksi nyata - aksi nyata refleksi diri dalam menyikapi murid.pdfwalidumar
 
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
 
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SD
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SDPPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SD
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SDNurainiNuraini25
 
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 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
 
Dasar-Dasar Sakramen dalam gereja katolik
Dasar-Dasar Sakramen dalam gereja katolikDasar-Dasar Sakramen dalam gereja katolik
Dasar-Dasar Sakramen dalam gereja katolikThomasAntonWibowo
 
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..AKSI NYATA NARKOBA ATAU OBAT TERLARANG..
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..ikayogakinasih12
 
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptx
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptxPPT AKUNTANSI KEUANGAN MENENGAH DUA.pptx
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptxssuser8905b3
 
1.3.a.3. Mulai dari Diri - Modul 1.3 Refleksi 1 Imajinasiku tentang Murid di ...
1.3.a.3. Mulai dari Diri - Modul 1.3 Refleksi 1 Imajinasiku tentang Murid di ...1.3.a.3. Mulai dari Diri - Modul 1.3 Refleksi 1 Imajinasiku tentang Murid di ...
1.3.a.3. Mulai dari Diri - Modul 1.3 Refleksi 1 Imajinasiku tentang Murid di ...MetalinaSimanjuntak1
 
Integrasi nasional dalam bingkai bhinneka tunggal ika
Integrasi nasional dalam bingkai bhinneka tunggal ikaIntegrasi nasional dalam bingkai bhinneka tunggal ika
Integrasi nasional dalam bingkai bhinneka tunggal ikaAtiAnggiSupriyati
 
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptxPendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptxdeskaputriani1
 
Perumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxPerumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxadimulianta1
 
PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING M...
PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING M...PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING M...
PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING M...Kanaidi ken
 
AKSI NYATA BERBAGI PRAKTIK BAIK MELALUI PMM
AKSI NYATA BERBAGI PRAKTIK BAIK MELALUI PMMAKSI NYATA BERBAGI PRAKTIK BAIK MELALUI PMM
AKSI NYATA BERBAGI PRAKTIK BAIK MELALUI PMMIGustiBagusGending
 
Materi IPAS Kelas 1 SD Bab 3. Hidup Sehat.pptx
Materi IPAS Kelas 1 SD Bab 3. Hidup Sehat.pptxMateri IPAS Kelas 1 SD Bab 3. Hidup Sehat.pptx
Materi IPAS Kelas 1 SD Bab 3. Hidup Sehat.pptxmuhammadkausar1201
 

Recently uploaded (20)

UT PGSD PDGK4103 MODUL 2 STRUKTUR TUBUH Pada Makhluk Hidup
UT PGSD PDGK4103 MODUL 2 STRUKTUR TUBUH Pada Makhluk HidupUT PGSD PDGK4103 MODUL 2 STRUKTUR TUBUH Pada Makhluk Hidup
UT PGSD PDGK4103 MODUL 2 STRUKTUR TUBUH Pada Makhluk Hidup
 
Keterampilan menyimak kelas bawah tugas UT
Keterampilan menyimak kelas bawah tugas UTKeterampilan menyimak kelas bawah tugas UT
Keterampilan menyimak kelas bawah tugas UT
 
PEMANASAN GLOBAL - MATERI KELAS X MA.pptx
PEMANASAN GLOBAL - MATERI KELAS X MA.pptxPEMANASAN GLOBAL - MATERI KELAS X MA.pptx
PEMANASAN GLOBAL - MATERI KELAS X MA.pptx
 
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptxPERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
PERAN PERAWAT DALAM PEMERIKSAAN PENUNJANG.pptx
 
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
 
aksi nyata - aksi nyata refleksi diri dalam menyikapi murid.pdf
aksi nyata - aksi nyata refleksi diri dalam menyikapi murid.pdfaksi nyata - aksi nyata refleksi diri dalam menyikapi murid.pdf
aksi nyata - aksi nyata refleksi diri dalam menyikapi murid.pdf
 
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
 
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SD
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SDPPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SD
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SD
 
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 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
 
Dasar-Dasar Sakramen dalam gereja katolik
Dasar-Dasar Sakramen dalam gereja katolikDasar-Dasar Sakramen dalam gereja katolik
Dasar-Dasar Sakramen dalam gereja katolik
 
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..AKSI NYATA NARKOBA ATAU OBAT TERLARANG..
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..
 
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptx
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptxPPT AKUNTANSI KEUANGAN MENENGAH DUA.pptx
PPT AKUNTANSI KEUANGAN MENENGAH DUA.pptx
 
1.3.a.3. Mulai dari Diri - Modul 1.3 Refleksi 1 Imajinasiku tentang Murid di ...
1.3.a.3. Mulai dari Diri - Modul 1.3 Refleksi 1 Imajinasiku tentang Murid di ...1.3.a.3. Mulai dari Diri - Modul 1.3 Refleksi 1 Imajinasiku tentang Murid di ...
1.3.a.3. Mulai dari Diri - Modul 1.3 Refleksi 1 Imajinasiku tentang Murid di ...
 
Integrasi nasional dalam bingkai bhinneka tunggal ika
Integrasi nasional dalam bingkai bhinneka tunggal ikaIntegrasi nasional dalam bingkai bhinneka tunggal ika
Integrasi nasional dalam bingkai bhinneka tunggal ika
 
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptxPendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
 
Perumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxPerumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptx
 
PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING M...
PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING M...PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING M...
PELAKSANAAN + Link-Link MATERI Training_ "Effective INVENTORY & WAREHOUSING M...
 
AKSI NYATA BERBAGI PRAKTIK BAIK MELALUI PMM
AKSI NYATA BERBAGI PRAKTIK BAIK MELALUI PMMAKSI NYATA BERBAGI PRAKTIK BAIK MELALUI PMM
AKSI NYATA BERBAGI PRAKTIK BAIK MELALUI PMM
 
Materi IPAS Kelas 1 SD Bab 3. Hidup Sehat.pptx
Materi IPAS Kelas 1 SD Bab 3. Hidup Sehat.pptxMateri IPAS Kelas 1 SD Bab 3. Hidup Sehat.pptx
Materi IPAS Kelas 1 SD Bab 3. Hidup Sehat.pptx
 

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>