Cara Menggabungkan Html Dengan Css

Cara menggabungkan HTML dengan CSS

Sebenarnya ada tiga macam cara untuk menggabungkan antara file HTML dengan file CSS.

Berikut ini ketiga cara untuk menggabungkan file HTML dengan CSS :

1. Inline Style

Inline Style yakni cara penulisan file CSS secara eksklusif kedalam Tag HTML, berikut ini pola penulisan Inline Style:

<html> <head> <title>Penggabungan File HTML dan CSS</title> </head> <body> <p> <h2 style=”color:#FFCC00″>Contoh untuk Inline Style </p> </h2 </body> </html>

2. Embedded Style

Embedded Style merupakan cara penulisan CSS kedalam file HTML per halaman ( Page ) dan penulisan file CSS sebelum ….</head>

Berikut ini pola penulisannya :

<html> <head> <title>Penggabungan File HTML dan CSS</title> <style type=”text/css”> h2{ color:#FFCC00; background:#CC0000; } </style> </head> <body> <p> <h2>Contoh untuk Embedded Style </p> </h2> </body> </html>

3. Link Style

Untuk penulisan Link Style merupakan penulisan secara terpisah antara file HTML dan file CSS dan kita tinggal memasang link saja, dan pemasangan Link anda mampu taruh di antara <head>…</head>. Untuk cara Link Style ini yang banyak digunakan oleh para Web Design atau programmer karena cara Link Style yakni cukup satu kali penulisan file CSS yang nantinya digunakan oleh seluruh halaman Website. Biasanya para Web Design menamai file Link Style CSS dengan nama style.css.

Berikut ini pola filenya:

<html> <head> <title>Penggabungan File HTML dan CSS</title> <link href=”css/style.css” rel=”stylesheet” type=”text/css” /> </head> <body> <p> <h2>Contoh untuk Link Style </p> </h2> </body> </html>

File CSS biasanya disimpan dengan ekstitensi .css atau dengan nama style.css

h2{ color: #FFCC00; background: #CC0000; }

Catatan :

Untuk menyisipkan Link ke file style.css penempatannya harus diantara <head>….</head>.
Anda mampu membuat lebih file css lebih dari satu sesuai dengan kebutuhan.

Komponen Property yang digunakan

Berikut ini yakni komponen property yang digunakan pada CSS :

Property Text Style

Property Text Style mampu anda gunakan untuk membuat gaya ukiran pena anda pada web. Adapun komponen Text Style atau yang berafiliasi dengan model atau gaya tulisan/font dari CSS yakni sebagai berikut ini :

1. color

Property ini mengontrol warna dari text penulisannya Selektor {color:#000000} Value mampu warna Hexadesimal mampu hanya ukiran pena misalnya untuk kuning menggunakan Yellow.

2. font-weight

Property ini mengontrol tebal dari text penulisannya Selektor { font-weight:100}

Value mampu anda tulis dengan angka mulai dari seratus dan dilanjutkan dengan kelipatannya atau mampu anda tulis dengan kata ‘Bold’ atau yang lain.

3. font-family

Property ini untuk mengatur font yang anda pakai

Selektor{font-family:Arial, Helvetica, sans-serif} Untuk jenis font sebaiknya menggunakan standard bawaan Windows,jika ingin terbaca oleh seluruh user.

4. font-size

Property ini untuk mengatur ukuran font yang akan dipakai

Selektor{ font-size:12px} Untuk ukuran font anda mampu menggunakan ukuran… px,…em atau small,medium,large dll.

5. font-variant

Property ini untuk mengatur font yang akan muncul apakah menggunakan aksara kecil atau small caps

Selektor{ font-variant:small-caps} atau anda mampu menggunakan normal.

6. font-style

Property ini untuk mengatur style font yang akan digunakan pada text Selektor{ font-style:italic} pilihan value lain normal, oblique

7. text-decoration

Property ini untuk mengatur style font lanjutan dari font style. Selektor{text-decoration:underline} atau value lain : line through, none, blink, overline

8. text-transform

Property ini untuk mengatur capital font

Selektor{ text-transform:lowercase} value lain: uppercase, capitalize

Property Text Layout

Property Text Layout ini berfungsi untuk mengatur bagaimana efek dari suatu layout suatu ukiran pena pada halaman website.

Property ini lebih berfokus pada penempatan dan tampilan yang ditempatkan pada halaman web anda.

Anda mampu mengombinasikan antara tampilan page layout dan text layout semoga tampilan website anda lebih elegant dan sesuai dengan cita-cita anda tentunya dan itu yang terperinci tidak mampu anda dapatkan pada HTML.

Berikut ini propertynya :

1. letter-spacing

Property ini untuk mengontrol jarak space antar karakter Selektor{letter-spacing:normal} untuk value normal maka akan diatur oleh browser sebagai justify text.

2. word-spacing

Property ini untuk mengontrol jarak space antar text atau kata Selektor{ word-spacing:normal}

3. line-height

Property ini untuk mengatur jarak line atau garis Selektor{ line-height:normal} value lain : …em, …px atau persentase …%

4. text-indent

Property ini untuk mengatur dari baris pertama yang masuk biasanya untuk awal paragraph. Selektor{ text-indent:50px}

5. text-align

Property ini untuk mengatur posisi dari text Selektor{ text-align:justify} Value lain : left, right, center

6. vertical-align

Property ini untuk mengontrol jarak space antar text atau kata Selektor{ vertical-align:top} value lain: text-top,text-bottom, bottom, middle, baseline, sub, super.

7. direction

Property ini untuk mengatur dan menentukan arah dari suatu ukiran pena pada website Selektor{ direction:ltr} Value lain : rtl Keterangan : ltr =Tulisan yang terbaca dari kiri ke kanan rtl =Tulisan yang terbaca dari kanan ke kiri

8. unicode-bidi

Property ini untuk mengontrol dan mengarahkan pada ukiran pena unicode Selektor{ unicode-bidi:bidi-override} Value lain : normal, embed

Property Border

Property ini yakni untuk mengatur elemen yang memiliki garis dengan aneka macam variasi lebar,warna serta gaya suatu tampilan. Anda mampu membuat suatu garis antara kiri-kanan-atas-bawah dengan berbeda style.

Berikut ini propertynya :

1. border

Property ini untuk mengatur border secara keseluruhan Selektor{border:normal} Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

2. border-width

Property ini untuk mengatur lebar border secara keseluruhan Selektor{ border-width:thin} Value lain : thick, medium

3. border-top-width

Property ini untuk mengatur lebar border top Selektor{ border-top-width:thin} Value lain : thick, medium

4. border-right-width

Property ini untuk mengatur lebar border right Selektor{ border-right-width:thin} Value lain : thick, medium

5. border-bottom-width

Property ini untuk mengatur lebar border bottom Selektor{ border-bottom-width:thin} Value lain : thick, medium

6. border-left-width

Property ini untuk mengatur lebar border left Selektor{ border-left-width:normal} Value lain : thick, medium

7. border-color

Property ini untuk mengatur warna dari border Selektor{ border-color:#333333} Value lain : anda mampu gunakan warna hexadecimal yang awalnya dimulai dengan tanda #

8. border-style

Property ini untuk mengatur style dari border Selektor{ border-style:normal} Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

9. border-top

Property ini untuk mengatur border top Selektor{ border-top:normal} Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

10. border-right

Property ini untuk mengatur border right Selektor{ border-right:normal} Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

11. border-bottom

Property ini untuk mengatur border bottom Selektor{ border-bottom:normal} Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

12. border-left

Property ini untuk mengatur border left Selektor{ border-left:normal} Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

Property Margin

Property Margin ini untuk mengatur ruang atau jarak batasan antar elemen, misalnya antara elemen atas dan bawah, atau antara kiri dan bawah dll.

Berikut ini propertynya :
1. margin
Property ini untuk mengatur jarak meliputi secara keseluruhan antar elemen Selektor{ margin:auto} Value lain mampu ukuran …px,…em atau persentase misalnya 25%
2. margin-top
Property ini untuk mengatur jarak top dengan elemen Selektor{ margin-top:auto} Value lain mampu ukuran …px,…em atau persentase misalnya 25%
3. margin-left
Property ini untuk mengatur jarak left dengan elemen Selektor{ margin-left:auto} Value lain mampu ukuran …px,…em atau persentase misalnya 25%
4. margin-right
Property ini untuk mengatur jarak right dengan elemen Selektor{ margin-right:auto} Value lain mampu ukuran …px,…em atau persentase misalnya 25%
5. margin-bottom
Property ini untuk mengatur jarak bottom dengan elemen Selektor{ margin-bottom:auto} Value lain mampu ukuran …px,…em atau persentase misalnya 25%

Property Padding

Property padding yakni untuk mengatur ruang antara elemen dan konten.

Berikut ini propertynya :
1. padding
Property ini untuk mengatur ruang elemen dengan konten secara global Selektor{ padding:7px} Value lain mampu ukuran …px,…em atau persentase misalnya 25%
2. padding-top
Property ini untuk mengatur ruang elemen top dengan konten Selektor{ padding-top:7px} Value lain mampu ukuran …px,…em atau persentase misalnya 25%
3. padding-left
Property ini untuk mengatur ruang elemen left dengan konten Selektor{ padding-left:7px} Value lain mampu ukuran …px,…em atau persentase misalnya 25%
4. padding-right
Property ini untuk mengatur ruang elemen right dengan konten Selektor{ padding-right:7px} Value lain mampu ukuran …px,…em atau persentase misalnya 25%
5. padding-bottom
Property ini untuk mengatur ruang elemen bottom dengan konten Selektor{ padding-bottom:7px} Value lain mampu ukuran …px,…em atau persentase misalnya 25%

Property Page Layout

Property Page Layout yakni untuk mendesign suatu layout pada halaman web, ini property penting yang harus anda kuasai karena dengan menguasai property ini maka anda mampu membuat suatu halaman web yang elok dan tentunya harus didukung akan kreatifitas seseorang. Pada HTML tidak mendukung akan tampilan layout sebaik CSS, dengan menguasai Property ini anda juga mampu merubah pada themes atau template pada script CMS yang da sekarang ini.

Berikut ini propertynya :

1. position
Property ini untuk menentukan dimana elemen akan ditempatkan juga untuk menempatkan elemen induk. Selektor{ position:absolute} Value lain : fixed,relative, static, top, bottom, left, right
2. top
Property ini untuk menentukan belahan ataatas dari suatu elemen ditempatkan. Selektor{ top:absolute} Value lain : fixed,relative, static,auto
3. left
Property ini untuk menentukan belahan kiri dari suatu elemen ditempatkan. Selektor{ left:absolute} Value lain : fixed,relative, static,auto
4. bottom
Property ini untuk menentukan belahan bawah dari suatu elemen ditempatkan. Selektor{ bottom:absolute} Value lain : fixed,relative, static,auto
5. right
Property ini untuk menentukan belahan kanan dari suatu elemen ditempatkan. Selektor{ right:absolute} Value lain : fixed,relative, static,auto
6. width
Property ini untuk menentukan lebar dari suatu elemen Selektor{width:50%} value lain: …px,…em,auto
7. min-width
Property ini untuk menentukan lebar minimal dari suatu elemen Selektor{ min-width:50%} value lain: …px,…em,auto,none
8. max-width
Property ini untuk menentukan lebar maximal dari suatu elemen Selektor{ max-width:50%} value lain: …px,…em,auto,none
9. height
Property ini untuk menentukan tinggi dari suatu elemen Selektor{ height:50%} value lain: …px,…em,auto,none
10. min-height
Property ini untuk menentukan tinggi minimal dari suatu elemen Selektor{ min-height:50%} value lain: …px,…em,auto,none
11. max-height
Property ini untuk menentukan tinggi maximal dari suatu elemen Selektor{ max-height:50%} value lain: …px,…em,auto,none
12. z-index
Property ini untuk mengatur beberpa elemen yang terjadi overlap Selektor{z-index:auto} value lain mengunakan bilangan bundar ( integer)
13. visibility
Property ini untuk mengatur elemen apakah ditampilkan pada browser atau tidak. Selektor{ visibility:hidden} Value lain : visible, collapse
14. overflow
Property ini untuk mengatur menampilkan konten yang tidak mampu ditampung oleh elemen Selektor{ overflow:auto} Value Lain : hidden, scroll, visible
15. float
Property ini membuat efek elemen yang keluar dari flow dan ditempatkan disisi kiri atau kanan suatu elemen
Selektor(float:left} Value lain : None, right
16. clear
Property ini digunakan bersama dengan float dan disini ditentukan apakah elemen mampu mendapat suatu float atau tidak. Selektor{ clear:both} Value lain : left, right, none
17. clip
Property ini untuk mengatur cupilkan kecil suatu elemen untuk ditampilkan. Selektor{ clip:rect('top', 'right', 'bottom', 'left')} Value lain : both

Property Background

Property ini memiliki kegunaan untuk mengatur tampilan background atau halaman belakang suatu web serta pengaturan suatu background yang lainnya misalnya background dari font.

Berikut ini propertynya :
1. background
Property ini untuk mengatur background secara luas Selektor{ background:bottom} Untuk value lain mampu : url, none, center, left, right, top, no-reapet, reapet, reapet-x, reapet-y, fixed, scroll Untuk pola penggunaaan value url : Selektor(background:url(http://rudydevianto.com/background.png) fixed no-reapet top left}
2. background-color
Property ini untuk mengatur warna dari background Selektor {background-color:#000033} Value lain anda mampu gunakan pewarnaan hexadecimal.
3. background-image
Property ini untuk mengatur background gambar dari suatu table , halaman atau elemen yang lain Selektor(background:url(http://rudydevianto.com/logo.png)} atau value none untuk tidak menampilkan gambar.
4. background-attachment
Property ini untuk mengatur suatu gambar apakah bila mouse di scroll gambar ikut scroll atau tetap Selektor{ background-attachment:scroll} Value lain : fixed
5. background-repeat
Property ini untuk membuat perintah pada image yang ada pada background untuk perulangan karena disebabkan gambar yang ukuran kecil Selektor{ background-repeat:repeat} Value lain: no repeat, reapet-x, reapeat-y
6. background-position
Property ini untuk mengatur posisi dari gambar background pada halaman. Selektor{ background-position:top} Value lain : left, right, bottom, center

Property Type Elemen

Property ini untuk mengatur suatu elemen dalam web.

Berikut ini propertynya :
1. display
Property ini untuk mengatur sebagaimana elemen akan terpasang pada halaman website Selektor{ display:block} Value lain : compact, inline, inline-table, list-item, marker, none, run-in, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group,table-row, table-row-group
2. white-space
Property ini mampu digunakan bila anda menggunakan elemen block dan untuk menentukan apa yang akan browser lakukan kepada white-space ( spasi ) Selektor{ white-space:normal} Value lain : normal, nowrap, pre
3. list-style-type
Property ini digunakan untuk menentukan suatu Style List Item ( Bullet )
Selektor{ list-style-type:armenian} value lain : cirle, cjk-ideographic, decimal, decimal-leading-zero, disc, georgian, hebrew, hiragana, hiragana-iroha,lower-alpha, lower-greek, lower-latin, lower-roman, none, square, upper-alpha, upper-latin, upper-roman
4. list-style-image
Property ini untuk membuat bullet dari gambar Selektor{ list-style-image:url(http://rudydevianto.com/bullet.gif)}
5. list-style-position
Property ini untuk mengatur posisi bullet Selektor{ list-style-position:inside} Value lain : outside
6. list-style
Property ini untuk mengatur style dari list ( bullet ) secara global Selektor{ list-style-type:armenian} value lain : url, inside, outside, cirle, cjk-ideographic, decimal, decimal-leading-zero, disc, georgian, hebrew, hiragana, hiragana-iroha, lower-alpha, lower-greek, lower-latin, lower-roman, none, square, upper-alpha, upper-latin, upper-roman
7. border-collapse
Property ini untuk mengatur border table Selektor{border-collapse:collapse} Value lain : separate
8. border-spacing
Property ini untuk mengatur space pada border Selektor{border-spacing:0}
9. caption-side
Property ini untuk mengatur posisi dari caption Selektor{caption-side:bottom} Value lain : top, left, center, right
10. empty-cells
Property ini untuk menampilkan atau menyembunyikan cell pada table Selektor{empty-cells:hide} Value lain : show
11. table-layout
Property ini untuk mengatur layout suatu table apakah menyesuaikan atau tetap .
Selektor{table-layout:auto} Value lain : fixed

Property Interface

Property ini untuk mengatur tampilan pada web untuk membuat tampilan yang ditujukan untuk pengguna .

Berikut ini propertynya :
1. cursor
Property ini untuk mengatur tampilan cursor yang kan digunakan user pada browser Selektor{cursor:auto} Value lain : url , crosshair, default, e-resize, help, move, ne-resize, n-resize, nw-resize, pointer, se-resize, sw-resize, text, wait, w-resize
2. outline
Property ini mengatur garis tepi dari elemen secara global Selektor{outline:#333333} untuk warna mampu menggunakan warna hexadecimal lain atau value lain : dashed, dotted, double, groove, hidden, inset, none, outside, ridge, solid, medium, thin, thick
3. outline-color
Properti ini mengatur warna dari garis tepi suatu elemen Selektor{outline:#333333} untuk warna mampu menggunakan warna hexadecimal lain
4. outline-style
Property ini untuk mengatur style dari garis tepi suatu elemen Selektor{outline:dashed} value lain : dotted, double, groove, hidden, inset, none, outside, ridge, solid, medium, thin, thick
5. outline-width
Property ini untuk mengatur sebeapa lebar garis tepi suatu elemen Selektor{ outline-width:medium} Value lain : thick, thin

Sekarang belahan anda untuk mencoba serta banyak praktek , karena dalam CSS anda harus banyak latihan dan banyak mengexplore, semoga anda paham betul fungsi-funsi dari elemen-elemen CC Rule. Dalam ebook ini saya juga melampirkan pola website yang menggunakan CSS dan anda mampu meng”oprek” dan belajar bagaimana CSS dan HTML itu bekerja.

NB :
Untuk mengedit file HTML maupun CSS anda mampu menggunakan software antara lain :

Notepad ( bawaan Windows )
Notepad ++ CoffeCup
Macromedia
Dreamweaver 8
dll

Baca
Fungsi HTML dan CSS pada halaman Web
Apa yang menjadi keuntungan menggunakan CSS
Apa itu CSS ( Cascading Style Sheet )
Aturan penulisan CSS
Cara menggabungkan HTML dengan CSS

Cara Menggabungkan Html Dengan Css