SlideShare a Scribd company logo
LAPORAN PEMROGRAMAN WEB
CSS (Cascading Style Sheets)
Disusun oleh:
(MOH SYAHID)
(1210651273)
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2014
1. Tujuan Perkuliahan
Memahami konsep dasar CSS dan penggunaannya pada web.
2. Keuntungan CSS
- Memudahkan dalam penggantian format secara keseluruhan.
- Lebih praktis.
- Untuk mengubah tampilan web, tanpa mengubah layout utamanya.
3. Tampilan Index.php
4. Penjelasan Source Code/Program
Penjelasan kode: <style> embedded CSS artinya penulisan css diantara tag<head>dan
</head> atau juga diantara tag<body></body>
Penjelasan kode: table sebagai selector border-colapse artinya properti colapse nilai
border artinya menentukan apakah batasan pada table disusutkan , 1px artinya ukuran
pixel ,pixel titik pada layar
#menu # artinya id selector untuk menentukan style pada elemen tunggal yang unik ,
atribut id digunakan dalam sintax HTML dan didefinisikakan #pada sintax CSS.#menu
sebagai selector height mengatur tinggi element width mengatur lebar element
background mengatur background dalam satu deklarasi nilainya url yang dituju.
Penjelasan kode #menu table id selector dalam css #menu table sebagai selector
border property border artinya menentukan apakah batasan pada table disusutkan nilainya
none #menu a artinya id selector untuk menu a /link propertinya color untuk warna nilai white
Penjelasan kode: #menu id selector a:hover artinya berlaku untuk semua elemen <a>
menjadi id selector properti backgroud –color warna background nilainya #00ff66 color
property nilainya green font-family artinya menentukan keluarga huruf teks,pemilihan huruf
secara otomatis dilakukan browser jika jenis huruf tersedia nilainya Arabic , elemen <a>
propertinya color 66cc66 #menu td artinya id menu untuk table baris height mengatur tinggi
element nilainya 40px artinya 40pixel text-align artinya menentukan penjajaran horizontal teks
nilainya center artinya tengah vertical-align artinya menentukan penjajaran vertical teks
nilainya middle property color nilainya #fff font menjadi property nilainya bold artinya tebal
14pixel
Penjelasan kode: #isi id selector property padding artinya mengatur batas tepi dalam semua
elemen dalam satu deklarasi nilainya 10 10 #isi p id selector isi p property color nilainya black
properti font artinya mengatur huruf dalam satu deklarasi nilainya 11 pixel properti paddang-
button artinya menentukan batas tepi dalam bawah nilainya 5pixel #isi ul id selector isi ul
property color warna nilianya black penjelasanya sama seperti di id selector #isi p.
Penjelasan kode : #isi img id selector isi img propertinya border artinya menentukan apakah
batasan pada table disusutkan nilainya 1pixel width artinya mengatur lebar element nilianya
80pixel heigth artinya mengatur tinggi element nilainya 100pixel .table-menu artinya nama
kelas selector propertinya vertical-align artinya menentukan penjajaran vertical teks nilainya
top atas border-colasper artinya properti colapse nilainya collapse properti border artinya
mengatur semua border dalam satu deklrasi nilainya 1pixel backround-color artinya
menentukan warna sebagai background nilainya #0066cc font-familiy artinya menentukan
keluarga huruf teks,pemilihan huruf secara otomatis dilakukan browser jika jenis huruf tersedia
nilainya cambaria font-size artinya menentukan ukuran huruf nilainya 15pixel.
Penjelasan kode: #content_left id selector content artinya menambahkan atau
mengisikan conten buatan setelah atau sebelum pada elemen left artinya kiri property floaf
artinya menentukan suatu elemen mengambang nilaianya left property width artinya mengatur
lebar element nilainya 236pixel height artinya mengatur tinggi element nilainya 62pixel
property margin artinya mengatur batas tepi luar semua elemen dalam satu deklrasai nilainya 0
padding mengatur batas tepi dalam semua elemen dalam satu deklrasari nilainya 0.
Penjelasan kode: untuk penjelasanya sama dengan yang di atas cuman yang
membedakan adalah line artinya menentukan tinggi conten .
Penjelasan kode: #content_left_mid.section id selector propertinya margin artinya
artinya mengatur batas tepi luar semua elemen dalam satu deklrasai nilainya 0 , property
padding artinya mengatur batas tepi dalam semua elemen dalam satu deklrasari nilainya
20pixel section.section_title nama kelas selector propertinya height artinya mengatur tinggi
element nilainya 25pixel font_family artinya menentukan keluarga huruf teks,pemilihan huruf
secara otomatis dilakukan browser jika jenis huruf tersedia nilainya cambaria, font size
menentukan ukuran huruf teks nilainya 10pixel font-weight menentukan ketebalan huruf
nilainya bold artinya tebal, proprty color /warna nilainya white , propert background nilainya
#cccc6 property margin artinya mengatur batas tepi luar semua elemen dalam satu deklrasai
nilainya 0 0 10pixel property padding nilianya. 2pixel
Penjelasan kode: .footer nama kelas selector propertinya backgroud artinya menentukan
warna dalam backround nilainya yellow, property magin artinya mengatur batas tepi luar
semua elemen dalam satu deklrasai nilainya 0 property padding artinya mengatur batas tepi
dalam semua elemnt dalam satu deklrasi nilinya 5pixel properti font-family artinya
menentukan keluarga huruf teks,pemilihan huruf secara otomatis dilakukan browser jika jenis
huruf tersedia nilainya arial font-size ukuran huruf nilainya 15pixel text-align artinya
menentukan penjajaran horizontal teks nilainya center/tengah property color nilinya #adad7b.
Penjelasan kode : judul title Form pembelian susu <link rel> artinya membuat code link
nama filenya href link filenya tyle filenya.
Penjelasan kode: membuat table width menentukan lebar table align tata letak
<tr>membuat kolom table colspan, img untuk mengambil gambar.
Penjelasan kode: <div id >artinya id selector di tag HTML width artinya menentukan
lebar table <a href >artinya membuat kode link .kalau di css # kalau di html menggunkan
atribut id
Penjelasan kode : <td>membuat baris dalam table <div id=”isi”> id selector di dalam tag
HTML <h1>heading color/warna nilainya blue , font/huruf nilainya bold atau tebal 16pixel
<img>mengambil gambar src nama gambar yang mau di ambil<p>pragraf<ul><li>list.
Penjelasan kode: <div id>artinya id selector di dalam tag HTML .
Penjelasan kode: <div id>id selector di dalam tag HTML membuat @copy dan menglinkkan
style color /warna footer dan tata letak center <p>artinya pragraf <tr>artinya membuat colom
<td>membuat baris di dalam kolom

