Pengenalan CSS


Ini merupakan post pertama aku mengenai pemrograman web, ngak tau kenapa minggu-minggu ini lagi suka pemrograman sama matematika? Walaupun pusing dan sempet ngak bisa tidur karena buat program ngak jadi-jadi, tapi secara keseluruhan programming itu asyik lho.

Sebenarnya aku masih punya banyak banget hutang buat SEO tutorial. Tapi karena akhir-akhir ini aku lagi belajar programming jadi share mengenai CSS dulu deh.

Sebelum memulai, pastikan kamu sudah paham betul HTML agar proses belajar lebih mudah nantinya. Belajar HTML [disini].

Siapkan camilan dan secangkir kopi bila diperlukan.

MENGENAL CSS


Cascading Style Sheet (CSS) merupakan salah satu teknologi bahasa pemrograman berbasis web yang dikembangkan untuk mempercantik halaman web dan mengendalikan beberapa komponen dalam sebuah website sehingga akan lebih terstruktur dan seragam.

CSS bisa juga diartikan sebagai bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kamu untuk menampilkan halaman yang sama dengan format yang berbeda. Hal tersebut membuat HTML menjadi lebih efisien karena melihat perkembangan HTML yang kurang praktis karena terlalu banyak dibebani hal-hal yang berkaitan dengan layout seperti font dan lain-lain.

Penggunaan CSS terbukti tidak hanya menutupi kekurangan HTML tapi juga menyempurnakannya dalam berbagai aspek. Banyak website dengan design interaktif & responsif tidak lepas dari peran CSS dalam mengatur elemen website. Walaupun banyak digunakan dalam pengembangan web, tutorial pengenalan CSS ini dibuat pada dasarnya memiliki destinasi tujuan lebih ke SEO karena pengetahuan CSS yang baik akan sangat membantu dalam proses optimasi mesin pencari nantinya.

Aplikasi CSS pada SEO dengan dilakukannya minifying atau proses compressing halaman website agar loading page menjadi lebih ringan.

Q: Apakah membutuhkan compiler untuk menjalankan CSS?
A: Tidak perlu, kamu cukup menjalankan CSS menggunakan browser. Semua browser mempunyai engine yang bisa menginterpretasikan script CSS yang kamu buat.

Q: Dimana aku bisa menulis script CSS?
A: Kamu bisa menulis script CSS di teks editor seperti notepad, wordpad dan sebagainya.

Q: Apakah penulisan syntax case sensitive?
A: Syntax CSS bersifat tidak case sensitive, artinya huruf kecil dan besar adalah sama.


KELEBIHAN CSS


Adapun beberapa kelebihan CSS adalah sebagai berikut:
1. Memisahkan desain dengan konten halaman web.
2. Mengatur design sefisien mungkin.
3. Lebih mudah di load karena pada umumnya membuat coding web lebih ringkas
4. Satu script CSS dapat digunakan banyak halaman web.


Syntax CSS


Berikut ini adalah struktur penulisan CSS.

Selector {
         Properties : Value;
}

Komentar dalam CSS:

// Komentar
/* Komentar */


Selector pada CSS


CSS memiliki 3 jenis selector basic yaitu class selector, id selector, dan tag selector.

1. Class Selector.

Class merupakan “agen bebas” yang dapat diterapkan untuk tag HTML apapun. Kamu dapat membuat nama class dengan hampir semua nama apapun. Karena class selector dapat diterapkan ke beberapa tag HTML sekaligus, maka class adalah selector yang paling serbaguna. Penulisan class selector dalam CSS disymbolkan dengan tanda titik ( . ).

Contoh:
Penulisan code dalam dokumen HTML


....
<h3 class='judul'>
          Indahnya Pantai Melbourne di Australia
</h3>
....

Penulisan code dalam CSS

.judul {
          Font : 12pt Impact;
}

B. ID Selector

Hampir sama dengan class, ID Selector dapat diterapkan untuk hampir semua tag HTML, tetapi penggunaanya hanya sekali dalam satu halaman untuk satu tag HTML tertentu.

Contoh:
Penulisan code dalam dokumen HTML

....
<div id='footer'>
          Copyright © SearchMarketing.com.au
</div>
....

Penulisan code di CSS

#footer {
          color : blue;
          border : 1px solid black;
}

3. Tag Selector

Nama dari element HTML digunakan sebagai selector untuk mendefinisikan tag HTML yang berasosiasi. Misalnya, selector dari <h1> adalah h1. HTML selector digunakan dalam CSS rule untuk mendefinisikan bagaimana suatu tag akan ditampilkan.

Contoh:
Penulisan code di dokumen HTML

....
<h1> Tutorial HTML dan CSS </h1>
....

Penulisan code di CSS:

h1 {
          font : 12pt Impact;
          color : red;
}


Aplikasi CSS


Ada 3 cara penggunaan CSS yaitu inline CSS, embedded CSS dan external CSS.

A. Inline CSS
Cara penggunaan CSS dengan menambahkan langsung pada tag html yang digunakan sebagai atribut.

