Review-01
• Buatlah web layout dengan tampilan sepertisalah satu gambar berikut!
Logo
Nav igasi
Nav igasi
Nav igasi
Logo
Nav igasi
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 manayang 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: h1Property: colorValue: red
Mengatur color dari h1 ke warna merah (red)
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 dalambagian <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 initidak memerlukan penulisan selector dalamkode CSS
• sebaiknya hanya digunakan jika anda maumemformat suatu elemen satu kali saja.
2. Embedded CSS
• menempelkan kode CSS di antaratag <head> dan </head>.
• Penulisan CSS dengan cara ini diawali dengantag <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 .cssatau ekstensi .css .
• perlu memanggil file CSS tersebut ke dalamsemua halaman web yang anda buat. Dengancara ini, hanya perlu memiliki satu set kodeCSS yang digunakan untuk semua halamanweb.
SELECTOR
• Element Selectorelement html sebagai selectorcontoh :h1 { color : blue }
• Class Selectormempergunakan atribut class sebagai selector
• ID selectormempergunakan atribut ID seagai selector
Top Related