More Related Content

Viewers also liked

INGLES A1
INGLES A1INGLES A1
Ch11 z5e solutions
Ch11 z5e solutionsCh11 z5e solutions
Ch11 z5e solutions
blachman
 
2Q10 Earnings Release
2Q10 Earnings Release2Q10 Earnings Release
2Q10 Earnings Release
Gafisa RI !
 
30美丽的名片
30美丽的名片30美丽的名片
30美丽的名片
zsk91186
 
Summary of first term
Summary of first termSummary of first term
Summary of first term
anaiktak
 
XY Lao Tablet
XY Lao TabletXY Lao Tablet
XY Lao Tablet
laonux
 
Words Associated with Questions about Macros in Tex
Words Associated with Questions about Macros in TexWords Associated with Questions about Macros in Tex
Words Associated with Questions about Macros in Tex
Angela Lozano
 
sistemas
sistemas sistemas
sistemas
carloschavezsdi
 
Example of arrogance in quran the story of qarun and haman
Example of arrogance in quran the story of qarun and haman Example of arrogance in quran the story of qarun and haman
Example of arrogance in quran the story of qarun and haman
Amel Hope
 
EGFR vIII as a targeting agent for BNCT
EGFR vIII as a targeting agent for BNCTEGFR vIII as a targeting agent for BNCT
EGFR vIII as a targeting agent for BNCT
kent.riley
 
#VisitCool DMA West Best Idea presentation
#VisitCool DMA West Best Idea presentation#VisitCool DMA West Best Idea presentation
#VisitCool DMA West Best Idea presentation
Flagstaff Convention and Visitors Bureau
 
