SlideShare a Scribd company logo
1 of 16
PENGENALAN CSS
CSS = Cascading Style Sheet
Fungsi : mendefenisikan style untuk suatu
teks dengan jenis huruf, ukuran , warna
tertentu.
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>
Style definitions : adalah defenisi style yang ingin
dibuat.
Format penulisannya adalah :
Selector adalah tag yang digunakan web browser.
Property : value adalah efek dari style yang
diinginkan untuk selector.
Selector { property1 : value1 ;
property2 : value2;….
propertyN : valueN ; }
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>
Contoh :
<style type=“text/css” >
hr { color : red ; height : 5px ; width : 50%; }
</style>
Keterangan :
Tag adalah style
Atribut adalah type=“text/css”
Selector adalah hr
Property adalah color, height, width
Value adalah red, 5px, 50%
ID SELECTOR
ID selector digunakan untuk menyeleksi
elemen berdasarkan ID tertentu.
ID selector diawali tanda #
(sharp/kres/octothorpe)
Sebuah paragraf dengan
content sebagai selector ID.
#content {
font-family: Arial, sans-serif;
font-size: 14px;
color: red;
}
<p id="content">
Artikel Belajar CSS ID Selector
</p>
CLASS
class digunakan untuk menentukan style
juga sama seperti id.
Selector ini ditulis dengan awalan titik atau
dot “.” pada css dan class=“nama-class”
pada HTML
Sebuah paragraf dengan
content sebagai selector ID.
.teks-hijau {
color: green
}
<p class="teks-hijau"> Paragraf ini memiliki Class
teks-hijau </p>
PWEB CSS
PWEB CSS
PWEB CSS

More Related Content

Similar to PWEB CSS

Praktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdfPraktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdfSayedAchmady1
 
Cascading Style Sheets (CSS).pdf
Cascading Style Sheets (CSS).pdfCascading Style Sheets (CSS).pdf
Cascading Style Sheets (CSS).pdfario48
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis webIlham Yahya
 
Pemograman WEB (CSS)
Pemograman WEB (CSS)Pemograman WEB (CSS)
Pemograman WEB (CSS)Dnr Creatives
 
Pertemuan 8 a
Pertemuan 8 aPertemuan 8 a
Pertemuan 8 af fr
 
Pertemuan 8 a
Pertemuan 8 aPertemuan 8 a
Pertemuan 8 azaenald i
 
Laporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat WebsiteLaporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat WebsiteShofura Kamal
 
Webdev CCI Tel U - Introduction to CSS
Webdev CCI Tel U - Introduction to CSSWebdev CCI Tel U - Introduction to CSS
Webdev CCI Tel U - Introduction to CSSwebdevccitelu
 
Pert 05 HTML dan Web Programming
Pert 05 HTML dan Web ProgrammingPert 05 HTML dan Web Programming
Pert 05 HTML dan Web ProgrammingPutu Mardika
 
UKIN Metode Penulisan CSS.pptx
UKIN Metode Penulisan CSS.pptxUKIN Metode Penulisan CSS.pptx
UKIN Metode Penulisan CSS.pptxBahrulremkote
 
Pemograman Berbasis Web Cascading Style Sheets
Pemograman Berbasis Web Cascading Style SheetsPemograman Berbasis Web Cascading Style Sheets
Pemograman Berbasis Web Cascading Style SheetsIsna Dwi Setianingsih
 

Similar to PWEB CSS (20)

05 css
05 css05 css
05 css
 
Praktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdfPraktikum Dasar-Dasar CSS.pdf
Praktikum Dasar-Dasar CSS.pdf
 
chap CSS.pptx
chap CSS.pptxchap CSS.pptx
chap CSS.pptx
 
Cascading Style Sheets (CSS).pdf
Cascading Style Sheets (CSS).pdfCascading Style Sheets (CSS).pdf
Cascading Style Sheets (CSS).pdf
 
CSS
CSSCSS
CSS
 
18040 pertemuan13(css)
18040 pertemuan13(css)18040 pertemuan13(css)
18040 pertemuan13(css)
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis web
 
Css
CssCss
Css
 
