PENGERTIAN CSS DAN PERINTAH-PERINTAHNYA
Pengertian CSS Dasar
CSS singkatan dari Cascading Style Sheet . CSS merupakan
sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan komponen-komponen
web yang beragam sesuai dengan keinginan kita .
CSS
dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel,
ukuran border, warna border, warna hyperlink, warna mouse over, spasi
antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan
parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur
tampilan dokumen.Dengan adanya CSS memungkinkan kita untuk menampilkan halaman
yang sama dengan format yang berbeda.
Fakta & kesimpulan CSS adalah;
Fakta & kesimpulan CSS adalah;
- CSS singkatan dari Cascading Style Sheets
- Styles mendefinisikan bagaimana menampilkan elemen HTML
- Styles ditambahkan ke HTML 4.0 untuk memecahkan masalah
- Style Sheets Eksternal dapat menyimpan banyak pekerjaan
- Style Sheets Eksternal disimpan dalam file CSS.
- Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browser-browser lama.
- Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.
- Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas dan kecepatan pengunduhan.
- Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan sesudahnya.
- Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai browser
- CSS adalah layouting “Masa Depan” dengan penggabungan bersama XHTML.
Sedangkan untuk menulis perintah css anda bisa menggunakan
text editor atau dreamweaver. css sendiri berfungi untuk mengatur halaman
website anda baik berupa pengaturan warna, background gambar, font dan masih
banyak lagi, dengan menggunakan css seorang developer web sangat dimudahkan
karena tidak perlu lagi melakukan perintah-perintah pengaturan secara manual
dengan menulis langsung kode html.
terdapat
3 cara untuk menuliskan perintah CSS (style sheet/lembar perintah CSS) :
- Eksternal style sheet
- Internal style sheet
- Inline style
Penulisan css internal kode
css ditulis langsung pada halaman website anda diantara
<head>
</head>
Berikut contoh penulisan css internal yang ditaruh pada file index.html
<head>
</head>
Berikut contoh penulisan css internal yang ditaruh pada file index.html
·
<html>
·
<head>
·
<title> judul web
</title>
·
<style
type=text/css> body { background-color:#999; }
</style> </head> <body> </body> </html>
·
Penulisan
css secara external kode css disimpan dengan nama file yang berbeda
contoh: pada dreamweaver klik file new–>blank page –>CSS lalu create setelah itu tulis kode dibawah ini;
contoh: pada dreamweaver klik file new–>blank page –>CSS lalu create setelah itu tulis kode dibawah ini;
·
<style
type=text/css> body { background-color:#999; }
</style>
·
Anda
dapat meyimpan kode dengan extention css. contoh simpan kode diatas dengan nama
seting.css
contoh Penulisan css Inline style.
penulisan ini langsung ditaruh di tag css:
contoh Penulisan css Inline style.
penulisan ini langsung ditaruh di tag css:
·
<p
style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
Eksternal Style Sheet
Eksternal style sheet sangat ideal digunakan untuk halaman web yang banyak. Dengan cara ini, apabila Anda ingin mengubah tampilan web, Anda hanya perlu mengedit/mengubah file CSS saja. Untuk menggunakannya, setiap halaman harus di link-kan ke style sheet menggunakan tag link. Tag link diletakkan dibagian head.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
style.css
merupakan nama file style sheet (CSS). File ini ditulis dengan perintah CSS
tanpa mengandung tag HTML. Serta disimpan dengan ekstensi .css. Berikut contoh
dari file style.css :
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Catatan :
Ketika menuliskan value property dan unitnya, jangan menambahkan spasi (seperti
“margin-left:20 px”). Namun yang benar ialah :
margin-left:20px
Internal Style Sheet
Cara ini,
perintah CSS akan didefinisikan langsung dibagian head HTML, dengan menggunakan
tag style.
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Style
Cara ini,
perintah CSS didefinisikan langsung pada tag HTML. Gunakan cara ini apabila
perintah CSS yang didefinisikan sangat pendek.
Contoh
berikut akan menambahkan warna dan margin pada paragraf :
<p style="color:sienna;margin-left:20px">Ini adalah sebuah paragraf.</p>
Tidak ada komentar:
Posting Komentar