Boe February 10 2009 Agenda
Boe February 10 2009 AgendaBoe February 10 2009 Agenda
Boe February 10 2009 Agenda
Hoboken Resistance
 
Reward week 1 bus681
Reward week 1   bus681Reward week 1   bus681
Reward week 1 bus681
E Alden
 
Tsunami dari bnpb
Tsunami dari bnpbTsunami dari bnpb
Tsunami dari bnpb
V-cool Ndayak
 
Back to School 2011
Back to School 2011Back to School 2011
Back to School 2011
jmu101211
 
Saim chishti books eemane abitalib2of2
Saim chishti books eemane abitalib2of2Saim chishti books eemane abitalib2of2
Saim chishti books eemane abitalib2of2
Saim Chishti Research Center Faisalabad
 
Rom - Ruby Object Mapper
Rom - Ruby Object MapperRom - Ruby Object Mapper
Rom - Ruby Object Mapper
Alexander Kirillov
 
8 habits of highly effective language learners
8 habits of highly effective language learners8 habits of highly effective language learners
8 habits of highly effective language learners
Philip Seifi
 
Uuriv ja aktiivne õppeviis algklassides
Uuriv ja aktiivne õppeviis algklassidesUuriv ja aktiivne õppeviis algklassides
Uuriv ja aktiivne õppeviis algklassides
hajao
 

Viewers also liked (20)

INGLES A1
INGLES A1INGLES A1
INGLES A1
 
Ch11 z5e solutions
Ch11 z5e solutionsCh11 z5e solutions
Ch11 z5e solutions
 
2Q10 Earnings Release
2Q10 Earnings Release2Q10 Earnings Release
2Q10 Earnings Release
 
Pdf Pai
Pdf PaiPdf Pai
Pdf Pai
 
30美丽的名片
30美丽的名片30美丽的名片
30美丽的名片
 
Summary of first term
Summary of first termSummary of first term
Summary of first term
 
XY Lao Tablet
XY Lao TabletXY Lao Tablet
XY Lao Tablet
 
Words Associated with Questions about Macros in Tex
Words Associated with Questions about Macros in TexWords Associated with Questions about Macros in Tex
Words Associated with Questions about Macros in Tex
 
sistemas
sistemas sistemas
sistemas
 
Example of arrogance in quran the story of qarun and haman
Example of arrogance in quran the story of qarun and haman Example of arrogance in quran the story of qarun and haman
Example of arrogance in quran the story of qarun and haman
 
EGFR vIII as a targeting agent for BNCT
EGFR vIII as a targeting agent for BNCTEGFR vIII as a targeting agent for BNCT
EGFR vIII as a targeting agent for BNCT
 
#VisitCool DMA West Best Idea presentation
#VisitCool DMA West Best Idea presentation#VisitCool DMA West Best Idea presentation
#VisitCool DMA West Best Idea presentation
 
Boe February 10 2009 Agenda
Boe February 10 2009 AgendaBoe February 10 2009 Agenda
Boe February 10 2009 Agenda
 
Reward week 1 bus681
Reward week 1   bus681Reward week 1   bus681
Reward week 1 bus681
 
Tsunami dari bnpb
Tsunami dari bnpbTsunami dari bnpb
Tsunami dari bnpb
 
Back to School 2011
Back to School 2011Back to School 2011
Back to School 2011
 
Saim chishti books eemane abitalib2of2
Saim chishti books eemane abitalib2of2Saim chishti books eemane abitalib2of2
Saim chishti books eemane abitalib2of2
 
Rom - Ruby Object Mapper
Rom - Ruby Object MapperRom - Ruby Object Mapper
Rom - Ruby Object Mapper
 
8 habits of highly effective language learners
8 habits of highly effective language learners8 habits of highly effective language learners
8 habits of highly effective language learners
 
Uuriv ja aktiivne õppeviis algklassides
Uuriv ja aktiivne õppeviis algklassidesUuriv ja aktiivne õppeviis algklassides
Uuriv ja aktiivne õppeviis algklassides
 

Similar to Web syahid 1210651273

Tabel Tag HTML
Tabel Tag HTMLTabel Tag HTML
Tabel Tag HTML
Fajar Sany
 
Laporan tugas project pemograman web
Laporan tugas project pemograman webLaporan tugas project pemograman web
Laporan tugas project pemograman web
Zansa Sllw Gymbr
 
