CSS BASIC (#15-CSS Width and Height Properties)

---

Height

Anda dapat mengatur ketinggian suatu elemen menggunakan property height.

height: value;

Value:

• auto
• length
• percentage

Line Height

Anda dapat mengatur ketinggian antar baris dengan menggunakan property line-height.

line-height: value;

Values:

• normal
• number
• length
• percentage

Max Height

Anda dapat mengatur ketinggian maksimum suatu elemen dengan menggunakan property max-height.

max-height: value;

Values:

• none
• length
• percentage

Min Height

Anda dapat mengatur tinggi minimum suatu elemen dengan menggunakan property min-height.

min-height: value;

Values:

• length
• percentage

Width

Anda dapat mengatur lebar elemen dengan menggunakan property width.

width: value;

Values:

• auto
• length
• percentage

Min Width

Anda dapat mengatur lebar minimum suatu elemen dengan menggunakan property min-width.

min-width: value;

Values:

• length
• percentage

Max Width

Anda dapat mengatur lebar maksimum dari suatu elemen dengan menggunakan property max-width.

max-width: value;

Values:

• none
• length
• percentage

;)
#stupidJob

---

CSS BASIC (#14-CSS List Style)

---

List Style

Anda dapat mengatur tampilan yang diinginkan dalam seuatu daftar dengan ringkas menggunakan property list-style.

list-style: value value;

Values:

• image
• position
• type

Anda juga dapat mengaturnya secara individu.

List Style Image

Anda dapat menggunakan gambar sebagai pengganti point bullet pada list style yang anda gunakan.

list-style-image: url(url gambar);

List Style Position

Anda dapat mengatur posisi list style yang anda inginkan dengan menggunakan property list-style-position.

list-style-position: value;

Values:

• inside
• outside

List Style Type

Anda dapat mengatur tampilan point bullets dengan menggunakan property list-style-type.

list-style-type: value;

Values:

• disc
• circle
• square
• decimal
• lower-roman
• upper-roman
• lower-alpha
• upper-alpha
• none

;)
#stupidJob

---

CSS BASIC (#13-CSS Borders)

---

Anda dapat memberi dan mengatur warna, style dak ukuran dari pembatas (border) pada suatu elemen dengan menyisipkan property border.

border: 1px solid #FF7600;

Values:

• width
• style
• color

Atau anda dapat mengatur setiap property secara individu.

Border Color

Anda dapat mengatur warna border secara individu dengan menyisipkan properti border-color.

border-color: value;

Values:

• color name
• hexadecimal number
• RGB color code
• transparent

Border Style

Anda dapat mengatur style dari border secara individu dengan menyisipkan property border-style.

border-style: value;

Values:

• dashed
• dotted
• double
• hidden
• none
• outset
• ridge
• solid

Border Width

Anda dapat mengatur style dari border secara individu dengan menggunakan property border-style.

border-width: value;

Values:

• Length
• Thin
• Medium
• Thick

Border Side

Anda juga dapat mengatur stye border dari setiap sisi dengan menggunan property border pada setiap sisi.

border-top: width style color;
border-right: width style color;
border-bottom: width style color;
border-left: width style color;

Untuk setiap sisi anda juga dapat mengatur ukuran, style dan warna seperti pengaturan border secara individu di atas.

border-top-color: value;
border-top-style: value;
border-top-width: value;
border-right-color: value;
border-right-style: value;
border-right-width: value;
border-bottom-color: value;
border-bottom-style: value;
border-bottom-width: value;
border-left-color: value;
border-left-style: value;
border-left-width: value;

;)
#stupidJob

---

