Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
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
Ada tiga cara untuk memasukan fungsi style css ke document HTML :
- External style sheet
- Internal style sheet
- Inline styles
eksternal style sheet sangat cocok ketika style CSS akan diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan hanya mengubah satu file. Setiap halaman harus mempunyai link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian <head>:
contoh :<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
2. Internal style sheet
style sheet internal dapat digunakan jika satu dokumen tunggal memiliki gaya yang unik. Gaya internal didefinisikan dalam bagian <head> dari sebuah halaman HTML, dengan menggunakan tag <style>, seperti ini:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
3. Inline styles
Beberapa syntax CSS beserta fungsinya:Inline Styles adalah sebuah style yang langung di letakan pada sabuah dokument tunggal .
Contoh di bawah ini menunjukkan bagaimana untuk mengubah warna teks dan margin kiri dari sebuah paragraf :
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
- height:80px;--> mengatur tinggi
- width:1000px;-->mengatur lebar
- margin:10px;-->mengatur jarak antar div
- margin-left:10px;-->mengatur jarak div sebelah kiri untuk kanan=right,atas=top,bawah=bottom
- padding:10px;-->mengatur jarak dalam div
- padding-left;-->mengatur jarak dalam div sebelah kiri untuk kanan=right,atas=top,bawah=bottom
- border:1px solid black;-->memberikan garis tepi setebal 1px berwarna hitam
- border-left:1px solid black;-->memberikan garis tepi sebelah kiri
- float:left;-->membuat div selalu sebelah kiri kalau untuk kanan=right
- background:black;-->memberikan warna pada div. Untuk memberi background pada div :
- background-image:url(image/h3-bg-black.gif);
- background-repeat:no-repeat;
- background-position:top;
- font: bold 17px Arial;--> mengatur jenis,ukuran font dalam div
- overflow:auto;-->otomatis akan ada scroolbar pada div bila isi dalam div melebihi batas. Untuk menghilangkan scroolbar=none
0 komentar:
Posting Komentar