Showing posts with label belajar CSS. Show all posts
Showing posts with label belajar CSS. Show all posts

Wednesday

Google Fonts dalam Wordpress

8:22 PM  , , , , , , , , , , ,  No comments


Jika sebelumnya saya telah menerbitkan postingan bagaimana menggunakan dan menampilkan Google Fonts dalam blogger dalam postingan Google Fonts untuk Blogger, sekarang saya akan membahas bagaimana menggunakan Google Fonts tersebut kedalam Wordpress.
Kita tahu bahwa Google memiliki ratusan jenis fonts yang dapat kita gunakan dalam mempercantik tampilan website kita, karena tampilan fonts dalam website kita tentu saja akan mempercantik tampilan website kita.
Keunggulan lainya menggunakan Google Fonts adalah, bahwa koleksi-koleksi fonts tersebut tersimpan dalam server Google yang pastinya ga akan pernah mati, juga load previewnya kenceng.
Dalam Wordpress berbeda dengan Blogger, Wordpress menggunakan semacam Plugin khusus untuk Google Fonts dalam editor HTML nya, Plugin tersebut dapat didownload disini.
Setelah anda mendownload dan menginstalnya, maka akan lansung terkoneksi dengan editor yang tersedia di Wordpress, seperti tampilan dibawah.

Nah, selamat mengotak-atik dan mencoba sendiri sesuka anda. :)


Read More

Sunday

Menggunakan Google Font untuk Blogger

5:03 PM  , , , , , , , , , , ,  No comments

 

Google mempunyai salah satu layanan berupa karakter fonts yang sangat beragam, kita bisa memilih ratusan fonts yang disediakan Google untuk digunakan dalam web atau blog kita.
Langsung saja kita praktek kan, pertama kita kunjungi dulu web Google Fonts.
Setelah masuk, disana kita dapat memilih banyak fonts yang akan kita gunakan untuk mempercantik tampilan web/blog kita.

Setelah kita memilih salah satu, atau kita bisa memilih banyak fonts. klik Quick use dibawah sample font tersebut.
Setelah itu akan muncul kotak dialog berupa kode CSS yang akan kita tempatkan pada blog kita.
Ada 2 kode CSS, pertama kita buka dulu blogger - Rancangan - Edit HTML
cari kode <head> dan taruh kode CSS yang pertama dibawah kode <head> tersebut.
Jangan lupa kita tambahkan / diakhir penulisannya.
Contoh,
<link href='http://fonts.googleapis.com/css?family=Metal+Mania' rel='stylesheet' type='text/css'/>

Setelah itu langsung saja kita gunakan kode CSS yang kedua didalam blog kita, tinggal kita ketik aja dibagian CSS yang kita inginkan,seperti mengedit font biasa.
Contoh,
a {font-family: 'Metal Mania', arial, serif;}
Selain digunakan dalam tautan atau postingan, Google Fonts juga bisa kita gunakan dalam Header,Body,Sidebar dan mana saja, tinggal kita atur dan tempatkan didalam kode HTML blogger kita.

Selamat Mencoba.

Read More

Class dan ID Selector (CSS)

10:26 PM  , , , , ,  No comments

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;}
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>.

Contoh:
Penulisan kode CSS:
.tengah {text-align:center;}

p.tengah {color:red;}

h1.kiri {color:blue;}

h1.tengah {color:black;}
Pemakaian kode CSS
<div class=tengah>

<p>Teks tengah akan berwarna merah.</p>

<h1 > Tag H1 tengah akan berwarna hitam</h1>

</div>

<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
Hasil:
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.

Cara penulisan ID Selector:
#nama-ID {property:value;}
Untuk menempelkan ID selector ke dalam tag HTML:
taghtml#nama-ID {Property:value;}
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>.

Selamat Belajar.

Read More

Implementasi CSS

11:11 AM  , , , , ,  No comments

Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:
  • 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…

Inline CSS

Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS.
Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:
<P style=”color:blue”>

 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.
Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.

Embedded CSS

Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>.
Contoh:
<head>
<style type="text/css" media=screen>
p {color:blue;}
</style>
</head>
Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat  menggunakan font berwarna biru.

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.
Contoh:
  • Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.
    p {font-family: arial; font-size: small;}