1210651097 css
1210651097 css1210651097 css
1210651097 css
 
Praktikum CSS
Praktikum CSSPraktikum CSS
Praktikum CSS
 
Pemograman WEB (CSS)
Pemograman WEB (CSS)Pemograman WEB (CSS)
Pemograman WEB (CSS)
 
Pertemuan 8 a
Pertemuan 8 aPertemuan 8 a
Pertemuan 8 a
 
Pertemuan 8 a
Pertemuan 8 aPertemuan 8 a
Pertemuan 8 a
 
Materi CSS.ppt
Materi CSS.pptMateri CSS.ppt
Materi CSS.ppt
 
Laporan pbw
Laporan pbwLaporan pbw
Laporan pbw
 
Laporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat WebsiteLaporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat Website
 
Webdev CCI Tel U - Introduction to CSS
Webdev CCI Tel U - Introduction to CSSWebdev CCI Tel U - Introduction to CSS
Webdev CCI Tel U - Introduction to CSS
 
Pert 05 HTML dan Web Programming
Pert 05 HTML dan Web ProgrammingPert 05 HTML dan Web Programming
Pert 05 HTML dan Web Programming
 
UKIN Metode Penulisan CSS.pptx
UKIN Metode Penulisan CSS.pptxUKIN Metode Penulisan CSS.pptx
UKIN Metode Penulisan CSS.pptx
 
Pemograman Berbasis Web Cascading Style Sheets
Pemograman Berbasis Web Cascading Style SheetsPemograman Berbasis Web Cascading Style Sheets
Pemograman Berbasis Web Cascading Style Sheets
 

More from Rakhmi Khalida, M.M.S.I (20)

Pertemuan 1 Sistem Basis Data.pptx
Pertemuan 1 Sistem Basis Data.pptxPertemuan 1 Sistem Basis Data.pptx
Pertemuan 1 Sistem Basis Data.pptx
 
Algoritma penjadwalan proses
Algoritma penjadwalan prosesAlgoritma penjadwalan proses
Algoritma penjadwalan proses
 
Transport layer
Transport layerTransport layer
Transport layer
 
Modul 5 2-ip-address
Modul 5 2-ip-addressModul 5 2-ip-address
Modul 5 2-ip-address
 
Modul 5 1 network layer
Modul 5 1 network layerModul 5 1 network layer
Modul 5 1 network layer
 
Modul 4 1 data link layer
Modul 4 1 data link layerModul 4 1 data link layer
Modul 4 1 data link layer
 
Video
VideoVideo
Video
 
Chapter-audio-dan-suara
Chapter-audio-dan-suaraChapter-audio-dan-suara
Chapter-audio-dan-suara
 
Diferensial dan terapan
Diferensial dan terapanDiferensial dan terapan
Diferensial dan terapan
 
pert - 3 Jaringan dasar
pert - 3 Jaringan dasarpert - 3 Jaringan dasar
pert - 3 Jaringan dasar
 
pert - 1 Jaringan dasar
pert - 1 Jaringan dasarpert - 1 Jaringan dasar
pert - 1 Jaringan dasar
 
Pert 1 - Rekayasa Komputasional
Pert 1 - Rekayasa KomputasionalPert 1 - Rekayasa Komputasional
Pert 1 - Rekayasa Komputasional
 
Sistem multimedia-teknik-informatika
Sistem multimedia-teknik-informatikaSistem multimedia-teknik-informatika
Sistem multimedia-teknik-informatika
 
10.kompresi citra
10.kompresi citra10.kompresi citra
10.kompresi citra
 
9.kompresi teks
9.kompresi teks9.kompresi teks
9.kompresi teks
 
8.animasi
8.animasi8.animasi
8.animasi
 
7.video
7.video7.video
7.video
 
6.suara
6.suara6.suara
6.suara
 
3.proses produksi konten multimedia
3.proses produksi konten multimedia3.proses produksi konten multimedia
3.proses produksi konten multimedia
 
2. konten multimedia
2. konten multimedia2. konten multimedia
2. konten multimedia
 

Recently uploaded