CSS
CSSCSS
Laporan css (1152)
Laporan css (1152)Laporan css (1152)
Laporan css (1152)
diyahapriliana
 
1st Meet Web Study Jam.pptx
1st Meet Web Study Jam.pptx1st Meet Web Study Jam.pptx
1st Meet Web Study Jam.pptx
11GinaFerlindawati
 
Presentation 1 - Desain dan pemrograman web 2
Presentation 1 - Desain dan pemrograman web 2Presentation 1 - Desain dan pemrograman web 2
Presentation 1 - Desain dan pemrograman web 2
Jacob Dwi Cristian Umboh
 
CSS
CSSCSS
Pelatihan website#1
Pelatihan website#1Pelatihan website#1
Pelatihan website#1
Iankee Mualdo
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis web
Mohammad Rosidi
 
Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)
gufron_ar
 
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
Shofura Kamal
 
Modul html
Modul htmlModul html
Modul html
ferdiambarala
 
1210651097 css
1210651097 css1210651097 css
1210651097 css
ardyansyahAhmad
 
Tugas laporan aplikasi web nova muhdalifah
Tugas laporan aplikasi web nova muhdalifahTugas laporan aplikasi web nova muhdalifah
Tugas laporan aplikasi web nova muhdalifah
zakianadalina97
 
webdesign dasar : 06 layout
webdesign dasar : 06 layoutwebdesign dasar : 06 layout
webdesign dasar : 06 layout
SMK Negeri 6 Malang
 
Pemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSSPemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSS
Ahmad Afandi
 
Css tutorial-19
Css tutorial-19Css tutorial-19
Css tutorial-19
Karin Novilda
 
Modul web-design
Modul web-designModul web-design
Modul web-design
Sejahtera Affif
 
Pert 05 HTML dan Web Programming
Pert 05 HTML dan Web ProgrammingPert 05 HTML dan Web Programming
Pert 05 HTML dan Web Programming
Putu Mardika
 

Similar to Web syahid 1210651273 (20)

Tabel Tag HTML
Tabel Tag HTMLTabel Tag HTML
Tabel Tag HTML
 
Laporan tugas project pemograman web
Laporan tugas project pemograman webLaporan tugas project pemograman web
Laporan tugas project pemograman web
 
CSS
CSSCSS
CSS
 
Laporan css (1152)
Laporan css (1152)Laporan css (1152)
Laporan css (1152)
 
1st Meet Web Study Jam.pptx
1st Meet Web Study Jam.pptx1st Meet Web Study Jam.pptx
1st Meet Web Study Jam.pptx
 
Presentation 1 - Desain dan pemrograman web 2
Presentation 1 - Desain dan pemrograman web 2Presentation 1 - Desain dan pemrograman web 2
Presentation 1 - Desain dan pemrograman web 2
 
CSS
CSSCSS
CSS
 
Pelatihan website#1
Pelatihan website#1Pelatihan website#1
Pelatihan website#1
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis web
 
Laporan css
Laporan cssLaporan css
Laporan css
 
Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)Laporan pemrograman berbasis web (CSS)
Laporan pemrograman berbasis web (CSS)
 
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
 
Modul html
Modul htmlModul html
Modul html
 
1210651097 css
1210651097 css1210651097 css
1210651097 css
 
Tugas laporan aplikasi web nova muhdalifah
Tugas laporan aplikasi web nova muhdalifahTugas laporan aplikasi web nova muhdalifah
Tugas laporan aplikasi web nova muhdalifah
 
webdesign dasar : 06 layout
webdesign dasar : 06 layoutwebdesign dasar : 06 layout
webdesign dasar : 06 layout
 
Pemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSSPemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSS
 
Css tutorial-19
Css tutorial-19Css tutorial-19
Css tutorial-19
 
Modul web-design
Modul web-designModul web-design
Modul web-design
 
Pert 05 HTML dan Web Programming
Pert 05 HTML dan Web ProgrammingPert 05 HTML dan Web Programming
Pert 05 HTML dan Web Programming
 

Recently uploaded

1-PPT-Pendahuluan Masterplan Sampah.pdfkota tangerang selatan
1-PPT-Pendahuluan Masterplan Sampah.pdfkota tangerang selatan1-PPT-Pendahuluan Masterplan Sampah.pdfkota tangerang selatan
1-PPT-Pendahuluan Masterplan Sampah.pdfkota tangerang selatan
prksosek
 
Introduction to data analytics and analytics
Introduction to data analytics and analyticsIntroduction to data analytics and analytics
Introduction to data analytics and analytics
JodhyRachman3
 
PPT untuk Perijinan OP 2024.ppt.........
PPT untuk Perijinan OP 2024.ppt.........PPT untuk Perijinan OP 2024.ppt.........
PPT untuk Perijinan OP 2024.ppt.........
IhdaNailul1
 
Protokol Etik Penelitian Kesehatan Lengkap RIZA.docx
Protokol Etik Penelitian Kesehatan Lengkap RIZA.docxProtokol Etik Penelitian Kesehatan Lengkap RIZA.docx
Protokol Etik Penelitian Kesehatan Lengkap RIZA.docx
Irawan894145
 
Visakhapatnam Girls call Service 000XX00000 Provide Best And Top Girl Service...
Visakhapatnam Girls call Service 000XX00000 Provide Best And Top Girl Service...Visakhapatnam Girls call Service 000XX00000 Provide Best And Top Girl Service...
Visakhapatnam Girls call Service 000XX00000 Provide Best And Top Girl Service...
vrvipin164
 
Pengetahuan dasar keselamatan dan kesehatan kerja pada pabrik kelapa sawit
Pengetahuan dasar keselamatan dan kesehatan kerja pada pabrik kelapa sawitPengetahuan dasar keselamatan dan kesehatan kerja pada pabrik kelapa sawit
Pengetahuan dasar keselamatan dan kesehatan kerja pada pabrik kelapa sawit
NabilaLowenski
 
geografi kelas x untuk belajar dn memmahami
geografi kelas x  untuk belajar dn memmahamigeografi kelas x  untuk belajar dn memmahami
geografi kelas x untuk belajar dn memmahami
alvinmedia15
 
konsep moderasi beragama.ppt untuk pembelajaran
konsep moderasi beragama.ppt untuk pembelajarankonsep moderasi beragama.ppt untuk pembelajaran
konsep moderasi beragama.ppt untuk pembelajaran
suryakalteng07
 
PPT Kepemimpinancdf Sekolah 2 DARING.pptx
PPT Kepemimpinancdf Sekolah 2 DARING.pptxPPT Kepemimpinancdf Sekolah 2 DARING.pptx
PPT Kepemimpinancdf Sekolah 2 DARING.pptx
IkaNoviantari
 
New Girls Call Delhi 9711199171 Unlimited Short Providing Girls Service Avail...
New Girls Call Delhi 9711199171 Unlimited Short Providing Girls Service Avail...New Girls Call Delhi 9711199171 Unlimited Short Providing Girls Service Avail...
New Girls Call Delhi 9711199171 Unlimited Short Providing Girls Service Avail...
Kavita Gupta
 

Recently uploaded (10)

1-PPT-Pendahuluan Masterplan Sampah.pdfkota tangerang selatan
1-PPT-Pendahuluan Masterplan Sampah.pdfkota tangerang selatan1-PPT-Pendahuluan Masterplan Sampah.pdfkota tangerang selatan
1-PPT-Pendahuluan Masterplan Sampah.pdfkota tangerang selatan
 
Introduction to data analytics and analytics
Introduction to data analytics and analyticsIntroduction to data analytics and analytics
Introduction to data analytics and analytics
 
PPT untuk Perijinan OP 2024.ppt.........
PPT untuk Perijinan OP 2024.ppt.........PPT untuk Perijinan OP 2024.ppt.........
PPT untuk Perijinan OP 2024.ppt.........
 
Protokol Etik Penelitian Kesehatan Lengkap RIZA.docx
Protokol Etik Penelitian Kesehatan Lengkap RIZA.docxProtokol Etik Penelitian Kesehatan Lengkap RIZA.docx
Protokol Etik Penelitian Kesehatan Lengkap RIZA.docx
 