h1 {color: red; }
  • 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 rel=”stylesheet” href=”style.css” type=”text/css”>

 </head>

Import CSS

Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:
@import "style.css";

atau

@import url("style.css");

Penggunaan Lebih dari Satu Kode CSS

Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik.
Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sbb:
h1 {
color: red;
text-align: left;
font-size: 8pt
}
Sementara di halaman web yang sama, di antara tag <head> ada kode CSS 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 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

Read More

Monday

Jenis-Jenis Font dalam CSS

9:40 PM  , , , , ,  3 comments

Berikut adalah contoh penulisan font-family:
selector {font-family: family-name, generic-family;}
Contoh real untuk pengaturan font selector heading (h1) di dalam CSS:
h1 {font-family: ”Trebuchet MS”, Helvetica, sans-serif;}

Family-name
Family-name adalah nama dari kumpulan beberapa font yang sejenis, seperti contoh Trebuchet MS Normal, Trebuchet MS Bold, Trebuchet MS Italic, Trebuchet MS Bold Italic, jadi family-name untuk font-font tersebut adalah Trebuchet MS.
Di dalam “family-name” kita bisa memasukkan lebih dari satu pilihan family-name, seperti contoh diatas ada “Trebuchet MS” dan “Helvetica” kemudian pada urutan terakhir ada “sans-serif” ini yang disebut dengan generic-family. Dianjurkan untuk selalu memasukkan generic-family pada setiap akhir dari properti font-family.
Untuk family-name yang menggunakan spasi atau lebih dari satu kata harus ditulis didalam tanda petik, ”Trebuchet MS”.
Ketika browser akan menampilkan konten yang berupa teks, font yang digunakan adalah yang berada di urutan pertama dari family-name, sebagai contoh diatas adalah Trebuchet MS jika font-font ini tidak ditemukan maka browser akan mencoba mencari font-font jenis Helvetica jika font-font ini tidak ditemukan juga maka browser akan menggunakan standar font-nya masing-masing yang bertipe sans-serif sebagai alternatif terakhir.
Jadi untuk menghindari hal tersebut diatas maka dianjurkan bagi para pembuat website atau webmasters agar menggunakan font standar yang kemungkinan besar sudah tersedia di setiap komputer pengguna, klik link berikut ini untuk melihat list dari font-family standar.

Generic-family
Terdiri dari 5 jenis type yaitu: serif, sans-serif, cursive, fantasy dan monospace.
Untuk lebih jelasnya perhatikan contoh berikut:
Tulisan dengan type serif
Tulisan dengan type sans-serif
Tulisan dengan type cursive
Tulisan dengan type fantasy
Tulisan dengan type monospace
Tipe Serif biasa digunakan untuk kebutuhan printer karena bentuknya yang lebih lembut dan halus, tipe sans-serif cocok digunakan untuk website karena lebih tebal dan jelas sehingga tulisan akan lebih mudah terbaca. Tipe cursive dan fantasy bisa digunakan untuk gambar maupun judul website dan tipe monospace adalah untuk kode dan membuat efek mesin ketik.

