Atribut atribut css

Dalam CSS banyak sekali atribut-atribut yang terdapat maka sebab itu anda harus tau apa-apa saja atribut yang ada di dalamnya dan juga pengertian dan fungsinya supaya anda lebih mudah dalam belajar CSS.

Maka sebab itu yang ingin belajar CSS saya sarankan untuk membaca artikel ini dahulu supaya memudahkan dalam mengerjakan suatu tugas atau apapun itu.

Atribut Dalam CSS :

Azimuth	Digunakan untuk memberikan kesan bahwa suara tersebut berasal dari arah   horisontal tertentu.
Font-size	Digunakan untuk menentukan ukuran font.
Font-height	Digunakan untuk ketebalan huruf
Font-family	Digunakan untuk memiih jenis font
Font-style	digunakan untuk membuat font italic atau tidak
Text-decoration	Digunakan untuk mendekorasi text
Direction	Digunakan untuk mengatur direksi teks
Text Shadow	Digunanakan untuk menambah bayangan pada teks
Text-transform	Digunakan untuk menentukan besar kecilnya huruf.
Letter-spacing	Digunakan untuk memberikan tambahan space antara huruf
Word-spacing	Digunakan untuk memberikan tambahan space antara kata
Line-height	Digunakan untuk menetukkan tinggi baris diantara text
Text-align	Digunakan untuk mengatur posisi text pada element secara horizontal
text-align:left	untuk perataan teks kiri
text-align:right	Untukperataantekskanan
Text-indent	untuk mengatur indent baris pertama.
Vertical-align	digunakan untuk mengatur posisi text pada element secara vertical
Color	digunakan untuk mengatur warna pada teks yang dibuat
Background-image	Digunakan untuk menentukan lokasi file yang akan dijadikan background image
Backgorund-color	Digunakan untuk menentukan warna latar belakang element HTML
Backgournd-repeat	Digunakan untuk menentukan perulangan penampilan image.
Background-position	Menentukkan  posisi dari background
Background-attachment	Digunakan untuk menentukan apakah background dapat di scroll     bersama dokumen atau tidak.
Background	untuk menentukan apakah background.
Border	Property ini digunakan untuk membuat bingkai disekitar element
Border-width	Digunakan untuk menetukkan ketebalan bingkai.
Border-style	untuk menetukkan bentuk bingkai.
Border-color	Digunakan untuk menentukkan warna bingkai
Border-top	Digunakan untuk mengatur jenis style border pada bagian atas selector
Border-bottom	Digunakan untuk mengatur jenis style border pada bagian bawah  selector
Border-left	untuk mengatur jenis style border pada bagian kiri selector
Border-right	Digunakan untuk mengatur jenis style border padabagian kanan selector
Boreder-collapse	Menetapkan apakah sel tabel harus memiliki perbatasan mereka sendiri atau berbagi perbatasan
List-Style-Type	Digunakan untuk memilih bentuk list  yang akan digunakan pada point-point     teks
List-Style-Image	Digunakan untuk mengganti bentuk list  standar dengan image atau Ikon sesuai   keinginan kita
List-Style-Position	Digunakan untuk mengatur posisi list  apakah secara inside atau outside. Kalau menggunakan inside, maka list akan ditampilkan ke dalam, sedangkan kalau outside list akan ditampilkan ke keluar.
Clear	Digunakan untuk menghentikan elemen  dari membungkus seluruh elemen       mengambang.
Clip	Menentukkan area yang akan diberikan suatu efek
Content	Digunakan untuk memasukkan isi sebelum ataupun sesudah elemen
Cursor	Digunakan untuk menetukkan jenis kursor yang akan digunakan
Orphans	Menentukan jumlah minimum baris paragraf yang harusd itinggalkan di bagian bawah halman ketika halaman web dicetak
Overflow	Menentukan apakah isi dar ielemen block level dipotong ketika lebih besar dari  elemen induk
Pitch	Menentukan rata-rata pitch (frekuensi)  darisuara yang berbicara
Stress	Mengontrol jumlah infleksi yang dihasilkan  dari penanda stres.
Table-layout	Menetukkan lebar dari table yang akan   dihitung.
Visibility	Menetukkan apakah element tersebut terlihat.
Volume	Digunakan untuk menentukkan rata-rata  dari suara volume.
Height	Menentukkan tinggi suatu elemen
Width	Menentukkan lebar dari suatu elemen.
Margin	Digunakan untuk memberikan spasi disisi  luar element.
Padding	Digunakan untuk memberikan spasi pada  sisi dalams ebuah element

Inilah Atribut Dalam CSS dan fungsinya apabila terjadi kesalahan ataupun salah ketik mohon di maklumi dan mudah-mudahan artikel ini bermanfaat bagi anda.

CSS + HTML

Pada bab-bab sebelumnya, kita telah berkenalan sekilas dengan dunia web dan belajar tentang struktur html. Sekarang kita akan langsung masuk dan mencoba membuat dokumen HTML sederhana yang di kombinasikan dengan CSS, agar konsep-konsep yang telah dijelaskan sebelumnya menjadi lebih jelas.

CSS adalah bahasa yang digunakan untuk memberikan konten gaya penampilan yang bagus.

Jadi jika pada penjelasan sebelum nya kita membuat file HTML masih tidak beraturan, dengan di tambah CSS kita bisa memodifikasi atau mendesain tata letak sesuai dengan yang kita ingin kan
ok sebagai contoh untu melakukan saya membuatkan file HTML terlebih dahulu

simpan dengan file nama index.html
maka ketika di run atau di jalankan akan tampil seperti gambar di bawah ini

Gbr. Hasil Run File index,html

Nah tulisan masih belum teratur masih blank putih dan tulisan warna hitam, agar tampilan bagus kita bisa tambahkan css di html tersebut. seperti contoh pada gambar di bawah ini  

untuk menambahkan css atau menyisipkan css di file html ini kita perlu tag dengan nama <style> dan di tutup dengan </style>.

ikuti kodingan yang saya contoh kan di atas,. 

di atas di dalam tag <style> ada tulisan body{ backgroud : cyan ; } itu kita berarrti manandakan bahwa kita ingin memberi background dasar pada body website kita berwarna cyan atau biru muda 

dan ada tanda 

#content{ 

margin  : auto ;

width : 800px;

padding : 10px ;

background : yellow ;

}

# di atas itu bisa di bilang id,.

