Teman

Pencarian

CSS Font Color

Properti color digunakan untuk menentukan warna font. Sebenarnya properti color bukan lah bagian dari properti font.
Cara penulisan:
property -> color
value ->
nama warna – contoh: red, black, white
hexadesimal – contoh: #ff0000
RGB – contoh: rgb(0, 220, 98)
Contoh penulisan:
h1 {
font-size: 14px;
color: red;
}
h2 {
font-size: 14px;
color: #0000ff;
}
Hasil:

Ini adalah Heading 1 (H1) menggunakan warna merah

Ini adalah Heading 2 (H2) menggunakan warna

CSS Font Weight

Properti font weight digunakan untuk mengatur ketebalan font.
Cara penulisan:
property -> font-weight
value ->
normal
bold – tebal
bolder – lebih tebal
lighter – lebih tipis
100
200
300
400 – normal
500
600
700 – bold
800
900
Contoh penulisan:
h1 {
font-size: 14px;
font-weight: bold;
}
h2 {
font-size: 14px;
font-weight:100;
}
Hasil:

Ini adalah Heading 1 (H1) menggunakan font weight bold

Ini adalah Heading 2 (H2) menggunakan font weight 100

CSS Font Varian

Properti font variant digunakan untuk menampilkan font dalam huruf kapital kecil. Jadi semua huruf non kapital akan berubah menjadi huruf kapital, tetapi ukuran nya tetap sama. Perlu diketahui, tidak semua jenis font dapat menggunakan properti ini.
Cara penulisan:
property -> font-variant
value -> small-caps
Contoh penulisan:
h1 {
font-size: 14px;
font-variant: small-caps;
}
Hasil:

Ini adalah Heading 1 (H1) menggunakan properti font variant

CSS font style

CSS font style menentukan kemiringan font di bagian tertentu.
Ada 3 macam style yaitu:
  • normal : default; browser menampilkan font secara normal
  • Italic : browser menampilkan font miring
  • oblique : browser menampilkan font oblique.
Perbedaan italic dan oblique:
Jenis font biasanya memiliki font set miring yang disebut italic. Misalkan, untuk font Trebuchet MS, akan terdapat 2 set font yaitu trebuchet MS true type (normal) dan trebuchet MS italic (miring). Sementara pada penggunaan style oblique, yang dibunakan adalah Trebuchet MS true type yang di miringkan pada saat ditampilkan. Jadi untuk beberapa font, tidak akan tampak perbedaan nyata antara penggunaan style italic dan oblique.
Cara penulisan:
property -> font-style
value -> normal, italic, oblique
Contoh penulisan:
h1 {
font-size: 14px;
font-style: italic;
}
h2 {
font-size: 12px;
font-style:oblique;
}
Hasil:

Ini adalah Heading 1 (H1) menggunakan style italic

Ini adalah Heading 2 (H2) menggunakan style oblique

CSS font size

CSS font size menentukan ukuran font pada bagian tertentu. Dengan menggunakan property ini, memudahkan kita untuk mengatur ukuran font berbeda-beda dalam satu halaman website.
Cara penulisan:
property -> font-size
value -> Ada berbagai macam cara penulisan value sbb:
Menentukan ukuran font secara absolut:
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
Menentukan ukuran secara relatif:
  • larger
  • smaller
Menentukan berdasarkan ukuran pasti:
  • Menggunakan satuan ukuran px, misalnya: 10px, 12px. Angka negatif tidak diperbolehkan.
Menentukan ukuran berdasarkan persen:
  • Menentukan ukuran lebih besar atau lebih kecil sebesar x% dari ukuran font dari element sebelumnya (parent element). Misalnya: 110% atau 80%.
Contoh penulisan:
h1 {
font-size: 14px;
}
h2 {
font-size: 12px;
}
Hasil:

Ini adalah Heading 1 (H1) menggunakan ukuran pasti 14px

Ini adalah Heading 2 (H2) menggunakan ukuran pasti 12px

CSS Font Family

Kalau anda biasa menggunakan ms word atau aplikasi lainnya dimana anda bisa merubah jenis / tipe font, pasti anda sudah mengenal nama-nama font seperti: arial, verdana, times new roman dll. Nah kalau di CSS kita sebut tipe font ini Font Family.
Cara penulisan:
property -> font-family
value -> nama-nama font, disarankan menggunakan hanya nama-nama font default
Contoh penulisan:
h1 {
font-family: verdana;
}
h2 {
font-family: “times new roman”;
}
Hasil:

Ini adalah Heading 1 (H1) menggunakan font Verdana

Ini adalah Heading 2 (H2) menggunakan font Times New Roman

Class ID Selector

Masih ingat kan pada pelajaran syntax CSS bagian pertama yang di tulis adalah selector. Pada contoh-contoh di pelajaran sebelumnya, anda melihat penggunaan tag HTML sebagai selector.
Misalkan anda membuat kode CSS untuk tag <h1>. Sekarang bagaimana jika anda ingin memformat tag <h1> dengan warna / property berbeda? Misalkan, anda ingin tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna hitam.
Untuk kasus seperti ini, anda bisa menggunakan Class selector dan ID selector.

Class Selector

Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.
Cara penulisan Class Selector:
.nama-class {property:value;}
Untuk menempelkan class ke dalam tag HTML:
taghtml.nama-class {Property:value;}

Implementasi CSS

Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:
  • Inline CSS
  • Embed atau memasang kode css ke dalam bagian <head>
  • Nge link ke external CSS
  • Import CSS file
Yuk kita bahas satu per satu…

Inline CSS

Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS.
Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:
<P style=”color:blue”>
Isi paragraf.
</p>

Syntax CSS

Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value.
Format penulisan kalimat CSS:
selector { property: value }
Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.
Contoh Syntax:
h1 { color: red }
Contoh di atas menunjukkan
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).

Pengenalan CSS

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.

Keuntungan Penggunaan CSS

Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.
Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.
Jadi, keuntungan menggunakan CSS, lebih praktis!

Kekurangan Penggunaan CSS