Belajar CSS #beginner

Mei 20, 2011 at 6:43 am (komputer, Materiku) (, , )

CSS (Cascading Style Sheet) merupakan salah satu bahasa pemrograman web untuk mengendalikan komponen dalam suatu web sehingga akan lebih terstruktur dan seragam. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML atau XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah dan parameter lain (src:id.wikipedia.org)

1. Menerapkan CSS

Ada tiga cara untuk menerapkan CSS untuk HTML
1. In-Line
Cara ini menggunakan atribut style dalam HTML.
contoh:
<p style=”color: red”>text</p> Hal ini akan membuat teks berwarna merah pada paragraf tersebut.

Tetapi sebenarnya pendekatan praktik terbaik yaitu HTML harus berdiri sendiri sehingga diusahakan metode in-line dihindari sedapat mungkin

2. Internal
Internal atau disebut juga embeded digunakan untuk melakukan style seluruh halaman. Peletakan css dengan cara ini berada didalam tag head
eq:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html>
<head>
<title>CSS Example</title>
<style type=”text/css”>
p {
color: red;
}

a {
color: blue;
}
</style>

Kode tersebut akan menghasilkan warna merah pada semua paragraf di halaman dan warna biru pada semua link

3. Eksternal
Cara ini merupakan cara menulis terpisah antara file html dengan css.
eq:

p {
color: red;
}

a {
color: blue;
}

Supaya file tersebut bisa terintegrasi dengan halaman html maka halaman tersebut harus kita link-kan ke halaman html yang kita buat.Sebagai contoh kode tersebut akan kita simpan dengan nama web.css. Maka cara menge-link-kan dari file html ke css nya seperti berikut:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html>
<head>
<title>CSS Example</title>
<link rel=”stylesheet” type=”text/css” href=”web.css” />

2. Selector

Selector sama seperti tag pada HTML. Setiap selector pada css memiliki property yang diletakkan dalam tanda kurung kurawal. Property tersebut bisa berupa color, font weight atau backgroun color. Nilai property diberikan sebelum tanda titikdua “:” (tanpa tanda petik) bukan menggunakan samadengan “=” (tanpa tanda petik).
eq:

body {
    font-size: 0.8em;
    color: navy;
}

——————————-
body{
}      merupakan selector
——————————-
font-size: 0.8em;
    color: navy;  merupakan property selector
——————————-

3. Ukuran

Ada beberapa property spesifik yang digunakan untuk menyatakan size.
-em
eq:
font-size: 2em;
Maksudnya ukuran font-nya 2 kali current font size

-px
eq:
font-size: 12px;
Maksudnya ukuran font-nya 12 pixel

-pt
eq:
font-size: 12pt;
pt= unit for points(titik-titik)

-%
eq:
font-size: 80%;
% is unit for percentages

unit yang lain antara lain pc (picas), cm(centimeters), mm(millimeters) dan in (inches)

4Warna

Penulisan color pada css bisa menggunakan nama, rgb (red/green/blue) atau kode hexadecimal.
eq:

red
sama dengan
rgb(255,0,0)
sama dengan
rgb(100%,0%,0%)
nilai dalam rgb berkisar antara 0-255. angka 0 merupakan level paling rendah (eq no red), sedangkan angka 255 merupakan level paling tinggi (eq full red). Nilai pada rgb bisa juga dinyatakan dalam persentase (0%-100%)
sama dengan
#ff0000
sama dengan
#f00
Hexadesimal merupakan base-16 number system yaitu mempunyai 16 digit dari 0 sampai f. Number hexadesimal diawali dengan tanda # dan panjangnya bisa 3 digit atau 6 digit. Untuk yang 3 digit itu merupakan kompresi dari 6 digit
eq:
#f00 = #ff0000
#c96 = #cc9966
versi 3 digit lebih mudah untuk diuraikan seperti pada versi rgb (digit pertama seperti halnya nilai pertama pada rgb misalnya red, digit kedua green, dan digit ketiga blue). Sedangkan versi 6 digit mempunyai kelebihan yaitu kita bisa lebih mengontrol warna dengan tepat.

Ada beberapa 17 warna standar dan 1 warna transparan yang sering digunakan dalam css antara lain:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navi, olive, orange, purple, red, silver, teal, white, yellow
transparent

5.  Text

Anda dapat merubah ukuran dan bentuk teks pada halaman web dengan menggunakan property sebagai berikut:

*font-family
Font aman yang sering digunakan seperti arial, verdana, dan times new roman tetapi anda dapat menentukan lebih dari satu font dengan memisahkannya menggunakan tanda koma. Tujuan penggunaan font lebih dari satu yaitu supaya jika dikomputer pengguna tidak mendukung format font yang pertama maka browser akan melalui daftar sampai menemukan format font yang dimiliki pengguna. Hal ini berguna karena terkadang komputer yang berbeda memiliki font berbeda juga.

*font-size
Untuk mengatur ukuran font

*font-weight
Ini digunakan untuk menyatakan apakah teks tebal atau tidak. Pada prakteknya penggunaan font-weight berupa bold atau normal
eq:
font-weight: bold;
font-weight: normal;

Tapi secara teori itu bisa juga font-weightnya bolder, lighter, 100, 200, 300, 400, 500,600,700, 800 atau 900

*font-style
Ini digunakan untuk menyatakan apakah teks italic (miring) atau tidak
eq:
font-style: italic;
font-style: normal;

*text-decoration
Ini digunakan untuk menyatakan apakah teks underlined(bergaris bawah) atau tidak.
eq:
text-decoration: overline => menempatkan garis diatas teks
text-decoration: line-through => menempatkan garis pada teks
text-decoration: underline => seharusnya hanya digunakan untuk link, karena user umumnya berasumsi bahwa teks dengan garis bawah mempunyai link
text-decoration: none => tidak ada garis bawah pada teks, bisa digunakan ketika kita membuat teks link tapi kita tidak menginginkan teks tersebut ada garis bawahnya.

*text-transform
Ini digunakan untuk mengubah case dari teks
eq:
text-transform: capitalize => untuk merubah huruf pertama pada kata menjadi huruf besar
text-transform: uppercase => merubah semua kata menjadi huruf besar
text-transform: lowercase => merubah semua kata menjadi huruf kecil
text-transform: none

contoh kode css:
body {
font-family: arial, helvetica, sans-serif;
font-size: 0.8em;
}

h1 {
font-size: 2em;
}

h2 {
font-size: 1.5em;
}

a {
text-decoration: none;
}

strong {
font-style: italic;
text-transform: uppercase;
}

*text-spacing
letter-spacing => untuk spasi antar huruf
word-spacing => untuk spasi antar kata
line-height => mengatur ukuran(jarak) tiap baris dalam sebuah elemen seperti paragraf tanpa menyesuaikan ukuran font
text-align => properti akan menyesuaikan teks di dalam sebuah elemen ke kiri, tengah, kanan atau justify (rata kanan kiri)
text-indent => properti yang digunakan untuk membuat indent pada baris pertama paragraf


Bersambung…

2 Komentar

  1. alivfaizalmuhammad said,

    ada tutorial CSS buat joomla gak ya?
    http://alivfaizalmuhammad.wordpress.com

    • sutrionline said,

      @aliv: blm ada mas aliv… ak bru bikin dasar2nya nih… ak jg msh bljr jadi ne critanya bikin ringkasan materi di blog gt🙂
      thanks ya udah berkunjung…🙂

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: