Cara menggabungkan html dengan css

byGery -
0


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

Di bawah ini 3 cara untuk menggabungkan file HTML dengan CSS :

1. Inline Style
Inline Style adalah cara penulisan file CSS secara langsung kedalam Tag HTML. Contoh 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>.
Contoh penulisan nya :
<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 bisa taruh di antara <head>…</head>.

Untuk cara Link Style ini yang banyak di pakai oleh para Web Design atau programmer karena cara Link Style yaitu cukup satu kali penulisan file CSS yang nantinya di pakai oleh seluruh halaman Website.
Biasanya para Web Design menamai file Link Style CSS dengan nama style.css.
Contoh file nya :
<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 biasa nya di simpan dengan ekstitensi .css atau dengan nama style.css
h2{ color: #FFCC00; background: #CC0000; }

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

Sekarang ke komponen property yang di gunakan

Berikut ini adalah komponen property yang digunakan pada CSS.

Property Text Style Property Text Style bisa anda gunakan untuk membuat gaya tulisan anda pada web. Adapun komponen Text Style atau yang berhubungan dengan model atau gaya tulisan/font dari CSS adalah sebagai berikut :

1. Color Property, ini mengontrol warna dari text penulisan nya
Selektor {color:#000000} Value
Bisa warna hexadesimal bisa hanya tulisan misalnya untuk hitam menggunakan Black.

2. Font-weight, property ini mengontrol tebal dari text penulisan nya
Selektor { font-weight:100} Value
Bisa anda tulis dengan angka mulai dari 100 dan di lanjutkan dengan kelipatan nya atau bisa 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 sebaik nya menggunakan standard bawaan Windows jika ingin terbaca oleh seluruh user.

4. Font-size, property ini untuk mengatur ukuran font yang akan di pakai
Selektor{ font-size:12px}
Untuk ukuran font anda bisa menggunakan ukuran ( px,…em atau small,medium,large dll).

5. Font-variant, property ini untuk mengatur font yang akan muncul apakah menggunakan huruf kecil atau small caps
Selektor{ font-variant:small-caps}
Atau anda bisa menggunakan normal.

6. Font-style, property ini untuk mengatur style font yang akan di gunakan 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.

Sekarang ke property text layout

Property Text Layout ini, berfungsi untuk mengatur bagaimana efek dari suatu layout suatu tulisan pada halaman website. Property ini lebih berfokus pada penempatan dan tampilan yang di tempatkan pada halaman web anda.

Anda bisa mengombinasikan antara tampilan page layout dan text layout supaya tampilan website anda lebih elegant dan sesuai dengan keinginan anda tentunya dan itu yang jelas tidak bisa anda dapatkan pada HTML.
Di bawah ini adalah property nya :

1. Letter-spacing, property ini untuk mengontrol jarak space antar karakter
Selektor{letter-spacing:normal}
Untuk value normal maka akan di atur 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 biasa nya 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 tulisan pada website
Selektor{ direction:ltr}
Value lain : rtl

Keterangan : ltr, yaitu tulisan yang terbaca dari kiri ke kanan sedangkan rtl, yaitu rulisan yang terbaca dari kanan ke kiri.

8. Unicode-bidi, property ini untuk mengontrol dan mengarahkan pada tulisan unicode
Selektor{ unicode-bidi:bidi-override}
Value lain : normal, embed


Sekarang ke property border

Property ini untuk mengatur elemen yang mempunyai garis dengan berbagai variasi lebar,warna serta gaya suatu tampilan.

Anda bisa membuat suatu garis antara kiri-kanan-atas-bawah dengan berbeda style.
Di bawah ini adalah property nya :

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 bisa gunakan warna hexadecimal yang awalnya di mulai 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


Sekarang ke 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.
Di bawah ini adalah property nya :

1. Margin, property ini untuk mengatur jarak meliputi secara keseluruhan antar elemen
Selektor{margin:auto}
Value lain : bisa ukuran …px,…em atau % persentase misalnya 25%

2. Margin-top, property ini untuk mengatur jarak top dengan elemen
Selektor{margin-top:auto}
Value lain : bisa ukuran …px,…em atau % persentase misalnya 25%

3. Margin-left, property ini untuk mengatur jarak left dengan elemen
Selektor{margin-left:auto}
Value lain : bisa ukuran …px,…em atau % persentase misalnya 25%

4. Margin-right, property ini untuk mengatur jarak right dengan elemen
Selektor{margin-right:auto}
Value lain : bisa ukuran …px,…em atau % persentase misalnya 25%

5. Margin-bottom, property ini untuk mengatur jarak bottom dengan elemen
Selektor{margin-bottom:auto}
Value lain : bisa ukuran …px,…em atau % persentase misalnya 25%


Sekarang ke property padding

Property padding untuk mengatur ruang antara elemen dan konten.
Di bawah ini adalah property nya :

1. Padding, property ini untuk mengatur ruang elemen dengan konten secara global
Selektor{ padding:7px}
Value lain : bisa 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 : bisa 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 : bisa 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 : bisa 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 : bisa ukuran …px,…em atau % persentase misalnya 25%


Sekarang ke property page layout

Property Page Layout untuk mendesign suatu layout pada halaman web, ini property penting yang harus anda kuasai karena dengan menguasai property ini maka anda bisa membuat suatu halaman web yang bagus dan tentunya harus di dukung akan kreatifitas seseorang.

Pada HTML tidak mendukung akan tampilan layout sebaik CSS dengan menguasai property ini anda juga bisa merubah pada themes atau template pada script CMS yang ada sekarang ini.
Di bawah ini adalah property nya :

1. Position, property ini untuk menentukan dimana elemen akan di tempatkan juga untuk menempatkan elemen induk
Selektor{ position:absolute}
Value lain : fixed, relative, static, top, bottom, left, right

2. Top, property ini untuk menentukan bagian atas dari suatu elemen di tempatkan
Selektor{ top:absolute}
Value lain : fixed, relative, static, auto

3. Left, property ini untuk menentukan bagian kiri dari suatu elemen di tempatkan
Selektor{ left:absolute}
Value lain : fixed, relative, static, auto

4. Bottom, property ini untuk menentukan bagian bawah dari suatu elemen di tempatkan
Selektor{ bottom:absolute}
Value lain : fixed, relative, static, auto

5. Right, property ini untuk menentukan bagian kanan dari suatu elemen di tempatkan
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 bulat (integer)

13. Visibility, property ini untuk mengatur elemen apakah di tampilkan pada browser atau tidak
Selektor{ visibility:hidden}
Value lain : visible, collapse

14. Overflow, property ini untuk mengatur menampilkan konten yang tidak bisa di tampung oleh elemen
Selektor{ overflow:auto}
Value lain : hidden, scroll, visible

15. Float, property ini membuat efek elemen yang keluar dari flow dan di tempatkan di sisi kiri atau kanan suatu elemen
Selektor(float:left}
Value lain : None, right

16. Clear, property ini di gunakan bersama dengan float dan di sini di tentukan apakah elemen bisa menerima suatu float atau tidak
Selektor{ clear:both}
Value lain : left, right, none

17. Clip, property ini untuk mengatur cupilkan kecil suatu elemen untuk di tampilkan
Selektor{ clip:rect('top', 'right', 'bottom', 'left')}
Value lain : both


Sekarang ke property background

Background, property ini berguna untuk mengatur tampilan background atau halaman belakang suatu web serta pengaturan suatu background yang lainnya misalnya background dari font.
Di bawah ini adalah property nya :

1. Background, property ini untuk mengatur background secara luas
Selektor{ background:bottom}
Value lain bisa : url, none, center, left, right, top, no-reapet, reapet, reapet-x, reapet-y, fixed, scroll.
Contoh penggunaan value url
Selektor(background:url(http://URL background anda.png) fixed no-reapet top left}

2. Background-color, property ini untuk mengatur warna dari background
Selektor {background-color:#000033}
Value lain : anda bisa gunakan pewarnaan hexadecimal.

3. Background-image, property ini untuk mengatur background gambar dari suatu table halaman atau elemen yang lain
Selektor(background:url(http://URL logo gambar anda.png )}
Atau value : none untuk tidak menampilkan gambar.

4. Background-attachment, property ini untuk mengatur suatu gambar apakah jika 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 di sebabkan 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


Sekarang ke property type elemen

Property ini untuk mengatur suatu elemen dalam web.
Di bawah ini adalah property nya :

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, tablecolumn-group, table-footer-group, table-header-group, table-row, table-rowgroup

2. White-space, property ini dapat di gunakan jika 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 di gunakan 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, upperalpha, upper-latin, upper-roman

4. List-style-image, property ini untuk membuat bullet dari gambar
Selektor{ list-style-image:url(http://URL gambar bullet anda.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, cjkideographic, decimal, decimal-leading-zero, disc, georgian, hebrew, hiragana, hiragana-iroha, lower-alpha, lower-greek, lower-latin, lowerroman, 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}


Sekarang terakhir ke interface

Property ini untuk mengatur tampilan pada web untuk membuat tampilan yang di tujukan untuk penggunaan.
Di bawah ini adalah property nya :

1. Cursor, property ini untuk mengatur tampilan cursor yang akan di pakai 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 bisa 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 bisa 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 bagian anda untuk mencoba nya serta harus banyak praktek , karena dalam CSS anda harus banyak latihan dan banyak mengexplore, supaya anda paham betul fungsi fungsi dari elemen-elemen CC Rule.

NB : Untuk mengedit file HTML maupun CSS anda bisa menggunakan software antara lain : Notepad ( bawaan Windows ) Notepad ++ CoffeCup Macromedia Dreamweaver 8 dll …
Tags:
Lebih baru Lebih lama