CSS Font

CSS Font Families

Dalam CSS, ada dua jenis nama keluarga font:

1. keluarga generik - kelompok font keluarga dengan ekspresi yang sama (seperti "Serif" atau "Monospace")

2. Font keluarga - keluarga font tertentu (seperti "Times New Roman" atau "Arial")

Generic family	Font family	Description
Serif	Times New Roman Georgia	Serif fonts have small lines at the ends on some characters
Sans-serif	Arial Verdana	"Sans" means without - these fonts do not have the lines at the ends of characters
Monospace	Courier New Lucida Console	All monospace characters have the same width

Font Family

Keluarga font teks yang dibuat dengan properti font-family.

Properti font-family harus memegang beberapa nama font sebagai "fallback" sistem. Jika browser tidak mendukung font pertama, ia mencoba font berikutnya.

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:

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

Font Style

Properti font-style banyak digunakan untuk menetapkan teks miring.

Properti ini memiliki tiga nilai:

1. biasa - Teks ditampilkan biasanya

2. talic - Teks ditampilkan dengan huruf miring

3. miring - Teks "bersandar" (miring sangat mirip dengan miring, tapi kurang didukung)

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

Font Size

Properti font-size menetapkan ukuran teks.

Mampu mengatur ukuran teks 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 <p> untuk paragraf.

Nilai font-size dapat 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 absolut berguna ketika ukuran fisik output diketahui

Ukuran relatif:

- Mengatur ukuran relatif terhadap elemen sekitarnya

- Memungkinkan pengguna untuk mengubah ukuran teks dalam browser

Set Font Size With Pixels

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

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

Set Font Size With Em

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

Unit Ukuran em direkomendasikan oleh W3C.

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

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

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 bila dibuat lebih besar, dan lebih kecil dari yang seharusnya bila dibuat lebih kecil.

Use a Combination of Percent and Em

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

CSS Text

CSS Text

Text Color

Properti warna yang digunakan untuk mengatur warna teks.

Dengan CSS, warna yang paling sering ditentukan oleh:

- nilai HEX - seperti "# ff0000"

- nilai RGB - seperti "rgb (255,0,0)"

- nama warna - seperti "merah"

Lihatlah Nilai Warna CSS untuk daftar lengkap dari nilai warna mungkin.

Warna default untuk halaman didefinisikan dalam pemilih tubuh.

body {
    color: blue;
}

h1 {
    color: #00ff00;
}

h2 {
    color: rgb(255,0,0);
}

Text Alignment

Properti text-align digunakan untuk mengatur alignment horizontal teks.

Teks dapat terpusat, atau sejajar ke kiri atau ke kanan, atau dibenarkan.

Ketika text-align diatur ke "membenarkan", setiap baris ditarik sehingga setiap baris memiliki lebar yang sama, dan margin kiri dan kanan lurus (seperti di majalah dan koran).

h1 {
    text-align: center;
}

p.date {
    text-align: right;
}

p.main {
    text-align: justify;
}

Text Decoration

Properti text-decoration digunakan untuk mengatur atau menghapus dekorasi dari teks.

Properti text-decoration banyak digunakan untuk menghilangkan garis bawah dari link untuk keperluan desain:

a {
    text-decoration: none;
}

Hal ini juga dapat digunakan untuk menghias teks:

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

Text Transformation

Properti text-transform digunakan untuk menentukan huruf besar dan huruf kecil dalam teks.

Hal ini dapat digunakan untuk mengubah segalanya menjadi huruf besar atau kecil, atau memanfaatkan huruf pertama dari setiap kata.

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Text Indentation

Properti text-indent digunakan untuk menentukan indentasi baris pertama dari teks.

p {
    text-indent: 50px;
}

CSS Background

Background Color

Properti background-color menentukan warna latar belakang dari elemen.

Warna latar belakang halaman diatur seperti ini:

body {
    background-color: #b0c4de;
}

Dengan CSS, warna yang paling sering ditentukan oleh:

1. nilai HEX - seperti "# ff0000"

2. nilai RGB - seperti "rgb (255,0,0)"

3.nama warna - seperti "merah"

Lihatlah Nilai Warna CSS untuk daftar lengkap dari nilai warna mungkin.

Pada contoh di bawah ini, <h1>, <p>, dan <div> elemen memiliki warna latar belakang yang berbeda:

h1 {
    background-color: #6495ed;
}

p {
    background-color: #e0ffff;
}

div {
    background-color: #b0c4de;
}

Background Image

Properti background-image menentukan gambar untuk digunakan sebagai latar belakang suatu elemen.

Secara default, gambar diulang sehingga mencakup seluruh elemen.

Latar belakang gambar untuk halaman dapat diatur seperti ini:

body {
    background-image: url("paper.gif");
}

Di bawah ini adalah contoh dari kombinasi yang buruk dari teks dan gambar latar belakang. Teks hampir tidak terbaca:

body {
    background-image: url("bgdesert.jpg");
}

Background Image - Repeat Horizontally or Vertically

Secara default, properti background-image mengulangi gambar secara horisontal dan vertikal.

Beberapa gambar harus diulang hanya horizontal atau vertikal, atau mereka akan terlihat aneh, seperti ini:

body {
    background-image: url("gradient_bg.png");
}