Font Families standar yang sering digunakan.
font-family: "Arial Black", Gadget, sans-serif;
Preview: “Arial Black”, Gadget, sans-serif;
font-family: Arial, Helvetica, sans-serif;
Preview: Arial, Helvetica, sans-serif;
font-family: "Andale Mono", "Monotype.com", monospace;
Preview: “Andale Mono”, “Monotype.com”, monospace;
font-family: "Bookman Old Style", serif;
Preview: “Bookman Old Style”, serif;
font-family: "Comic Sans MS", cursive;
Preview: “Comic Sans MS”, cursive;
font-family: "Courier New", Courier, monospace;
Preview: “Courier New”, Courier, monospace;
font-family: Courier, monospace;
Preview: Courier, monospace;
font-family: fixedsys, monospace;
Preview: fixedsys, monospace;
font-family: Georgia, serif;
Preview: Georgia, serif;
font-family: Garamond, serif;
Preview: Garamond, serif;
font-family: Impact, Charcoal, sans-serif;
Preview: Impact, Charcoal, sans-serif;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
Preview: “Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
font-family: "Lucida Console", Monaco, monospace;
Preview: “Lucida Console”, Monaco, monospace;
font-family: "MS Gothic", monospace;
Preview: “MS Gothic”, monospace;
font-family: "MS Sans Serif", Geneva, sans-serif;
Preview: “MS Sans Serif”, Geneva, sans-serif;
font-family: "MS Serif", "New York", sans-serif;
Preview: “MS Serif”, “New York”, sans-serif;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
Preview: “Palatino Linotype”, “Book Antiqua”, Palatino, serif;
font-family: Symbol, sans-serif;
Preview: Symbol, sans-serif;
font-family: System, sans-serif;
Preview: System, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
Preview: Tahoma, Geneva, sans-serif;
font-family: Techno, Impact, sans-serif;
Preview: Techno, Impact, sans-serif;
font-family: "Times New Roman", Times, serif;
Preview: “Times New Roman”, Times, serif;
font-family: "Trebuchet MS", Helvetica, sans-serif;
Preview: “Trebuchet MS”, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
Preview: Verdana, Geneva, sans-serif;
font-family: Wingdings, "Zapf Dingbats", sans-serif;
Preview: Wingdings, “Zapf Dingbats”, sans-serif;
font-family: Webdings, sans-serif;
Preview: Webdings, sans-serif;

Read More

Friday

Membuat rounded corners menggunakan CSS

10:06 PM  , , , , ,  No comments

