PENGENALAN CSS
advertisement
PENGENALAN CSS
Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.
Apa Itu CSS?
CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun.
Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang
Contoh Syntax:
h1
{
color:
red
}
Contoh di atas menunjukkan
berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.
Selector: h1
Keuntungan Penggunaan CSS
Property: color
Jika anda memiliki beberapa halaman website dimana anda menggunakan fontarial untuk tulisannya, lalu
suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu
Value: red
halaman website anda dan merubah tipe font dari arial menjadi trebuchet.
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah
Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu
(red).
baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.
Pengelompokan Selectors
Jadi, keuntungan menggunakan CSS, lebih praktis!
Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma.
Kekurangan Penggunaan CSS
Misalkan anda mau mengatur agar tag h1, h2 dan h3semua menggunakan warna merah, maka kode CSS nya
Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web
menjadi:
dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus
h1,h2,h3
{
color:
red
}
memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser
tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
Penggunaan Banyak Properties
Syntax CSS
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value.
Contoh:
Format penulisan kalimat CSS:
h1,h2,h3 {color:red; font-family:arial; font-size:150%;}
selector
{
property:
value
}
Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.
Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warnamerah, dengan type font arial, dan
ukuran font 150%.
1
Cara Penulisan Yang Baik
Implementasi CSS
Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan
Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:
values nya di indent. Ya cuma biar rapih dan lebih mudah di baca aja sih, ga harus kok.
h1,h2,h3
{
color:red;
font-family:arial;
Inline CSS
Embed atau memasang kode css ke dalam bagian <head>
Nge link ke external CSS
Import CSS file
Yuk kita bahas satu per satu…
font-size:150%;
Inline CSS
}
Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan
penulisan selector dalam kode CSS.
anda mengaplikasikan kode CSS ke halaman website.
Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
CSS Comment
Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan
pengingat.
Contoh:
<P style=”color:blue”>
Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang
berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.
/* Tulis komentar anda
p
{
text-align: justify;
/* Tulis komentar anda
color: blue;
font-family: arial;
}
Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan
di
sini
*/
Isi paragraf.
</p>
Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru. Elemen
paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf
yang ditentukan kode CSS nya.
di
sini
*/
Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.
2
Embedded CSS
Import CSS
Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini
Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
diawali dengan tag <style> dan diakhiri dengan tag </style>.
Contoh:
Contoh:
@import
<head>
<style type="text/css"
p {color:blue;}
</style>
</head>
media=screen>
"style.css";
atau
@import
url("style.css");
Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat menggunakan font
Penggunaan Lebih dari Satu Kode CSS
berwarna biru.
Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih
spesifik.
External CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css. Anda lalu perlu
memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya
perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah
dalam pengimplementasian CSS dengan cara ini.
Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu
tuliskan kode-kode css di dalam file tersebut.
2. p {font-family:
3. h1 {color: red;
4.
arial;
}
font-size:
small;}
Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan
memasukkan kode di bawah ini, di antara tag <head> dan </head>
<head>
<link
</head>
h1 {
color: red;
text-align: left;
font-size: 8pt
}
Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb:
Contoh:
1.
Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sbb:
h1 {
text-align: right;
font-size: 20pt
}
Perhatikan
bagaimana
pemformatan
saling
bertabrakan,
dari
eksternal
style
sheet, text-
align=left sementara dari internal style sheet, text-align=right.
Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style
rel=”stylesheet”
href=”style.css”
type=”text/css”>
sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sbb:
color: red;
text-align: right;
font-size: 20pt
3
Class dan ID Selector
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
Misalkan anda membuat kode CSS untuk tag <h1>. Sekarang bagaimana jika anda ingin memformat tag <h1>
Hasil:
dengan warna / property berbeda? Misalkan, anda ingin tag <h1> di kolom kiri berwarna biru sementara tag
<h1> di kolom tengah berwarna hitam.
Untuk kasus seperti ini, anda bisa menggunakan Class selector dan ID selector.
Class Selector
Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.
Cara penulisan Class Selector:
.nama-class {property:value;}
Untuk menempelkan class ke dalam tag HTML:
taghtml.nama-class {Property:value;}
Teks tengah akan berwarna merah.
Tag H1 tengah akan berwarna
hitam
Tag H1 kiri akan berwarna biru
ID Selector
ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat
bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu /
sidebar.
Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector di luar kode
HTML anda menggunakan tag <div class=nama-class> dan di akhiri dengan tag </div>.
Cara penulisan ID Selector:
Contoh:
#nama-ID {property:value;}
Penulisan kode CSS:
Untuk menempelkan ID selector ke dalam tag HTML:
.tengah {text-align:center;}
taghtml#nama-ID {Property:value;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian kode CSS
<div class=tengah>
Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar kode HTML
anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.
CSS dapat memformat font dengan berbagai macam cara mulai dari pengaturan tipe font, ukuran, dll. Saya
akan coba bahas satu per satu ya.
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
4
CSS Font Family
CSS Font Size
Kalau anda biasa menggunakan ms word atau aplikasi lainnya dimana anda bisa merubah jenis / tipe font,
CSS font size menentukan ukuran font pada bagian tertentu. Dengan menggunakan property ini,
pasti anda sudah mengenal nama-nama font seperti: arial, verdana, times new roman dll. Nah kalau di CSS
memudahkan kita untuk mengatur ukuran font berbeda-beda dalam satu halaman website.
kita sebut tipe font ini Font Family.
Cara penulisan:
Cara penulisan:
property -> font-size
property -> font-family
value -> Ada berbagai macam cara penulisan value sbb:
value -> nama-nama font, disarankan menggunakan hanya nama-nama
Menentukan ukuran font secara absolut:
xx-small
x-small
small
medium
large
x-large
xx-large
font default
Contoh penulisan:
h1 {
font-family: verdana;
}
h2 {
font-family: “times new roman”;
}
Hasil:
Ini adalah Heading 1 (H1)
menggunakan font Verdana
Menentukan ukuran secara relatif:
larger
smaller
Menentukan berdasarkan ukuran pasti:
Menggunakan satuan ukuran px, misalnya: 10px, 12px. Angka negatif
tidak diperbolehkan.
Menentukan ukuran berdasarkan persen:
Menentukan ukuran lebih besar atau lebih kecil sebesar x% dari
ukuran font dari element sebelumnya (parent element). Misalnya:
110% atau 80%.
Contoh penulisan:
h1 {
Ini adalah Heading 2 (H2) menggunakan font Times New Roman
font-size: 14px;
}
h2 {
font-size: 12px;
}
5
Hasil:
font-size: 12px;
Ini adalah Heading 1 (H1) menggunakan ukuran pasti 14px
font-style:oblique;
}
Ini adalah Heading 2 (H2) menggunakan ukuran pasti 12px
CSS Font Style
CSS font style menentukan kemiringan font di bagian tertentu.
Ada 3 macam style yaitu:
normal : default; browser menampilkan font secara normal
Italic : browser menampilkan font miring
oblique : browser menampilkan font oblique.
Perbedaan italic dan oblique:
Hasil:
Ini adalah Heading 1 (H1) menggunakan style italic
Ini adalah Heading 2 (H2) menggunakan style oblique
CSS Font Variant
Properti font variant digunakan untuk menampilkan font dalam huruf kapital kecil. Jadi semua huruf non
kapital akan berubah menjadi huruf kapital, tetapi ukuran nya tetap sama. Perlu diketahui, tidak semua
jenis font dapat menggunakan properti ini.
Jenis font biasanya memiliki font set miring yang disebut italic. Misalkan, untuk font Trebuchet MS, akan
terdapat 2 set font yaitu trebuchet MS true type (normal) dan trebuchet MS italic (miring). Sementara pada
penggunaan style oblique, yang dibunakan adalah Trebuchet MS true type yang di miringkan pada saat
ditampilkan. Jadi untuk beberapa font, tidak akan tampak perbedaan nyata antara penggunaan style italic
dan oblique.
Cara penulisan:
property -> font-style
value -> normal, italic, oblique
Contoh penulisan:
h1 {
Cara penulisan:
property -> font-variant
value -> small-caps
Contoh penulisan:
h1 {
font-size: 14px;
font-variant: small-caps;
}
Hasil:
INI ADALAH HEADING 1 (H1) MENGGUNAKAN PROPERTI FONT VARIANT
font-size: 14px;
font-style: italic;
}
h2 {
6
CSS Font Weight
Properti font weight digunakan untuk mengatur ketebalan font.
font-weight:100;
}
Hasil:
Cara penulisan:
property -> font-weight
Ini adalah Heading 1 (H1) menggunakan font weight bold
Ini adalah Heading 2 (H2) menggunakan font weight 100
value ->
normal
bold – tebal
bolder – lebih tebal
lighter – lebih tipis
100
200
CSS Font Color
Properti color digunakan untuk menentukan warna font. Sebenarnya properti color bukan lah bagian dari
properti font.
Cara penulisan:
property -> color
300
400 – normal
value ->
500
nama warna – contoh: red, black, white
600
hexadesimal – contoh: #ff0000
700 – bold
RGB – contoh: rgb(0, 220, 98)
800
Contoh penulisan:
900
h1 {
Contoh penulisan:
font-size: 14px;
h1 {
color: red;
font-size: 14px;
}
font-weight: bold;
h2 {
}
font-size: 14px;
h2 {
color: #0000ff;
font-size: 14px;
}
7
Hasil:
Ini adalah Heading 1 (H1) menggunakan warna merah
Ini adalah Heading 2 (H2) menggunakan warna biru
8
