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>
Pengenalan css

More Related Content

Similar to Pengenalan css (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
 
Pengenalan css
Pengenalan cssPengenalan css
Pengenalan css
 
PWEB CSS
PWEB CSSPWEB CSS
PWEB 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

Aksi Nyata PMM Topik Refleksi Diri (1).pdf
Aksi Nyata PMM Topik Refleksi Diri (1).pdfAksi Nyata PMM Topik Refleksi Diri (1).pdf
Aksi Nyata PMM Topik Refleksi Diri (1).pdfEniNuraeni29
 
TEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptx
TEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptxTEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptx
TEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptxMOHDAZLANBINALIMoe
 
CAPACITY BUILDING Materi Saat di Lokakarya 7
CAPACITY BUILDING Materi Saat di Lokakarya 7CAPACITY BUILDING Materi Saat di Lokakarya 7
CAPACITY BUILDING Materi Saat di Lokakarya 7IwanSumantri7
 
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.pptHAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.pptnabilafarahdiba95
 
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxRefleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxIrfanAudah1
 
MODUL AJAR IPAS KELAS 6 KURIKULUM MERDEKA
MODUL AJAR IPAS KELAS 6 KURIKULUM MERDEKAMODUL AJAR IPAS KELAS 6 KURIKULUM MERDEKA
MODUL AJAR IPAS KELAS 6 KURIKULUM MERDEKAAndiCoc
 
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdfProv.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdfIwanSumantri7
 
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...Kanaidi ken
 
E-modul Materi Ekosistem untuk kelas X SMA
E-modul Materi Ekosistem untuk kelas X SMAE-modul Materi Ekosistem untuk kelas X SMA
E-modul Materi Ekosistem untuk kelas X SMAAmmar Ahmad
 
Contoh PPT Seminar Proposal Teknik Informatika.pptx
Contoh PPT Seminar Proposal Teknik Informatika.pptxContoh PPT Seminar Proposal Teknik Informatika.pptx
Contoh PPT Seminar Proposal Teknik Informatika.pptxIvvatulAini
 
Modul Ajar Bahasa Inggris - HOME SWEET HOME (Chapter 3) - Fase D.pdf
Modul Ajar Bahasa Inggris - HOME SWEET HOME (Chapter 3) - Fase D.pdfModul Ajar Bahasa Inggris - HOME SWEET HOME (Chapter 3) - Fase D.pdf
Modul Ajar Bahasa Inggris - HOME SWEET HOME (Chapter 3) - Fase D.pdfKartiniIndasari
 
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdfAksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdfJarzaniIsmail
 
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...pipinafindraputri1
 
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptxSusanSanti20
 
RENCANA & Link2 Materi Pelatihan_ "Teknik Perhitungan TKDN, BMP, Preferensi H...
RENCANA & Link2 Materi Pelatihan_ "Teknik Perhitungan TKDN, BMP, Preferensi H...RENCANA & Link2 Materi Pelatihan_ "Teknik Perhitungan TKDN, BMP, Preferensi H...
RENCANA & Link2 Materi Pelatihan_ "Teknik Perhitungan TKDN, BMP, Preferensi H...Kanaidi ken
 
Modul Projek - Batik Ecoprint - Fase B.pdf
Modul Projek  - Batik Ecoprint - Fase B.pdfModul Projek  - Batik Ecoprint - Fase B.pdf
Modul Projek - Batik Ecoprint - Fase B.pdfanitanurhidayah51
 
OPTIMALISASI KOMUNITAS BELAJAR DI SEKOLAH.pptx
OPTIMALISASI KOMUNITAS BELAJAR DI SEKOLAH.pptxOPTIMALISASI KOMUNITAS BELAJAR DI SEKOLAH.pptx
OPTIMALISASI KOMUNITAS BELAJAR DI SEKOLAH.pptxDedeRosza
 
DAFTAR PPPK GURU KABUPATEN PURWOREJO TAHUN 2024
DAFTAR PPPK GURU KABUPATEN PURWOREJO TAHUN 2024DAFTAR PPPK GURU KABUPATEN PURWOREJO TAHUN 2024
DAFTAR PPPK GURU KABUPATEN PURWOREJO TAHUN 2024RoseMia3
 
Pelaksana Lapangan Pekerjaan Jalan .pptx
Pelaksana Lapangan Pekerjaan Jalan .pptxPelaksana Lapangan Pekerjaan Jalan .pptx
Pelaksana Lapangan Pekerjaan Jalan .pptxboynugraha727
 

Recently uploaded (20)

Aksi Nyata PMM Topik Refleksi Diri (1).pdf
Aksi Nyata PMM Topik Refleksi Diri (1).pdfAksi Nyata PMM Topik Refleksi Diri (1).pdf
Aksi Nyata PMM Topik Refleksi Diri (1).pdf
 
TEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptx
TEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptxTEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptx
TEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptx
 
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
 
CAPACITY BUILDING Materi Saat di Lokakarya 7
CAPACITY BUILDING Materi Saat di Lokakarya 7CAPACITY BUILDING Materi Saat di Lokakarya 7
CAPACITY BUILDING Materi Saat di Lokakarya 7
 
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.pptHAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
 
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxRefleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
 
MODUL AJAR IPAS KELAS 6 KURIKULUM MERDEKA
MODUL AJAR IPAS KELAS 6 KURIKULUM MERDEKAMODUL AJAR IPAS KELAS 6 KURIKULUM MERDEKA
MODUL AJAR IPAS KELAS 6 KURIKULUM MERDEKA
 
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdfProv.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
 
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
 
E-modul Materi Ekosistem untuk kelas X SMA
E-modul Materi Ekosistem untuk kelas X SMAE-modul Materi Ekosistem untuk kelas X SMA
E-modul Materi Ekosistem untuk kelas X SMA
 
Contoh PPT Seminar Proposal Teknik Informatika.pptx
Contoh PPT Seminar Proposal Teknik Informatika.pptxContoh PPT Seminar Proposal Teknik Informatika.pptx
Contoh PPT Seminar Proposal Teknik Informatika.pptx
 
Modul Ajar Bahasa Inggris - HOME SWEET HOME (Chapter 3) - Fase D.pdf
Modul Ajar Bahasa Inggris - HOME SWEET HOME (Chapter 3) - Fase D.pdfModul Ajar Bahasa Inggris - HOME SWEET HOME (Chapter 3) - Fase D.pdf
Modul Ajar Bahasa Inggris - HOME SWEET HOME (Chapter 3) - Fase D.pdf
 
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdfAksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
 
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
 
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx
7.PPT TENTANG TUGAS Keseimbangan-AD-AS .pptx
 
RENCANA & Link2 Materi Pelatihan_ "Teknik Perhitungan TKDN, BMP, Preferensi H...
RENCANA & Link2 Materi Pelatihan_ "Teknik Perhitungan TKDN, BMP, Preferensi H...RENCANA & Link2 Materi Pelatihan_ "Teknik Perhitungan TKDN, BMP, Preferensi H...
RENCANA & Link2 Materi Pelatihan_ "Teknik Perhitungan TKDN, BMP, Preferensi H...
 
Modul Projek - Batik Ecoprint - Fase B.pdf
Modul Projek  - Batik Ecoprint - Fase B.pdfModul Projek  - Batik Ecoprint - Fase B.pdf
Modul Projek - Batik Ecoprint - Fase B.pdf
 
OPTIMALISASI KOMUNITAS BELAJAR DI SEKOLAH.pptx
OPTIMALISASI KOMUNITAS BELAJAR DI SEKOLAH.pptxOPTIMALISASI KOMUNITAS BELAJAR DI SEKOLAH.pptx
OPTIMALISASI KOMUNITAS BELAJAR DI SEKOLAH.pptx
 
DAFTAR PPPK GURU KABUPATEN PURWOREJO TAHUN 2024
DAFTAR PPPK GURU KABUPATEN PURWOREJO TAHUN 2024DAFTAR PPPK GURU KABUPATEN PURWOREJO TAHUN 2024
DAFTAR PPPK GURU KABUPATEN PURWOREJO TAHUN 2024
 
Pelaksana Lapangan Pekerjaan Jalan .pptx
Pelaksana Lapangan Pekerjaan Jalan .pptxPelaksana Lapangan Pekerjaan Jalan .pptx
Pelaksana Lapangan Pekerjaan Jalan .pptx
 

Pengenalan css

  • 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>