Halo teman-teman, kali ini saya akan membagikan informasi mengenai materi CSS nih. CSS itu singkatan dari Cascading Style Sheet, yang merupakan salah satu bahasa pemrograman berbasis web. Oke deh, untuk info lebih lanjutnya, silakan dibaca materi dibawah ini. Semoga bermanfaat :D
I. KONSEP
CSS
Apa itu
CSS :
-
Feature untuk membuat dynamic HTML.
-
Style sheet mendeskripsikan bagaimana
tampilan document HTML di layar (template)
-
Membuat special efek (mendefinisikan
style untuk <H1> dengan style bold dan italic dan berwarna biru)
-
Support ke semua browser.
Aturan
penulisan :
-
Nilai untuk property tidak boleh dalam
tanda petik.
contoh :
color : green;
-
Nama property bersifat case sensitive.
color :
green;
property
: color
value :
green
Rumus :
Selector
{Declaration}
Declaration dijabarkan
kembali menjadi :
Selector
{Property : Value}
Contoh :
<html>
<head>
<title> Pengaturan
Margin </title>
<style=”text/css”>
body {margin-top:1cm;margin-right:2cm;margin-bottom:1cm;margin-left:2cm;}
</style>
</head>
<body>
Pengtauran margin halaman.
(1 cm, 2 cm, 1 cm, 2 cm)
</body>
</html>
Aturan
penuliasan CSS :
1.
Inline style sheets.
2.
Embedded style sheets /
Internal style sheets.
3.
External style sheets.
·
Contoh Inline Style :
<html>
<head>
<title>
Inline Style Sheets </title>
</head>
<body>
<p style=”color:blue”;>
CSS </p>
<p> Saya sedang belajar
format Inline Style Sheet dalam CSS </p>
</body>
</html>
·
Contoh Embedded Style Sheet :
<html>
<head>
<title> Embedded Style Sheets </title>
<title> Embedded Style Sheets </title>
<style>
H2{color:yellow;}
p{font-family:Arial;font-size:14pt;}
</style>
</head>
<body>
<h2>
Saya siswa kelas X RPL 3 </h2>
<p>
Saya sedang belajar format Embedded Style Sheet dalam CSS </p>
</body>
</html>
</html>
·
Contoh External Style Sheets :
File berextensi
.html :
<html>
<head>
<title> External Style Sheets </title>
<title> External Style Sheets </title>
<link rel=”stylesheet”
type=”text/css” href=”(namafile).css”>
</head>
<body>
<H2>
CSS </H2>
</body>
</html>
</html>
File berextensi .css:
H2{color:grey;}
p{font-size:14 pt;}
A.
Istilah
–Istilah Dalam CSS
1.
Class Selector
Dengan class selector kita dapat mendefinisikan perbedaan
style untuk tag elemen html yang sama. Misalnya 2 tipe paragraf, paragraf
pertama menggunakan align-left & yang paragraf 1 lagi menggunakan
align-center. Contoh penggunaan atribut class didalam HTML :
<p class=”left”>
Paragraf ini rata kiri </p>
<p class=”center”>
Paragraf ini rata tengah </p>
Maka
penulisan pada file CSS-nya menjadi :
.left{text-align:left}
.center{text-align:center}
Ketentuan Nama Class :
Pada penulisan nama class
dalam file CSS diawali dengan tanda titik (.).
Tidak dianjurkan memberi nama
class dengan angka.
Nama class tidak boleh
menggunakan spasi, jika nama class lebih dari 2 suku kata maka berikan tanda
hubung (-) / (_).
2.
ID Selector
Digunakan dengan tujuan mendefinisikan per-elemen dasar.
Setiap halam ID Selector hanya boleh digunakan dengan 1 ID unik, itulah yang
menjadi perbedaannya dengan class selector.
Dengan class selector
kita dapat mendefinisikan perbedaan style untuk tag element HTML yang sama. Tetapi
dengan ID Selector kita hanya diperbolehkan memanggil 1 ID untuk 1 element yang
sama.
Contoh
:
<p ID=”tebal”> Paragraf
ini ditulis dengan huruf tebal & warna merah. </p>
<p ID=”miring”> Paragraf
ini ditulis dengan huruf miring & warna biru. </p>
Maka
penulisan pada file CSS-nya menjadi :
#tebal{font-weight:bold;color:red;}
#miring{font-style:Italic;color:blue;}
Ketentuan Nama ID:
Pada penulisan nama ID dalam
file CSS diawali dengan tanda pagar (#).
Nama ID dapat ditulis dengan
angka, huruf / garis bawah.
Karakter pertama sebaiknya
huruf / underline (_).
B.
Komentar
Dalam CSS
Comments / komentar biasanya digunakan oleh programmer untuk
memudahkan mengingat kembali script yang telah ditulisnya, comments di CSS
hamper sama dengan comment di C++ yaitu dengan menggunakan :
/*Isi
Komentar*/
Contoh
:
H1{color:blue;}/*H1 elements
akan menjadi biru*/
Tags.H1.color=”blue”;/*elements
akan menjadi biru*/
C.
Pemakaian
Elemenet Style
Dimulai dengan
mengatur warna huruf & latar belakang, dapat menggunaka element
style untuk mengatur karakter kode tag dokumen.
<style type=”text/css”>
body{color:black;background:white;}
</style>
Pernyataan
yang ditulis antara kode tag <style> & </style> menunjukkan
perintah pengaturan style.
1.
Link ke sheet lainnya.
Apabila menginginkan style yang sama untuk halaman HTML yang lain, disarankan mempergunakan
sheet-sheet terpisah namun 1 & lainnya terhubung dengan cara link.
Caranya :
<link
rel=”stylesheet” type=”text/css” href=”style.css”>
Kode tag untuk link ini dibagian “head” dokumen. Perintah
rel perlu diatur dengan pernyataan “stylesheet” supaya browser dapat menemukan
perintah href sebagai penunjukkan ke alamat web (URL) sheet anda.
2. Mengatur Tepi Halaman (Page
Margin)
Halaman web akan tampil cantik bila dituliskan dalam margin
yang lebih lebar. Anda dapat mengatur sisi kiri & kanan memakai karakter
“margin-left” & “margin-right”.
Contoh :
<style
type=”text/css”>
body{margin-left:10%;margin-right:10%;}
</style>
Perintah diatas dituliskan dengan tujuan agar tampilan
halaman web di layar monitor memiliki batas halaman kiri 10% dari lebar layar
monitor.
3. Mengatur Inden Kiri &
Kanan
Agar halaman web tampil lebih cantik bisa juga diberikan
inden (spasi) dari margin kiri beberapa huruf sebelum menuliskan awal kalimat.
Contoh
:
<style type=”text/css”>
body{margin-left:10%;margin-right:10%;}
h1{margin-left:-8%;}
h2,h3,h4,h5,h6{margin-left:-4;}
</style>
4. Mengatur Jarak Penulisan Dari
Tepi Atas & Bawah Halaman.
Program browser biasanya mengerjakan batas atas & bawah,
paragraf & lain-lain dengan baik. Namun ketika anda ingin membuat ruang
disebelah atas / bawah halamn web anda, / anda ingin membuat spasi yang khusus,
barulah disini anda perlu memiliki cara mengaturnya.
Property “margin-top” menentukan ruang sebelah atas &
property “margin-bottom” menentukan ruang sebelah bawah halaman web anda. Bila
anda hendak mengatur semuanya denga heading h2, anda cukup menuliskan dnegan
perintah HTML sebagai berikut :
h2{margin-top:8
cm; margin-bottom:3
cm; }
Kode cm merupakan unit penting dalam mengatur ukuran tinggi
font (huruf). Ini lebih mudah bila dibandingkan dengan pengaturan pixel / titik
(point). Unit ini akan sangat berguna pada pembuatan huruf besar. Satuan titik
(point) umumnya digunakan oleh program word processor misalnya dituliskan
ukuran huruf 10 pt.
Sayangnya untuk ukuran titik yang sama, menghasilkan ukuran
huruf yang berbeda pada pemakaian program browser yang berbeda pula. Untuk
mengatur ruang sebelah atas bagian heading tersebut. Dalam penulisan HTML-nya
anda cukup menggunakan atribut class.
Contoh :
<h2
class=”subsection”> Getting Started </h2>
Kemudian pengaturan ruangnya ditulis dengan perintah berikut
:
h2.subsection{margin-top:8
cm;margin-bottom:3 cm;}
Pengaturan ini dimulai dengan nama tag sebuah titik &
kemudian nilai dari atribut class. Hati-hati dalam menempatkan ruang sebelum
/sesudah titik tersebut. Bila pengaturan tersebut tidak memberikan hasil, ada
cara lain untuk mengtur style elemen tertentu.
Tapi atribut class tetap bersifat fleksibel. Pada saat
sebuat heading diikuti dengan sebuah paragraf, nilai untuk batas bawah
(margin-bottom) untuk heading tersebut tidak ditambahkan dengan nilai batas
atas (margin-top) paragraf.
5.
Inden
Pada Baris Pertama.
Kadang-kadang anda ingin membuat inden pada baris pertama
tiap paragraph.
Contoh
:
p{text-indent:2 cm;margin-top:0;margin-bottom:0;}
Cara tersebut akan membuat inden pada baris pertama
paragraph sejauh 2 cm & memberikan jarak antar paragraph.
0 comments:
Post a Comment