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

Program Kerja Public Relations - Perencanaan
Program Kerja Public Relations - PerencanaanProgram Kerja Public Relations - Perencanaan
Program Kerja Public Relations - PerencanaanAdePutraTunggali
 
Panduan Memahami Data Rapor Pendidikan 2024
Panduan Memahami Data Rapor Pendidikan 2024Panduan Memahami Data Rapor Pendidikan 2024
Panduan Memahami Data Rapor Pendidikan 2024RahmadLalu1
 
Materi Sosialisasi US 2024 Sekolah Dasar pptx
Materi Sosialisasi US 2024 Sekolah Dasar pptxMateri Sosialisasi US 2024 Sekolah Dasar pptx
Materi Sosialisasi US 2024 Sekolah Dasar pptxSaujiOji
 
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptxDEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptxwawan479953
 
Memperkasakan Dialog Prestasi Sekolah.pptx
Memperkasakan Dialog Prestasi Sekolah.pptxMemperkasakan Dialog Prestasi Sekolah.pptx
Memperkasakan Dialog Prestasi Sekolah.pptxsalmnor
 
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
 
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
 
SOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAY
SOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAYSOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAY
SOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAYNovitaDewi98
 
PPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptx
PPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptxPPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptx
PPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptxriscacriswanda
 
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdfMODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdfAndiCoc
 
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
 
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdfMODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdfAndiCoc
 
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdfMODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdfAndiCoc
 
BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024
BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024
BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024ssuser0bf64e
 
vIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsxvIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsxsyahrulutama16
 
MODUL AJAR MATEMATIKA KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 3 KURIKULUM MERDEKA.pdfMODUL AJAR MATEMATIKA KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 3 KURIKULUM MERDEKA.pdfAndiCoc
 
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptxBAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptxJuliBriana2
 
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdf
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdfSalinan dari JUrnal Refleksi Mingguan modul 1.3.pdf
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdfWidyastutyCoyy
 
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptx
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptxBab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptx
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptxrizalhabib4
 

Recently uploaded (20)

Program Kerja Public Relations - Perencanaan
Program Kerja Public Relations - PerencanaanProgram Kerja Public Relations - Perencanaan
Program Kerja Public Relations - Perencanaan
 
Panduan Memahami Data Rapor Pendidikan 2024
Panduan Memahami Data Rapor Pendidikan 2024Panduan Memahami Data Rapor Pendidikan 2024
Panduan Memahami Data Rapor Pendidikan 2024
 
Materi Sosialisasi US 2024 Sekolah Dasar pptx
Materi Sosialisasi US 2024 Sekolah Dasar pptxMateri Sosialisasi US 2024 Sekolah Dasar pptx
Materi Sosialisasi US 2024 Sekolah Dasar pptx
 
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptxDEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
 
Memperkasakan Dialog Prestasi Sekolah.pptx
Memperkasakan Dialog Prestasi Sekolah.pptxMemperkasakan Dialog Prestasi Sekolah.pptx
Memperkasakan Dialog Prestasi Sekolah.pptx
 
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
 
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
 
SOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAY
SOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAYSOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAY
SOAL PUBLIC SPEAKING UNTUK PEMULA PG & ESSAY
 
PPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptx
PPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptxPPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptx
PPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptx
 
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdfMODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.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...
 
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdfMODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdf
 
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...
 
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdfMODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL PENDIDIKAN PANCASILA KELAS 6 KURIKULUM MERDEKA.pdf
 
BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024
BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024
BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024
 
vIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsxvIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsx
 
MODUL AJAR MATEMATIKA KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 3 KURIKULUM MERDEKA.pdfMODUL AJAR MATEMATIKA KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 3 KURIKULUM MERDEKA.pdf
 
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptxBAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
 
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdf
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdfSalinan dari JUrnal Refleksi Mingguan modul 1.3.pdf
Salinan dari JUrnal Refleksi Mingguan modul 1.3.pdf
 
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptx
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptxBab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptx
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.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>