Tutorial Css : Dasar – Dasar Css Lengkap 2013
Halo semua sahabat setia Kumpulan Tutorial Website , saya ingin membagikan kepada anda sebuah tutorial CSS yang sangat penting anda kuasai dalam pembuatan website yang dinamis dan bagus untuk dilihat. Seperti yang kita tahu, dalam mendesign website, kita amatlah membutuhkan Code CSS , tanpa CSS , Website yang kita buat seolah-olah tidak berwarna atau tidak berseni sama sekali. Makara sanggup kita simpulkan bahwa tutorial CSS kali ini sangatlah mempunyai kegunaan bagi kita semua terutama bagi para pemula . Oke eksklusif saja .
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value .
Adapun format penulisan kalimat CSS :
Selector itu untuk mengatakan bab mana yang hendak diatur / diformat.
Property untuk menunjukkan, bab (properti) dari selector yang hendak diatur.
Value yakni nilai dari pengaturannya.
Contoh Syntax:
Dari pola di atas sanggup kita simpulkan atau kita lihat bahwa :
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).
Pengelompokan Selectors
Anda sanggup menulis satu arahan CSS untuk banyak sekali macam selector dengan cara memakai koma. Misalkan anda mau mengatur semoga tag h1, h2 dan h3 semua memakai warna merah, maka arahan CSS nya menjadi:
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
Pada pola di atas, tag h1, h2 dan h3 di atur semoga memakai warna merah, dengan type font arial, dan ukuran font 150%.
Cara Penulisan Yang Baik
Sangat disarankan untuk menulis arahan CSS memakai beberapa baris dimana pengaturan property dan values nya di indent. Hal ini bertujuan semoga terlihat rapi.
color:red;
font-family:arial;
font-size:150%;
}
Sekarang anda sudah mengerti hukum dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan arahan CSS ke halaman website.
CSS Comment
Kenapa kita perluh mencar ilmu membuat comment dalam CSS ? alasannya alasannya yakni kadang kala, ada baiknya anda menuliskan komentar ke dalam arahan CSS anda untuk memberi catatan pengingat.
Anda sanggup memakai syntax pembuka /* dan epilog */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}
INPLEMNTASI CSS
Ada 4 cara memasang arahan CSS ke dalam arahan HTML / halaman web, yaitu:
- Inline CSS
- Embed atau memasang arahan css ke dalam bab <head>
- Pada link ke external CSS
- Import CSS file
Penasaran ? ,, Mari kita bahas satu per satu :
1. Inline CSS
Kode CSS dituliskan eksklusif ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam arahan CSS.
Cara ini sebaiknya hanya dipakai bila anda mau memformat suatu elemen satu kali saja.
Contoh:
Isi paragraf.
</p>
Pada pola di atas, elemen paragraf <P> di format semoga tulisannya memakai warna biru. Elemen paragraf lain, tidak akan memakai warna biru, alasannya yakni format ini hanya berlaku pada elemen paragraf yang ditentukan arahan CSS nya.
Penulisan CSS dengan cara ini di mulai dengan kata style: kemudian di ikuti dengan syntax property: value.
2. Embedded CSS
Anda sanggup juga menempelkan arahan CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>. Kode CSS-nya diletakkan pada halaman yang sama dengan yang ingin diformat.
Contoh:
<style type=”text/css” media=screen>
p {color:blue;}
</style>
</head>
Dalam pola di atas semua elemen <P> dalam halaman web tersebut akan diformat memakai font berwarna biru.
3. External CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css atau ekstensi .css . Anda kemudian perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu mempunyai satu set arahan CSS yang dipakai untuk semua halaman web anda. Makara 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, kemudian tuliskan kode-kode css di dalam file tersebut.
- Langkah kedua yakni memanggil file style.css dari semua halaman web. Caranya dengan memasukkan arahan di bawah ini, di antara tag <head> dan </head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
4. Import CSS
Anda sanggup juga meng-import CSS ke dalam suatu halaman website memakai tag import.
Contoh:
atau
@import url(“style.css”);
Penggunaan Lebih dari Satu Kode CSS
Apabila ada lebih dari satu arahan CSS untuk satu elemen, maka yang akan dipakai yakni arahan yang lebih spesifik.
Misalkan dalam satu halaman web, memakai eksternal style sheet untuk memformat elemen H1 sebagai berikut:
color: red;
text-align: left;
font-size: 8pt
}
Sementara di halaman web yang sama, di antara tag <head> ada arahan CSS sbb:
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 menyerupai ini, maka yang akan aktif yakni arahan yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam pola di atas, arahan yang akan diimplementasikan yakni sebagai berikut :
text-align: right;
font-size: 20pt
CLASS dan ID SELECTOR
Masih ingat kan pada pelajaran syntax CSS pada bab atas posting ini , yang di tulis yakni selector. Pada contoh-contoh di pelajaran sebelumnya, anda melihat penggunaan tag HTML sebagai selector.
Misalkan anda membuat arahan CSS untuk tag <h1>. Sekarang bagaimana bila anda ingin memformat tag <h1> dengan warna / property berbeda? Misalkan, anda ingin tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna hitam.
Untuk kasus menyerupai ini, anda sanggup memakai Class selector dan ID selector.
Class Selector
Class selector yakni penggabungan beberapa properties yang dipakai lebih dari satu kali.
Cara penulisan Class Selector:
Untuk menempelkan class ke dalam tag HTML:
Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin memakai class selector di luar arahan HTML anda memakai tag <div class=nama-class> dan di akhiri dengan tag </div>.
Contoh:
Penulisan arahan CSS:
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian arahan 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>
Hasilnya bila di jalankan pada browser yakni :
Tag H1 tengah akan berwarna hitam
Tag H1 kiri akan berwarna biru
ID Selector
ID Selector menyerupai dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bab yang hanya muncul satu kali dalam satu halaman web, contohnya untuk memformat bab sajian / sidebar.
Cara penulisan ID Selector:
Untuk menempelkan ID selector ke dalam tag HTML:
Perhatikan tanda # di setiap awal nama ID. Jika anda ingin memakai class selector di luar arahan HTML anda memakai tag <div id=nama-ID> dan di akhiri dengan tag </div>.
CSS Font Family
CSS sanggup memformat font dengan banyak sekali macam cara mulai dari pengaturan tipe font, ukuran, dll. Saya akan coba bahas satu per satu ya.
1. CSS Font Family
Kalau anda biasa memakai ms word atau aplikasi lainnya dimana anda sanggup merubah jenis / tipe font, niscaya anda sudah mengenal nama-nama font seperti: arial, verdana, times new roman dll. Nah kalau di CSS kita sebut tipe font ini Font Family.
Cara penulisan:
property -> font-family
value -> nama-nama font, disarankan memakai hanya nama-nama font default
Contoh penulisan:
font-family: verdana;
}
h2 {
font-family: “times new roman”;
}
Hasilnya bila dijalankan di browser :
Ini yakni Heading 1 (H1) memakai font Verdana
Ini yakni Heading 2 (H2) memakai font Times New Roman
2. CSS Font Variant
Properti font variant dipakai untuk menampilkan font dalam abjad kapital kecil. Makara semua abjad non kapital akan bermetamorfosis abjad kapital, tetapi ukuran nya tetap sama. Perlu diketahui, tidak semua jenis font sanggup memakai properti ini.
Cara penulisan:
property -> font-variant
value -> small-caps
Contoh penulisan:
font-size: 14px;
font-variant: small-caps;
}
Hasilnya bila dijalankan pada browser :
Ini yakni Heading 1 (H1) memakai properti font variant
Sekian dulu ya tutorial CSS dari saya ,, dah pegal tangan ini ngetiknya , hehehe . Jangan lupa share atau komentarnya ya . Salam sukses bagi para programer.
