#11 Test Your Code, Maybe?

"Aku pengen bikin CSS, tapi males bikin file htmlnya."

Saya rekomendasikan satu link untuk kamu:
http://www.w3schools.com/css/tryit.asp?filename=trycss_default

Kamu bisa mengetes kode CSSmu online, tanpa perlu buat file html baru!

Happy coding!

.ulaai

#10 Property: Cursor

Hello semuanya, apakabar? Sekarang kita akan belajar tentang cursor. Kodenya seperti ini:

selector {
cursor: ()
}

Contoh kodenya sebagai berikut.

h1 {
cursor: help;
}

Sehingga ketika h1 ini dihover/ditunjuk, maka cursor kita akan berubah jadi kursor help. Well, ada berapa yaa jumlah kursor yang bisa kita pakai? Saya telah membuat listnya. Ayo lihat di bawah!

cursor: auto

cursor: crosshair

cursor: default

cursor: pointer

cursor: wait

cursor: text

cursor: help

cursor: move

cursor: n-resize

cursor: ne-resize

cursor: nw-resize

cursor: e-resize

cursor: w-resize

cursor: s-resize

cursor: se-resize

cursor: sw-resize

Silahkan hover tiap nama kursor untuk contoh kursornya :D
Happy coding, then!

.ulaai

#9 Customizing the Text part 2

Konbanwa minna :D Ogenki desuka? Genki desu yo. Hehehe. Hari ini kita akan melanjutkan 'Customizing the Text part 1' yang lalu. Semoga kalian belum bosan :)

Kali ini kita akan belajar tentang LINK. You know link, right. Kalau kalian menulis link di file htmlmu tanpa CSS, pasti warna linknya bakal biru/ungu, font Times New Roman ukuran 12pt. Right? Ah-ah, how boring! Kenapa nggak kita coba yang lain? Kenapa nggak fontnya kita ganti atau warnanya diubah gitu? Ya nggak? Makanya baca post ini baik-baik, dan praktekkan :D

Kodenya adalah:

A:link
{
(code yang diinginkan)
}

A:visited
{
(code yang diinginkan)
}

A:active
{
(code yang diinginkan)
}

A:hover
{
(code yang diinginkan)
}

A:link adalah link itu sendiri. Apa warnanya? Fontnya? Ukurannya? Bisa kamu ubah di a:link.
A:visited adalah link yang sudah pernah kamu kunjungi. Kalau kamu menulis link di file htmlmu tanpa CSS, jika sitenya sudah pernah kamu kunjungi (google.com misalnya) pasti warnanya akan berubah jadi ungu. Kalau belum pernah kamu kunjungi maka warnanya akan berubah jadi biru. Am I right?
A:active adalah keadaan link ketika kamu mengekliknya. Hanya ketika saat kamu mengekliknya.
A:hover adalah keadaan link ketika ditunjuk. Apakah bakal kedip-kedip? Apakah akan menebal? Bisa kamu atur di a:hover.

Contohnya seperti ini:

A:link
{
text-decoration: none; color: #FFFFFF; cursor:crosshair;
}

A:visited
{
text-decoration: none; cursor:crosshair; color: #FFFFFF;
}

A:active
{
text-decoration: none; cursor:crosshair; color:#5A5A5A ;
}

A:hover {
text-decoration: blink; color: #000000; font weight: bold; cursor: help;
}

Then test it!
Kalian mungkin melihat sesuatu yang beda pada kode di atas. Yep, bener. CURSOR. Penasaran? Nantikan postingan berikutnya! Jaa~

.ulaai

#8 Customizing the Text part 1

Hullaaaaah. Apa kabar? Kali ini kita akan belajar tentang mengutak-atik tulisan. Misalnya, "Aku pengen kalau aku masukin bold, maka tulisannya warna merah bukan warna item." Atau, "Aku pengen underlinenya yang dotted, bukan solid!" Well, asal kamu mengikuti postingan kali ini dengan baik, pasti kamu akan bisa mendapatkan hasil sesuai yang kamu inginkan!

PART 1: Customizing b, i, u, and s

b {
(kode yang kamu mau)
}

Nah, b itu artinya bold. Bisa kamu ganti dengan i (italic), u (underline), s (strike).

Misalnya:

b {
color: #222222;
}

i {
color: #999999;
font-family: arial;
font-size: 8pt;
}

u {
color: #333333;
border-bottom: 2 px dashed #ffffff;
}

s {
text-decoration: blink;
}

Seperti itu. Gampang kan? Saya juga nggak bakal ngasih contoh buat yang ini, wong sangat-gampang-sekali kok :)
Sampai jumpa di Customizing the Text part 2!

#7 Property: Border

Hello folks. Apa kabar? I changed the blog's layout, hope you like it ya. Pada kesempatan kali ini kita akan belajar tentang BORDER... TEREEETTT!!

Border itu garis tepi. Yeah, kamu pasti sudah tahu, karena border ini ada di berbagai aplikasi office seperti Microsoft Word atau Powerpoint. Yak seperti itulah. Langsung saja ya.

GENERAL (property: value)

border: value border (dijelaskan di bawah)

BORDER (property: value)

border-width: besar border (pakai px)
border-style: style border (dashed, double, groove, dotted, inset, outset, ridge, solid, none)
border-color: warna border

---

Nah, untungnya di materi border kali ini penggunaannya mudah sekali. Misalnya untuk kode seperti ini:

contoh1 {
border-width: 2px;
border-style: dashed;
border-color: #666666;
}

Mungkin kalian berpikir, "Repot dong kalau satu-satu, apa nggak bisa disatuin aja?" Gampang! Kamu hanya perlu menghilangkan propertynya. Sehingga kodenyapun menjadi seperti ini:

