Pengertian Padding adalah jarak antara konten dengan border. Pemberian jarak ini akan mempertegas antara konten sebuah konten. Karena dengan posisi konten dengan border yang terlalu mepet tidak akan terlalu indah dilihat. Nanti kita akan lihat contohnya.
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Membuat Border (Bingkai) pada Halaman HTML dengan CSS
Border atau bingkai adalah garis pada tepi sebuah objek. Fungsi border akan mempertegas objek yang ditampilkan dan tentunya akan memperindah tampilan objek tersebut. Berikut ini sebuah ringkasan tutorial CSS dan HTML tentang membuat border pada objek halaman.
Mengatur Lebar dan Tinggi CSS Box Model
Property penting yang ada pada CSS Box Model yaitu setting lebar dan tinggi pada object yang dibuat. Untuk itu rasanya cukup penting berbagi catatan ini agar anda bisa mndapatkan tampilan yang sesuai dengan yang anda inginkan pada halaman website. Berikut tentang pengaturan width- dan height pada object CSS (CSS Box Model).
Pengertian CSS Box Model
CSS box model adalah prinsip pada elemen halaman website yang diproses dan ditampilkan dalam bentuk kotak. Ini berguna dalam 'peng-kotak-an' bagian bagian halaman pada website. Sebut saja paragraf, header, gambar dll.
Mengatur Jarak Antara Kata dan Antar Huruf dalam CSS
Salah satu tampilan teks yang harus diketahui dalam merancang sebuah halaman website adalaah mengatur jarak antara huruf dan jarak antara kata. Bila jarak teks terlalu rapat untuk kepentingan tertentu maka akan menyulitkan untuk dibaca. Berikut catatan kecil bagaimana cara mengatur jarak antara huruf dan jarak antara kata pada halaman website dengan menggunakan CSS.
Penulisan Rata Teks pada CSS
Dalam sebuah teks dikenal rata teks atau text-align. Misalkan pada pengolahan data microsoft words. Dikenal ada rata kanan, rata kiri dan rata tengah. Tak terkecuali pada CSS. Pada tampilan sebuah website, akan ada pada halaman teks bentuk rataan.
Contoh Penulisan Text-Decoration pada CSS
Text-decoration yang dimaksud adalah efek yang digunakan untuk menghias sebuah selector dalam CSS. Contoh text-decoration adalah tulisan yang memiliki garis-vawah, teks yang di coret dan teks yang memiliki agris bawah. Adapun properties yang digunakan adlah underline, overline, line-thorugh.
Penulisan Singkat Property Font dalam CSS
Untuk mengubah tampilan font pada website biasanya digunakan property font-size, font-style, font family, font-weight font-variant dll. Masing masing property ditulis dan diberi value. Namun ternyata penulisan tersebut bisa disingkat dalam bentuk umum. Format penulisan font dalam satu property saja contohnya adalah :
dengan penulisan seperti di atas akan diartikan bahwa untuk selector p akan tampil huruf miring tebal dan bentuk smal-caps dengan ukuran font 17px dan jenis huruf san-serif. Dengan demikian beberapa propertybisa dibuat dalam satu baris dan lebih singkat.
Penulisan bentuk seperti ini tidak harus lengkap. Yang harus ada adalah font-size dan font-family. Yang lain seperti fon-style boleh ada dan boleh tidak. Pada contoh di atas maka yang harus ada adalah nilai 17px dan san-serif.
Untuk antara font value cukup di batasi spasi. Sementara untuk antara dua font-family dibatasi dengan koma.
Dalam penggunaan line-height dengan cara ini, line-height ditambahkan dengan menggunakan garis miring dan value sesudah font-size. Contohnya : font : bold italic small-caps 12px/120% monospace, cursive, sans-serif.5em/120%.
Urutan penulisan tidak harus berurutan. hanya saja untuk font-size dan font-family harus berada pada dua urutan paling akhir. Sebagai contoh bisa digunakan diperhatikan kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<style type="text/css">
.upper { font: italic bold small-caps 16px/80% serif;}
.lower { font: italic 16px/120% Arial, Helvetica, sans-serif; }
.cap { font: 16px/1.2em Georgia, Times, serif; }
.small { font: small-caps 18px/24px "Comic Sans MS", serif; }
</style>
</head>
<body>
<h3>Menulis Properties Font pada CSS</h3>
<p class="upper"> Puji dan syukur penulis ucapkan kehadiran Allah SWT yang telah melimpahkan rahmat, hidayah dan karunia-Nya sehingga penulis dapat menyelesaikan laporan observasi Praktek Lapangan Kependidikan ini. </p>
<p class="lower"> Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
<p class="cap"> Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
<p class="small">Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
</body>
</html>
Bisa difokuskan memperhatikan bagian yang berwarna merah. Dalam penulisan tersebut semua gay huruf diitulis dalam bentuk satu baris pada masing masing paragraf yang di defenisikan.
p { font: italic bold small-caps 17px san-serif; }
dengan penulisan seperti di atas akan diartikan bahwa untuk selector p akan tampil huruf miring tebal dan bentuk smal-caps dengan ukuran font 17px dan jenis huruf san-serif. Dengan demikian beberapa propertybisa dibuat dalam satu baris dan lebih singkat.
Penulisan bentuk seperti ini tidak harus lengkap. Yang harus ada adalah font-size dan font-family. Yang lain seperti fon-style boleh ada dan boleh tidak. Pada contoh di atas maka yang harus ada adalah nilai 17px dan san-serif.
Untuk antara font value cukup di batasi spasi. Sementara untuk antara dua font-family dibatasi dengan koma.
Dalam penggunaan line-height dengan cara ini, line-height ditambahkan dengan menggunakan garis miring dan value sesudah font-size. Contohnya : font : bold italic small-caps 12px/120% monospace, cursive, sans-serif.5em/120%.
Urutan penulisan tidak harus berurutan. hanya saja untuk font-size dan font-family harus berada pada dua urutan paling akhir. Sebagai contoh bisa digunakan diperhatikan kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<style type="text/css">
.upper { font: italic bold small-caps 16px/80% serif;}
.lower { font: italic 16px/120% Arial, Helvetica, sans-serif; }
.cap { font: 16px/1.2em Georgia, Times, serif; }
.small { font: small-caps 18px/24px "Comic Sans MS", serif; }
</style>
</head>
<body>
<h3>Menulis Properties Font pada CSS</h3>
<p class="upper"> Puji dan syukur penulis ucapkan kehadiran Allah SWT yang telah melimpahkan rahmat, hidayah dan karunia-Nya sehingga penulis dapat menyelesaikan laporan observasi Praktek Lapangan Kependidikan ini. </p>
<p class="lower"> Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
<p class="cap"> Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
<p class="small">Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
</body>
</html>
Mengubah Huruf Kapital teks dengan CSS
Terkadang pada suat kondisi diinginkan untuk merubah kalimat menjadi huruf besar semua atau huruf kecil semua atau setiap awal kata menjadi di awali huruf besar. Seperti contoh jika di program miscrosoft word, coba anda ketik sebuah kalimat. Kemudian pilih/block kalimat tersebut tekan Shift+F3 berulang kali, coba perhatikan apa yang terjadi? Ya, huruf akan berubah, ajdi kecil semua, besar semua atau awal kata dengan huruf besar.
Mengatur Spasi (line-height) pada Website dengan CSS
Tingi baris dalam sebuah paragraf adalah jarak antara satu baris dengan baris berikutnya. Lebih sederhananya bisa anda lihat baris paragraf ini dengan paragraf berikutnya. Dalam program microsoft word misalnya dikenal dengan istilah spasi, ada spasi 1,5 , ada spasi 1. Ini juga yang diterapkan dalam website. Sebagai media yang dibaca online, harus perhitungkan jarak antar baris, agar pembaca website tidak terlalu pusing dengan spasi yang terlalu rapat.
Cara Menggunakan Google Font pada Website/Blog
Sebelumnya telah dijelaskan bagaimana cara merubah font atau jenis huruf dalam sebuah website yang di desain. Sedikit mengingatkan, cara pertama adalah dengan menggunakan font family CSS. Kemudian cara kedua adalah dengan mengundang jenis font dari luar atau dikenal dengan external font. Sekarang akan dijelaskan cara yang paling sering digunakan oleh para web designer yaitu dengan memanfaatkan Google Font.
Cara Mengubah Font Website dengan CSS dengan @font-face
Perintah @font-face dalam CSS
Bentuk lain sebagai cara merubah font pada tampilan website adalah dengan menggunakan peritnah @font-face. Jika sebelumnya telah dijelaskan bagaimana cara mengubah font website dengan font-family bawaan CSS, sekarang akan dijelaskan bagaimana mengubah font dengan menggunakan @font-face.Penggunaan ini hanya semaat mata untuk membuat website lebih berbeda dengan website lainnya. Tampilan font yang digunakan adalah font yang berasal dari 'luar' dan diundang ke halaman CSS. Sebelumnya, alangkah baiknya anda jika mengetahui jenis jenis font yang disukung oleh browser agar website yang dibbuat benar benar bisa dibaca oleh banyak orang. Ingat jika salah menggunakan font, bisa bisa tampilan website akan berantakan karena jenis font tidak didukung browser.
- EOT (Embedded Open Type) : format font yang compatible hanya dengan browser Internet Explorer. dan relatif jarang digunakan. Untuk merubah format font menjadi EOT, dibutuhkan aplikasi khusus. aplikasi tersebut bisa diliaht di website www.fontsquirrel.com
- TTF (True Type) and OTF (Open Type) : dua format font ini adalah format font yang paling banyak dipergunakan. TTF dan OTF compatible dengan banyak browser seperti: Internet Explorer 9 ke atas, Mozilla Firefox, Google Chrome, Safari, Opera dan iOS Safari v.42, Android browser, dan Blackberry.
- WOFF (Web Open Font Format) : Format WOFF adalah jenis format terbaru dan sengaja didesain khusus untuk kepentingan web. WOFF sebenarnya adalah versi kompresi dari TTF and OTF. Namun WOFF memiliki keunggulan yaitu ukuran lebih kecil dan akan lebih cepat jika di download. WOFF bisa beroperasi pada browser seperti: Internet Explorer 9 ke atas, mozilla Firefox, Google Chrome, Safari, Opera, Blackberry ,dan iOS Safari v.5 ke atas.
- SVG (Scalable Vector Graphic). Format SVG sebenarnya bukan merupakan format untuk font, tapi format untuk menyimpan gambar vector [*gambar yang bila di zoom tak merubah kualitasnya). Format font SVG tidak didukung oleh Internet Explorer dan jmozilla Firefox.
Cara Menggunakan Font External dalam CSS
Untuk cara merubah font pada tampilan website dengan external font ini maka harus dipersiapkan font yang digunakan. Sekarang kita akan gunakan font yang ada dalam sistem Wndows. Caranya adalah Control Panel - Appereance and Personalization - Font.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<style type="text/css">
@font-face {
font-family: "huruf gue";
src: url('ITCBLKAD.TTF');
}
.ini {
font-family: "huruf gue";
font-size: 29px;
}
</style>
</head>
<body>
<h2>Menggunakan Font External CSS</h2>
<h3>Font default:</h3>
<p> Dari hasil pengujian hipotesis dengan mengunakan software MINITAB 14 didapat P-value 0,041. P-value yang didapat kecil dari 0,05 artinya hipotesis penelitian diterima. Dengan demikian, hasil belajar matematika siswa dengan pembelajaran model reciprocal teaching lebih baik daripada pembelajaran konvensional. </p>
<h3>Font input external:</h3>
<p class="ini">Dari data aktivitas terlihat adanya peningkatan aktivitas positif siswa. Ini berarti model pembelajaran reciprocal teaching mampu meningkatkan aktivitas siswa. </p>
</body>
</html>
<style type="text/css">
@font-face {
font-family: "huruf gue";
src: url('ITCBLKAD.TTF');
}
.ini {
font-family: "huruf gue";
font-size: 29px;
}
</style>
Perintah @font-face di atas merupakan peritnah untuk mengundang jenis huruf dari file lain. Untuk font-family: "huruf gue"; bisa anda ubah " huruf gue dengan nama jenis font sesuka anda. Kemudian src: url('ITCBLKAD.TTF'); merupakan value alamat dimana file jenis font berada. Selanjutnya baru digunakan dalam sebuah penulisan CSS untuk merubah huruf seperti biasa. Misalkan pada contoh di atas, saya menggunakan huruf tersebut pada selector "ini". Kemudian pada selector ini saya memberikan propertu font-family dengan value sesuai nama font yang telah saya berikan pada fungsi @font-face tadi. ("huruf gue").
Cara Mengubah Huruf pada Halaman HTML dengan CSS Font Family
Huruf atau font pada aplikasi sejenis Microsoft Office menyediakan banyak opsi jenis font. Font tersebut berasal dari sistem yang disediakan Windows. Beberapa aplikasi lain seperti Adobe Photoshop jika diinstall di PC maka ada beberapa font khusus tersendiri juga.
Font-Size dalam CSS
Font-size adalah property yang digunakan untuk mengubah besar-kecilnya huruf dalam CSS. Format penulisannya sebagai berikut :
selector {
font-size: ukuran-huruf;
}
selector {
font-size: ukuran-huruf;
}
Specificity dalam CSS
Arti Specificity dalam selector CSS
Sederhananya ini merupakan salah satu jenis prioritas dalam CSS. Maksudnya adalah urutan terkuat dalam sebuah kode CSS apabila kode CSS berada dalam file yang sama. Pembahasan ini menentukan apa yang akan terjadi bila ada beberapa kode CSS yang saling berbenturan/menimpa. Jenis lain dari prioritas ini dikenal dengan Cascading, bisa dibaca pada artikel terkait : Prioritas Cascading dalam CSS.Sekilas saja tentang Cascading, jika Cascading dibahas prioritas berdasarkan letak sumber kode CSS. Maka pada Specificity ini bagaimana jika berada dalam sumber yang sama. Untuk memudahkan bisa dilakukan praktikum berikut ini.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Kasus Spesifik CSS</title>
<style type="text/css">
p {
color:red;
}
div p {
color:green;
}
#bocet{
color:orange;
}
body div p {
color:yellow;
}
div p.kalimat {
color:silver;
}
</style>
</head>
<body>
<div>
<p id="bocet">
CSS Mana Yang Lebih Kuat
</p>
</div>
</body>
</html>
Perhatikan kode yang diwarnai biru. Pada kode tersebut diberikan CSS 5 macam selector. Selector tersebut bertingkat. Dimulai dari paragraf (p) dan dilanjutkan pendefenisian untuk bagian paragraf lebih rinci. Sekarang silahka dijalankan. Apa yang di peroleh?
Penjelasan
Dari hasil di atas ternyata yang menang adalah selector id bocet. Bisa dilihat sendiri yang berwarna orange. Ini dikarenakan selector 'bocet' lebih khusus dibanding selector lain.Untuk menghitung sifat khusus selector pada CSS maka digunakan rumus. Perhitungan dimulai dari ketetapan nilai masing masing selector. Nilai ketetapan tersebut adalah :
Dalam nilai tersebut diusahan menulis dalam 4 digit, agar lebih mudah dalam perhitungan. Sekaran mari dihitung spesifikasi CSS di atas :
- Setiap element/tag selector bernilai 0001
- Setiap class selector, attribut selector bernilai 0010
- Setiap ID selector bernilai 0100
- Setiap inline style bernilai 1000
- Selector p, hanya terdiri dari 1 tag selector, maka nilainya: 0001
- Selector div p, terdiri dari 2 tag selector (div dan p) , maka nilainya: 0002
- Selector #bocet, terdiri dari 1 ID selector, maka nilainya: 0100
- Selector body div p, terdiri dari 3 tag selector (body, div, p), maka nilainya: 0003
- Selector div p.kalimat, terdiri dari 1 class selector (kalimat) dan 2 tag selector (div, p) , maka nilainya: 0012
Dari perhitungan terlihat #bocet yang memiliki nilai paling tinggi. Maka dia pemenang dan diprioritaskan.
Terkadang dalam membuat sebuah desain website, meskipun telah di tulis selector CSS tetapi tampilan yang diinginkan tidak keluar. Ini bisa saja disebabkan karena selector lain lebih diprioritaskan. untuk itu bisa diakali dengan perintah !important.
Perintah !important dalam CSS
Untuk 'memaksa' kode yang tereliminasi oleh selector lain maka digunakan perintah !important. perintah ini ditulis pada bagian belakang property CSS. Dengan perintah ini maka bagian yang diberi !important akan menjadi prioritas utama. Sebagai contoh perhatikan dan jalankan kode di atas, tetapi ditambahkan !important pda selector p. Sehinga menjadi<!DOCTYPE html>
<html>
<head>
<title>Contoh Kasus Spesifik CSS</title>
<style type="text/css">
p {
color:red !important ;font-size: 28px;
}
div p {
color:green;font-size: 25px;
}
#bocet{
color:orange;font-size: 20px;
}
body div p {
color:yellow;font-size: 15px;
}
div p.kalimat {
color:silver;font-size: 8px;
}
</style>
</head>
<body>
<div>
<p id="bocet">
CSS Mana Yang Lebih Kuat
</p>
</div>
</body>
</html>
Bagaimana hasil yang anda peroleh? Dengan penambahan !important di selector p maka tampilan akan berubah menjadi merah, sesuai value p. Nilai #bocet yang seharusnya lebih besar akhirnya dikalahkan oleh !important ini.
Kesimpulan : Jadi yang akan diprioritaskan CSS dalam sebuah selector bertingkat adalah !important - tag/class/id sesuai perhitungan di atas. Bisa dibilang jika memang mentok, tampilan yang diinginkan ditimpal selector lain dan anda bingung. Maka gunakan !important sebagai obat paling mujarab.
Cascading pada CSS
Arti Cascading dalam CSS
Kembali kepada singkatan CSS yaitu Cascading Style Sheet. Cascading memiliki induk kata cascade dalam bahasa Inggris. Jika diterjemahkan hasilnya adalah ' air terjun'. Dalam CSS Cascading dipahami sebagai 'terjun' atau penimpalan aktivasi kode CSS. Dalam artian sederhana jika ada dua mana yang lebih diutamakan. Dalam koding CSS ini sering disebut prioritas CSS.
Cara Menggunakan Selector dalam CSS
Dalam CSS web designer bisa menggabungkan beberapa jenis selector. Contoh ketika menghubungkan tag<em> ( untuk huruf miring) yang hanya berada di tag <h1>. Artinya tampilan akan berubah ketika ada huruf miring pada judul saja. Selain itu property dan value selector tersebut tidak terpakai.
Macam Macam Selector pada CSS
Dalam CSS selector merupakan sebuh pola yang berfungsi untuk mencari tag dalam HTML. Dengan lain kata semua tag atau atribut yang didefenisikan akan disebut sebagai selector dalam CSS. Ada beberapa selector dalam CSS ini.
Satuan Nilai Ukur pada CSS
Ketika membeli cabe di pasar maka digunakan standarnya kilogram. Kilogram tersebut disebut dengan satuan. Dalam CSS satuan dalam pengukuran juga ada. Mereka dikenal dengan isitlah pixel, em, point, in, pc dan pt. Penjelasan masing masing satuan dalam CSS bisa dibaca di bawah ini.
Penulisan Kode Warna dalam CSS
Dalam CSS sistem dasar warna digunakan adalah RGB. Yaitu singkatan dari Red Green dan Blue. Warna tersebut yang nantinya diubah dan diturunkan menjadi warna warna lainnya seperti coklat, hitam, putih, kuning, kelabu dan lain lain. Model warna dasar RGB ini juga dipakai secara umum dalam seni visual seperti TV, LCD dan layar Computer.
Subscribe to:
Posts (Atom)