Nulis-Ilmu.com

Tutorial Elektronika dan Komputer

  • Home
  • Elektronika
  • Komputer
  • Javascript

Tutorial CSS Part 7: Mengatur Style List (OL dan UL)

17 Desember 2014 By Eko Purnomo

mengatur style list

Kita bisa mengatur style list pada ordered lists(ol) dan unordered lists(ul) dengan CSS. Ada beberapa properti yang disediakan seperti untuk mengatur tanda item list pada ordered lists dan unordered lists dan membuat tanda item list ordered lists dan unordered lists dengan gambar. Selain itu kita juga bisa mengatur penempatan tanda list pada oldan ul.

Sebelumnya perlu diingat kembali tentang List pada HTML ada dua, yaitu ordered lists dan unordered lists. Ordered lists adalah list dengan tanda item list berupa angka atau huruf sedangkan unordered lists adalah list dengan tanda item list berupa bullet/dot.

Ada dua cara dalam mengatur tampilan list OL dan UL dengan CSS, yaitu mengatur tampilan list dengan menggunakan properti list-style-type dan list-style-image.

1. list-style-type

Adalah properti CSS yang digunakan untuk mengatur tampilan tanda list UL dan OL menggunakan library dari CSS. Ada beberapa model yang bisa dipilih seperti circle (lingkaran) atau square (kotak) untuk tampilan unordered lists dan upper-roman atau lower-alpha untuk tampilan ordered lists.

Contoh penggunaan CSS list-style-type untuk ordered lists(ol) :

ul.x {
list-style-type: circle;
}

ul.y {
list-style-type: square;
}

Contoh penggunaan CSS list-style-type untuk unordered lists(ul) :

ol.x {
list-style-type: upper-roman;
}

ol.y {
list-style-type: lower-aplha;
}

Kita bisa berlatih CSS list-style-type disini >>

Berikut ini beberapa model yang bisa dipilih untuk tampilan ordered lists(ol) dan unordered lists(ul)

Value Deskripsi
disc tanda default, bertanda lingkaran berisi warna hitam penuh.
armenian tanda penomoran tradisional armenian.
circle tanda lingkaran tanpa isi.
cjk-ideographic tanda nomor ideographic.
decimal tanda nomor biasa.
decimal-leading-zero tanda desimal dengan leading angka seperti 01,02,03 dan seterusnya.
georgian tanda penomoran tradisional georgian.
hebrew tanda penomoran tradisional yahudi.
hiragana tanda penomoran tradisional hiragana.
hiragana-iroha tanda penomoran tradisional hiragana-iroha.
katakana tanda penomoran tradisional katakana.
katakana-iroha tanda penomoran tradisional katakana-iroha.
lower-alpha tanda huruf kecil biasa.
lower-greek tanda huruf kecil yunani.
lower-latin tanda huruf kecil latin.
lower-roman tanda angka romawi kecil.
none tanpa tanda atau tanpa tanda list.
square tanda kotak.
upper-alpha tanda huruf besar biasa.
upper-latin tanda huruf besar latin.
upper-roman tanda angka romawi besar.

2. list-style-image

Adalah properti CSS yang digunakan untuk mengatur tampilan tanda list UL dan OL menggunakan gambar.

Contoh penggunaan CSS list-style-image :

 ul {  
list-style-type: none;
padding: 0px;
margin: 0px;
}

ul li {
background-image: url(dot.gif);
background-repeat: no-repeat;
background-position: 0px center;
padding-left: 15px;
}

Kita bisa berlatih CSS list-style-image disini >>

3. list-style-position

Adalah properti CSS yang digunakan untuk mengatur penempatan tanda list pada UL dan OL. Posisi tanda bisa ditaruh didalam list atau diluar list. Untuk didalam list diberi nilai inside dan diluar list diberi nilai outside.

Contoh penggunaan CSS list-style-position :

 ul {  
list-style-position: inside;
}

Kita bisa berlatih CSS list-style-position disini >>

2. list-style

Adalah properti CSS yang digunakan untuk mengatur tampilan tanda list UL dan OL dengan penulisan secara singkat yang mencakup keseluruhan properti diatas.

Contoh penggunaan CSS list-style :

ul {
list-style: circle inside url("dot.gif");
}

Kita bisa berlatih CSS list-style disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

  • //www.w3schools.com/css/css_list.asp
  • //www.w3schools.com/cssref/pr_list-style-type.asp
  • //www.w3schools.com/cssref/pr_list-style-position.asp

Filed Under: CSS

Tutorial CSS Part 6: Mengatur Tampilan Link dan Kondisinya

15 Desember 2014 By Eko Purnomo

css mengatur tampilan link

Link adalah sebuah tautan yang bisa menghubungkan kita ke halaman lain. Secara default biasanya tampilan link dibuat bergaris bawah (underline). Namun dengan CSS kita bisa mengatur tampilan link dengan beberapa properti pada text seperti color, font-family, font-size dan lain-lain. Selain itu kita juga biasa mengatur background dengan CSS untuk mengatur background seperti background-color.

Contoh penggunaan CSS untuk link :

a {
color: blue;
}

Selain mengatur tampilan link, kita juga bisa membuat tampilan berbeda-beda untuk tiap kondisi link. Untuk menyatakan kondisi sebuah link kita menggunakan tanda titikdua (:) setelah tag link a. Dan deklarasi CSS ditulis setelah kondisi dengan cara seperti penulisan deklarasi CSS pada umumnya.

Ada empat kondisi link yang bisa dibuat CSS-nya, yaitu :

  • a:link, yaitu link dalam kondisi normal, belum dikunjungi
  • a:visited, yaitu link yang sudah dikunjungi
  • a:hover, yaitu kondisi link saat mouse mengenai link/mouse berada diatas link tapi belum diklik.
  • a:active, yaitu kondisi link pada saat diklik.

Contoh penggunaan CSS untuk beberapa kondisi link :

1. Link dalam kondisi normal

a {
color: blue;
}

2. Link telah dikunjungi (Visited)

a:visited {
color: green;
}

3. Link saat ada mouse diatasnya (Hover)

a:hover {
color: red;
}

4. Link saat diklik

a:active {
color: yellow;
}

Kita bisa berlatih CSS link disini >>

Penting dalam menulis CSS untuk beberapa kondisi Link

Saat penulisan CSS untuk beberapa kondis link harus memperhatikan urutan. Yaitu hover harus ditulis setelah link dan visited, kemudian active harus ditulis setelah hover.

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

  • //www.w3schools.com/css/css_link.asp

Filed Under: CSS

Tutorial CSS Part 5: Mengatur Font

14 Desember 2014 By Eko Purnomo

Font adalah sekumpulan bentuk huruf pada komputer. Ada banyak jenis font yang bisa kita pakai dan beragam bentuknya. CSS menyediakan beberapa properti untuk mengatur font pada halaman html. Beberapa properti yang bisa digunakan adalah mengatur famili font, ukuran font, style font, varian font dan ketebalan font.

Berikut ini properti untuk font dan penjesannya :

1. font-family

Adalah properti CSS yang digunakan untuk mengeset nama font yang digunakan pada elemen html. Pada CSS terdapat dua cara mendeskripsikan font-family yaitu dengan nama generic dan nama family.

Generic font ada tiga jenis, yaitu :

  • Serif, adalah jenis font yang memiliki akhiran garis kecil pada huruf
  • Sans-serif, adalah jenis font tanpa akhiran garis kecil pada huruf. Kata Sans-berarti tanpa.
  • Monospace, adalah jenis font yang mempunyai lebar yang sama untuk tiap-tiap huruf.

Sedangkan nama family font ada banyak sekali seperti font-font yang biasa kita pakai saat membuat dokumen melalui ms word atau libre office writer. Namun font-font ini bisa dikelompokkan kedalam tiga nama generic tadi.

Contoh pengelompokan font family :

  • Times New Roman, Georgia , termasuk kelompok Serif
  • Arial, Verdana , termasuk kelompok Sans-Serif
  • Courier New, Lucida Console, termasuk kelompok Monospace.

Contoh penggunaan CSS font-family :

body {
font-family: "Times New Roman", Times, serif;
}

Kita bisa berlatih CSS font-family disini >>

2. font-style

Adalah properti CSS yang digunakan untuk mengatur style font seperti cetak miring-italic, cetak miring-oblique atau normal. Normal berarti font ditampilkan secara normal tanpa style italic atau oblique.