Rounded corners merupakan desain web atau blog baru yang sedang digemari saat ini karena kesannya yang menarik. Yang saya maksud rounded corners adalah membuat border atau garis lengkung pada web atau blog seperti contoh berikut:
Kita dapat melihat bahwa setiap sudutnya memiliki lengkungan yang rapi. Biasanya untuk membuat lengkungan tersebut kita menggunakan gambar (image), namun kita dapat membuat rounded corners tersebut dengan hanya menggunakan CSS. Bagaimana caranya? ikuti langkah-langkah berikut ini.
Inilah kehebatan dari CSS, dengan hanya menggunakan tag elemen HTML b dengan CSS diatur agar berupa blok (display:block) dan membuat warna latar belakang blok tersebut sesuai dengan halaman web kemudian memanipulasi posisinya dengan menggunakan margin.
Yang pertama kita lakukan adalah membuat pengaturan div untuk halaman dan judul serta paragraf:
#halaman {width:80%; margin: 0 auto; }
#judul {margin:0;background:#fff; }
.judul-teks {height:60px;margin:0;color:#fff;background:#090; }
p {margin:0; padding-left:20px;}
Berikut ini adalah kode pengaturan CSS untuk membuat Rounded corners (garis lengkung) pada setiap sudut div:
.line1, .line2, .line3, .line4 {display:block;background:#090;}
.line1 {height:1px; margin:0 5px;}
.line2 {height:1px; margin:0 3px;}
.line3 {height:1px; margin:0 2px;}
.line4 {height:2px; margin:0 1px;}
Sekarang kita akan membuat kodenya di dalam dokumen html, buka notepad salin kode berikut kemudian simpan ke komputer anda dengan nama “css_test1.html”
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test CSS</title>
<style type="text/css">
<!--
#halaman {width:80%; margin: 0 auto; }
p {margin:0; padding-left:20px;}
#judul {margin:0px;background:#fff; }
.judul-teks {height:60px;margin:0;color:#fff;background:#090; }
.line1, .line2, .line3, .line4 {display:block;background:#090;}
.line1 {height:1px; margin:0 5px;}
.line2 {height:1px; margin:0 3px;}
.line3 {height:1px; margin:0 2px;}
.line4 {height:2px; margin:0 1px;}
-->
</style>
</head>
<body>
<div id="halaman">
<div id="judul">
<b class="line1"></b><b class="line2"></b><b class="line3"></b><b class="line4"></b>
<div class="judul-teks">
<p>Testing membuat rounded corners dengan CSS</p>
</div>
<b class="line4"></b><b class="line3"></b><b class="line2"></b><b class="line1"></b>    </div>
</div>
</body>
</html>
Preview
Kemudian sekarang kita akan menambah div untuk konten, jika menggunakan warna latar yang berbeda kita harus membuat pengaturan CSS tersendiri untuk lengkungan atau Rounded cornersnya, namun jika sewarna anda bisa membuatnya tanpa perubahan.
Kita akan membuat dengan latar yang berbeda sehingga kita harus membuat pengaturan CSS tersendiri dengan nama class yang berbeda, tambahkan kode berikut di dalam style CSS:
#konten { margin-top: 14px;margin-bottom: 14px;float: left; width: 100%; background:#fff;}
.konten-teks { height: 100%;color:#000; background:#ccc;}
.line1a, .line2a, .line3a, .line4a {display:block;background:#ccc;}
.line1a {height:1px; margin:0 5px;}
.line2a {height:1px; margin:0 3px;}
.line3a {height:1px; margin:0 2px;}
.line4a {height:2px; margin:0 1px;}
Dan kode berikut ini kita tambahkan ke dalam tag elemen body:
<div id="konten">
<b class="line1a"></b><b class="line2a"></b><b class="line3a"></b><b class="line4a"></b>
<div class="konten-teks">
<p>Berikut adalah cara membuat rounded corners tanpa menggunakan gambar (image). Inilah kehebatan dari CSS, dengan hanya menggunakan tag elemen HTML b dengan CSS diatur agar berupa blok (display:block) dan membuat warna latar belakang blok tersebut sesuai dengan halaman web kemudian memanipulasi posisinya dengan menggunakan margin. Hasilnya adalah seperti yang anda lihat sekarang.</p>
</div>
<b class="line4a"></b><b class="line3a"></b><b class="line2a"></b><b class="line1a"></b>
</div>
Atau anda bisa menyalin kode berikut, sebagai kode komplitnya setelah di masukkan ke dokumen html, simpan file tersebut dengan nama “css_test2.html”
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test CSS</title>
<style type="text/css">
<!--
#halaman {width:80%; margin: 0 auto; }
p {margin:0px; padding-left:20px;}
#judul {margin:0px;background:#fff; }
.judul-teks {height:60px;margin:0px;color:#FFF;background:#090; }
.line1, .line2, .line3, .line4 {display:block;background:#090;}
.line1 {height:1px; margin:0 5px;}
.line2 {height:1px; margin:0 3px;}
.line3 {height:1px; margin:0 2px;}
.line4 {height:2px; margin:0 1px;}
#konten { margin-top: 14px;margin-bottom: 14px;float: left; width: 100%; background:#fff;}
.konten-teks { height: 100%;color:#000; background:#ccc;}
.line1a, .line2a, .line3a, .line4a {display:block;background:#ccc;}
.line1a {height:1px; margin:0 5px;}
.line2a {height:1px; margin:0 3px;}
.line3a {height:1px; margin:0 2px;}
.line4a {height:2px; margin:0 1px;}
-->
</style>
</head>
<body>
<div id="halaman">
<div id="judul">
<b class="line1"></b><b class="line2"></b><b class="line3"></b><b class="line4"></b>
<div class="judul-teks">
<p>Testing membuat lengkungan pada sudut div dengan CSS</p>
</div>
<b class="line4"></b><b class="line3"></b><b class="line2"></b><b class="line1"></b>    </div>
<div id="konten">
<b class="line1a"></b><b class="line2a"></b><b class="line3a"></b><b class="line4a"></b>
<div class="konten-teks">
<p>Berikut adalah cara membuat garis lengkungan pada setiap sudut div tanpa menggunakan gambar (image). Inilah kehebatan dari CSS, dengan hanya menggunakan tag elemen HTML b dengan CSS diatur agar berupa blok (display:block) dan membuat warna latar belakang blok tersebut sesuai dengan halaman web kemudian memanipulasi posisinya dengan menggunakan margin. Hasilnya adalah seperti yang anda lihat sekarang.</p>
</div>
<b class="line4a"></b><b class="line3a"></b><b class="line2a"></b><b class="line1a"></b>
</div>
</div>
</body>
</html>
Preview
Jadi intinya adalah setelah kita mengatur layoutnya, kita cukup menyelipkan kode untuk membuat rounded corners (lengkungan) tersebut di antara div awal dan div akhir.

Read More

Pengaturan List menu dengan CSS

9:54 PM  , , , , ,  No comments

Tag elemen untuk membuat List di dalam dokumen HTML adalah: <ul> digunakan untuk list yang tidak berurutan (unordered list) kemudian, <ol> digunakan untuk list yang berurutan kemudian diikuti <li > adalah list menu yang akan ditampilkan (list item).
Untuk lebih jelasnya perhatikan contoh berikut ini:
<ul>
<li>Menu A </li>
<li>Menu B </li>
<li>Menu C </li>
</ul>
Hasil yang akan ditampilkan di browser:
  • Menu A
  • Menu B
  • Menu C  
<ol>
<li>Menu A </li>
<li>Menu B </li>
<li>Menu C </li>
</ol>
Hasil yang akan ditampilkan di browser:
  1. Menu A
  2. Menu B
  3. Menu C
Didalam CSS ada beberapa perintah untuk mengontrol tampilan dari list style, diantaranya adalah:
list-style-type: contoh tipe; adalah untuk mengubah bentuk bullet yang ada di depan dari list menu.
list-style-image: url(contoh.jpg); adalah untuk mengubah bentuk bullet dengan gambar.
list-style-position: posisi; adalah untuk memposisikan list menu: inside dan outside.
Contoh untuk mengubah bullet menjadi berbentuk lingkaran:
<ul style="list-style-type:circle">
<li><a href="#">Menu A </a></li>
<li><a href="#">Menu B </a></li>
<li><a href="#">Menu C </a></li>
</ul>
  • Menu A
  • Menu B
  • Menu C
Contoh untuk mengubah bullet menjadi berbentuk kotak:
<ul style="list-style-type:square">
<li><a href="#">Menu A </a></li>
<li><a href="#">Menu B </a></li>
<li><a href="#">Menu C </a></li>
</ul>
  • Menu A
  • Menu B
  • Menu C
Jika menggunakan CSS tersendiri anda bisa menuliskan seperti berikut:
li { list-style-type: square; }
Namun ini adalah penulisan pengaturan secara global, dimana setiap yang ada diantara tag elemen "li" didalam dokumen akan mengikuti pengaturan diatas, jadi jika ingin membuat pengaturan yang lebih spesifik anda bisa menggunakan id (#) atau class (.), contoh:
<ul id="menu">
<li><a href="#">Menu A </a></li>
<li><a href="#">Menu B </a></li>
<li><a href="#">Menu C </a></li>
</ul>
Jadi di dalam file CSS anda bisa menuliskan:
#menu li { list-style-type: square; }

Read More

Thursday

CSS Coding

9:21 PM  , , , , ,  1 comment


Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama.

CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.

Berikut tutorial langkah-langkah belajar Coding CSS dari tahap awal dan lanjutan,
Memasukan CSS kedalam dokumen HTML
Pengaturan List menu dengan CSS 
Membuat rounded corners menggunakan CSS  
Jenis-Jenis Font dalam CSS
Implementasi CSS  
Class dan ID Selector
Menggunakan Google Font untuk Blogger 

Read More

Memasukan CSS kedalam dokumen HTML

9:21 PM  , , , , ,  2 comments

CSS adalah singkatan dari Cascading Style Sheets, yang berfungsi untuk mengontrol tampilan dari sebuah halaman website.
Ada 3 cara untuk memasukkan CSS ke dalam dokumen HTML yaitu:
1. Dengan menambahkan langsung di tag dokumen html, sebagai contoh:
<p style="color:blue">Membuat tulisan warna biru</p>
<p style="font-family:arial;font-size:150%;color:green">
Membuat jenis font, ukuran dan warna</p>
<p style="color:yellow;background-color:red;width:60px;text-align: center">
Test</p>
<p style="font-style:italic;">Membuat tulisan miring</p>
Maka hasil dari style diatas adalah sebagai berikut:
Membuat tulisan warna biru
Membuat jenis font, ukuran dan warna
Test
Membuat tulisan miring

2. Dengan menaruhnya di dalam header dokumen html.
Sebagai contoh kita akan membuat CSS untuk mengontrol tampilan paragraf di dokumen html, cara penulisannya adalah sebagai berikut:
<html>
<head>
<style>
<!--
p { color:green;font-family:arial;font-size:120%;}
-->
</style>
</head>
<body>
<p>Saat ini saya sedang belajar CSS</p>
<p>Pengaturan paragraf dengan menggunakan CSS di dalam header dokumen html</p>
<p>Dengan contoh ini, maka setiap paragraf atau yang berada diantara <p>dan</p>akan memiliki format yang sama</p>
</body>
</html>
Preview

3. Kemudian yang ketiga adalah dengan membuat file CSS tersendiri yang tespisah dari dokumen html, secara umum yang terakhir ini adalah yang paling sering digunakan. Untuk menghubungkan dokumen html dengan CSS tersebut kita cukup menambahakan yang berikut ini di header dokumen html:
<link rel="stylesheet" href="style.css" type="text/css">
Sehingga di dokumen html akan terlihat seperti berikut ini:
<html>
<head>
<title>Titel websiteku</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
</body>
</html>
Untuk mengetahui lebih lanjut tentang bagaimana CSS mengontrol sebuah halaman website, berikut kita akan membuat sebuah halaman website sederhana yang menggunakan CSS.
Buka Notepad kemudian salin kode berikut, dan simpan file tersebut dengan nama “csstest.html”
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel websiteku</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="halaman"><!-- div id halaman dimulai -->
<div id="judul"><!-- div id judul dimulai -->
<h1 class="judul">Disini judul websiteku</h1>
<h2 class="sub-judul">Disini sub-judul websiteku</h2>
</div><!-- div id judul berakhir -->
<div id="konten"><!-- div id konten dimulai -->
<div class="kiri"><!-- div class kiri dimulai -->
<p>Disini navigasi bagian kiri</p>
</div><!-- div class kiri berakhir -->
<div class="tengah"><!-- div class tengah dimulai -->
<p>Disini konten websiteku</p>
</div><!-- div class tengah berakhir -->
<div class="kanan"><!-- div class kanan dimulai -->
<p>Disini navigasi bagian kanan</p>
</div><!-- div class kanan berakhir -->
</div><!-- div id konten berakhir -->
<div class="footer"><!-- div class footer dimulai -->
<p>Disini Footer websiteku</p>
</div><!-- div class footer berakhir -->
</div><!-- div id halaman berakhir -->
</body>
</html>
Preview

Yang berada diantara <–– dan ––> hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya. Sekarang buka file tersebut dengan browser, maka kita akan melihat halaman yang polos dengan tulisan seadanya.
Sekarang salin CCS berikut kemudian simpan ke folder yang sama dengan “csstest.html” dengan nama “style.css”
#halaman {/* "id" dilambangkan dengan "#" */
width: 800px;
margin: 0 auto;/* agar dokumen berada ditengah */
padding: 0 auto;
}
#judul {
width: 100%;
height: 100px;
background: #5F9EA0;
margin: 0;/* pengaturan sisi bagian luar */
padding: 0;/* pengaturan sisi bagian dalam */
}
#konten {
width: 100%;
margin: 0;
padding: 0;
}
.kiri {/* "class" dilambangkan dengan "." */
width: 25%;
height: 300px;
float: left;
background: #ADD8E6;
}
.tengah{
width: 50%;
height: 300px;
float: left;
background: #FDF5E6;
}
.kanan{
width: 25%;
height: 300px;
float: right;
background: #ADD8E6;
}
.footer{
height: 40px;
background: #8FBC8F;
clear: both;
}
.judul {
color: Red;
padding: 10px 0 0 10px; /* penulisan untuk semua sisi: atas kanan bawah kiri */
}
.sub-judul {
color: #ff0;
padding: 0 10px 10px;
}
p {
padding-left: 10px;/* penulisan untuk satu sisi saja */
}
Yang berada diantara /* dan */ hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya.
Sekarang buka file “csstest.html” dengan browser anda.
Preview

Read More