B. Embedded CSS
Merupakan aplikasi CSS yang disisipkan di dalam tag <head>...</head> pada dokumen HTML.

C. External CSS.
Cara ini menggunakan file CSS yang dituliskan secara terpisah dengan dokumen html. Dengan cara ini, kamu nanti hanya perlu memiliki satu set kode CSS dimana kode style CSS akan di host secara terpisah.

Contoh Embedded CSS:

<html>
          <head>
                    <title>Digital Marketing Service: SEO, PPC, Social Media Marketing | Search Marketing.com.au</title>
          </head>
<body>
          <a href=http://searchmarketing.com.au>Digital Marketing Service in Australia</a>
</body>
</html>

Dari kode diatas kita memiliki sebuah dokumen HTML yang isinya adalah link menuju. http://searchmarketing.com.au. Ketika halaman tersebut dibuka lewat browser maka hasilnya akan seperti gambar dibawah ini:


Bagaimana kalau kita mau merubah style teks link agar lebih menarik, untuk merubahnya kita bisa gunakan CSS. Sekarang kita coba ubah style link tersebut dengan CSS.

Pertama tambahkan tag <style>...</style> diantara tag <header>...</header>,
kemudian masukkan code CSS di antara tag <style>...</style>.

<style type="text/css">
          a {
                    color : red; /* merubah warna teks */
                    text-decoration : none; /* menghilangkan underline */
                    background-color : green; /* merubah warna background */
          }
</style>

Dari script diatas kita bermaksud mau merubah style/tampilan teks link pada halaman browser menjadi warna merah. Menghilangkan garis bawah pada teks link dengan properties text-decoration dan merubah warna background pada text link dengan warna hijau. Hasilnya:


Sekarang kita tambahkan efek pada link tersebut. Berikut adalah kode untuk menambahkan efek pada teks link.

<style type="text/css">
          a {
                    color : red;
                    text-decoration : none;
                    background-color : green;
}

          a:hover {
                    color : green;
                    background-color : red;
                    text-weight:bold; /*membuat teks tebal*/
}
</style>

Dari kode diatas kita menambahkan efek pada link, efek tersebut akan berkerja pada saat pointer mouse mengenai teks link yang merupakan fungsi dari "hover". Dan hasilnya akan seperti ini:



Pembuatan Top Menu Sederhana Dengan CSS




<html>
<head>
<title>Belajar Web</title>
<style>
/* RESET */
html, body, div, span, applet, object, iframe, h1, h3, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
margin: 0; padding: 0; outline: 0; fontsize: 100%; vertical-align: baseline; background: transparent; height: auto; border-top-width: 0; border-bottom-width: 0; border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after {content: none;} blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
ol, ul {list-style: none;}
ol, ul {list-style: none;}
body {background-color: #ffffff;backgroundposition: center center;}
/* RESET */

          #menu ul li a {
                    color : red;
                    text-decoration : none;
                    padding : 0px 5px 0px 5px; /*memberi jarak antar teks*/
                    font : 15pt cambria; /* mengatur format teks */
                    font-weight : bold;
          }

          #menu ul li a:hover {
                    color : white;
                    background-color : red;
          }

          #menu ul li {
                    display : inline; /* membuat tampilan list sejajar ke samping* /
                    padding : 0px 2px 0px 2px;
                    background-color : blue;
          }
</style>
</head>
<body>
          <div id="menu">
                    <ul>
                              <li><a href="#">HOME</a></li>
                              <li><a href="#">PRODUCT</a></li>
                              <li><a href="#">GALLERY</a></li>
                              <li><a href="#">ABOUT US</a></li>
                              <li><a href="#">CONTACT US</a></li>
                    </ul>
          </div>
</body>
</html>

Maka hasilnya akan terlihat seperti gambar dibawah ini:


Keterangan syntax:
*) #menu ul li berfungsi mengatur bagian list sub menu yang berada didalam bagan list menu utama.
*) text-decoration : none; Menghilangkan garis bawah (underline) pada link
*) display : inline;  Membuat tampilan list sejajar ke samping
*) #menu ul li a:hover Mengatur font dan warna background ketika pointer mouse diarahkan ke link pada list dan sub menu list.
*) /* RESET */ Global reset CSS function Berfungsi menyamakan layout berbeda pada setiap default browser.

Ini baru basic dari CSS, lain kesempatan akan aku share fungsi CSS lain yang bisa diaplikasikan pada dokumen HTML untuk tingkat intermediate sampai advanced lebih detail dan lengkap karena teknologi pemrograman web masih terus dikembangkan sampai saat ini.

Apabila ada pertanyaan silahkan tanyakan pada kolom komentar.



playboy_seo

Title: Pengenalan CSS
Posted by: Agung Purnomo
Published: 2015-04-03T05:23:00-07:00
Rating: 3.5
Reviewer: 431 Reviews
Pengenalan CSS

Leave a Reply

Need SEO Services?


The Periodic Table Of SEO Success Factors








Mau lebaran ngak punya duit, begadang tiap malem optimasi keyword minuman berenergi & martabak paling enak di Jakarta.

AWARD




Tools

Tools
Powered by Blogger.