CSS BAGIAN 2
CSS (Cascading Style
Sheets) merupakan kode pemrograman untuk membuat tampilan pada HTML. Selain
menggunakan HTML para programer website sering menggunakan kode CSS untuk
mengedit sebuah halaman website. Faktor kemudahanlah yang di gunakan para
programer. Hanya mengedit CSS pada satu file maka seluruh konten yang
ditampilkan akan berubah. CSS digunakan untuk
mendefinisikan tampilan HTML di layar monitor. Dari konten gambar, teks, bilah
sisi, warna, backgorund, spasi penulisan, <h1> dan lain-lain. Pembuatan
CSS ini mendukung semua browser.
Kode CSS dituliskan dengan struktur sebagai berikut:
Menggunakan
variable
body{ isi kode css}
konten { isi kode css}
Nilai
properti tidak menggunakan tanda petik
body {
backgorund:#eee;}
Nama properti
bersifat cas atau sensitif
variable/selector :
body
properti : background,
value : #eee
Untuk membuat halaman HTML agar tersusun rapih dan tidak terlalu panjang,
simpan kode/script yang telah dibuat dalam satu folder yang sama dengan file
HTML tersebut. Hal ini memudahkan untuk pemanggilan kode CSS pada halaman HTML.
Kode yang digunakan adalah sebagai berikut:
<link
href=”nama_file.css”rel=”stylesheets” type=”text/css”>
Penempatann kode
pemanggilan CSS diantara kode <head> dan </head> yaitu:
<html>
<head>
<title>Belajar CSS</title>
<syle type=”text/css”>
body{
background:#eee;
font-size:14px;
color:#ccc;}
</head>
<body>
Isi konten Disini
</body>
</html>
Ada cara lain untuk
memanggil kode CSS pada HTML yakni:Atau bisa juga seperti ini,
<html>
<head>
<title>Belajar CSS</title>
<link href="nama_file.css"
rel"stylesheets" type="text/css">
</head>
<body>
Isi konten disini
</body>
</html>
A. Background
Styling
Sebuah elemen HTML bisa diberikan
efek latar belakang (background) dengan menggunakan Property “background”
pada CSS. Property ini memiliki beberapa bentuk, yakni :
1.Background-color
Property “background-color”
digunakan untuk mengatur latar belakang sebuah elemen dengan nilai berupa
warna.
Sintaks-nya :
background-color: color-value;
Selain warna-warna dasar tersebut, kita juga
bisa memilih warna-warna lain yang lebih spesifik dan sesuai dengan kebutuhan
desain website kita. Untuk mendapatkan nilai warna yang diinginkan, kita bisa
menggunakan aplikasi-aplikasi yang menyediakan fitur color picker,
seperti pada aplikasi Adobe Photoshop dan sejenisnya.
Contoh penerapan Property "background”
:
[ Index.html ]
[ Style.CSS ]
2. Background-image
Property “background-image” digunakan
untuk menjadikan sebuah file gambar (image) menjadi latar belakang pada
sebuah elemen HTML.
Sintaks-nya :
Keterangan :
File gambar yang digunakan bisa berupa file *.jpg, *.png ataupun *.gif.
Secara default, gambar yang dijadikan background akan ditampilkan
berulang, secara horizontal dan vertikal.
Url file gambar bisa menggunakan relative
path ataupun absolute url.
Contoh :
Edit Declaration untuk Selector “body” pada file CSS,
sehingga menjadi seperti berikut :
Contoh
WEB dengan penggunakan CSS:
B.
Kemampuan CSS
Berikut
ini adalah beberapa hal yang dapat dilakukan dengan CSS
1. Mendefinisikan tampilan
halaman web yang dibuat dalam satu tempat khusus, lebih baik daripada menulis
berulang-ulang dalam satu atau beberapa halaman web.
2. Kemudahan mengubah tampilan halaman
web bahkan setelah halaman ini selesai dibuat. Karena style didefisikan didalam
satu tempat maka anda dapat mengubah tampilan sebuah situs dengan sekali kerja.
3. Mendefinisikan ukuran huruf
dan atribut-atribut serupa yang memiliki akurasi setingkat.
C.
Selector
Selector
adalah nama yang diberikan untuk setiap style berbeda yang didalam style anda
mendefinisikan bagaimana setiap selector akan bekerja (font,color dan
lain-lain). Kemudian didalam bagian body halaman web, anda merujuk (memanggil) selector
tersebut untuk mengaktifkan style yang telah didefisikan.
DAFTRA PUSTAKA
Anonim.2014.http://webwahyu.wordpress.com/2014/09/08/belajar-html-dan-css-bagian-2/
Anonim.2014.http://perancangan dan pemrograman.internet.com/2014/09/08/pdf-adobe-reader/
Husni.2007,pemrograman-data-base-berbasis
WEB.Graha-Ilmu.Yogyakarta.
Ramadhan
Arief S.Kom.2006.Pemrograman-web.PT Elex Media Komputindo.Jakarta
.jpg){kind=link}
.png){kind=link}
.png){kind=link}