jadi kita memanggil di sisipan tag html dengan kata ID seperti contoh di gambar atas ada <div id=content> itu berrti kita memanggil css dengan nama content (#content) dan akan menjalankan aksi yang ada di tag content itu sendiri di dalam div

selain "#" atau ID ada juga tag "." atau CLASS.

contoh :

.content{ 

margin  : auto ;

width : 800px;

padding : 10px ;

background : yellow ;

}

maka untuk pemanggil css di atas kita bisa memanggil dengan class seperti <div class=content> jadi dalam file css cara pemanggilan nya pun seperti itu,.

ok untuk result css dan html di atas seperti gambar di bawah ini.

hasil perpaduan html dan css

ok untuk file css juga bisa di pisah dengan html,.

yaitu kita memuat file dengan format .css seperti contoh style.css nah di dalam file itu kita tidak perlu mengetik <style> dan di tutup </style> kita hanya mengetik aksi" CSS saja seperti #content{ margin: .....; dll } atau .content{ margin:....; dll} atau kita bisa membuat tag tanpa # atau . tapi harus ada tag yang dalam html contoh

table{

   color : red; 

}

atau 

body{

  background : green ;
}

jadi jika kita betik di html <body> maka otomatis warna nya jadi hijau

atau kita bikin <table> maka tulisan nya akan berubah jadi merah  

ok untuk aksi-aksi css nanti akan saya coba bikin tutorial nya di halaman berikut nya,.

Tag Tag HTML

Tag Utama/Struktur dasar di HTML

Tag	Atribut	Deskripsi
<html></html>		Baris paling atas dari setiap file HTML
<head></head>		Informasi umum dari sebuah halaman web
<title></title>		Judul halaman. Terdapat pada head
<body></body>	Background, bgcolor, bgsound, font, link, alink, vlink, topmargin, leftmargin, marginheight, marginwidth	Settingan atribut untuk seluruh dokumen

Modifikasi Teks

Tag	Deskripsi	Contoh
<b></b>	Teks tebal	Teks tebal
<i> </i>	Teks miring	Teks miring
<u> </u>	Teks garis bawah	Teks garis bawah
<pre></pre>	Preformatted teks	Contoh teks
<h1></h1>	Header 1	Header 1
<h2></h2>	Header 2	Header 2
<h3> </h3>	Header 3	Header 3
<h4></h4>	Header 4	Header 4
<h5></h5>	Header 5	Header 5
<h6></h6>	Header 6	Header 6
<sub></sub>	Subscript	Subscript
<sup></sup>	Superscript	Superscript

Font

Tag	Atribut	Deskripsi
<font></font>	Color, size, name	Mengubah gaya suatu huruf

Links

Tag	Atribut	Deskripsi
<a> </a>	Href, target, style, class, name, id	Membuat link ke dokumen atau situs lainnya

Gambar

Tag	Atribut	Deskripsi
<img>	Src, alt, name, border, height, width	Menampilkan sebuah gambar

Formatting

Tag	Deskripsi	Contoh
<blockquote></blockquote>	Digunakan untuk mengatur text dan gambar dalam suatu tag	Contoh text in a block quote format ( “ “ )
<ol></ol>	Ordered List (digunakan dengan <li>)	1. Item 1
<ul></ul>	Unordered List (digunakan dengan <li>)	• Item 1
<li>	Elemen List
<dd></dd>	Definition List
<dt>	Definition Term
<dd>	Definition Description
<p></p>	Paragraf
<br>	Ganti baris
<hr>	Garis horizonta
<center></center>	Menengahkan elemen

Tabel

Tag	Deskripsi	Contoh
<table></table>	Border, cellpadding, cellspacing, width, height, name, id, title, bgcolor, background, align, valign	Mengatur semua elemen table
<tr></tr>	Height, bgcolor, background, align, valign, title	Membuat baris baru
<td></td>	Height, width, bgcolor, background, align, valign, title, colspan, rowspan	Membuat kolom
<th></th>	Height, width, bgcolor, background, align, valign, title, colspan, rowspan	Header(kepala tabel). Otomatis ke tengah dan tebal
<tbody></tbody>	Height, width, align, valign, bgcolor, background	Format yang berlaku bagi cell yang diapit tag
<colgroup></colgroup>	Height, width, align, valign, bgcolor, background, colspan	Format yang berlaku bagi kolom

Form

Tag	Deskripsi	Contoh
<form></form>	Method, action, name, enctype	Mengatur elemen dari form
<input type=>	Text, password, hidden, radio, checkbox, submit, image, reset	Variasi dari tipe elemen input dalam form
<select></select>	Name, size	Membuat combo-box. Digunakan bersama dengan option
<option>	Selected, name, value
<textarea></textarea>	Name, rows, cols, wrap	Membuat Text Area untuk input text dengan length yang lebih besar dari input text.
wrap	Off virtual physical	no wrap word wrap, sent as one line word wrap, sent with breaks

Anda tidak perlu menghafal semua tag tersebut, nanti malah kepala anda malah pecah!. Cukup hafalkan yang penting-penting saja seperti <table><form><input><ul>. Tidak hafal pun tidak apa-apa kan kita bisa melihat daftar kalau lupa, yang penting kita paham.