Sabtu, 18 Juni 2011

Pengertian CSS dan Cara Penerapan CSS pada HTML

09.04    No comments

Pada artikel saya kali ini saya akan menjelaskan sedikit tentang pertanyaan rekan pixar ataupun yang lainnya tentang CSS. Apa yang dimaksud dengan CSS?! CSS adalah singkatan dari Cascading Style Sheet, digunakan untuk mengatur style atau tampilan dari dokumen HTML. Menurut wikipedia, CSS adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu website, baik tata letak, jenis huruf, warna, dan semua yang berhubungan dengan tampilan atau gaya suatu web.
Mengapa harus memakai CSS?!
Penggunaan CSS merupakan standar untuk web-web modern (Web 2.0). Sebagian pembaca mungkin sudah tau bahwa implementasi CSS, Table Less dan Semantik tapi tidak Divitis (maniak div) merupakan standarisasi web yang baik. Saya sendiri sebetulnya tidak peduli apakah CSS adalah Standar Web ataupun Bukan, menurut saya kita memang harus melakukan implementasi CSS untuk setiap perancangan website kita karena dengan CSS kita tidak akan melakukan hal-hal yang terus diulangi dalam menerapkan suatu gaya pada tag HTML yang kita buat, cukup satu kode untuk semua mark up yang sama.
Lalu bagaimana teknik implementasi CSS pada tag HTML yang kita buat?!
Ada dua cara yang bisa diterapkan untuk menggunakan CSS pada web. Cara yang pertama adalah dengan membuat CSS langsung didalam satu file HTML kita (internal / inline style sheet). Cara yang kedua adalah dengan cara memanggil CSS tersebut dari file CSS tersendiri (external style sheet). selanjutnya mari kita langsung praktek silahkan buka dreamweaver anda atau text editor, dsb :

1. Internal Style Sheet

Cara membuat internal Style Sheet adalah dengan menambahkan tag sehingga kode HTML menjadi sebagai berikut
?













<html>
<head>
<title>Belajar CSStitle>
<style type="text/css">
<style>
<head>
<body>
</body>
</html>

Ok, sekarang anda paham kan dimana kita harus menerapkan CSS dengan cara internal Style Sheet.. Tapi saya tau anda tidak puas kalau saya hanya menerangkan dimana saya harus meletakan CSS nya. kurang seru tanpa praktek membuat web CSS, betul tidak?! Ha... karena itu mari kita mulai membuat website dengan teknik CSS. berikut gambar proyek web table less dengan penerapan CSS kita kali ini


Bagaimana cara membuatnya ?!
Pertama-tama kita buat tag html sebagai berikut :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head>
<title>CSS Pertamakutitle>
<style type="text/css">
  
style>
head>
<body>
  
<ul class="navbar">
    <li><a href="index.html">Homea>
    li><li><a href="about.html">Abouta>
    li><li><a href="gallery.html">Gallerya>
    li><li><a href="links.html">Linksa>
li>ul>
   
<h1>CSS Pertamakuh1>
<p>Selamat datang di Web CSS kup>
<p>Halo ini website CSS ku, mungkin tidak ada gambar
  disini tapi setidaknya ini punya gayap>
<p>Harusnya ada lebih gaya markup disini tapi saya tidak
  tahu bagaimana membuatnya,
  apakah ada yang bisa memberitahu?!p>
   
<p>hubungi saya kalo ada yang bisa karena
saya sedang mati gayap>
<address>Made 12 Juni 2009 by myself.address>
body>
html>
Tag HTML tersebut akan menghasilkan document website yang dapat dilihat pada gambar sebagai berikut