CSS BASIC (#12-CSS Backgrounds)

---

Anda dapat mengatur tampilan background dari tiap elemen pada halaman anda dengan menggunakan property background.

background:#000000 url(url background) top left repeat fixed;

Values:

• attachment
• color
• image
• position
• repeat

Anda juga bisa mengatur setiap property secara individu.

Background Attachment

Anda dapat mengatur apakah background akan mengikuti gerakan ke bawah dan ke atas (scroll) dari halaman atau tetap pada posisinya.

background-attachment:value;

Values:

• scroll
• fixed

Background Color

Anda bisa secara khusus menetapkan warna dari background dengan menyisipkan property background-color.

background-color:value;

Values:

• color name
• hexadecimal number
• RGB color code
• transparent

Background Image

Anda dapat mengatur background menggunakan gambar.

background-image:url(url gambar);

Values:

• url
• none

Background Position

Anda dapat mengatur posisi gambar untuk background pada tiap elemen dengan menggunakan property background-position.

background-position:value;

Values:

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right
• x-% y-%
• x-pos y-pos

Background Repeat

Anda dapat mengatur background dari suatu elemen menjadi berulang vertikal, berulang horizontal ataupun tetep (tidak berulang).

background-repeat:value;

Values:

• no-repeat
• repeat (x+y)
• repeat-x (horizontal)
• repeat-y (vertical)

;)
#stupidJob

---