Visakhapatnam Girls call Service 000XX00000 Provide Best And Top Girl Service...
Visakhapatnam Girls call Service 000XX00000 Provide Best And Top Girl Service...Visakhapatnam Girls call Service 000XX00000 Provide Best And Top Girl Service...
Visakhapatnam Girls call Service 000XX00000 Provide Best And Top Girl Service...
 
Pengetahuan dasar keselamatan dan kesehatan kerja pada pabrik kelapa sawit
Pengetahuan dasar keselamatan dan kesehatan kerja pada pabrik kelapa sawitPengetahuan dasar keselamatan dan kesehatan kerja pada pabrik kelapa sawit
Pengetahuan dasar keselamatan dan kesehatan kerja pada pabrik kelapa sawit
 
geografi kelas x untuk belajar dn memmahami
geografi kelas x  untuk belajar dn memmahamigeografi kelas x  untuk belajar dn memmahami
geografi kelas x untuk belajar dn memmahami
 
konsep moderasi beragama.ppt untuk pembelajaran
konsep moderasi beragama.ppt untuk pembelajarankonsep moderasi beragama.ppt untuk pembelajaran
konsep moderasi beragama.ppt untuk pembelajaran
 
PPT Kepemimpinancdf Sekolah 2 DARING.pptx
PPT Kepemimpinancdf Sekolah 2 DARING.pptxPPT Kepemimpinancdf Sekolah 2 DARING.pptx
PPT Kepemimpinancdf Sekolah 2 DARING.pptx
 
New Girls Call Delhi 9711199171 Unlimited Short Providing Girls Service Avail...
New Girls Call Delhi 9711199171 Unlimited Short Providing Girls Service Avail...New Girls Call Delhi 9711199171 Unlimited Short Providing Girls Service Avail...
New Girls Call Delhi 9711199171 Unlimited Short Providing Girls Service Avail...
 