ppt hidrolika_ARI SATRIA NINGSIH_E1A120026.pptx
ppt hidrolika_ARI SATRIA NINGSIH_E1A120026.pptxppt hidrolika_ARI SATRIA NINGSIH_E1A120026.pptx
ppt hidrolika_ARI SATRIA NINGSIH_E1A120026.pptxArisatrianingsih
 
Manajer Lapangan Pelaksanaan Pekerjaan Gedung - Endy Aitya.pptx
Manajer Lapangan Pelaksanaan Pekerjaan Gedung - Endy Aitya.pptxManajer Lapangan Pelaksanaan Pekerjaan Gedung - Endy Aitya.pptx
Manajer Lapangan Pelaksanaan Pekerjaan Gedung - Endy Aitya.pptxarifyudianto3
 
sample for Flow Chart Permintaan Spare Part
sample for Flow Chart Permintaan Spare Partsample for Flow Chart Permintaan Spare Part
sample for Flow Chart Permintaan Spare Parthusien3
 
Pengolahan Kelapa Sawit 1 pabrik pks.pdf
Pengolahan Kelapa Sawit 1 pabrik pks.pdfPengolahan Kelapa Sawit 1 pabrik pks.pdf
Pengolahan Kelapa Sawit 1 pabrik pks.pdffitriAnnisa54
 
BAB_3_Teorema superposisi_thevenin_norton (1).ppt
BAB_3_Teorema superposisi_thevenin_norton (1).pptBAB_3_Teorema superposisi_thevenin_norton (1).ppt
BAB_3_Teorema superposisi_thevenin_norton (1).pptDellaEkaPutri2
 
POWER POINT TEKLING UNTUK SARJANA KEATAS
POWER POINT TEKLING UNTUK SARJANA KEATASPOWER POINT TEKLING UNTUK SARJANA KEATAS
POWER POINT TEKLING UNTUK SARJANA KEATASMuhammadFiqi8
 
Materi Asesi SKK Manajer Pelaksana SPAM- jenjang 6.pptx
Materi Asesi SKK Manajer Pelaksana SPAM- jenjang 6.pptxMateri Asesi SKK Manajer Pelaksana SPAM- jenjang 6.pptx
Materi Asesi SKK Manajer Pelaksana SPAM- jenjang 6.pptxarifyudianto3
 
TEKNIS TES TULIS REKRUTMEN PAMSIMAS 2024.pdf
TEKNIS TES TULIS REKRUTMEN PAMSIMAS 2024.pdfTEKNIS TES TULIS REKRUTMEN PAMSIMAS 2024.pdf
TEKNIS TES TULIS REKRUTMEN PAMSIMAS 2024.pdfYogiCahyoPurnomo
 
Presentasi gedung jenjang 6 - Isman Kurniawan.ppt
Presentasi gedung jenjang 6 - Isman Kurniawan.pptPresentasi gedung jenjang 6 - Isman Kurniawan.ppt
Presentasi gedung jenjang 6 - Isman Kurniawan.pptarifyudianto3
 
SOAL UJIAN SKKhhhhhhjjjjjjjjjjjjjjjj.pptx
SOAL UJIAN SKKhhhhhhjjjjjjjjjjjjjjjj.pptxSOAL UJIAN SKKhhhhhhjjjjjjjjjjjjjjjj.pptx
SOAL UJIAN SKKhhhhhhjjjjjjjjjjjjjjjj.pptxFahrizalTriPrasetyo
 
MAteri:Penggunaan fungsi pada pemrograman c++
MAteri:Penggunaan fungsi pada pemrograman c++MAteri:Penggunaan fungsi pada pemrograman c++
MAteri:Penggunaan fungsi pada pemrograman c++FujiAdam
 
UTILITAS BANGUNAN BERUPA PENANGKAL PETIR.pptx
UTILITAS BANGUNAN BERUPA PENANGKAL PETIR.pptxUTILITAS BANGUNAN BERUPA PENANGKAL PETIR.pptx
UTILITAS BANGUNAN BERUPA PENANGKAL PETIR.pptxAndimarini2
 