contoh2 {
border: 2px dashed #666666;
}

Gampang, kan? Untuk materi ini saya nggak akan kasih contoh untuk pengaplikasiannya, karena mudah sekali. Untuk contoh kamu bisa pakai kode yang ada di post sebelumnya. But still, be creative, ciptakan kodemu sendiri! Happy coding!

.ulaai

#6 Property: Box Model

Hellooo! Still in this channel with me, Uli, and we will continue our CSS lesson. Eheh. Property selanjutnya yang akan kita gunakan adalah Box Model. Make sure you'll read this carefully :)

BOX MODEL (property: value)

height panjang kotak
width lebar kotak
margin (top, right, bottom, left) jarak antara luar kotak dengan tepi kotak
padding (top, right, bottom, left) jarak antara tepi kotak dengan isi kotak

Masih belum jelas? Kalau gitu kita lihat gambar di bawah deh:

Gambar diambil dari sini

Bagaimana cara mengaplikasikannya? Hoho. Ayo kita coba--masih dengan menggunakan kode yang lalu. Berani?




<html>
<head>
<title>TEST</title>

<style type="text/css">
h1 {
font-style: italic;
font-weight: bold;
font-family: Century Gothic;
font-size: 32 pt;
color: #ff0022;
letter-spacing: 2px;
text-align: center;
text-decoration: overline;
text-transform: uppercase;
}

blockquote {
height: 300px;
width: 200px;
margin: 10px;
padding-top: 5px;
padding-right: 7px;
padding-left: 10px;
padding-bottom: 5px;
border: 1px solid #000000;
font-family: Tahoma;
font-size: 14pt;
color: #666666;
text-decoration: underline;
text-align: justify;
}

</style>
</head>

<body>
<h1>Somehow it was Ended Like This</h1>
<br> <br>
<blockquote> Lontong balap adalah makanan khas Indonesia yang merupakan ciri khas kota Surabaya di Jawa Timur. Makanan ini terdiri dari lontong, tauge, tahu goreng, lentho, bawang goreng, kecap dan sambal. Lontong balap biasanya didominasi oleh tauge.
</body>
</html>

More complicated? I guess so hehe. Ada beberapa hal yang perlu diperhatikan dalam kode di atas:
BLOCKQUOTE adalah sebuah kode HTML, sama kayak b, i, u, atau s, gunanya untuk jmeng'quote' sesuatu. Cara memasukkannya gampang saja, cukup dengan melihat di atas. Mudah kan?
BORDER bakal kita pelajari di post selanjutnya.

Well, gimana hasilnya? Kalau saya hasilnya seperti ini:

Masih semangat kan belajar CSS? See you next time then. :)

.ulaai

#5 Property: Text

Halo semuanya :D Apa kabar? Kuharap kalian belum bosan belajar CSS, masih di channel CSS bareng saya, Uli. XD
Property dan value yang akan kita pelajari kali ini adalah text.

TEXT (property: value)

letter-spacing jarak antar huruf
line-height jarak antar baris
text-align alignment (center, justify, left, right)
text-decoration blink, line-through, none, overline, underline
text-indent first line indentation
text-transform capitalize, lowercase, uppercase
vertical-align vertical alignment
word-spacing jarak antar kata

---

Letter spacing adalah jarak antar huruf. Misalnya:

H A L O I N I B L O G S A Y A
HALO INI BLOG SAYA

Line height adalah jarak antar baris. Misalnya:

Halo nama saya uli.




Umur saya tiga belas tahun.




Jarak antar baris saya besar sekali.

Text align adalah alignment, macam left, right, center, dan justify di Microsoft Word. Nggak usah pakai contoh deh, pasti sudah tahu, kan :D

Text decoration adalah hiasan teks kamu. Misalnya blink (kedip-kedip) line-through (kayak kecoret), none (nggak pakai dekorasi apapun), overline (garis atas), underline (garis bawah).

Text-indent itu macam first line indent di Microsoft Word. Tapi property ini jarang digunakan kok, sampai sekarang saya belum ketemu contoh yang konkrit.

Text-transform, sesuai namanya, adalah transformasi teks. Capitalize (Huruf Kapital Tiap Awal Kata), lowercase (huruf kecil semua), uppercase (HURUF BESAR SEMUA).

Vertical align, saya juga belum pernah ketemu contoh yang konkrit. Jadi saya belum bisa kasih tahu contohnya gimana. Maaf ya :D

Word-spacing itu jarak antar kata. Misalnya:

Halo nama saya Uli.

Sudah ngerti sekarang? Kita coba yuk! Hohoho. Gimana kalau langsung kita gabung sama pelajaran kita minggu lalu? Sip ya? Sip dong hehehe.

Contoh kode:

<html>
<head>
<title>TEST</title>

<style type="text/css">
h1 {
font-style: italic;
font-weight: bold;
font-family: Century Gothic;
font-size: 32 pt;
color: #ff0022;
letter-spacing: 2px;
text-align: center;
text-decoration: overline;
text-transform: uppercase;
}

</style>
</head>

<body>
<h1>Somehow it was Ended Like This</h1>
</body>
</html>




Yup, kita selesai coding. Kita coba yuk! Kalau kamu melakukannya dengan baik maka hasilnya akan seperti ini (image resized):


Taaa-raaaaah! Lebih keren kan? Coba kamu bandingkan yang saya tulis 'Somehow it was Ended Like This' dengan hasil yang ditunjukkan. Apa ada yang beda? Kalau kamu bisa menjawab, berarti kamu sudah mengerti property bagian ini. Keep learning!