Web syahid 1210651273

  • 1. LAPORAN PEMROGRAMAN WEB CSS (Cascading Style Sheets) Disusun oleh: (MOH SYAHID) (1210651273) JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH JEMBER 2014
  • 2. 1. Tujuan Perkuliahan Memahami konsep dasar CSS dan penggunaannya pada web. 2. Keuntungan CSS - Memudahkan dalam penggantian format secara keseluruhan. - Lebih praktis. - Untuk mengubah tampilan web, tanpa mengubah layout utamanya. 3. Tampilan Index.php 4. Penjelasan Source Code/Program Penjelasan kode: <style> embedded CSS artinya penulisan css diantara tag<head>dan </head> atau juga diantara tag<body></body>
  • 3. Penjelasan kode: table sebagai selector border-colapse artinya properti colapse nilai border artinya menentukan apakah batasan pada table disusutkan , 1px artinya ukuran pixel ,pixel titik pada layar #menu # artinya id selector untuk menentukan style pada elemen tunggal yang unik , atribut id digunakan dalam sintax HTML dan didefinisikakan #pada sintax CSS.#menu sebagai selector height mengatur tinggi element width mengatur lebar element background mengatur background dalam satu deklarasi nilainya url yang dituju. Penjelasan kode #menu table id selector dalam css #menu table sebagai selector border property border artinya menentukan apakah batasan pada table disusutkan nilainya none #menu a artinya id selector untuk menu a /link propertinya color untuk warna nilai white Penjelasan kode: #menu id selector a:hover artinya berlaku untuk semua elemen <a> menjadi id selector properti backgroud –color warna background nilainya #00ff66 color property nilainya green font-family artinya menentukan keluarga huruf teks,pemilihan huruf secara otomatis dilakukan browser jika jenis huruf tersedia nilainya Arabic , elemen <a> propertinya color 66cc66 #menu td artinya id menu untuk table baris height mengatur tinggi
  • 4. element nilainya 40px artinya 40pixel text-align artinya menentukan penjajaran horizontal teks nilainya center artinya tengah vertical-align artinya menentukan penjajaran vertical teks nilainya middle property color nilainya #fff font menjadi property nilainya bold artinya tebal 14pixel Penjelasan kode: #isi id selector property padding artinya mengatur batas tepi dalam semua elemen dalam satu deklarasi nilainya 10 10 #isi p id selector isi p property color nilainya black properti font artinya mengatur huruf dalam satu deklarasi nilainya 11 pixel properti paddang- button artinya menentukan batas tepi dalam bawah nilainya 5pixel #isi ul id selector isi ul property color warna nilianya black penjelasanya sama seperti di id selector #isi p. Penjelasan kode : #isi img id selector isi img propertinya border artinya menentukan apakah batasan pada table disusutkan nilainya 1pixel width artinya mengatur lebar element nilianya 80pixel heigth artinya mengatur tinggi element nilainya 100pixel .table-menu artinya nama kelas selector propertinya vertical-align artinya menentukan penjajaran vertical teks nilainya top atas border-colasper artinya properti colapse nilainya collapse properti border artinya mengatur semua border dalam satu deklrasi nilainya 1pixel backround-color artinya menentukan warna sebagai background nilainya #0066cc font-familiy artinya menentukan keluarga huruf teks,pemilihan huruf secara otomatis dilakukan browser jika jenis huruf tersedia nilainya cambaria font-size artinya menentukan ukuran huruf nilainya 15pixel.
  • 5. Penjelasan kode: #content_left id selector content artinya menambahkan atau mengisikan conten buatan setelah atau sebelum pada elemen left artinya kiri property floaf artinya menentukan suatu elemen mengambang nilaianya left property width artinya mengatur lebar element nilainya 236pixel height artinya mengatur tinggi element nilainya 62pixel property margin artinya mengatur batas tepi luar semua elemen dalam satu deklrasai nilainya 0 padding mengatur batas tepi dalam semua elemen dalam satu deklrasari nilainya 0. Penjelasan kode: untuk penjelasanya sama dengan yang di atas cuman yang membedakan adalah line artinya menentukan tinggi conten .
  • 6. Penjelasan kode: #content_left_mid.section id selector propertinya margin artinya artinya mengatur batas tepi luar semua elemen dalam satu deklrasai nilainya 0 , property padding artinya mengatur batas tepi dalam semua elemen dalam satu deklrasari nilainya 20pixel section.section_title nama kelas selector propertinya height artinya mengatur tinggi element nilainya 25pixel font_family artinya menentukan keluarga huruf teks,pemilihan huruf secara otomatis dilakukan browser jika jenis huruf tersedia nilainya cambaria, font size menentukan ukuran huruf teks nilainya 10pixel font-weight menentukan ketebalan huruf nilainya bold artinya tebal, proprty color /warna nilainya white , propert background nilainya #cccc6 property margin artinya mengatur batas tepi luar semua elemen dalam satu deklrasai nilainya 0 0 10pixel property padding nilianya. 2pixel Penjelasan kode: .footer nama kelas selector propertinya backgroud artinya menentukan warna dalam backround nilainya yellow, property magin artinya mengatur batas tepi luar semua elemen dalam satu deklrasai nilainya 0 property padding artinya mengatur batas tepi dalam semua elemnt dalam satu deklrasi nilinya 5pixel properti font-family artinya menentukan keluarga huruf teks,pemilihan huruf secara otomatis dilakukan browser jika jenis huruf tersedia nilainya arial font-size ukuran huruf nilainya 15pixel text-align artinya menentukan penjajaran horizontal teks nilainya center/tengah property color nilinya #adad7b.
  • 7. Penjelasan kode : judul title Form pembelian susu <link rel> artinya membuat code link nama filenya href link filenya tyle filenya. Penjelasan kode: membuat table width menentukan lebar table align tata letak <tr>membuat kolom table colspan, img untuk mengambil gambar. Penjelasan kode: <div id >artinya id selector di tag HTML width artinya menentukan lebar table <a href >artinya membuat kode link .kalau di css # kalau di html menggunkan atribut id Penjelasan kode : <td>membuat baris dalam table <div id=”isi”> id selector di dalam tag HTML <h1>heading color/warna nilainya blue , font/huruf nilainya bold atau tebal 16pixel <img>mengambil gambar src nama gambar yang mau di ambil<p>pragraf<ul><li>list.
  • 8. Penjelasan kode: <div id>artinya id selector di dalam tag HTML . Penjelasan kode: <div id>id selector di dalam tag HTML membuat @copy dan menglinkkan style color /warna footer dan tata letak center <p>artinya pragraf <tr>artinya membuat colom <td>membuat baris di dalam kolom