2024.02.26 - Pra-Rakor Tol IKN 3A-2 - R2 V2.pptx
2024.02.26 - Pra-Rakor Tol IKN 3A-2 - R2 V2.pptx2024.02.26 - Pra-Rakor Tol IKN 3A-2 - R2 V2.pptx
2024.02.26 - Pra-Rakor Tol IKN 3A-2 - R2 V2.pptxEnginerMine
 
Laporan Tinjauan Manajemen HSE/Laporan HSE Triwulanpptx
Laporan Tinjauan Manajemen HSE/Laporan HSE TriwulanpptxLaporan Tinjauan Manajemen HSE/Laporan HSE Triwulanpptx
Laporan Tinjauan Manajemen HSE/Laporan HSE Triwulanpptxilanarespatinovitari1
 
Presentation Bisnis Teknologi Modern Biru & Ungu_20240429_074226_0000.pptx
Presentation Bisnis Teknologi Modern Biru & Ungu_20240429_074226_0000.pptxPresentation Bisnis Teknologi Modern Biru & Ungu_20240429_074226_0000.pptx
Presentation Bisnis Teknologi Modern Biru & Ungu_20240429_074226_0000.pptxyoodika046
 

Recently uploaded (16)

ppt hidrolika_ARI SATRIA NINGSIH_E1A120026.pptx
ppt hidrolika_ARI SATRIA NINGSIH_E1A120026.pptxppt hidrolika_ARI SATRIA NINGSIH_E1A120026.pptx
ppt hidrolika_ARI SATRIA NINGSIH_E1A120026.pptx
 
Manajer Lapangan Pelaksanaan Pekerjaan Gedung - Endy Aitya.pptx
Manajer Lapangan Pelaksanaan Pekerjaan Gedung - Endy Aitya.pptxManajer Lapangan Pelaksanaan Pekerjaan Gedung - Endy Aitya.pptx
Manajer Lapangan Pelaksanaan Pekerjaan Gedung - Endy Aitya.pptx
 
sample for Flow Chart Permintaan Spare Part
sample for Flow Chart Permintaan Spare Partsample for Flow Chart Permintaan Spare Part
sample for Flow Chart Permintaan Spare Part
 
Pengolahan Kelapa Sawit 1 pabrik pks.pdf
Pengolahan Kelapa Sawit 1 pabrik pks.pdfPengolahan Kelapa Sawit 1 pabrik pks.pdf
Pengolahan Kelapa Sawit 1 pabrik pks.pdf
 
BAB_3_Teorema superposisi_thevenin_norton (1).ppt
BAB_3_Teorema superposisi_thevenin_norton (1).pptBAB_3_Teorema superposisi_thevenin_norton (1).ppt
BAB_3_Teorema superposisi_thevenin_norton (1).ppt
 
POWER POINT TEKLING UNTUK SARJANA KEATAS
POWER POINT TEKLING UNTUK SARJANA KEATASPOWER POINT TEKLING UNTUK SARJANA KEATAS
POWER POINT TEKLING UNTUK SARJANA KEATAS
 
Materi Asesi SKK Manajer Pelaksana SPAM- jenjang 6.pptx
Materi Asesi SKK Manajer Pelaksana SPAM- jenjang 6.pptxMateri Asesi SKK Manajer Pelaksana SPAM- jenjang 6.pptx
Materi Asesi SKK Manajer Pelaksana SPAM- jenjang 6.pptx
 
TEKNIS TES TULIS REKRUTMEN PAMSIMAS 2024.pdf
TEKNIS TES TULIS REKRUTMEN PAMSIMAS 2024.pdfTEKNIS TES TULIS REKRUTMEN PAMSIMAS 2024.pdf
TEKNIS TES TULIS REKRUTMEN PAMSIMAS 2024.pdf
 
Presentasi gedung jenjang 6 - Isman Kurniawan.ppt
Presentasi gedung jenjang 6 - Isman Kurniawan.pptPresentasi gedung jenjang 6 - Isman Kurniawan.ppt
Presentasi gedung jenjang 6 - Isman Kurniawan.ppt
 
SOAL UJIAN SKKhhhhhhjjjjjjjjjjjjjjjj.pptx
SOAL UJIAN SKKhhhhhhjjjjjjjjjjjjjjjj.pptxSOAL UJIAN SKKhhhhhhjjjjjjjjjjjjjjjj.pptx
SOAL UJIAN SKKhhhhhhjjjjjjjjjjjjjjjj.pptx
 