Uek, jelek bukan hasilnya, maka dari itu sekarang mari kita tambahkan gaya untuk tag HTML tersebut dan menambahkan mark up CSS pada tag HTML, ganti tulisan dengan markup sebagai berikut
?
1
2
3
4
5
6
body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: white;
    background-color: #555555
}
Kegunaan dari tag diatas adalah untuk memberi jarak lapisan (padding), warna dan jenis font yang kita gunakan serta warna latar dari web ( body HTML ). Untuk Warna anda bisa dengan langsung menambahkan jenis warna seperti black, white, purple, yellow, red, dsb, atau jika warnanya unik anda bisa menambahkan kode warna seperti #8c1f1f ( untuk merah tua ). Kode warna ini bisa anda dapatkan dari photoshop. Ok sebelum melanjutkan bila belum mengetahui kegunaan masing-masing properti CSS seperti padding, color, background dsb, silahkan baca postingan saya mengenai dasar CSS di link ini Pengertian dan Tutorial Dasar CSS untuk Pemula dan link ini Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline
Sekarang kita mark up CSS untuk tag HTML ul. bila anda perhatikan tag UL mengandung class :
    , class merupakan atribut tag html yang bisa kita didefinisikan nama-namanya untuk dihubungkan dengan mark up CSS, selain class ada juga atribut yang bernama id tapi tentang class dan id ini sebaiknya kita bahas lebih lanjut lagi di bagian artikel CSS saya yang kedua, supaya kali ini kita lebih fokus ke dasar CSS nya duou. Ok Selanjutnya tambahkan saja kode berikut :
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    ul.navbar {
        list-style-type: none;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 2em;
        left: 1em;
        width: 9em
    }
    ul.navbar li {
        background: white;
        margin: 0.5em 0;
        padding: 0.3em;
        border-right: 1em solid #FF6600
    }
    ul.navbar a {
        text-decoration: none
    }
    ul.navbar a:hover {
        color: #FF0000
    }
    Selanjutnya mark up juga tag h1 (heading ), p (paragraph), addres (alamat), a (text yang mengandung link ), a:hover (text yang mengandung link dan sedang ditunjuk mouse), a:visited (text yang mengandung link dan linknya telah dikunjungi ). tambahkan kode dibawah :
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    h1 {
        font-family: Helvetica, Geneva, Arial,
        Sans-Regular, sans-serif;
    }
    a:link {
        color: #00CC66
    }
    a:visited {
        color: purple;
    }
    address {
        margin-top: 1em;
        padding-top: 1em;
        border-top: thin dotted;
    }
    Dengan demikian markup CSS dengan cara inline style sheet untuk semua Tag HTML telah selesai, Hasil akhir tag adalah sebagai berikut
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    <html>
    <head>
    <title>CSS Pertamakutitle>
    <style type="text/css">
       body {
            padding-left: 11em;
            font-family: Georgia, "Times New Roman", Times, serif;
            color: white;
            background-color: #555555
        }
       ul.navbar {
            list-style-type: none;
            padding: 0;
            margin: 0;
            position: absolute;
            top: 2em;
            left: 1em;
            width: 9em;
        }
       ul.navbar li {
            background: white;
            margin: 0.5em 0;
            padding: 0.3em;
            border-right: 1em solid #FF6600;
        }
       ul.navbar a {
            text-decoration: none;
        }
       h1 {
            font-family: Helvetica, Geneva, Arial,
            Sans-Regular, sans-serif
        }
       a:link {
            color: #00CC66
        }
       a:visited {
            color: purple
        }
       address {
            margin-top: 1em;
            padding-top: 1em;
            border-top: thin dotted
        }
    style>
    head>
    <body>
    <ul class="navbar">
        <li><a href="index.html">Homea>
        li><li><a href="about.html">Abouta>
        li><li><a href="gallery.html">Gallerya>
        li><li><a href="links.html">Linksa>
    li>ul>
    <h1>CSS Pertamakuh1>
    <p>Selamat datang di Web CSS kup>
    <p>Halo ini website CSS ku, mungkin tidak ada gambar
    disini tapi setidaknya ini punya gayap>
    <p>Harusnya ada lebih gaya markup disini tapi saya
    tidak tahu bagaimana membuatnya,
      apakah ada yang bisa memberitahu?!p>
    <p>hubungi saya kalo ada yang bisa karena saya
    sedang mati gayap>
    <address>Made 12 Juni 2009  by myself.address>
    body>
    html>

    2. External Style Sheet

    Menuliskan Mark up CSS untuk external Style Sheet sama saja dengan cara diatas, bedanya penulisan Markup tidak ditempatkan didalam HTML melainkan dibuat file sendiri dengan ekstensi .css, Silahkan buat file text baru kemudian save as style.css dan simpan di direktori yang sama.
    Langkah selanjutnya buat markup sebagai berikut pada file style.css yang baru kita buat
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    body {
        padding-left: 11em;
        font-family: Georgia, "Times New Roman", Times, serif;
        color: white;
        background-color: #555555 }
    ul.navbar {
        list-style-type: none;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 2em;
        left: 1em;
        width: 9em }
    ul.navbar li {
        background: white;
        margin: 0.5em 0;
        padding: 0.3em;
        border-right: 1em solid #FF6600 }
    ul.navbar a {
        text-decoration: none }
    h1 {
        font-family: Helvetica, Geneva, Arial,
        Sans-Regular, sans-serif }
    a:link {
        color: #00CC66 }
    a:visited {
        color: purple }
    address {
        margin-top: 1em;
        padding-top: 1em;
        border-top: thin dotted }
    Untuk menghubungkan file HTML dengan CSS maka pada tag header HTML diganti menjadi sebagai berikut :
    ?
    1
    2
    3
    4
    5
    6
    <html>
    <head>
    <title>CSS Pertamakutitle>
    <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
    head>
    penerapan external maupun internal CSS yang saya jelaskan diatas akan menghasilkan dokumen web dengan gaya yang sama

    Sampai Jumpa Lagi di Mark Up CSS bagian Selanjutnya
    Selamat mencoba

0 komentar:

Posting Komentar

WARNING !
Komentar anda tidak boleh mengandung unsur:
1.Penghinaan, Rasis dan Pelecehan
2.Spamming (Spam Comments)
3.Link Iklan, ads etc
Terima Kasih.


Jika ada request ato laporan tentang :
1.Request Software atau Tutorial
2.Bad Link & Re-active link (akibat broken link)
Silakan comment di bawah atau kirim pesan ke saya via facebook >> Akunku : Adhieresthenes Hier Banu Arfakhshad