HTML & WEB PROGRAMMING 
By : 
I Ngh Putu Mardika, S.Pd
Review-01 
• Buatlah web layout dengan tampilan seperti 
salah satu gambar berikut! 
Logo 
Nav igasi 
Nav igasi 
Nav igasi 
Logo 
Nav igasi
MENGENAL CSS
Mengenal CSS 
• Singkatan dari cascading Style sheet 
• Cara untuk mengatur tampilan html 
• Mempermudah dalam pengaturan html
Syntax CSS 
• Syntax : 
selector { property: value } 
selector { property: value; property: value } 
• Selector itu untuk menunjukkan bagian mana 
yang hendak diatur / diformat. 
Property untuk menunjukkan, bagian 
(properti) dari selector yang hendak diatur. 
Value adalah nilai dari pengaturannya.
Contoh CSS 
h1 { color: red } 
Artinya: 
Selector: h1 
Property: color 
Value: red 
Mengatur color dari h1 ke warna merah (red)
Contoh CSS 
header { background-color:black} 
nav{ background-color:black;} 
body{ margin:0}
Pengelompokan Selector 
h1,h2,h3 { color: red } 
p, a, ul {color:blue} 
p, ul, a {color:blue}
Penggunaan Banyak Properties 
header { 
background-color:black; 
color:white; 
text-align:center; 
padding:5px; 
}
Cara Penulisan Yang Baik 
nav { 
line-height: 30px; 
background-color : #eeeeee; 
height : 300px; 
width :100px; 
float:left; 
padding:5px; 
}
CSS Comment 
/* Tulis komentar anda di sini */ 
p 
{ 
text-align: justify; 
/* Tulis komentar anda di sini */ 
color: blue; 
font-family: arial; 
}
INPLEMNTASI CSS 
• Inline CSS 
• Embed atau memasang kode css ke dalam 
bagian <head> 
• Pada link ke external CSS 
• Import CSS file
1. Inline CSS 
• Kode CSS dituliskan langsung ke dalam tag 
HTML yang ingin di format. Penulisan cara ini 
tidak memerlukan penulisan selector dalam 
kode CSS 
• sebaiknya hanya digunakan jika anda mau 
memformat suatu elemen satu kali saja.
Cotoh inline CSS 
<p style=”color:blue”> 
Isi paragraf. 
</p>
2. Embedded CSS 
• menempelkan kode CSS di antara 
tag <head> dan </head>. 
• Penulisan CSS dengan cara ini diawali dengan 
tag <style> dan diakhiri dengan tag </style>. 
• Kode CSS-nya diletakkan pada halaman yang 
sama dengan yang ingin diformat
Contoh embedded CSS 
<head> 
<style type="text/css" media=screen> 
p {color:blue;} 
</style> 
</head> 
<body> 
</body>
3. External CSS 
• Kode CSS external di tulis dalam satu file 
terpisah yang disimpan dengan akhiran .css 
atau ekstensi .css . 
• perlu memanggil file CSS tersebut ke dalam 
semua halaman web yang anda buat. Dengan 
cara ini, hanya perlu memiliki satu set kode 
CSS yang digunakan untuk semua halaman 
web.
SELECTOR 
• Element Selector 
element html sebagai selector 
contoh : 
h1 { color : blue } 
• Class Selector 
mempergunakan atribut class sebagai selector 
• ID selector 
mempergunakan atribut ID seagai selector
CLASS SELECTOR 
• Class selector adalah penggabungan beberapa 
properties yang digunakan lebih dari satu kali. 
Cara penulisan Class Selctor 
.nama-class {property: value;} 
Contoh : 
.

Pert 05 HTML dan Web Programming

  • 1.
    HTML & WEBPROGRAMMING By : I Ngh Putu Mardika, S.Pd
  • 2.
    Review-01 • Buatlahweb layout dengan tampilan seperti salah satu gambar berikut! Logo Nav igasi Nav igasi Nav igasi Logo Nav igasi
  • 3.
  • 4.
    Mengenal CSS •Singkatan dari cascading Style sheet • Cara untuk mengatur tampilan html • Mempermudah dalam pengaturan html
  • 5.
    Syntax CSS •Syntax : selector { property: value } selector { property: value; property: value } • Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat. Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur. Value adalah nilai dari pengaturannya.
  • 6.
    Contoh CSS h1{ color: red } Artinya: Selector: h1 Property: color Value: red Mengatur color dari h1 ke warna merah (red)
  • 7.
    Contoh CSS header{ background-color:black} nav{ background-color:black;} body{ margin:0}
  • 8.
    Pengelompokan Selector h1,h2,h3{ color: red } p, a, ul {color:blue} p, ul, a {color:blue}
  • 9.
    Penggunaan Banyak Properties header { background-color:black; color:white; text-align:center; padding:5px; }
  • 10.
    Cara Penulisan YangBaik nav { line-height: 30px; background-color : #eeeeee; height : 300px; width :100px; float:left; padding:5px; }
  • 11.
    CSS Comment /*Tulis komentar anda di sini */ p { text-align: justify; /* Tulis komentar anda di sini */ color: blue; font-family: arial; }
  • 12.
    INPLEMNTASI CSS •Inline CSS • Embed atau memasang kode css ke dalam bagian <head> • Pada link ke external CSS • Import CSS file
  • 13.
    1. Inline CSS • Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS • sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
  • 14.
    Cotoh inline CSS <p style=”color:blue”> Isi paragraf. </p>
  • 15.
    2. Embedded CSS • menempelkan kode CSS di antara tag <head> dan </head>. • Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>. • Kode CSS-nya diletakkan pada halaman yang sama dengan yang ingin diformat
  • 16.
    Contoh embedded CSS <head> <style type="text/css" media=screen> p {color:blue;} </style> </head> <body> </body>
  • 17.
    3. External CSS • Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css atau ekstensi .css . • perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web.
  • 18.
    SELECTOR • ElementSelector element html sebagai selector contoh : h1 { color : blue } • Class Selector mempergunakan atribut class sebagai selector • ID selector mempergunakan atribut ID seagai selector
  • 19.
    CLASS SELECTOR •Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali. Cara penulisan Class Selctor .nama-class {property: value;} Contoh : .