Sebelum mempelajari CSS anda harus
mengetahui HTML DASAR terlebih dahulu . CSS singkatan dari Cascading
Style Sheet . CSS merupakan sebuah bahasa pemrograman yang fungsinya untuk
menstrukturkan komponen-komponen web yang beragam sesuai dengan keinginan
kita.
Syntax
CSS
CSS memiliki dua bagian utama:
pemilih ( Selector ) , dan satu atau lebih deklarasi ( Declaration ).
- Selector adalah HTML element yang ingin
dibuat style nya.
- Declaration merupakan isi dari property
dan nilai dari CSS.
- Pemberian nilai dari property
digunakan titik dua ( : ), akhir dari property digunakan titik koma ( ; )
Contoh CSS
Sebuah deklarasi CSS selalu diakhiri
dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal :
p {color:red;text-align:center;}
CSS Coment
Komentar digunakan untuk menjelaskan
kode kita, dan dapat membantu kita ketika kita mengedit source code di kemudian
hari. Komentar diabaikan oleh browser.
Sebuah komentar CSS diawali dengan
“/*”, dan diakhiri dengan “*/”, seperti ini :
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
CSS
ID dan Class
Selector
id digunakan untuk menentukan style
untuk elemen tunggal yang unik . Id pemilih menggunakan atribut id elemen HTML,
dan didefinisikan dengan “#“. Aturan style bawah ini akan diterapkan pada
elemen dengan id = “para1″
#para1
{
text-align:center;
color:red;
}
nb: JANGAN memulai id dengan
menggunakan nomor karena ini tidak akan bekerja pada Mozilla Firefox
Selector class digunakan untuk menentukan gaya
untuk sekelompok elemen. Berbeda dengan pemilih id, kelas pemilih yang paling
sering digunakan pada beberapa elemen . Dengan ini memungkinkan anda untuk
menentukan gaya dan elemen HTML dengan class yang sama .
Selector Class menggunakan atribut
class HTML, dan didefinisikan dengan “.”
Pada contoh di bawah ini, semua
elemen HTML dengan class = “center”akan dibuat rata tengah :
.center {text-align:center;}
kita juga dapat menentukan bahwa
hanya elemen HTML tertentu yang dipengaruhi oleh kelas.
Pada contoh di bawah, elemen p semua
dengan class = “center”akan di buat rata tengah :
p.center {text-align:center;}
nb: JANGAN memulai nama kelas
dengan angka karena ini hanya didukung di Internet Explorer.
Cara
CSS
Tiga Cara untuk Insert CSS :
1. Eksternal style sheet
merupakan ideal ketika gaya diterapkan pada banyak halaman , dengan ini anda
dapat mengubah tampilan seluruh situs Web dengan mengubah satu file.
Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag
<link> masuk ke dalam bagian kepala
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
dengan eksternal style sheet dapat
ditulis dalam bentuk editor teks apapun , dan harus disimpan pada
ekstensi css . sebuah contoh dari file style sheet dibawah ini :
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
nb: JANGAN meninggalkan ruang
antara nilai properti dan satuan! “margin-left: 20 px” (bukan “margin-left:
20px”) akan bekerja di IE, tapi tidak di Firefox atau Opera.
2. Internal style sheet
merupakan dokumen tunggal html harus digunakan apabila dokumen tunggal html
memiliki gaya yang unik . XDi bagian ke[pala html anda dapat mendefinisikan
gaya internal dengan menggunakan tag style seperti ini :
<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>
3. Inline style
gaya inline dengan mencampurkan konten dengan presentasi akan banyak kehilangan
keuntungan , maka anda dapat menggunakan metode hemat dibawah ini :
Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang
relevan. Atribut style dapat berisi properti CSS. berikut contoh bagaimana
mengubah warna dan margin kiri paragraf :
<p
style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
4. Multiple Style Sheet
Jika beberapa properti telah
ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda maka
nilai-nilai akan diwariskan dari style sheet lebih spesifik.
contoh style sheet eksternal untuk
pemilih h3 :
h3
{
color:red;
text-align:left;
font-size:8pt;
}
contoh style sheet internal untuk
pemilih h3 :
h3
{
text-align:right;
font-size:20pt;
}
Jika halaman dengan internal style
sheet link ke style sheet eksternal properti untuk h3 akan menjadi:
color:red;
text-align:right;
font-size:20pt;
Warna diwariskan dari style sheet
eksternal dan teks-alignment dan ukuran font diganti oleh internal style sheet.
Beberapa
Styles Akan Cascade ke Satu :
gaya dapat ditentukan :
- didalam sebuah elemen HTML
- didalam bagian kepala halaman
HTML
- didalam sebuahj file CSS
eksternal
Secara umum kita dapat mengatakan
bahwa semua gaya akan “cascade” menjadi lembaran baru “virtual” gaya oleh
aturan berikut, di mana nomor empat memiliki prioritas tertinggi:
- Internal style sheet (di bagian
kepala)
- Inline style (di dalam elemen
HTML)
Jadi gaya inline yang ada di dalam
elemen HTML memiliki prioritas tertinggi , yang berarti bahwa ia akan menimpa
gaya yangb didefinisikan di dalam tag <head>, atau dalam style sheet
eksternal , atau dalam browser (nilai default).
nb: Jika link ke style sheet
eksternal ditempatkan setelah style sheet internal di <head> HTML, style
sheet eksternal akan menimpa style sheet internal!
Pengertian
CSS Dasar
Sebelum mempelajari CSS anda harus
mengetahui HTML DASAR terlebih dahulu . CSS singkatan dari Cascading
Style Sheet . CSS merupakan sebuah bahasa pemrograman yang fungsinya untuk
menstrukturkan komponen-komponen web yang beragam sesuai dengan keinginan
kita .
Soal
gaya Masalah Besar
HTML tidak pernah dimaksudkan untuk berisi
tag untuk memformat dokumen.
HTML itu dimaksudkan untuk
menentukan isi dari sebuah dokumen, seperti:
<h1> Ini adalah heading </
h1>
<p> Ini adalah sebuah
paragraf. </ p>
Ketika tag seperti <font>, dan
atribut warna ditambahkan dengan spesifikasi HTML 3.2 , mulai mimpi buruk bagi
pengembang web. Pengembangan situs web yang besar , dimana informasi font dan
warna yang ditambahkan ke setiap halaman menjadi proses yang panjang dan mahal.
CSS
Menyimpan Banyak Kerja .
CSS mendefinisikan cara elemen HTML
yang akan ditampilkan.
Gaya biasanya disimpan dalam file
css eksternal . Style sheet eksternal memungkinkan anda untuk mengubah tampilan
dan tata letak semua halaman dalam sebuah situs web hanya dengan mengedit satu
file tunggal .
Tutorial
Syntax CSS
CSS memiliki dua bagian utama:
pemilih ( Selector ) , dan satu atau lebih deklarasi ( Declaration ).
- Selector adalah HTML element yang ingin
dibuat style nya.
- Declaration merupakan isi dari property
dan nilai dari CSS.
- Pemberian nilai dari property digunakan
titik dua ( : ), akhir dari property digunakan titik koma ( ; )
Contoh CSS
Sebuah deklarasi CSS selalu diakhiri
dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal :
p {color:red;text-align:center;}
CSS Coment
Komentar digunakan untuk menjelaskan
kode kita, dan dapat membantu kita ketika kita mengedit source code di kemudian
hari. Komentar diabaikan oleh browser.
Sebuah komentar CSS diawali dengan
“/*”, dan diakhiri dengan “*/”, seperti ini :
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
CSS Styling
Background
Properti CSS Bakground (Latar Belakang) digunakan untuk menentukan efek latar
belakan dari suatu elemen.
Properti yang digunakan dalam CSS Background antara lain :
Background-color
Properti Background-color menetapkan
warna latar belakang dari suatu elemen.
Warna latar berlakang ini
didefinisikan dalam pemilih body .
contoh : body {background-color : #b0c4de
;}
Dengan CSS, warna paling sering
ditentukan adalah :
* nilai HEX – seperti “# FF0000″
* sebuah nilai RGB – seperti “rgb (255,0,0)”
* nama warna – seperti “merah”
Bakcground-image
Properti Background-image menentukan
warna gambar untuk digunakan sebagai latar belakang suatu elemen.
Secara default, gambar diulang sehingga mencakup seluruh elemen.
Gambar latar belakang untuk halaman bisa di set seperti ini:
contoh : body
{background-image:url(‘paper.gif’) ;}
Background-repeat
Properti Background-repeat
ini digunakan untuk mengulangi gambar, baik secara vertikal atau horizontal .
Properti :
- repeat-x (pengulangan
horizontal)
- repeat-y (pengulangan vertikal)
- no-repeat (tanpa pengulangan)
contoh :
body
{
background-image:url(‘gradient2.png’);
background-repeat:repeat-x;
}
Background-attachment
properti Background-attachment
digunakan untuk menentukan apakah gambar latar belakang tetap atau scroll
dengan sisi halaman .
Properti :
Background-position
Properti Background-position
digunakan untuk mengatur posisi awal dari background image
contoh :
body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
background-position:right top;
}
Aktifkan javascript browser anda
bos!
CSS Styling
Text
CSS Text
Text
Color
Properti warna yang digunakan
untuk mengatur warna teks.
Dengan CSS, warna yang paling sering
ditentukan oleh:
- nilai HEX – seperti “# ff0000″
- sebuah nilai RGB – seperti “rgb
(255,0,0)”
- nama warna – seperti “merah”
Warna default untuk halaman
didefinisikan dalam pemilih tubuh / body.
contoh :
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
Text
Alignment
Properti text-align digunakan
untuk mengatur alignment horizontal dari sebuah teks.
Teks dapat terpusat, atau berpihak ke kiri atau kanan,
atau dibenarkan.Ketika text-align diatur untuk
“membenarkan”, setiap baris ditarik sehingga setiap
barismemiliki lebar yang sama, dan margin kiri dan
kanan lurus (seperti di majalah dan surat kabar).
contoh :
h1 {text-align: center;}
p.date {text-align: right;}
p.main {text-align: justify;}
Text
Decoration
Properti text-decoration digunakan
untuk membuat atau menghapus dekorasi dari teks.
Properti text-decoration banyak
digunakan untuk menghapus menggarisbawahi dari linkuntuk
tujuan desain:
contoh :
a {text-decoration: none;}
Hal ininjuga dapat digunakan untuk
menghias text :
contoh :
h1 {text-decoration: overline;}
h2 {text-decoration: line-melalui;}
h3 {text-decoration: underline;}
h4 {text-decoration: blink;}
Text
Transformation
Properti teks transform
digunakan untuk menentukan huruf besar dan huruf
kecil dalam sebuah teks.
Hal ini dapat digunakan untuk
mengubah segalanya menjadi huruf besar atau huruf kecil,
atau memanfaatkan huruf pertama dari setiap kata.
contoh :
p.uppercase {text-transform: uppercase;}
p.lowercase {text-transform: lowercase;}
p.capitalize {text-transform: memanfaatkan;}
Text
Identation
Properti teks lekukan digunakan
untuk menentukan indentasi dari baris pertama dari teks.
contoh :
p {text-indent: 50px;}
CSS Styling
Fonts
CSS Fonts
CSS properti font menentukan
keluarga font, keberanian, ukuran, dan gaya text .
CSS
Font Keluarga
Dalam CSS, ada dua jenis nama
keluarga font :
- generik keluarga – sebuah kelompok
keluarga font dengan tampilan yang sama (seperti “Serif” atau “Monospace”)
- Font keluarga – keluarga font tertentu
(seperti “Times New Roman” atau “Arial”)
Generik keluarga
|
Font keluarga
|
Deskripsi
|
Serif
|
Times New Roman
Georgia
|
Font serif memiliki garis-garis
kecil di bagian berakhir pada beberapa karakter
|
Sans-serif
|
Arial
Verdana
|
“Sans” berarti tanpa – font-font
ini tidak memiliki garis di ujung karakter
|
Monospace
|
Courier New
Lucida Console
|
Semua karakter huruf monospace
memiliki lebar yang sama
|
Font
Keluarga
Keluarga font teks yang dibuat
dengan properti font-family.
Properti font-keluarga harus
terus beberapa nama font sebagai sistem “fallback”. Jika browser tidak
mendukung font pertama, ia mencoba font berikutnya.
Mulailah dengan font yang Anda
inginkan, dan diakhiri dengan sebuah keluarga generik, agar browser memilih
font yang sama dalam keluarga generik, jika tidak ada font lain yang tersedia.
Catatan: Jika nama keluarga font yang
lebih dari satu kata, itu harus dalam tanda kutip, seperti font-family : “Times
New Roman”
Lebih dari satu keluarga font yang
ditentukan dalam daftar dipisahkan-koma :
contoh :
p{font-family:”Times New Roman”,
Times, serif;}
Font
Style
Properti font-style banyak
digunakan untuk menentukan teks miring.
Properti ini memiliki tiga nilai:
- normal – Teks ditampilkan
biasanya
- miring – Teks ditampilkan dalam
huruf miring
- miring – teks ini “condong”
(miring sangat mirip dengan miring, tapi kurang didukung)
Contoh :
p.normal {font-style: normal;}
p.italic {font-style: italic;}
p.oblique {font-style: miring;}
Ukuran
Font
Properti font-size set ukuran
teks.
Mampu mengatur ukuran teks adalah
penting dalam desain web. Namun, Anda tidak harus menggunakan penyesuaian
ukuran font untuk membuat paragraf terlihat seperti pos, atau pos tampak
seperti paragraf.
Selalu gunakan tag HTML yang tepat,
seperti :
<h1> – <h6> untuk
heading dan paragraf <p>
Nilai font-size bisa menjadi ukuran absolut,
atau relatif .
Absolute Ukuran : Mengatur teks ke ukuran
tertentu
Tidak memungkinkan pengguna untuk mengubah ukuran teks dalam semua browser
(buruk karena alasan aksesibilitas)
Ukuran absolut berguna ketika ukuran fisik dari output diketahui
Ukuran Relatif : Mengatur ukuran relatif
terhadap elemen sekitarnya
Memungkinkan pengguna untuk mengubah ukuran teks di browser
Jika Anda tidak menetapkan ukuran font, ukuran standar untuk teks normal,
seperti paragraf, adalah 16px (16px = 1em)
Mengatur
Ukuran Font dengan Pixel
Mengatur ukuran teks dengan
piksel, memberi Anda kontrol penuh atas ukuran teks :
Contoh :
h1 {font-size: 40px;}
h2 {font-size: 30px;}
p {font-size: 14px;}
Catatan : contoh di atas memungkinkan
Firefox, Chrome, dan Safari untuk mengubah ukuran teks, tapi tidak Internet
Explorer.
Mengatur Ukuran
Font dengan Em
Untuk menghindari masalah ukuran
dengan Internet Explorer, banyak pengembang menggunakan em daripada
piksel.
Unit ukuran em
direkomendasikan oleh W3C.
1em sama dengan ukuran font saat
ini. Ukuran teks default di browser adalah 16px. Jadi, ukuran default
1em adalah 16px.
Ukuran dapat dihitung dari piksel
untuk mereka dengan menggunakan rumus ini: piksel / 16 = em
Contoh :
h1 {font-size: 2.5em;} / * 40px/16 =
2.5em * /
h2 {font-size: 1.875em;} / * 30px/16 = 1.875em * /
p {font-size: 0.875em;} / * 14px/16 = 0.875em * /
Catatan : Dalam contoh di atas, ukuran
teks dalam mereka adalah sama dengan contoh sebelumnya dalam pixel. Namun,
dengan ukuran mereka, adalah mungkin untuk menyesuaikan ukuran teks dalam semua
browser.
Sayangnya, masih ada masalah dengan IE. Ketika
mengubah ukuran teks, menjadi lebih besar dari seharusnya jika dibuat lebih
besar, dan lebih kecil dari yang seharusnya bila dibuat lebih kecil.
Gunakan Kombinasi Persen dan
Em
Solusi yang bekerja di semua
browser, adalah untuk mengatur default font-size dalam persen untuk elemen body
:
Contoh :
body {font-size: 100%;}
h1 {font-size: 2.5em;}
h2 {font-size: 1.875em;}
p {font-size: 0.875em;}
Catatan : Kode Anda sekarang bekerja besar! Ini
menunjukkan ukuran teks yang sama di semua browser, dan
memungkinkan semua browser untuk memperbesar atau mengubah
ukuran teks !
Tutorial CSS
ID dan Class
Selector
id digunakan untuk menentukan style
untuk elemen tunggal yang unik . Id pemilih menggunakan atribut id elemen HTML,
dan didefinisikan dengan “#“. Aturan style bawah ini akan diterapkan pada
elemen dengan id = “para1″
#para1
{
text-align:center;
color:red;
}
nb: JANGAN memulai id dengan
menggunakan nomor karena ini tidak akan bekerja pada Mozilla Firefox
Selector class digunakan untuk menentukan gaya
untuk sekelompok elemen. Berbeda dengan pemilih id, kelas pemilih yang paling
sering digunakan pada beberapa elemen . Dengan ini memungkinkan anda untuk
menentukan gaya dan elemen HTML dengan class yang sama .
Selector Class menggunakan atribut
class HTML, dan didefinisikan dengan “.”
Pada contoh di bawah ini, semua
elemen HTML dengan class = “center”akan dibuat rata tengah :
.center {text-align:center;}
kita juga dapat menentukan bahwa
hanya elemen HTML tertentu yang dipengaruhi oleh kelas.
Pada contoh di bawah, elemen p semua
dengan class = “center”akan di buat rata tengah :
p.center {text-align:center;}
nb: JANGAN memulai nama kelas
dengan angka karena ini hanya didukung di Internet Explorer.
Tutorial
Menggunakan CSS
Tiga Cara
untuk Insert CSS :
1. Eksternal style sheet
merupakan ideal ketika gaya diterapkan pada banyak halaman , dengan ini anda
dapat mengubah tampilan seluruh situs Web dengan mengubah satu file.
Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag
<link> masuk ke dalam bagian kepala
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
dengan eksternal style sheet dapat
ditulis dalam bentuk editor teks apapun , dan harus disimpan pada
ekstensi css . sebuah contoh dari file style sheet dibawah ini :
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
nb: JANGAN meninggalkan
ruang antara nilai properti dan satuan! “margin-left: 20 px” (bukan
“margin-left: 20px”) akan bekerja di IE, tapi tidak di Firefox atau Opera.
2. Internal style sheet
merupakan dokumen tunggal html harus digunakan apabila dokumen tunggal html
memiliki gaya yang unik . XDi bagian ke[pala html anda dapat mendefinisikan
gaya internal dengan menggunakan tag style seperti ini :
<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>
3. Inline style
gaya inline dengan mencampurkan konten dengan presentasi akan banyak kehilangan
keuntungan , maka anda dapat menggunakan metode hemat dibawah ini :
Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang
relevan. Atribut style dapat berisi properti CSS. berikut contoh bagaimana
mengubah warna dan margin kiri paragraf :
<p
style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
4. Multiple Style Sheet
Jika beberapa properti telah
ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda maka
nilai-nilai akan diwariskan dari style sheet lebih spesifik.
contoh style sheet eksternal untuk
pemilih h3 :
h3
{
color:red;
text-align:left;
font-size:8pt;
}
contoh style sheet internal untuk
pemilih h3 :
h3
{
text-align:right;
font-size:20pt;
}
Jika halaman dengan internal style
sheet link ke style sheet eksternal properti untuk h3 akan menjadi:
color:red;
text-align:right;
font-size:20pt;
Warna diwariskan dari style sheet
eksternal dan teks-alignment dan ukuran font diganti oleh internal style sheet.
Beberapa
Styles Akan Cascade ke Satu :
gaya dapat ditentukan :
- didalam sebuah elemen HTML
- didalam bagian kepala halaman
HTML
- didalam sebuahj file CSS
eksternal
Secara umum kita dapat mengatakan
bahwa semua gaya akan “cascade” menjadi lembaran baru “virtual” gaya oleh
aturan berikut, di mana nomor empat memiliki prioritas tertinggi:
- Internal style sheet (di bagian
kepala)
- Inline style (di dalam elemen
HTML)
Jadi gaya inline yang ada di dalam
elemen HTML memiliki prioritas tertinggi , yang berarti bahwa ia akan menimpa
gaya yangb didefinisikan di dalam tag <head>, atau dalam style sheet
eksternal , atau dalam browser (nilai default).
nb: Jika link ke style
sheet eksternal ditempatkan setelah style sheet internal di <head> HTML,
style sheet eksternal akan menimpa style sheet internal!
CSS Styling
Links
CSS Links
Styling Links
Link dapat ditata dengan CSS
properti (misalnya warna, font-keluarga, latar
belakang, dll).
Khusus untuk link adalah
bahwa mereka bisa ditata berbeda tergantung pada apa
negaramereka masuk
Empat link negara adalah:
- a: link
– link, yang normal belum dikunjungi
- a: visited –
link pengguna telah dikunjungi
- a: hover –
link ketika pengguna mouse di atasnya
- a: active- link saat
itu diklik
contoh :
a:
link {color: # FF0000;} / * belum
dikunjungi link yang * /
a:
visited {color: # 00FF00;} / * mengunjungi link
yang * /
a:
hover {color: # FF00FF;} / * mouse Link * /
a: active{color: # 0000FF;} / * link yang
dipilih * /
Catatan :
Bila pengaturan gaya
untuk beberapa link yang menyatakan, ada beberapa
aturan untuk:
- a:
hover HARUS datang setelah: link dan a: visited
- a: active
HARUS datang setelah a: hover
Common
Link Styles
Dalam contoh di atas warna
link berubah tergantung pada apa negara itu masuk
Mari kita pergi
melalui beberapa cara umum lainnya untuk link gaya:
Teks Dekorasi
Properti text-decoration banyak
digunakan untuk menghapus menggarisbawahi dari link:
contoh :
a: link {text-decoration:
none;}
a: visited {text-decoration: none;}
a: hover {text-decoration: underline;}
a: active {text-decoration: underline;}
Warna
Latar Belakang
Properti background-color menetapkan warna latar
belakang untuk link :
contoh :
a:
link {background-color: # B2FF99;}
a: visited {background-color: # FFFF85;}
a: hover {background-color: # FF704D;}
a: active {background-color: # FF704D;}
Tutorial CSS
Tampilan dan Visibilitas
Properti menentukan tampilan dari
atau bagaimana elemen ditampilkan, dan properti visibilitas menentukan jika
suatu elemen akan terlihat atau disembunyikan.
Menyembunyikan
sebuah Elemen – display: none atau visibility: hidden
Menyembunyikan elemen dapat dilakukan
dengan menyetel properti layar untuk “none” atau properti visibilitas untuk
“tersembunyi”. Namun, perhatikan bahwa kedua metode menghasilkan hasil yang
berbeda:
visibility: hidden menyembunyikan
elemen, tetapi masih akan mengambil ruang yang sama seperti sebelumnya. Unsur
akan disembunyikan, tapi masih mempengaruhi tata letak.
h1.hidden {visibility:hidden;}
display: none menyembunyikan elemen,
dan tidak akan mengambil ruang apapun. Unsur akan disembunyikan, dan halaman
akan ditampilkan sebagai elemen yang tidak ada:
h1.hidden {display:none;}
Tampilan
CSS – Blok dan Elemen Inline
Sebuah elemen blok merupakan elemen
yang mengambil lebar penuh yang tersedia, dan memiliki satu baris sebelum dan
setelah itu.
Contoh unsur-unsur blok:
Sebuah elemen inline hanya
membutuhkan sebagai lebar sebanyak yang diperlukan, dan tidak memaksa jeda
baris.
Contoh elemen inline:
Bagaimana
Mengubah sebuah Elemen Tampilkan ?
Mengubah elemen inline untuk suatu
elemen blok, atau sebaliknya, dapat berguna untuk membuat halaman terlihat
dengan cara tertentu, dan masih mengikuti standar web.
Contoh berikut menampilkan daftar
item sebagai elemen inline:
li {display:inline;}
Contoh berikut akan menampilkan
rentang unsur sebagai unsur-unsur blok:
span {display:block;}
Catatan: Mengubah jenis tampilan
elemen perubahan hanya bagaimana elemen ditampilkan, BUKAN apa jenis elemen
itu. Sebagai contoh: Sebuah elemen inline diatur untuk menampilkan: blok tidak
diperbolehkan untuk memiliki elemen blok bersarang di dalamnya.
Bagaimana untuk menampilkan elemen
sebagai elemen inline ?
Contoh ini menunjukkan bagaimana menampilkan elemen sebagai elemen
inline.Bagaimana untuk menampilkan elemen sebagai elemen blok ?
Contoh ini menunjukkan bagaimana menampilkan elemen sebagai elemen blok.Cara
membuat jatuhnya elemen tabel
Contoh ini menunjukkan bagaimana membuat sebuah keruntuhan elemen tabel.
Tutorial CSS
List
List
(Daftar)
Dalam
HTML, ada dua jenis List (daftar)
- Daftar unordered – daftar item ditandai
dengan.
- Memerintahkan daftar – daftar
item ditandai dengan angka atau huruf
Dengan CSS, daftar bisa ditata lebih
lanjut, dan gambar dapat digunakan sebagai penanda item daftar ..
Daftar
Item Penanda yang Berbeda
Jenis penanda daftar item dispesifikasikan
dengan daftar properti-gaya-tipe :
ul.a {daftar-style-type: lingkaran;}
ul.b {daftar-style-type: persegi;}
ol.c {daftar-style-type:
atas-Romawi;}
ol.d {daftar-style-type: rendah-alpha;}
Beberapa nilai adalah untuk daftar
unordered, dan beberapa memerintahkan untuk daftar.
Sebuah
Gambar sebagai Daftar Item
Untuk menentukan gambar sebagai
penanda item daftar, gunakan daftar properti-gaya-gambar :
ul
{
daftar-gaya-image: url (‘sqpurple.gif’);
}
Contoh di atas tidak menampilkan sama di
semua browser. IE dan Opera akan menampilkan gambar-penanda sedikit lebih
tinggi dibandingkan Firefox, Chrome, dan Safari.
Jika Anda ingin gambar-penanda untuk
ditempatkan sama di semua browser, solusi crossbrowser dijelaskan di bawah ini.
Solusi
Crossbrowser
Contoh berikut menampilkan
gambar-penanda yang sama di semua browser:
ul
{
daftar-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url (sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
Contoh
Penjelasan :
Untuk ul:
Mengatur daftar-gaya-tipe tidak ada untuk menghapus item daftar penanda
Mengatur padding dan margin baik untuk 0px (untuk cross-browser
kompatibilitas)
Untuk li:
Mengatur URL gambar, dan menunjukkan hanya sekali (no-repeat)
Posisi gambar di mana Anda inginkan (kiri 0px 5px dan ke bawah)
Posisi teks dalam daftar dengan padding-left
Daftar –
Properti Singkatan
Hal ini juga dimungkinkan untuk
menentukan semua properti daftar dalam satu, properti tunggal. Hal ini disebut
properti steno.
Properti yang digunakan untuk daftar singkatan, adalah daftar properti gaya:
ul
{
daftar-gaya: url persegi (“sqpurple.gif”);
}
Bila menggunakan properti singkatan,
urutan nilai-nilai adalah:
- Daftar-gaya-posisi (untuk
deskripsi, lihat tabel CSS properti di bawah ini)
Tidak masalah jika salah satu nilai
di atas yang hilang, selama sisanya berada di urutan yang ditentukan.r
Tutorial CSS
Bergaris.
CSS
Garis.
Garis besar adalah garis yang
ditarik sekitar elemen, di luar tepi perbatasan, untuk membuat elemen
“menonjol”.
Sifat-sifat garis menentukan gaya, warna, dan lebar garis besar.
Namun, berbeda dari properti
perbatasan.
Outline ini bukan merupakan bagian dari dimensi elemen, oleh karena itu lebar
elemen dan sifat ketinggian tidak mengandung lebar garis.
Semua Garis Properti CSS.
Nomor dalam kolom “CSS” menunjukkan di mana CSS versi properti didefinisikan
(CSS1 atau CSS2).
Property
|
Deskripsi
|
Nilai
|
CSS
|
|
|
Mengatur semua properti dalam satu
deklarasi garis
|
outline-color
outline-style
outline-width
inherit
|
2
|
|
|
Mengatur warna garis besar
|
color_name
hex_number
rgb_number
invert
inherit
|
2
|
|
|
Mengatur gaya suatu garis
|
none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
|
2
|
|
|
Mengatur lebar garis besar
|
thin
medium
thick
length
inherit
|
|
Tutorial CSS
Margin (Batas).
CSS
Margin.
Margin membersihkan area di sekitar
sebuah elemen (luar perbatasan). Margin tidak memiliki warna latar belakang,
dan benar-benar transparan.
Margin atas, kanan, bawah, dan kiri dapat diubah secara independen menggunakan
properti terpisah. Sebuah properti margin singkatan juga dapat digunakan, untuk
mengubah semua margin sekaligus.
Kemungkinan
Nilai Margin.
Value
|
Description
|
auto
|
Browser menetapkan margin.
Hasil ini tergantung dari browser.
|
length
|
Mendefinisikan margin tetap (dalam
pixel, pt, em, dll).
|
%
|
Mendefinisikan margin dalam% dari
elemen yang mengandung.
|
Hal ini dimungkinkan untuk
menggunakan nilai-nilai negatif, untuk tumpang tindih konten.
Margin – sisi individu
Dalam CSS, adalah mungkin untuk menentukan margin yang berbeda untuk sisi yang
berbeda:
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Margin – Singkatan properti.
Untuk mempersingkat kode, adalah mungkin untuk menentukan semua properti margin
dalam satu properti. Hal ini disebut properti steno.
Properti singkat untuk semua properti “margin”:
margin:100px 50px;
Properti margin yang dapat memiliki
dari satu sampai empat nilai.
- margin:25px 50px 75px 100px;
- right and left margins are
50px
- top and bottom margins are
25px
- right and left margins are
50px
- all four margins are 25px