MAteri:Penggunaan fungsi pada pemrograman c++
MAteri:Penggunaan fungsi pada pemrograman c++MAteri:Penggunaan fungsi pada pemrograman c++
MAteri:Penggunaan fungsi pada pemrograman c++
 
UTILITAS BANGUNAN BERUPA PENANGKAL PETIR.pptx
UTILITAS BANGUNAN BERUPA PENANGKAL PETIR.pptxUTILITAS BANGUNAN BERUPA PENANGKAL PETIR.pptx
UTILITAS BANGUNAN BERUPA PENANGKAL PETIR.pptx
 
2024.02.26 - Pra-Rakor Tol IKN 3A-2 - R2 V2.pptx
2024.02.26 - Pra-Rakor Tol IKN 3A-2 - R2 V2.pptx2024.02.26 - Pra-Rakor Tol IKN 3A-2 - R2 V2.pptx
2024.02.26 - Pra-Rakor Tol IKN 3A-2 - R2 V2.pptx
 
Laporan Tinjauan Manajemen HSE/Laporan HSE Triwulanpptx
Laporan Tinjauan Manajemen HSE/Laporan HSE TriwulanpptxLaporan Tinjauan Manajemen HSE/Laporan HSE Triwulanpptx
Laporan Tinjauan Manajemen HSE/Laporan HSE Triwulanpptx
 
Abortion Pills In Doha // QATAR (+966572737505 ) Get Cytotec
Abortion Pills In Doha // QATAR (+966572737505 ) Get CytotecAbortion Pills In Doha // QATAR (+966572737505 ) Get Cytotec
Abortion Pills In Doha // QATAR (+966572737505 ) Get Cytotec
 
Presentation Bisnis Teknologi Modern Biru & Ungu_20240429_074226_0000.pptx
Presentation Bisnis Teknologi Modern Biru & Ungu_20240429_074226_0000.pptxPresentation Bisnis Teknologi Modern Biru & Ungu_20240429_074226_0000.pptx
Presentation Bisnis Teknologi Modern Biru & Ungu_20240429_074226_0000.pptx
 

PWEB CSS

  • 1. PENGENALAN CSS CSS = Cascading Style Sheet Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran , warna tertentu.
  • 2. MEMBUAT CSS CARA PERTAMA : mengetikkan langsung dalam tag html sebagai atribut . <body> <b style = “color : blue”> teks tebal dan biru </b> </body>
  • 3. CARA KEDUA : Menggunakan tag style di dalam tag head. <head> <style type=“text/css”> ……… style definitions ……… </style> </head>
  • 4. Style definitions : adalah defenisi style yang ingin dibuat. Format penulisannya adalah : Selector adalah tag yang digunakan web browser. Property : value adalah efek dari style yang diinginkan untuk selector. Selector { property1 : value1 ; property2 : value2;…. propertyN : valueN ; }
  • 5.
  • 6.
  • 7. 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>
  • 8.
  • 9. Contoh : <style type=“text/css” > hr { color : red ; height : 5px ; width : 50%; } </style> Keterangan : Tag adalah style Atribut adalah type=“text/css” Selector adalah hr Property adalah color, height, width Value adalah red, 5px, 50%
  • 10. ID SELECTOR ID selector digunakan untuk menyeleksi elemen berdasarkan ID tertentu. ID selector diawali tanda # (sharp/kres/octothorpe)
  • 11. Sebuah paragraf dengan content sebagai selector ID. #content { font-family: Arial, sans-serif; font-size: 14px; color: red; } <p id="content"> Artikel Belajar CSS ID Selector </p>
  • 12. CLASS class digunakan untuk menentukan style juga sama seperti id. Selector ini ditulis dengan awalan titik atau dot “.” pada css dan class=“nama-class” pada HTML
  • 13. Sebuah paragraf dengan content sebagai selector ID. .teks-hijau { color: green } <p class="teks-hijau"> Paragraf ini memiliki Class teks-hijau </p>