Jika gambar diulang hanya secara horizontal (mengulang-x), latar belakang akan terlihat lebih baik:

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

Background Image - Set position and no-repeat

Menampilkan gambar hanya sekali ditentukan oleh properti background-repeat:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

Dalam contoh di atas, gambar latar belakang ditampilkan di tempat yang sama seperti teks. Kami ingin mengubah posisi gambar, sehingga tidak mengganggu teks terlalu banyak.

Posisi gambar yang ditetapkan oleh properti background-position:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

Background - Shorthand property

Seperti yang dapat Anda lihat dari contoh di atas, ada banyak sifat yang perlu dipertimbangkan ketika berhadapan dengan latar belakang.

Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti dalam satu properti tunggal. Ini disebut properti steno.

Properti singkatan untuk latar belakang hanya "background":

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

Bila menggunakan properti singkatan urutan nilai properti adalah:

1. warna latar belakang

2. background-image

3. background-repeat

4. background-attachment

5. background-position

Tidak masalah jika salah satu dari nilai properti yang hilang, asalkan orang-orang yang hadir dalam urutan ini.

CSS How To...

Three Ways to Insert CSS

Ada tiga cara untuk memasukkan style sheet:

1. Gaya sheet njaba

2. Gaya sheet Internal

3. gaya Inline

External Style Sheet

Style sheet eksternal sangat ideal bila gaya diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs dengan mengubah hanya satu file.

Setiap halaman harus menyertakan link ke style sheet dengan tag <link>. <Link> tag masuk ke dalam bagian kepala:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Style sheet eksternal dapat ditulis dalam editor teks apapun. File ini tidak boleh mengandung tag HTML. File style sheet harus disimpan dengan ekstensi .css. File sheet contoh gaya yang disebut "styleku.css", menunjukkan sebagai berikut:

body {
    background-color: lightblue;
}
h1 {
    color: navy;
    margin-left: 20px;
}

Internal Style Sheet

Style sheet internal harus digunakan bila dokumen tunggal memiliki gaya yang unik. Anda mendefinisikan gaya internal di bagian kepala halaman HTML, di dalam tag <style>, seperti ini:

<head>
<style>
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>

Inline Styles

Sebuah gaya inline kehilangan banyak keuntungan dari style sheet (dengan mencampurkan konten dengan presentasi). Gunakan metode ini hemat!

Untuk menggunakan gaya inline, tambahkan atribut style tag yang relevan. Atribut style dapat berisi properti CSS. Contoh ini menunjukkan bagaimana untuk mengubah warna dan margin kiri elemen h1:

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

Multiple Style Sheets

Jika beberapa sifat yang telah ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda, nilai-nilai akan diwariskan dari style sheet lebih spesifik.

Sebagai contoh, asumsikan bahwa style sheet eksternal memiliki properti berikut untuk <h1> elemen:

h1 {
    color: navy;
    margin-left: 20px;
}

Kemudian, menganggap bahwa style sheet internal yang juga memiliki properti untuk <h1> elemen berikut:

h1 {
    color: orange;    
}

Kemudian, menganggap bahwa style sheet internal yang juga memiliki properti untuk <h1> elemen berikut:...

color: orange;
margin-left: 20px;

CSS Selectors

CSS Selectors

CSS memungkinkan Anda untuk memilih dan memanipulasi elemen HTML.

CSS digunakan untuk "menemukan" (atau pilih) elemen HTML berdasarkan mereka id, kelas, jenis, atribut, dan banyak lagi.

The element Selector

Pemilih elemen memilih elemen berdasarkan nama elemen.

Anda dapat memilih semua <p> elemen pada halaman seperti ini: (semua <p> elemen akan pusat-blok, dengan warna teks merah)

p {
    text-align: center;
    color: red;
}

The id Selector

Pemilih id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu.

Id harus unik dalam suatu halaman, sehingga pemilih id digunakan jika Anda ingin memilih satu, elemen yang unik.

Untuk memilih elemen dengan id tertentu, menulis karakter hash, diikuti oleh id dari elemen.

Gaya aturan di bawah ini akan diterapkan pada elemen HTML dengan id = "para1":

#para1 {
    text-align: center;
    color: red;
}

The class Selector

Pemilih kelas memilih elemen dengan atribut kelas khusus.

Untuk memilih elemen dengan kelas tertentu, menulis karakter periode, diikuti oleh nama kelas:

Pada contoh di bawah ini, semua elemen HTML dengan class = "center" akan pusat-blok:

.center {
    text-align: center;
    color: red;
}

Anda juga dapat menentukan bahwa elemen HTML hanya khusus harus dipengaruhi oleh kelas.

Dalam contoh di bawah, semua <p> elemen dengan class = "center" akan pusat-aligne

p.center {
    text-align: center;
    color: red;
}

Grouping Selectors

Jika Anda memiliki elemen dengan definisi gaya yang sama, seperti ini:

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

Anda dapat kelompok pemilih, untuk meminimalkan kode.

Untuk pemilih kelompok, memisahkan masing-masing pemilih dengan koma.

Pada contoh di bawah ini kita telah dikelompokkan pemilih dari kode di atas:

h1, h2, p {
    text-align: center;
    color: red;
}