Penerapan CSS (Part 5)

Februari 14, 2017

Penerapan CSS (Part 5)

I.Latar Belakang.
Latar belakang kali ini kita masih mengenal sintag tentang CSS untuk memperindah tamoilan web / program.

II.Alat dan Bahan.

Laptop / PC
W3SCHOOLS
Sublime text

III.Tujuan.
untuk mengetahui langkah dasar untuk membuat web yang sederhana.

IV.Penjelasan.

CSS Font

Keluarga CSS Font

Dalam CSS, ada dua jenis nama keluarga font:

keluarga generik - kelompok font keluarga dengan ekspresi yang sama (seperti "Serif" atau "Monospace")
Kumpulan font - keluarga font tertentu (seperti "Times New Roman" atau "Arial")

Catatan: Pada layar komputer, font sans-serif dianggap lebih mudah untuk dibaca daripada font serif.
Keluarga Font
Keluarga font

teks diatur dengan font-familyproperti.
font-familyproperti harus memegang beberapa nama font sebagai sistem "fallback". Jika browser tidak mendukung font pertama, ia mencoba font berikutnya, dan seterusnya.

Mulailah dengan font yang Anda inginkan, dan diakhiri dengan sebuah keluarga generik, agar browser memilih font yang sama dalam keluarga generik, jika tidak ada font lain yang tersedia.

Catatan : Jika nama keluarga font yang lebih dari satu kata, itu harus dalam tanda kutip, seperti: "Times New Roman".

Lebih dari satu keluarga font yang ditentukan dalam daftar dipisahkan koma:
Contoh

p {
font-family: "Times New Roman", Times, serif;
}

Untuk kombinasi huruf yang umum digunakan, melihat kami Web Aman Font Kombinasi .
Gaya tulisan

font-styleproperti ini kebanyakan digunakan untuk menentukan teks miring.

Properti ini memiliki tiga nilai:

biasa - Teks ditampilkan biasanya
italic - Teks ditampilkan dalam huruf miring
miring - Teks "bersandar" (miring sangat mirip dengan miring, tapi kurang didukung)

Contoh

p.normal {
 font-style: normal;
}

p.italic {
 font-style: italic;
}

p.oblique {
 font-style: oblique;
}

Ukuran huruf
font-sizeproperti menetapkan ukuran teks.

Mampu mengatur ukuran teks adalah penting dalam desain web. Namun, Anda tidak harus menggunakan penyesuaian ukuran font untuk membuat paragraf terlihat seperti pos, atau pos tampak seperti paragraf.

Selalu gunakan tag HTML yang tepat, seperti <h1> - <h6> untuk judul dan untuk paragraf.

Nilai font-size bisa menjadi ukuran mutlak, atau relatif.

ukuran absolut:

Mengatur teks ke ukuran tertentu
Tidak memungkinkan pengguna untuk mengubah ukuran teks dalam semua browser (buruk karena alasan aksesibilitas)
ukuran mutlak berguna ketika ukuran fisik output dikenal

ukuran relatif:

Mengatur ukuran relatif terhadap elemen sekitarnya
Memungkinkan pengguna untuk mengubah ukuran teks dalam browser

Catatan: Jika Anda tidak menentukan ukuran font, ukuran standar untuk teks normal, seperti paragraf, adalah 16px (16px = 1em).

Set Ukuran Font Dengan Pixel

Mengatur ukuran teks dengan piksel memberikan Anda kontrol penuh atas ukuran teks:

Contoh

h1 {
 font-size: 40px;
}

h2 {
 font-size: 30px;
}

p {
 font-size: 14px;
}

Tip: Jika Anda menggunakan piksel, Anda masih dapat menggunakan alat zoom untuk mengubah ukuran seluruh halaman.

Set Ukuran Font Dengan Em

Untuk memungkinkan pengguna untuk mengubah ukuran teks (dalam menu browser), banyak pengembang menggunakan em bukan piksel.

1em sama dengan ukuran font saat ini. Ukuran teks default di browser adalah 16px. Jadi, ukuran default dari 1em 16px.

Ukuran dapat dihitung dari piksel ke em menggunakan rumus ini: pixels / 16 = em

Contoh

h1 {
 font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
 font-size: 1.875em; /* 30px/16=1.875em */
}

p {
 font-size: 0.875em; /* 14px/16=0.875em */
}
Dalam contoh di atas, ukuran teks dalam em adalah sama dengan contoh sebelumnya dalam pixel. Namun, dengan ukuran em, adalah mungkin untuk menyesuaikan ukuran teks dalam semua browser.

Sayangnya, masih ada masalah dengan versi IE. teks menjadi lebih besar dari yang seharusnya jika dibuat lebih besar, dan lebih kecil dari yang seharusnya bila dibuat lebih kecil.
Gunakan Kombinasi Persen dan Em

Solusi yang bekerja di semua browser, adalah untuk menetapkan standar font-size di persen untuk <body> elemen:
Contoh
body {
 font-size: 100%;
}

h1 {
 font-size: 2.5em;
}

h2 {
 font-size: 1.875em;
}

p {
 font-size: 0.875em;
}

kode kita sekarang bekerja besar! Ini menunjukkan ukuran teks yang sama di semua browser, dan memungkinkan semua browser untuk memperbesar atau mengubah ukuran teks!

Berat Font
font-weightproperti menentukan berat font:
Contoh

p.normal {
 font-weight: normal;
}

p.thick {
 font-weight: bold;
}

Font Variant
font-variantproperti menentukan apakah atau tidak sebuah teks harus ditampilkan dalam font kecil-caps.

Dalam font kecil-caps, semua huruf kecil dikonversi ke huruf besar. Namun, huruf besar dikonversi muncul dalam ukuran font lebih kecil dari huruf besar asli dalam teks.
Contoh

p.normal {
 font-variant: normal;
}

p.small {
 font-variant: small-caps;
}

Contoh:

Maka outputnya :

CSS Ikon

Cara Tambah Ikon

Cara paling sederhana untuk menambahkan ikon ke halaman HTML Anda, adalah dengan ikon perpustakaan, seperti Font Keren.

Menambahkan nama ikon kelas yang ditentukan untuk setiap elemen inline HTML (seperti atau ).

Semua ikon di perpustakaan ikon di bawah ini, adalah vektor terukur yang dapat disesuaikan dengan CSS (ukuran, warna, bayangan, dll)

Keren Ikon Font

Untuk menggunakan Font Keren ikon, tambahkan baris berikut di dalam <head>bagian dari halaman HTML Anda:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Contoh

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>







</body>
</html>

bootstrap Ikon

Untuk menggunakan glyphicons Bootstrap, tambahkan baris berikut di dalam <head>bagian dari halaman HTML Anda:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Contoh

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>







</body>
</html>
Google Icons

Untuk menggunakan ikon Google, tambahkan baris berikut di dalam <head>bagian dari halaman HTML Anda:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Contoh

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

cloud
favorite
attachment
computer
traffic

</body>
</html>

Contoh :