Berkenalan Dengan CSS


Selayang pandang CSS

Sampai detik ini masih ada aja yang bingung, apa itu css? Css adalah singkatan dari Cassading Style Sheet. Trus? Apa gunanya? CSS ini berfungsi sebagai make up bagi HTML dan pengontrol tampilan HTML🙂, ya, dengan css tampilan sebuah website akan menjadi indah, anggun dan menawan serta lebih mudah di kustomisasi tampilannya.. Lha? Emang HTML gak bisa apa?Cuma gonta-ganti warna doang kan? Oke, bila ada yang berkata begitu, disini ane akan jelskan sedikit, misalnya saya anda bikin website dengan 50 link, trus ketika 1 baris dari 50 tampilan halaman web ini mau dirubah warna atau yang lainnya apa gak capek tuh  musti ngobrak2 kode htmlnya dulu, trus kalo misalnya ada kesalahan di HTMLnya,pasti berpengaruh vital banget kan ama tampilannya, apa gak capek? Capek kan? Makanya, kalau bisa dipermudahkenapa harus dipersusah. Oleh itulah CSS ini hadir untuk memberikan kemudahan kita dalam make over tampilan HTML.

Trus, seberapa cantik sih website ketika dihiiasi dengan CSS? Berikut segelintir dari contoh website yang menggunakan CSS :

 

Anda juga bisa melihat contoh web yang lainnya di sini

Syntaks CSS

Sebelum memulai bercinta dengan CSS, hal yang urgen yang perlu kita ketahui yaitu syntaks penulisan CSS, syntaks penulisan CSS adalah sebagai berikut :

selector{properti:value;}

Misalnya ada pernyataan seperti ini :

body {font-style : italic}

maka, strukturnya adalah  :

Kayaknya ane masih belum puas deh ngejelasinnya, nih ane kasih contoh yang lebih panjang :

header{
min-height:107px;
padding-bottom:10px;
width: 100%;
}

dan inilah strukturnya :

Ohya, ane hampir lupa tentang cara penulisan kode CSS. Dalam penulisan skrip, atau kode CSS, ada tiga macam tape, eh salah, maksudnya ada tiga tipe :

Inline Style

Inline style adalah penulisan secara langsung. Oke, disini ane tidak mau berbanyak-banyak teori, mari kita langsung ke kasus, misalnya kita ingin membuat sebuah paragraf dengan warna putih dan dengan background merah, maka saya ketikan kode HTML dan CSSnya seperti ini :

<p style="color:white; background:red;"> Ini adalah contoh sebuah paragraf dengan CSS inline </p>

Dan seperti inilah hasilnya:

Kita bisa mengubah lagi dengan mengetikan :

<body>
<p style="color:white; background:red;"> Ini adalah contoh sebuah paragraf dengan CSS inline </p>
<p style= "color:yellow; background:green;" >Ini adalah contoh sebuah paragraf dengan background hijau</p>
<p style= "color:red; background:yellow;" >Ini adalah contoh sebuah paragraf dengan background kuning</p>
</body>

Dan hasilnya akan menjadi seperti ini :

Header Style

Adapun header style yaitu penulisan skrip CSS pada head (sesuai dengan namanya) di HTML, saya centdrung lebih menganjurkan ini, karenan cendrung lebih mudah dan rapi🙂. Misalnya ada contoh HTML seperti ini :

<html>
<Head>
<title>CSS menggunakan header style</title>
</head>
<h3>Apa itu ubuntu?</h3>
<p>Ubuntu adalah suatu sistem operasi bebas dan open source yang menggunakan Debian sebagai fondasinya dan dirilis secara berkala (setiap enam bulan)</p
</html>

Ketika di tampilkan di browser maka akan seperti ini :

Kemudian, setelah ditambah dengan kode CSS maka akan menjadi seperti ini :

<html>
<head>
<title>CSS menggunakan header style</title>
<style>
h3 {
font-family:verdana;
color : red;
}
p{
background : black;
color : blue;
}
</style>
</head>
<h3>Apa itu ubuntu?</h3>
<p>Ubuntu adalah suatu sistem operasi bebas dan open source yang menggunakan Debian sebagai fondasinya dan dirilis secara berkala (setiap enam bulan)</p>
</html>

Dan ketika di tampilkan pada browser, maka akan seperti ini :

Linked CSS

Adapun linked CSS ini, yaitu terpisahnya antara skrip HTML dan skrip CSS. Trus apa untungnya menggunakan metode ini? Ada beberapa keuntungan dalam penulisan CSS dengan metode linked CSS ini, diantaranya yaitu kita tidak perlu repot buka-buka file HTML untuk mengedit CSS, ya iyalah, orang file CSS nya terpisah. Trus diantara keuntungannya kita dapat menghemat waktu dalam pengeditan CSS, bukankah الوقت كالصيف,إن لم تقطعه قطعك (waktu adalah pedang, bila engkau belum memotongnya niscaya dia akan memotongmu) ? Hehe…

Dan adapun cara penulisannya,
Buka file header-style yang anda buat tadi, kemudian copy skrip CSSnya, semua teks di dalam <style></style>

Buka editor pada komputer ama, terserah editor apa, sesuai kepercayaan masing-masing😛 disini ane menggunakan gEdit pada ubuntu.

Kemudian paste ke text editor tersebut, simpan dengan format style.css

Kembali ke file html tadi dan tambahkan kode

 <link rel=”stylesheet” href=”alamat-file-css” type=”text/css”>

diantara

<head></head>


Karena nama file yang disimpan tadi adalah style.css, maka pada href nya diisi style.css

Dan seperti inilah hasilnya

Selamat mencoba, bila ada yang ingin di diskusikan silahkan komen dibawah, kalo ada yang ingin dibetulkan, mangga atuh, mari berbagi bersama.

Have fun, and enjoy the tutorial !

5 thoughts on “Berkenalan Dengan CSS

  1. mas makasih, tutorialny lengkap dan mdah dmngerti, sya lg bljr ngblog lewat hp, tp mas gmn cara edit tampiln yg gk msuk kolom tes ? Maksudnya ngedit segala hal selain dr bgian kolom bacan?

Tinggalkan komentar

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s