CSS BASIC (#11-Anchors, Links and Pseudo Classes)

---

Berikut ini adalah berbagai contoh cara yang dapat anda gunakan untuk membentuk style dari link pada halaman anda.

• a:link {color:#1e90ff;}
• a:visited {color:#0069d1;}
• a:hover {color:#ffa500;}
• a:focus {color:#b37400;}
• a:active {color:#00b300;}

Sekarang mari kita lihat apa fungsi masing-masing pada setiap style link di atas.

a:link {color:#1e90ff;}
Berfungsi sebagai penetapan warna asli link atau ketika tidak terjadi apa-apa pada link.

a:visited {color:#0069d1;}
Berfungsi sebagai penetapan perubahan warna link ketika pengguna sudah mengunjungi url/alamat yang ada di dalam link.

a:hover {color:#ffa500;}
Berfungsi sebagi penetapan perubahan warna link ketika pengguna meletakkan pointer mouse di atas link.

a:focus {color:#b37400;}
Fungsinya hampir sama dengan hover, tapi ini ditujukan untuk pengguna yang tidak menggunakan mouse. Misalnya seperti tabbing (penggunaan tombol keyboard) atau touch.

a:active {color:#00b300;}
Berfungsi sebagai penetapan link saat ditekan.

Untuk lebih jelasnya silakan perhatikan perubahan-perubahan pada link di bawah ini.

#stupidJob

Pseudo Classes

Anda dapat mengatur link yang terdapat di berbagai bagian dari halaman web anda menjadi warna yang berbeda-beda dengan menggunakan Pseudo Class ini. Misalnya link pada #content dan #navigation, anda dapat melakukannya seperti berikut ini.

#content a:link {color:#1e90ff;}
#content a:visited {color:#0069d1;}
#content a:hover {color:#ffa500;}
#content a:focus {color:#b37400;}
#content a:active {color:#00b300;}

#navigation a:link {color:#ffa500;}
#navigation a:visited {color:#b37400;}
#navigation a:hover {color:#1e90ff;}
#navigation a:focus {color:#0069d1;}
#navigation a:active {color:#00ff00;}

Untuk penulisan pada file (X)HTML bisa seperti berikut ini.

Teks untuk link

;)
#stupidJob

---

CSS BASIC (#10-FONT PROPERTIES)

---

CSS FONT PROPERTIES

---

Font property berguna untuk mengatur:

• Style
• Weight
• Variant
• Size
• Line High

Pada penataan font di file HTML yang anda buat.


Font Family

Anda dapat mengatur jenis font apa yang nanti akan tampil dengan menggunakan property dari font-family.
font-family:"Trebuchet MS", verdana;
Dimana pada contoh di atas, Trebuchet MS berfungsi sebagai family name atau font yang diutamakan untuk tampil dan Verdana berfungsi sebagai generic family atau pengganti dari font utama jika tidak support dengan browser yang digunakan. Akan tetapi jika jika kedua value chois tidak support dengan browser yang digunakan, akan secara otomatis berganti menurut font-family yang digunakan pada browser.

Generic family	Font family	Description
Serif	Times New Roman Georgia	Font Serif memiliki garis-garis kecil di ujung pada beberapa karakter
Sans-serif	Arial Verdana	"Sans" tidak memiliki garis seperti titik di ujung karakter
Monospace	Courier New Lucida Console	Memiliki lebar yang sama pada tiap karakter

Font Size

Anda dapat mengatur ukuran teks dalam file dengan menggunakan property font-size.
font-size:value;

Untuk value dari font-size:

• xx-small
• x-small
• smaller
• small
• medium
• large
• larger
• x-large
• xx-large
• precentage (%)
• lenght (px)

Font Style

Untuk style dari teks pada file yang anda buat.
font-style:value;

Untuk value-nya:

• normal
• italic
• oblique

Font Variant

Anda dapat mengatur varian dari teks dengan menggunakan property font-varian.
font-varian:value;

Untuk value-nya:

• normal
• small-caps

Font Weight

Property-nya:
font-weight:value;

Untuk value-nya:

• lighter
• light
• normal
• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900
• bold
• bolder

Bersambung...

CSS BASIC (#09-TEXT PROPERTIES)

---

CSS TEXT PROPERTIES

Text properties dasarnya terdiri dari beberapa style.

• Color
• Spacing
• Align
• Decoration
• Indent
• Transform

COLOR

Pada file CSS anda dapat mengaturnya dengan menggunakan tiga value yang ditentukan.

• Color name:
  { color:red; }
• Hexadecimal:
  { color:#ff0000; }
• RGB code:
  { color: (rgb(255, 0, 0)) }

SPACING

Anda dapat mengatur jarak ruang antar huruf dengan cara menetapkan value menjadi 0 (nol) atau lebih, akan tetapi anda juga dapat memberikannya value negativ.
leter-spacing:value;

Dimana value tersebut terdiri dari:

• leght
• normal

Selain Letter-Spacing, madih ada dua lagi untuk hal spacing dalam property text, yaitu white-space dan word-spacing.

Untuk word-spacing aturan dan value masih sama dengan letter-spacing dan berfungsi sebagai pengaturan ruang antar kata dalam file HTML, sedangkan untuk white space yang berfungsi sebagai pengatur jarak ruang antar elemen dalam file HTML memiliki sedikit perbedaan pada value-nya.

• normal
• pre
• nowarp

ALIGN

Text align mempunya aturan untuk value sebagai berikut:

• left
• right
• center
• justify

text-align:value;


DECORATION

Text decoration pada CSS memiliki aturan untuk value sebagai berikut:

• none
• underline
• overline
• line-through
• blink

text-decoration:value;


INDENT

text-indent:value;
Value:

• lenght
• precentage

TRANSFORM

text-transform:value;
Value:

• none
• capitalize
• lowercase
• uppercase

Bersambung...

---

CSS BASIC (#08-PADDINGS)

---

CSS PADDING.

---

CSS Padding merupakan jarak antar alemen pada file HTML dan content yang ada di dalamnya.

Sebagian besar aturan pada MARGINS juga berlaku pada padding ini, kecuali "auto value" dan "negativ value" tidak bisa digunakan didalam padding.

padding-top: length/percentage;
padding-left: length/percentage;
padding-right: length/percentage;
padding-bottom: length/percentage;

Seperti yang anda lihat di atas, padding mempunyai dua property sebagai value-nya.

• precentage
• length

Anda juga dapat membangun padding dalam sebuah property tunggal seperti berikut ini:

{
padding:9px 9px 9px 9px;
}

Value pada padding di atas mempunyai urutan posisi sebaga berikut (kiri-kanan):

• top
• right
• bottom
• left

Jika anda membangun padding hanya dengan satu value, value tersebut berfungsi menjadi ukuran padding disetiap sisi.
padding:17px;
Tapi jika anda hanya mengambil dua value dalam membangun padding, value tersebut menetapkan posisi dari lawan menurut urutan yang saya sebutkan di atas tadi.
padding:27px 31px;
Jadi pada value diatas 27px berfungsi menetapkan value untuk top dan bottom, sedangkan value 31px berfungsi menetapkan value untuk right dan left.

Jika anda tidak ingin menentukan ukuran dari sebuah sisi padding, anda cukup mengisinya dengan value nol (0) tanpa diikuti unit (px/%).
padding:45px 0 90px 0;

Bersambung...

---