Sekilas antara italic dan oblique tidak ada perbedaan. Style italic berarti mengambil font-family italic, jadi sudah miring dari asalnya. Sedangkan style oblique mengambil font-family true type lalu di tampilkan miring (condong). Pada beberapa font, penggunaan style oblique akan diperoleh kemiringan font yang lebih baik.

Contoh penggunaan CSS font-style :

p {
font-style: italic;
}

Kita bisa berlatih CSS font-style disini >>

3. font-size

Adalah properti CSS yang digunakan mengatur ukuran font. Ada beberapa jenis satuan ukuran font yang bisa dipakai misalnya px (pixel) dan em.

Ada dua cara dalam menentukan ukuran font, yaitu absolute size dan relative size. Absolute size berarti mengeset ukuran font pada ukuran tertentu dan tidak mengijinkan user untuk mengubahnya, pada semua browser. Sedangkan relative adalah mengeset ukuran font kepada elemen sekitarnya. Relative font mengijinkan user mengubah ukuran font pada browser.

Contoh penggunaan CSS font-size secara absolute dengan pixel :

h1 {
font-size: 16px;
}

Kita bisa berlatih CSS font-size absolute dengan pixel disini >>

Contoh penggunaan CSS font-size secara relative dengan em :

h1 {
font-size: 1em;
}

Note : 
Ukuran em mengacu pada ukuran font current pada browser, yaitu sebesar 16px. namun ukuran em mengijinkan browser untuk mengubah ukuran font dengan setting default font pada browser. penggunaan em lebih direkomendasikan dan banyak dipakai oleh beberapa developer web.

Kita bisa berlatih CSS font-size absolute dengan em disini >>

4. font-weight

Adalah properti CSS yang digunakan untuk mengatur ketebalan font. Secara default, font weight akan diset normal. Nilai properti font-wight bisa diset normal, bold, bolder, lighter atau dengan angka seperti 100, 200 dan seterusnya.

Contoh penggunaan CSS font-weight :

p {
font-weight: bold;
}

Kita bisa berlatih CSS font-weight disini >>

5. font-variant

Adalah properti CSS yang digunakan untuk mengatur varian font, seperti normal atau small caps. Dengan small caps akan membuat membuat lowercase menjadi uppercase. Selain itu juga bisa diset dengan nilai initial atau inherit.

Contoh penggunaan CSS font-variant :

p {
font-variant: small-caps;
}

Kita bisa berlatih CSS font-variant disini >>

6. font

Adalah properti CSS yang merupakan penggabungan dari beberapa properti. Penggunaan properti font akan meringkas penulisan CSS font.

Contoh penggunaan CSS font :

p {
font: italic bold 12px arial, sans-serif;
}

Kita bisa berlatih CSS font disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

  • //www.w3schools.com/css/css_font.asp

Filed Under: CSS

Tutorial CSS Part 4: Memformat Teks

14 Desember 2014 By Eko Purnomo

CSS menyediakan properti yang cukup lengkap dalam memformat teks. Mulai dari mengatur warna teks, posisi teks, dekorasi teks dan sebagainya dapat disetting melalui CSS. Selain itu kita juga bisa mentransformasikan teks dan mengatur spasi antar huruf dan kata pada teks melalui CSS. Bahkan mengatur arah teks (text direction) juga bisa dilakukan dengan CSS.

Ada 13 properti yang bisa digunakan untuk memformat teks, yaitu color, text-align, text-decoration, text-transform, text-indent, text-shadow, letter-spacing, word-spacing, line-height, vertical-align, white-space, direction dan unicode-bidi.

    Berikut ini penjelasan masing-masing properti tersebut :

    1. color

    Adalah Adalah properti CSS yang digunakan untuk memformat warna teks.

    Ada tiga cara dalam menentukan nilai warna, yaitu :

    • menggunakan nama warna seperti red, blue, green dan sebagainya
    • menggunakan kode heksa warna seperti #ff0000 untuk warna merah dan #0000ff untuk warna biru, dan seterusnya.
    • menggunakan nilai RGB seperti rgb(255,0,0) untuk warna merah, rgb(0,0,255) untuk warna biru dan seterusnya.

    Contoh penggunaan CSS color :

    body {
    color: #e0ffff;
    }

    Kita bisa berlatih CSS color disini >>

    2. text-align

    Adalah properti CSS yang digunakan untuk mengatur alignment text horizontal. Alignment teks bisa diset left, right, center dan justify.

    Left berarti teks rata kiri, right berarti rata kanan, center berarti rata tengah dan justify berarti rata kiri kanan.

    Contoh penggunaan CSS text-align :

    p {
    text-align: center;
    }

    Kita bisa berlatih CSS text-align disini >>

    3. text-decoration

    Adalah properti CSS yang digunakan untuk mengeset dan membuang dekorasi teks.

    Ada empat nilai yang bisa ditetapkan pada properti text-decoration, yaitu :

    • none, berfungsi membuang semua dekorasi teks.
    • underline, berfungsi membuat teks bergaris bawah.
    • line-through, berfungsi membuat teks bergaris tengah
    • overline, berfungsi membuat teks bergaris atas.

    Contoh penggunaan CSS text-decoration :

    a {
    text-decoration: underline;
    }

    Kita bisa berlatih CSS text-decoration disini >>

    4. text-transform

    Adalah properti CSS yang digunakan untuk mentransformasi huruf pada teks.

    Ada 3 nilai yang bisa ditetapkan pada properti text-transform, yaitu :

    • uppercase, berfungsi mengubah semua huruf menjadi huruf besar
    • lowercase, berfungsi mengubah semua huruf menjadi huruf kecil
    • capitalize, berfungsi mengubah huruf paertama pada setiap kalimat menjadi huruf besar.

    Contoh penggunaan CSS text-transform :

    .besar {
    text-transform: uppercase;
    }

    Kita bisa berlatih CSS text-transform disini >>

    5. text-indent

    Adalah properti CSS yang digunakan untuk mengatur posisi menjorok sebuat teks (inden teks)

    Contoh penggunaan CSS text-transform :

    p {
    text-indext: 50px;
    }

    Kita bisa berlatih CSS text-indent disini >>

    6. text-shadow

    Adalah properti CSS yang digunakan untuk membuat efek bayangan pada teks.

    Contoh penggunaan CSS text-shadow :

    h1 {
    text-shadow: 1px 1px #ff6a54;
    }

    Kita bisa berlatih CSS text-shadow disini >>

    7. letter-spacing

    Adalah properti CSS yang digunakan untuk mengatur jarak antar huruf pada teks.

    Contoh penggunaan CSS letter-spacing :

    h1 {
    letter-spacing : 2px;
    }

    Kita bisa berlatih CSS letter-spacing disini >>

    8. word-spacing

    Adalah properti CSS yang digunakan untuk mengatur jarak antar kata pada teks.

    Contoh penggunaan CSS word-spacing :

    h1 {
    word-spacing : 2px;
    }

    Kita bisa berlatih CSS word-spacing disini >>

    9.line-height

    Adalah properti CSS yang digunakan untuk mengatur tinggi tiap baris teks.

    Contoh penggunaan CSS line-height :

    p {
    line-height : 150%;
    }

    Kita bisa berlatih CSS line-height disini >>

    10.vertical-align

    Adalah properti CSS yang digunakan untuk mengatur alignment sebuah elemen pada teks. Nilai properti ini bisa diset text-top yaitu elemen rata atas dengan teks atau text-bottom yaitu elemen rata bawah dengan teks. Secara default vertical-align diset text-bottom.

    Contoh penggunaan CSS vertical-align :

    img {
    vertical-align : text-top;
    }

    Kita bisa berlatih CSS vertical-align disini >>

    11.white-space

    Adalah properti CSS yang digunakan untuk menetapkan aksi penanganan terhadap white space sebuah teks. NIlai properti white-space bisa diset wrap dan nowrap. Secara default white-space akan ditangani dengan cara nowrap.

    Contoh penggunaan CSS white-space :

    p {
    white-space : wrap;
    }

    Kita bisa berlatih CSS white-space disini >>

    12. direction

    Adalah properti CSS yang digunakan untuk mengatur arah penulisan teks. Arah penulisan diisi ltr (left to right) atau rtl (right to left). Secara default arah penulisan adalah ltr yaitu dari kiri ke kanan.

    Contoh penggunaan CSS direction :

    h1 {
    direction : rtl;
    }

    Kita bisa berlatih CSS direction disini >>

    13. unicode-bidi

    Adalah properti CSS yang digunakan untuk mengatur bidirectional unicode karakter pada teks. unicode-bidi biasanya digunakan sepasang dengan CSS direction.

    Contoh penggunaan CSS unicode-bidi:

    h1 {
    direction : rtl;
    unicode-bidi: bidi-override;
    }

    Kita bisa berlatih CSS unicode-bidi disini >>

    Lihat indeks artikel Tutorial CSS Dasar >>

    Referensi :

    • //www.w3schools.com/css/css_text.asp

    Filed Under: CSS

    Tutorial CSS Part 3: Mengatur Background

    14 Desember 2014 By Eko Purnomo

    mengatur background dengan css

    Background adalah latar belakang elemen pada halaman html. Background bisa diterapkan pada body (keseluruhan halaman) atau bisa diterapkan untuk elemen yang lebih kecil seperti paragraf atau bahkan untuk satu teks atau satu huruf saja. Background bisa berupa warna tunggal atau berupa gambar (image).

    Ada enam properti yang bisa digunakan untuk mengatur background, yaitu :

    1. background-color,
    2. background-image
    3. background-repeat
    4. background-position
    5. background-attachment
    6. background (penggabungan beberapa properti dalam satu deklarasi)

    Dan berikut ini penjelasan masing-masing properti tersebut.

    1. background-color

    Adalah properti CSS yang digunakan untuk mengatur warna background.

    Ada tiga cara dalam menentukan nilai warna, yaitu :

    • menggunakan nama warna seperti red, blue, green dan sebagainya
    • menggunakan kode heksa warna seperti #ff0000 untuk warna merah dan #0000ff untuk warna biru, dan seterusnya.
    • menggunakan nilai RGB seperti rgb(255,0,0) untuk warna merah, rgb(0,0,255) untuk warna biru dan seterusnya.

    Contoh penggunaan CSS background-color :

    body {
    background-color: #e0ffff;
    }

    Kita bisa berlatih CSS background-color disini >>.

    2. background-image

    Adalah properti CSS yang digunakan untuk mengatur background berupa gambar (image). File gambar yang akan diterapkan pada background ditulis pada atribut URL. Secara default, gambar akan ditampilkan secara berulang secara horisontal dan vertikal untuk memenuhi area elemen yang ditetapkan.

    Contoh penggunaan CSS background-image :

    body {
    background-image: url("bg.gif");
    }

    Kita bisa berlatih CSS background-image disini >>.

    3. background-repeat

    Adalah properti CSS yang digunakan untuk mengatur perulangan background-image. Secara default, background-image akan diulang secara vertikal dan horizontal.

    Dengan CSS background-repeat ini kita bisa mengatur perulangan dengan beberapa nilai sebagai berikut :

    • no-repeat, artinya background image tidak akan di ulang.
    • repeat-x, artinya background image akan diulang secara horizontal
    • repeat-y, artinya background image akan diulang secara vertikal.

    Contoh penggunaan CSS background repeat :

    body {
    background-image: url("bg.gif");
    background-repeat: repeat-x;
    }

    Kita bisa berlatih CSS background-repeat disini >>.

    4. background-position

    Adalah properti CSS yang digunakan untuk mengatur posisi background image pada elemen html. posisi background image bisa diset left, right, top dan bottom. Salah satu fungsi dari penempatan background image agar tidak mengganggu tampilan teks pada halaman html.

    Contoh penggunaan CSS background-position :

    body {
    background-image: url("bg.gif");
    background-repeat: repeat-x;
    background-position : right top;
    }

    Kita bisa berlatih CSS background-position disini >>.

    5. background-attachment

    Adalah properti CSS yang digunakan untuk mengatur bagaimana background itu disematkan dalam halaman. Apakah fix atau ikut scroll bersama elemen. Secara default properti background-attachment akan diset scroll.

    Ada beberapa nilai yang bisa dipakai untuk backdround-attachment :

    • scroll , background ikut discroll bersama dengan elemen.
    • fixed, background fix jadi saat elemen di scroll, posisi background tetap.
    • local, background ikut discroll bersama dengan isi dari elemen
    • initial, nilai diset sesuai nilai inisial dari elemen diatasnya.
    • inherit, nilai diwarisi dari elemen diatasnya.

    Contoh penggunaan CSS background-attachment :

    body {
    background-image: url("bg.gif");
    background-repeat: repeat-x;
    background-position : right top;
    background-attachment: fixed;
    }

    Kita bisa berlatih CSS background-attachment disini >>.

    6. background

    Adalah properti yang bisa diisi dengan nilai dari kelima properti diatas. Jadi properti background bisa dikatakan sebagai penggabungan dari kelima properti background sebelumnya. Cara ini dipakai untuk mempersingkat penulisan.

    Contoh penggunaan CSS background-attachment :

    body {
    background: #ff00ff url("bg.png") no-repeat right top;
    }

    Pada contoh terlihat ada penumpukan antara background color dan background image. Ini digunakan untuk mencegah kekosongan background jika load image dinon-aktifkan oleh user atau image gagal dimuat karena suatu sebab tertentu. Jadi jika image tidak tampil akan diganti dengan background warna.

    Kita bisa berlatih CSS background disini >>.

    Kesimpulan :

    Yang perlu diperhatikan dalam menerapkan background adalah jangan sampai background membuat teks tidak jelas terbaca.

    Lihat indeks artikel Tutorial CSS Dasar >>

    Referensi :

    • //www.w3schools.com/css/css_background.asp
    • //www.w3schools.com/cssref/pr_background-attachment.asp

    Filed Under: CSS

    Tutorial CSS Part 2: Mengenal Selector Id dan Class

    13 Desember 2014 By Eko Purnomo

    mengenal selector id dan class

    Selector pada CSS berfungsi untuk memilih elemen html yang di-style sesuai dengan deklarasi pada selector tersebut. Pada tulisan sebelumnya kita telah mengenal selector CSS menggunakan elemen-elemen html seperti paragraf (p) dan heading (h1). Selector CSS dengan nama elemen ini juga berlaku untuk elemen yang lain seperti link (a), list (ul dan ol), table dan yang lainnya.

    Kemudian muncul pertanyaan bagaimana jika kita akan menerapkan style yang berbeda untuk elemen yang sama? Misalnya paragraf pertama dibuat margin 10px lalu paragraf kedua dibuat margin 20px. Jawabannya, kita bisa menggunakan selector Id dan Class.

    Menggunakan Selector Id pada CSS

    Selector Id digunakan untuk memilih satu elemen unik pada html. Cara menggunakan selector Id adalah dengan menambahkan attribut id pada elemen html tertentu. Id ini harus unik dalam satu page, jika kita bisa menerapkan CSS kepada satu elemen yang dimaksud (unique element).

    Cara penulisan selector Id

    Untuk menuliskan selector Id kita menggunakan karakter hash (#). Kemudian nama Id ditulis tepat setelah tanda # tanpa spasi. Deklarasi CSS untuk ID ini ditulis diantara kurung kurawal seperti pada selector elemen.

    Kemudian pada elemen html tertentu kita taruh atribut “id” dengan nama yang sama dengan id pada CSS tadi. Atribut id ini juga digunakan untuk pemrograman Javascript, jadi bisa saling pakai Id.

    Contoh penggunaan selector Id

     <html>  
    <head>
    <title>Contoh Selector Id CSS</title>
    </head>

    <style>
    h1 {
    font-size: 20px;
    }

    #top {
    color: red;
    }

    #bottom {
    color: blue;
    }

    </style>

    <body>
    <h1>Contoh Penggunaan Selector Id</h1>
    <p id="top">Paragraf paling atas warna merah</p>
    <p>Paragraf ditengah tidak di-style</p>
    <p id="bottom">Paragraf paling bawah warna biru</p>
    </body>
    </html>

    Pada contoh diatas, kita mempunyai dua buah id, yaitu “top” dan “bottom”. Pada CSS, paragraf dengan id “top” kita buat warna merah dan paragraf dengan id “bottom” kita buat warna biru.

    Kemudian pada tag <p> untuk paragraf paling atas kita tambahkan attribut id=”top” dan pada paragraf paling bawah kita tambahkan atribut id=”bottom”.

    Dan berikut ini hasil tampilan dari contoh penggunaan selector Id diatas :

    contoh penggunaan selector id pada css

    Menggunakan Selector Class pada CSS

    Selector Class digunakan untuk memilih elemen html yang memiliki sifat atau perilaku yang sama dalam satu halaman. Selector Class ini bisa digunakan untuk beberapa elemen dalam satu halaman. Penerapan selector Class sebaiknya memperhatikan kesamaan elemen-elemen pada halaman html.

    Sebagai contoh kita akan menerapkan style pada paragraf yang berada diantara paragraf pertama dan paragraf terakhir pada contoh diatas. Kemudian kita buat class “midle” untuk mendefinisikannya. Jadi setiap paragraf dengan class “midle” akan dikenakan style yang kita buat.

    Cara penulisan selector class

    Penulisan selector class pada CSS diawali dengan huruf titik (.) atau dot. Kemudian nama class ditulis tepat setelah tanda titik. Deklarasi CSS untuk Class ini ditulis diantara kurung kurawal seperti pada selector elemen dan selector id.

    Kemudian pada elemen html tertentu kita taruh atribut “class” dengan nama yang sama dengan nama class pada CSS tadi.

    Contoh penggunaan selector class

     <html>  
    <head>
    <title>Contoh Selector Class CSS</title>
    </head>

    <style>
    h1 {
    font-size: 20px;
    }

    #top {
    color: red;
    }

    #bottom {
    color: blue;
    }

    .midle {
    color: green;
    }

    </style>

    <body>
    <h1>Contoh Penggunaan Selector Id</h1>
    <p id="top">Paragraf paling atas warna merah</p>
    <p class="midle">Paragraf ditengah warna hijau</p>
    <p class="midle">Paragraf ditengah warna hijau</p>
    <p id="bottom">Paragraf paling bawah warna biru</p>
    </body>
    </html>

    Pada contoh diatas kita menambahkan sebuah selector class dengan nama “midle” dan diset dengan warna hijau. Kemudian untuk semua paragraf yang ditengah kita taruh atribut class=”midle”.

    Dan berikut ini hasil tampilan dari contoh penggunaan selector class diatas :

    contoh penggunaan selector class pada css

    Perbedaan selector id dan selector class

    Untuk memahami perbedaan penggunaan selector id dan selector class pada css perlu digaris bawahi bahwa id itu unik dan hanya ada satu dalam satu halaman html. Sedangkan class bisa lebih dari satu yang penting mempunyai kesamaan anta elemen dalam satu class.

    Jika kita sengaja atau tidak sengaja menggunakan id untuk beberapa elemen memang css akan tetap bisa bekerja, namun tetap dianjurkan untuk menggunakan class khususnya jika dalam halaman tersebut juga ada javascript-nya.

    Lihat indeks artikel Tutorial CSS Dasar >>

    Referensi :

    • //www.w3schools.com/cssref/css_selectors.asp

    Filed Under: CSS

    • « Previous Page
    • 1
    • …
    • 40
    • 41
    • 42
    • 43
    • 44
    • …
    • 60
    • Next Page »

    Kategori

    • Android
    • Blogging
    • CSS
    • Desain
    • Elektronika
    • HTML
    • Internet
    • Javascript
    • Komputer
    • Mikrokontroler
    • PHP
    • Website

    Pos-pos Terbaru

    • Rangkaian Adaptor 12 Volt 3 Ampere
    • 10 Aplikasi Transportasi Online Terbaru 2018
    • 3 Cara Screenshot di Laptop Windows
    • Rangkaian Adaptor 12V 35Ampere
    • Komunitas Desainer Kampung Jepara
    • Solder Yang Bagus dan Berkualitas
    • Cara Melewatkan Parameter ke dalam Fungsi pada Bahasa C
    • Parameter Dalam Bahasa C: Formal dan Aktual
    • Prototipe Fungsi dalam Bahasa C
    • Cara Menggunakan Fungsi dalam Bahasa C
    • Home
    • Privacy
    • Disclaimer
    • Kontak

    Copyright © 2024 · Nulis-ilmu.com