www.awdev.eu.org Open in urlscan Pro
2a00:1450:4001:827::2013  Public Scan

Form analysis
1 forms found in the DOM

https://www.awdev.eu.org/search

<form action="https://www.awdev.eu.org/search" class="srchF" target="_top">
  <input aria-label="Cari blog ini" autocomplete="off" id="searchIn" minlength="3" name="q" placeholder="Try 'Adventure'" required="required" value="">
  <span class="sb">
    <svg class="line" viewBox="0 0 24 24">
      <g transform="translate(2.000000, 2.000000)">
        <circle cx="9.76659044" cy="9.76659044" r="8.9885584"></circle>
        <line x1="16.0183067" x2="19.5423342" y1="16.4851259" y2="20.0000001"></line>
      </g>
    </svg>
  </span>
  <button aria-label="Clear" class="sb" data-text="✕" type="reset"></button>
  <span class="fCls"></span>
</form>

Text Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link


AWDEV

 * 
 * 

 * About
 * Disclaimer
 * Privacy Policy
 * Terms and Conditions Awdev

 * 
 * 
 * 
 * 
 * 
 * 

 * Langganan
 * Download this theme
 * SITEMAP
 * Comunity Awdev
 * Partner Awdev
 * Lainnya…
   * AFFILIASI
   * PUBLISHER
   * Contact Us

Beranda
E-LEARNING


PELAJARAN 6 | BEKERJA DENGAN TIPOGRAFI | E-LEARNING AWDEV DEVOLOPER FREE KURSUS
ONLINE E-LEARNING WWW.AWDEV.EU.ORG

26 min read


 


 












PELAJARAN 6 |

BEKERJA DENGAN TIPOGRAFI | E-LEARNING AWDEV DEVOLOPER FREE KURSUS ONLINE
E-LEARNING
WWW.AWDEV.EU.ORG







DALAM PELAJARAN INI :


HTML

Kutipan & Kutipan

CSS

Warna teks

Properti Font

Properti Teks

Font Aman-Web

Menyematkan Font Web


" Nikmati pelajaran ini? Tunjukkan dukungan Anda dengan Tutorial Yang Anda
Dapatkan ini dengan Berkontribusi :  



Loved the tool? Please consider donating 💸 to help it improve!



Send ♥️ Pay Pal 







BEKERJA DENGAN TIPOGRAFI | E-LEARNING AWDEV DEVOLOPER FREE KURSUS ONLINE


Bidang tipografi web telah berkembang secara substansial dari waktu ke
waktu. Ada beberapa alasan berbeda untuk kenaikan popularitasnya; satu alasan
yang diakui secara luas adalah pengembangan sistem untuk menyematkan font web
kita sendiri di situs web.

Di masa lalu kami terbatas pada sejumlah kecil tipografi yang dapat kami gunakan
di situs web. Tipografi ini adalah font yang paling umum dipasang di komputer,
jadi font ini paling mungkin ditampilkan dengan benar di layar. Jika font tidak
diinstal di komputer, font juga tidak akan ditampilkan di situs web. Sekarang,
dengan kemampuan untuk menyematkan font, kami memiliki palet tipografi yang jauh
lebih besar untuk dipilih, termasuk yang kami tambahkan ke situs web.

Sementara kemampuan untuk menyematkan font memberi kita akses ke tipografi baru
yang tak terhitung jumlahnya, penting juga bagi kita untuk mengetahui
prinsip-prinsip dasar tipografi. Dalam pelajaran ini kita akan melihat beberapa
prinsip dasar ini dan bagaimana menerapkannya ke halaman web kita menggunakan
HTML dan CSS.


Istilah "jenis huruf" dan "font" sering dipertukarkan, menyebabkan
kebingungan. Berikut adalah rincian dari apa arti setiap istilah.

Jenis huruf adalah apa yang kita lihat. Ini adalah kesan artistik tentang
bagaimana teks terlihat, terasa, dan terbaca.

Font adalah file yang berisi tipografi . Menggunakan font di komputer
memungkinkan komputer untuk mengakses jenis huruf.

Salah satu cara untuk membantu memperjelas perbedaan antara jenis huruf dan font
adalah dengan membandingkannya dengan lagu dan MP3 . Jenis huruf sangat mirip
dengan lagu karena merupakan karya seni. Ini dibuat oleh seorang seniman atau
seniman dan terbuka untuk interpretasi publik. Font, di sisi lain, sangat mirip
dengan MP3 dalam hal itu bukan kesan artistik itu sendiri, tetapi hanya metode
penyampaian nilai artistik.






MENAMBAHKAN WARNA KE TEKS#WARNA


Biasanya salah satu keputusan pertama yang akan kami buat saat membangun situs
web adalah memilih jenis huruf dan warna teks utama yang akan
digunakan. Meskipun ada sejumlah properti lain yang dapat diubah—ukuran, berat,
dan sebagainya—jenis huruf dan warna teks umumnya memiliki dampak terbesar pada
tampilan dan keterbacaan halaman. Menyingkirkan default browser dan menggunakan
jenis huruf dan warna teks kita sendiri segera mulai mengatur nada halaman kita.

Satu-satunya properti yang kita butuhkan untuk mengatur warna teks
adalah colorproperti. Properti colormenerima satu nilai warna, tetapi dalam
banyak format berbeda. Format ini, seperti yang telah kita bahas di Pelajaran 3,
“ Mengenal CSS ,” termasuk kata kunci, nilai heksadesimal, dan nilai RGB, RGBa,
HSL, dan HSLa. Nilai heksadesimal adalah yang paling umum, karena memberikan
kontrol paling banyak dengan sedikit usaha.

Mari kita lihat CSS yang diperlukan untuk mengubah warna semua teks di
dalam <html>elemen pada halaman:


html { color: #555; }







MENGUBAH PROPERTI FONT


CSS menawarkan banyak properti berbeda untuk mengedit tampilan dan nuansa teks
pada halaman. Properti ini masuk ke dalam dua kategori: properti berbasis font
dan properti berbasis teks. Sebagian besar properti ini akan diawali dengan
salah satu font-*atau text-*. Untuk memulai kita akan membahas properti berbasis
font.




KELUARGA FONT


Properti font-familyini digunakan untuk mendeklarasikan font mana—serta font
fallback atau pengganti mana—yang harus digunakan untuk menampilkan
teks. Nilai font-familyproperti berisi beberapa nama font, semua dipisahkan
koma.

Font yang dideklarasikan pertama, mulai dari kiri, adalah pilihan font
utama. Jika font pertama tidak tersedia, font alternatif dideklarasikan
setelahnya dalam urutan preferensi dari kiri ke kanan.

Nama font yang terdiri dari dua kata atau lebih harus dibungkus dengan tanda
kutip. Selain itu, font terakhir harus berupa nilai kata kunci, yang akan
menggunakan font default sistem untuk jenis yang ditentukan, paling
sering sans-serifatau serif.

Properti font-familyyang sedang beraksi terlihat seperti ini:



body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }



Dalam hal ini, Helvetica Neueadalah font yang disukai untuk ditampilkan. Jika
font ini tidak tersedia atau tidak diinstal pada perangkat tertentu, font
berikutnya dalam daftar—Helvetica—akan digunakan, dan seterusnya.






UKURAN HURUF




Properti font-sizemenyediakan kemampuan untuk mengatur ukuran teks menggunakan
nilai panjang umum, termasuk piksel, unit em, persentase, poin,
atau font-sizekata kunci.

Di sini CSS mengatur font-sizepiksel 14pada <body>elemen:



body { font-size: 14px; }






GAYA TULISAN


Untuk mengubah teks menjadi miring, atau untuk mencegah teks menjadi miring,
kami akan menggunakan font-styleproperti. Properti font-stylemenerima empat
nilai kata kunci: normal, italic, oblique, dan inherit. Dari keempatnya, yang
paling umum digunakan adalah italic(mengatur teks menjadi miring)
dan normal(mengembalikan teks ke gaya normal).

CSS berikut menetapkan semua elemen dengan kelas specialuntuk menyertakan
a font-styledari italic:



.special { font-style: italic; }






VARIAN FONT




Itu tidak sering terjadi, tetapi kadang-kadang teks perlu diatur dalam huruf
besar kecil, juga dikenal sebagai huruf kecil. Untuk kasus khusus ini kami akan
menggunakan font-variantproperti. Properti font-variantmenerima tiga
nilai: normal, small-caps, dan inherit. Nilai yang paling sering terlihat
adalah normaldan small-caps, yang digunakan untuk mengganti tipografi antara
varian huruf besar dan huruf kecil.



Untuk mengganti semua elemen dengan kelas firm, kita akan menggunakan
a font-variantof small-caps:



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






BERAT FONT




Kadang-kadang, kita ingin menata teks menjadi tebal atau mengubah bobot jenis
huruf tertentu. Untuk kasus ini kita akan
menggunakan font-weightproperti. Properti font-weightmenerima kata kunci atau
nilai numerik.

Nilai kata kunci meliputi normal, bold, bolder, lighter, dan inherit. Dari nilai
kata kunci ini, disarankan untuk menggunakan normaldan boldmengubah teks dari
normal menjadi tebal dan sebaliknya. Daripada menggunakan nilai kata
kunci bolderatau lighter, lebih baik menggunakan nilai numerik untuk kontrol
yang lebih spesifik.

Dalam praktiknya, inilah CSS untuk mengatur font-weightto bolduntuk elemen apa
pun dengan kelas daring:


.daring { font-weight: bold; }



Nilai numerik 100, 200, 300, 400, 500, 600, 700, 800, dan 900berkaitan secara
khusus dengan tipografi yang memiliki banyak bobot. Urutan bobot ini dimulai
dengan bobot tertipis, 100, dan naik ke bobot paling tebal, 900. Untuk
referensi, nilai kata kunci dari normalpeta ke 400dan kata kunci boldpeta
ke 700; dengan demikian, nilai numerik apa pun di bawah 400ini akan cukup tipis,
dan nilai apa pun di atas 700akan cukup tebal.

Mengubah font-weightto 600untuk elemen apa pun dengan kelas daringnow akan
membuat teks tersebut menjadi semibold—tidak setebal nilai boldkata kunci dari
sebelumnya:



.daring
{
font-weight: 600;
}






BOBOT JENIS HURUF




Sebelum menggunakan nilai numerik, kita perlu memeriksa dan melihat apakah jenis
huruf yang kita gunakan memiliki bobot yang ingin kita gunakan. Mencoba
menggunakan bobot yang tidak tersedia untuk jenis huruf tertentu akan
menyebabkan gaya tersebut menjadi default ke nilai terdekat.

Misalnya, jenis huruf Times New Roman memiliki dua bobot: normal, atau 400,
dan bold, atau 700. Mencoba menggunakan bobot 900akan menjadikan tipografi
default ke bobot terkait terdekat, 700dalam hal ini.






TINGGI GARIS



Tinggi baris, jarak antara dua baris teks (sering disebut sebagai leading)
dideklarasikan menggunakan line-heightproperti. Properti line-heightmenerima
semua nilai panjang umum, yang kita bahas dalam Pelajaran 3, “ Mengenal CSS .”

Praktik terbaik untuk keterbacaan adalah dengan menyetelnya line-heightmenjadi
sekitar satu setengah kali font-sizenilai properti kita. Ini dapat dilakukan
dengan cepat dengan menyetel line-heightke 150%, atau hanya 1.5. Namun, jika
kita bekerja dengan grid dasar, memiliki sedikit lebih banyak kontrol
atas line-heightpenggunaan piksel kita mungkin lebih baik.

Melihat CSS, kami menyetel a line-heightpiksel 22di dalam elemen, sehingga
menempatkan 22piksel di antara setiap baris teks:



body { line-height: 22px; }



Tinggi baris juga dapat digunakan untuk memusatkan satu baris teks secara
vertikal di dalam elemen. Menggunakan nilai properti yang sama
untuk line-heightdan heightproperti akan memusatkan teks secara vertikal:



.btn { height: 22px; line-height: 22px; }



Teknik ini dapat dilihat dengan tombol, pesan peringatan, dan blok teks satu
baris lainnya.






PROPERTI FONT SINGKATAN




Semua fontproperti berbasis yang tercantum sebelumnya dapat digabungkan dan
digabungkan menjadi satu fontproperti dan nilai singkatan . Properti fontdapat
menerima beberapa fontnilai properti berbasis. Urutan nilai properti ini harus
sebagai berikut, dari kiri ke
kanan: font-style, font-variant, font-weight, font-size, line-height,
dan font-family.

Sebagai nilai singkatan, nilai properti ini dicantumkan dari kiri ke kanan tanpa
menggunakan koma (kecuali untuk nama font, karena nilai font-familyproperti
menggunakan koma). Pemisah garis miring, /, diperlukan antara nilai
properti font-sizedan line-height.

Saat menggunakan nilai singkatan ini, setiap nilai properti bersifat
opsional kecuali nilai font-sizedan font-familyproperti. Karena itu, kami hanya
dapat menyertakan nilai properti font-sizedan font-familydalam nilai singkatan
jika diinginkan.



html { font: italic small-caps bold 14px/22px "Helvetica Neue", Helvetica,
Arial, sans-serif; }






PROPERTI FONT SEMUA BERSAMA


Mari kita lihat contoh yang menggunakan semua fontproperti berbasis ini
bersama-sama. HTML dan CSS berikut menunjukkan kemungkinan yang berbeda saat
menata teks.



HTML


<h2><a href="#">I Am a Builder</a></h2> <p class="byline">Posted by Shay
Howe</p> <p>Every day I see designers and developers working alongside one
another. They work intelligently in pursuit of business objectives. They work
diligently making exceptional products. They solve real problems and take pride
in their work. They are builders. <a href="#">Continue…</a></p>

CSS

h2, p { color: #555; font: 13px/20px "Helvetica Neue", Helvetica, Arial,
sans-serif; } a { color: #0087cc; } a:hover { color: #ff7b29; } h2 { font-size:
22px; font-weight: bold; margin-bottom: 6px; } .byline { color: #9799a7;
font-family: Georgia, Times, "Times New Roman", serif; font-style: italic;
margin-bottom: 18px; }



Demo Properti Font




CSS PSEUDO-CLASS


Demonstrasi di sini menggunakan :hoverpseudo-class CSS, sesuatu yang belum
pernah kita lihat sebelumnya. Sebagai referensi, kelas semu adalah kata kunci
yang dapat ditambahkan ke akhir pemilih untuk memberi gaya pada elemen saat
berada dalam status unik.

Pseudo - :hoverclass memberi gaya pada elemen saat pengguna mengarahkan kursor
ke elemen tersebut. Saat digunakan dengan <a>elemen, seperti yang ditunjukkan di
sini, semua <a>elemen akan menerima gaya unik saat diarahkan. Sekarang <a>elemen
kita akan berubah warna setelah diarahkan.



Dalam praktek

# latihan-1

Menyelam kembali ke situs web Konferensi Gaya kami, mari mulai menambahkan
beberapa properti berbasis font.


Kita akan mulai dengan memperbarui font pada semua teks kita. Untuk melakukan
ini, kita akan menerapkan gaya ke <body>elemen kita. Kita akan mulai
dengan color, dan kita juga akan
menambahkan font-weight, font-size, line-height, dan font-familynilai
melalui fontproperti dan nilai singkatan.

Dalam upaya untuk menjaga main.cssfile kita terorganisir mungkin, mari buat
bagian baru untuk gaya kustom ini, menempatkannya tepat di bawah reset dan di
atas gaya grid kita.

Kita perlu menambahkan yang berikut ini:


/* ======================================== Custom styles
======================================== */ body { color: #888; font: 300
16px/22px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }




Dalam Pelajaran 4, “ Membuka Model Kotak ,” kami mulai menambahkan beberapa gaya
tipografi, khususnya menambahkan bagian bawah marginke beberapa tingkat judul
dan paragraf yang berbeda. Di dalam bagian main.cssfile yang sama, mari
tambahkan warna ke heading level satu hingga level empat.


h1, h2, h3, h4 { color: #648880; }



Sementara kita melakukannya, mari tambahkan juga ukuran font untuk level heading
yang berbeda ini. Elemen <h1>dan kami akan menggunakan nilai yang cukup
besar; akibatnya, kami juga ingin meningkatkan nilainya agar teks di dalam
elemen ini dapat terbaca. Untuk referensi, kami akan membuat nilainya
menjadi piksel, menggandakan nilai set dasar dalam set aturan
elemen.<h2>font-sizeline-heightline-height44line-height<body>



h1 { font-size: 36px; line-height: 44px; } h2 { font-size: 24px; line-height:
44px; } h3 { font-size: 21px; } h4 { font-size: 18px; }



Elemen kita <h5>akan menjadi sedikit lebih unik daripada heading kita yang
lain. Oleh karena itu, kita akan mengubah gaya mereka sedikit.

Kami akan menggunakan colornilai properti yang berbeda dan sedikit lebih
kecil font-sizeuntuk elemen ini, dan kami akan mengubah font-weightke 400,
atau normal.

Secara default, browser merender judul dengan font-weighthuruf tebal. Judul
kita, bagaimanapun, saat ini semua diatur ke font-weight300. Reset kita di
bagian atas main.cssfile kita mengubah font-weightke normal, dan kemudian
kita font-weightdari 300dalam <body>set aturan elemen mengubah semua heading
ke font-weightdari 300.

Of pada font-weightelemen sebenarnya akan membuatnya sedikit lebih tebal
daripada heading dan teks lainnya.400<h5>


h5 { color: #a9b2b9; font-size: 14px; font-weight: 400; }



Penyetelan ulang kami di awal lembar gaya kami juga menyetel ulang gaya default
browser untuk <strong>, <cite>, dan <em>elemen, yang ingin kami tambahkan
kembali. Untuk <strong>elemen kami, kami ingin menyetel a
, font-weightyang 400sebenarnya sama dengan normal, bukan bold, karena jenis
huruf yang kami gunakan lebih tebal daripada kebanyakan jenis huruf. Kemudian,
untuk elemen <cite>dan kami, <em>kami ingin mengatur font-styledari italic.


strong { font-weight: 400; } cite, em { font-style: italic; }



Kami siap, jadi mari lanjutkan dengan menambahkan beberapa gaya ke elemen
jangkar kami. Saat ini mereka adalah browser default berwarna biru. Mari kita
buat mereka sama dengan elemen heading through colorkita . Selain itu, mari
gunakan kelas semu untuk mengubahnya menjadi abu-abu muda saat pengguna
mengarahkan kursor ke jangkar.<h1><h4>:hovercolor



/* ======================================== Links
======================================== */ a:hover { color: #a9b2b9; } a {
color: #648880; }



Sekarang mari kita lihat <header>elemen kita dan perbarui gaya kita di
sana. Kami akan mulai memperbarui logo kami dengan menambahkan
properti font-sizedan line-heightdalam set aturan logo. Menambahkan ke
properti border-top, float, dan yang ada padding, kumpulan aturan baru akan
terlihat seperti ini:


.logo { border-top: 4px solid #648880; float: left; font-size: 48px;
line-height: 44px; padding: 40px 0 22px 0; }



Karena kita telah menaikkan ukuran logo sedikit, mari tambahkan
a marginke <h3>elemen di dalam <header>elemen untuk menyeimbangkannya. Kami akan
melakukannya dengan menempatkan nilai atribut kelas taglinepada <h3>elemen dan
kemudian menggunakan kelas itu di dalam CSS kami untuk menerapkan margin yang
tepat.

Jangan lupa bahwa perubahan pada <h3>elemen harus terjadi di setiap halaman.

HTML

<h3 class="tagline">August 24–26th — Chicago, IL</h3>

CSS

.tagline { margin: 66px 0 22px 0; }



Setelah <h3>elemen dengan nilai atribut class dari tagline
muncul <nav>elemen. Mari tambahkan nilai atribut kelas primary-navke <nav>elemen
dan tambahkan font-sizedan font-weightproperti untuk membuat navigasi menonjol
dibandingkan header lainnya.

HTML


<nav class="primary-nav"> ... </nav>


CSS


.primary-nav { font-size: 14px; font-weight: 400; }


Dengan <header>elemen dalam bentuk yang sedikit lebih baik, mari kita lihat
juga <footer>elemen kita. Dengan menggunakan primary-footerkelas, mari
ubah colordan font-sizeuntuk semua teks di dalam <footer>elemen. Selain itu,
mari kita naikkan font-weightelemen <small>ke 400.

Termasuk gaya yang ada, gaya untuk bagian footer utama kita akan terlihat
seperti ini:



.primary-footer { color: #648880; font-size: 14px; padding-bottom: 44px;
padding-top: 44px; } .primary-footer small { float: left; font-weight: 400; }



Mari kita perbarui halaman rumah kita sedikit juga. Kita akan mulai dengan
bagian pahlawan, meningkatkan keseluruhan line-heightbagian
menjadi 44piksel. Kami juga akan membuat teks dalam bagian ini lebih besar,
meningkatkan <h2>elemen font-sizeke 36piksel dan <p>elemen font-sizeke 24piksel.

Kita dapat membuat semua perubahan ini dengan menggunakan heropemilih kelas yang
ada dan membuat pemilih baru untuk elemen <h2>dan <p>. Gaya kami untuk bagian
pahlawan sekarang akan dipecah dengan cara ini:



.hero { line-height: 44px; padding: 22px 80px 66px 80px; } .hero h2 { font-size:
36px; } .hero p { font-size: 24px; }



Terakhir, kami memiliki satu masalah kecil yang harus diperbaiki di halaman
beranda kami. Sebelumnya kami memberi semua elemen jangkar kami nilai warna
abu-abu terang saat pengguna mengarahkan kursor ke atasnya. Ini berfungsi dengan
baik, kecuali dalam tiga penggoda di halaman beranda kami di mana elemen jangkar
membungkus keduanya <h3>dan <h5>elemen. Karena
elemen <h3>dan <h5>memiliki colordefinisinya sendiri, mereka tidak terpengaruh
oleh :hovergaya kelas semu dari sebelumnya.

Untungnya kami dapat memperbaikinya, meskipun akan membutuhkan pemilih yang
cukup rumit. Kita akan mulai dengan menambahkan classnilai atribut teaserke
ketiga kolom di halaman beranda. Kami akan segera menggunakan kelas ini sebagai
pemilih yang memenuhi syarat.



<section class="grid"> <!-- Speakers --> <section class="teaser col-1-3"> <a
href="speakers.html"> <h5>Speakers</h5> <h3>World-Class Speakers</h3> </a>
<p>Joining us from all around the world are over twenty fantastic speakers, here
to share their stories.</p> </section> ... </section>



Dengan adanya kelas kualifikasi, kami siap melakukan beberapa pekerjaan berat
CSS dan membuat pemilih yang cukup rumit. Kami akan memulai pemilih kami
dengan teaserkelas, karena kami hanya ingin menargetkan elemen di dalam elemen
dengan kelas teaser. Dari sana kami ingin menerapkan gaya ke elemen yang berada
di dalam elemen jangkar yang sedang dilayangkan; jadi kita akan menambahkan
pemilih tipe bersama dengan kelas :hoversemu. Terakhir, kita akan
menambahkan h3pemilih tipe untuk memilih <h3>elemen aktual yang ingin kita
terapkan gayanya.

Secara keseluruhan, pemilih dan gaya kami untuk <h3>elemen ini akan terlihat
seperti ini:


.teaser a:hover h3 { color: #a9b2b9; }



Wah, itu cukup sedikit. Kabar baiknya adalah bahwa halaman beranda Konferensi
Gaya kami mulai terlihat sangat bagus dan menunjukkan sedikit kepribadian.



Situs web Konferensi Gaya kami telah menerima cukup banyak cinta dari beberapa
properti berbasis font

Menerapkan Properti Teks

Mengetahui cara mengatur keluarga, ukuran, gaya, varian, berat, dan tinggi garis
font hanyalah setengah dari perjuangan. Selain itu, kita dapat memutuskan
bagaimana menyelaraskan, menghias, membuat indentasi, mengubah, dan memberi
spasi pada teks. Mari kita mulai dengan perataan teks.

Perataan Teks

Menyelaraskan teks adalah bagian penting dalam membangun ritme dan aliran pada
halaman; kami melakukan ini
menggunakan text-alignproperti. Properti text-alignini memiliki lima
nilai: left, right, center, justify, dan inherit. Semua nilai ini cukup
mudah; seperti yang diharapkan, mereka menyelaraskan teks ke kiri, kanan, atau
tengah, atau mereka membenarkan teks.

CSS berikut mengatur semua teks paragraf menjadi rata tengah:


p { text-align: center; }



Namun text-align, properti tidak boleh disamakan
dengan floatproperti. Nilai dan akan menyelaraskan teks dalam suatu elemen ke
kiri atau ke kanan, sedangkan nilai text-aligndan akan memindahkan seluruh
elemen. Terkadang properti itu akan memberi kita hasil yang diinginkan, dan di
lain waktu kita mungkin perlu menggunakan properti
itu.leftrightfloatleftrighttext-alignfloat

Dekorasi Teks

Properti text-decorationini menyediakan beberapa cara untuk merapikan teks. Ia
menerima nilai kata kunci dari none, underline, overline, line-through,
dan inherit. Penggunaan text-decorationproperti bervariasi, tetapi penggunaan
yang paling populer adalah menggarisbawahi tautan, yang merupakan gaya peramban
default.

Di sini CSS menata elemen apa pun dengan kelas notedengan text-decorationgaris
bawah:

.note { text-decoration: underline; }

Beberapa nilai dekorasi teks dapat diterapkan ke elemen sekaligus dengan
memisahkan setiap kata kunci dalam nilai dengan spasi.

Indentasi Teks

Properti text-indentini dapat digunakan untuk membuat indentasi baris pertama
teks dalam sebuah elemen, seperti yang biasa terlihat dalam publikasi
cetak. Semua nilai panjang umum tersedia untuk properti ini, termasuk piksel,
poin, persentase, dan sebagainya. Nilai positif akan membuat teks menjorok ke
dalam, sedangkan nilai negatif akan membuat teks menjorok ke luar.

Di sini, CSS membuat indentasi teks untuk semua <p>elemen ke dalam
dengan 20piksel:

p { text-indent: 20px; }




Bayangan teks

Properti text-shadowmemungkinkan kita untuk menambahkan bayangan atau beberapa
bayangan ke teks. Properti umumnya mengambil empat nilai, semua terdaftar satu
demi satu dari kiri ke kanan. Tiga nilai pertama adalah panjang, dan nilai
terakhir adalah warna.

Dalam tiga nilai panjang, nilai pertama menentukan offset horizontal bayangan,
nilai kedua menentukan offset vertikal bayangan, dan nilai ketiga menentukan
radius blur bayangan. Nilai keempat, dan terakhir, adalah warna bayangan, yang
dapat berupa nilai warna apa pun yang digunakan di dalam colorproperti.

Properti di text-shadowsini menampilkan piksel 30%bayangan hitam buram 3ke arah
kanan, 6piksel ke bawah, dan 2piksel kabur dari semua <p>teks elemen:



p { text-shadow: 3px 6px 2px rgba(0, 0, 0, .3); }

Menggunakan nilai panjang negatif untuk offset horizontal dan vertikal
memungkinkan kita memindahkan bayangan ke kiri dan atas.

Beberapa bayangan teks juga dapat dirantai bersama menggunakan nilai yang
dipisahkan koma, menambahkan lebih dari satu bayangan ke teks. Menggunakan
banyak bayangan memungkinkan kita untuk menempatkannya di atas dan di bawah
teks, atau dalam variasi apa pun yang kita inginkan.

Bayangan Kotak

Properti text-shadowmenempatkan bayangan secara khusus pada teks elemen. Jika
kita ingin menempatkan bayangan pada elemen secara keseluruhan, kita dapat
menggunakan box-shadowproperti.

Properti box-shadowbekerja seperti text-shadowproperti, menerima nilai untuk
offset horizontal dan vertikal, blur, dan warna.

Properti box-shadowjuga menerima nilai panjang keempat opsional, sebelum nilai
warna, untuk penyebaran bayangan. Sebagai nilai panjang positif, sebaran akan
memperluas bayangan lebih besar dari ukuran elemen yang diterapkan, dan sebagai
nilai panjang negatif, sebaran akan mengecilkan bayangan menjadi lebih kecil
dari ukuran elemen yang diterapkan.

Terakhir, box-shadowproperti dapat menyertakan nilai opsional insetdi awal nilai
untuk menempatkan bayangan di dalam elemen sebagai lawan di luar elemen.

Transformasi Teks

Mirip dengan font-variantproperti,
ada text-transformproperti. Sementara font-variantproperti mencari varian
alternatif dari jenis huruf, text-transformproperti akan mengubah teks sebaris
tanpa memerlukan jenis huruf alternatif. Properti text-transformmenerima lima
nilai: none, capitalize, uppercase, lowercase, dan inherit.

Nilai capitalizeakan menggunakan huruf kapital pada huruf pertama dari setiap
kata, uppercasenilai akan menggunakan huruf kapital untuk setiap huruf,
dan lowercasenilai akan membuat setiap huruf menjadi huruf
kecil. Menggunakan noneakan mengembalikan salah satu nilai yang diwarisi ini
kembali ke gaya teks asli.

CSS berikut mengatur semua <p>teks elemen untuk muncul dalam semua huruf besar:


p { text-transform: uppercase; }

Spasi Huruf

Dengan menggunakan letter-spacingproperti, kita dapat menyesuaikan spasi (atau
pelacakan) di antara huruf-huruf pada halaman. Nilai panjang positif akan
mendorong huruf lebih jauh satu sama lain, sedangkan nilai panjang negatif akan
menarik huruf lebih dekat satu sama lain. Nilai kata kunci none akan
mengembalikan spasi antar huruf kembali ke ukuran normalnya.

Menggunakan nilai panjang relatif dengan letter-spacingproperti akan membantu
memastikan bahwa kami mempertahankan jarak yang benar antara huruf
saat font-sizeteks diubah. Namun, selalu merupakan ide yang baik untuk memeriksa
kembali pekerjaan kita.

Dengan CSS di sini, semua huruf dalam <p>elemen kita akan tampak .5lebih dekat
satu sama lain:

1 2 3 4p { letter-spacing: -.5em; }

Spasi Kata

Sama seperti letter-spacingproperti, kita juga dapat menyesuaikan spasi antar
kata dalam elemen
menggunakan word-spacingproperti. Properti word-spacingmenerima nilai panjang
dan kata kunci yang sama dengan letter-spacingproperti. Namun, alih-alih memberi
jarak antar huruf, word-spacingproperti menerapkan nilai-nilai tersebut di
antara kata-kata.

Di sini setiap kata dalam <p>elemen akan diberi jarak .25.

1 2 3 4p { word-spacing: .25em; }

Properti Teks Semua Bersama

Mari kita lihat kembali demonstrasi penggoda blog kita sebelumnya, kali ini
menambahkan beberapa textproperti berbasis di atas properti berbasis font kita.

HTML

1 2 3 4 5 6<h2><a href="#">I Am a Builder</a></h2> <p class="byline">Posted by
Shay Howe</p> <p class="intro">Every day I see designers and developers working
alongside one another. They work intelligently in pursuit of business
objectives. They work diligently making exceptional products. They solve real
problems and take pride in their work. They are builders. <a
href="#">Continue…</a></p>

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
31 32 33 34 35 36 37h2, p { color: #555; font: 13px/20px "Helvetica Neue",
Helvetica, Arial, sans-serif; } a { color: #0087cc; } a:hover { color: #ff7b29;
} h2 { font-size: 22px; font-weight: bold; letter-spacing: -.02em;
margin-bottom: 6px; } h2 a { text-decoration: none; text-shadow: 2px 2px 1px
rgba(0, 0, 0, .2); } .byline { color: #9799a7; font-family: Georgia, Times,
"Times New Roman", serif; font-style: italic; margin-bottom: 18px; } .intro {
text-indent: 15px; } .intro a { font-size: 11px; font-weight: bold;
text-decoration: underline; text-transform: uppercase; }

Demo Properti Teks

Dalam praktek

Dengan textproperti berbasis di bawah ikat pinggang kami, mari kembali ke situs
web Konferensi Gaya kami dan membuatnya berfungsi.

Saat ini setiap tautan di halaman digarisbawahi, yang merupakan gaya default
untuk elemen jangkar. Namun, gaya ini terkadang sedikit sombong, jadi kami akan
mengubahnya sedikit.

Menambahkan ke bagian tautan kami di dalam main.cssfile kami, kami akan mulai
dengan menghapus garis bawah dari semua elemen jangkar
melalui text-decorationproperti. Selanjutnya, kita akan memilih semua elemen
jangkar yang muncul di dalam elemen paragraf dan memberinya dasar border.

Kita bisa menggunakan text-decorationproperti alih-alih border-bottomproperti
untuk menggarisbawahi semua tautan dalam setiap paragraf; namun, dengan
menggunakan border-bottomproperti, kami memiliki kontrol lebih besar atas
tampilan garis bawah. Di sini, misalnya, garis bawah akan menjadi warna yang
berbeda dari teks itu sendiri.

Bagian tautan kami, yang mencakup gaya mengarahkan kursor kami sebelumnya, akan
terlihat seperti ini:

1 2 3 4 5 6 7 8 9 10 11a { color: #648880; text-decoration: none; } a:hover {
color: #a9b2b9; } p a { border-bottom: 1px solid #dfe2e5; }

Kembali ke <h5>elemen kita sebelumnya, yang memiliki gaya yang sedikit berbeda
dari heading lainnya, mari kita buat semuanya menjadi huruf besar
menggunakan text-transformproperti. <h5>Gaya elemen baru kita akan terlihat
seperti ini:

1 2 3 4 5 6 7h5 { color: #a9b2b9; font-size: 14px; font-weight: 400;
text-transform: uppercase; }

Mari kita meninjau kembali <header>elemen kita untuk menerapkan gaya tambahan ke
menu navigasi kita (yang sebelumnya kita tambahkan nilai primary-navatribut
class). Setelah ada font-sizedan font-weightproperti, mari tambahkan
sedikit letter-spacingdan ubah teks kita menjadi huruf besar semua
melalui text-transformproperti.

Style kita untuk <nav>elemen dengan nilai primary-navatribut class sekarang akan
terlihat seperti ini:

1 2 3 4 5 6 7.primary-nav { font-size: 14px; font-weight: 400; letter-spacing:
.5px; text-transform: uppercase; }

Sebelumnya, kami melayangkan logo kami ke leftdalam <header>elemen. Sekarang
tagline kami berada tepat di sebelah kanan logo; namun, kami ingin itu muncul
sepenuhnya di sebelah kanan <header>elemen, rata ke kanan.

Kita perlu menambahkan text-alignproperti dengan nilai rightke <h3>elemen dengan
nilai atribut kelas taglineuntuk mendapatkan tagline untuk duduk sepenuhnya ke
kanan.

Saat ditambahkan ke marginproperti yang ada, gaya baru kami untuk <h3>elemen
dengan nilai atribut kelas taglineakan terlihat seperti ini:

1 2 3 4 5.tagline { margin: 66px 0 22px 0; text-align: right; }

Kami juga ingin menu navigasi kami, baik dalam elemen <header>maupun <footer>,
untuk duduk rata dengan benar. Karena elemen <header>dan
keduanya <footer>memiliki elemen anak yang diapungkan ke left, kita dapat
menggunakan pendekatan yang sama seperti yang kita lakukan dengan tagline kita.

Elemen melayang di dalam <header>dan <footer>elemen dikeluarkan dari aliran
normal halaman, dan ini menyebabkan elemen lain membungkusnya. Dalam kasus
khusus ini, menu navigasi kami adalah elemen yang membungkus elemen melayang.

Karena kami akan berbagi gaya yang sama di kedua menu navigasi, kami akan
memberi mereka masing-masing kelas nav. <header>Elemen kita sekarang akan
terlihat seperti ini:

1 2 3 4 5 6 7 8 9 10 11 12<header class="container group"> <h1
class="logo">...</h1> <h3 class="tagline">...</h3> <nav class="nav primary-nav">
... </nav> </header>

Dan <footer>elemen kita sekarang akan terlihat seperti ini:

1 2 3 4 5 6 7 8 9 10<footer class="primary-footer container group">
<small>...</small> <nav class="nav"> ... </nav> </footer>

Jangan lupa, perubahan pada elemen <header>dan kami <footer>perlu dilakukan di
setiap halaman.

Dengan kelas nav di kedua menu navigasi, mari buat bagian baru di
dalam main.cssfile kita untuk menambahkan gaya navigasi bersama. Kita akan mulai
dengan menambahkan text-alignproperti dengan nilai rightke navset aturan
kelas. Kami akan memperluas gaya ini nanti, tetapi ini akan berfungsi sebagai
fondasi yang bagus.

1 2 3 4 5 6 7 8 9 10/* ======================================== Navigation
======================================== */ .nav { text-align: right; }

Sementara kita menambahkan text-alignproperti ke beberapa elemen yang berbeda,
mari kita juga menambahkan text-alignproperti dengan nilai centerke herokumpulan
aturan pemilih kelas kita. Untuk referensi, gaya ini, termasuk yang
ada line-heightdan paddingproperti kami, terletak di dalam bagian halaman
beranda dari main.cssfile kami.

1 2 3 4 5 6.hero { line-height: 44px; padding: 22px 80px 66px 80px; text-align:
center; }

Konferensi Gaya kami sekarang memiliki gaya yang serius. (Lelucon yang buruk,
maaf.) Serius, semua gaya kami datang dengan cukup baik, 
dan situs web kami berkembang.




Menggunakan Font Aman-Web#font-web-aman


Secara default ada beberapa font yang sudah diinstal sebelumnya di setiap
komputer, tablet, ponsel pintar, atau perangkat berkemampuan penjelajahan web
lainnya. Karena mereka telah diinstal pada setiap perangkat, kami dapat
menggunakan font ini secara bebas di dalam situs web kami, mengetahui bahwa apa
pun perangkat yang menjelajahi situs kami, font akan ditampilkan dengan
benar. Font ini telah dikenal sebagai "font web-safe." Hanya ada beberapa dari
mereka, dan font web-safe teraman tercantum di sini:

Arial

Kurir Baru, Kurir

Garamond

Georgia

Lucida Sans, Lucida Grande, Lucida

Linotipe Palatino

Tahoma

Times New Roman, Times

Trebuchet

Verdana

Menyematkan Font Web

Kami juga memiliki kemampuan untuk mengunggah font ke server dan memasukkannya
ke situs web melalui aturan CSS @font-face. Kemampuan ini telah melakukan
keajaiban untuk tipografi online. Sekarang, lebih dari sebelumnya, tipografi
menjadi hidup secara online.

Menyematkan font web kita sendiri terlihat seperti CSS berikut. Pertama, kami
menggunakan @font-faceat-rule untuk mengidentifikasi nama font kami,
melalui font-familyproperti, serta sumber font kami (path ke file font yang
berisi font pilihan kami), melalui srcproperti. Dari sana kami dapat menggunakan
font ini dengan memasukkan namanya dalam font-familynilai properti apa pun.

1 2 3 4 5 6 7 8@font-face { font-family: "Lobster"; src: local("Lobster"),
url("lobster.woff") format("woff"); } body { font-family: "Lobster", "Comic
Sans", cursive; }

Demo Properti Teks

Memiliki kemampuan untuk menyematkan jenis huruf apa pun di situs web tidak
berarti kami secara hukum memiliki wewenang untuk melakukannya. Tipografi adalah
karya seni, dan mempostingnya di server kami memungkinkan orang lain mencurinya
dengan mudah. Kewenangan untuk menggunakan tipografi tergantung pada lisensi
yang kami terima.

Untungnya, nilai penggunaan tipografi baru secara online telah diakui, dan
perusahaan telah mulai mengembangkan cara untuk melisensikan dan menyertakan
font baru di situs web. Beberapa perusahaan ini, seperti Typekit dan Fontdeck ,
menggunakan model berlangganan untuk melisensikan font, sementara yang lain,
seperti Google Fonts , melisensikan font secara gratis. Sebelum mengunggah font
apa pun, pastikan kami memiliki izin untuk melakukannya.

Dalam praktek

Untuk menambahkan sedikit karakter ke situs web Konferensi Gaya kami, mari coba
gunakan Font Google di situs web kami.

Mari menuju ke situs web Google Font dan mencari font yang ingin kita gunakan:
Lato. Setelah kami menemukannya, mari lanjutkan dengan menambahkannya ke koleksi
kami dan mengikuti langkah-langkah di situs web mereka untuk menggunakan font
tersebut.

Ketika saatnya tiba untuk memilih bobot font mana yang ingin kita gunakan,
pastikan untuk memilih 300dan 400, karena kita telah menggunakannya dalam CSS
kita. Ayo tambah 100koleksinya juga untuk variasi lainnya.

Google akan memberi kita <link>elemen tambahan untuk dimasukkan ke
dalam <head>elemen semua halaman kita. Kami akan menempatkan <link>elemen baru
ini tepat di bawah <link>elemen yang ada. Elemen baru akan menyertakan referensi
lembar gaya yang tepat ke Google, yang akan menangani menyertakan file CSS baru
dengan aturan yang tepat @font-faceyang diperlukan bagi kita untuk menggunakan
font Lato.

Dengan penambahan elemen baru <link>, elemen kita <head>akan terlihat seperti
ini:

1 2 3 4 5 6 7 8<head> <meta charset="utf-8"> <title>Styles Conference</title>
<link rel="stylesheet" href="assets/stylesheets/main.css"> <link
rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,300,400">
</head>

Setelah kami menambahkan <link>elemen baru ke semua halaman kami, kami siap
untuk mulai menggunakan font Lato. Kami akan melakukannya dengan menambahkannya
ke tumpukan font utama kami di dalam fontproperti di dalam <body>gaya elemen
kami.

Mari tambahkan Lato ke awal tumpukan font kita untuk membuatnya "Lato", "Open
Sans", "Helvetica Neue", Helvetica, Arial, sans-serif.

Meskipun Lato adalah satu kata, karena ini adalah font web yang disematkan, kami
ingin mengelilinginya dengan tanda kutip dalam referensi CSS apa pun. <body>Gaya
elemen baru kami akan terlihat seperti ini:

1 2 3 4 5body { color: #888; font: 300 16px/22px "Lato", "Open Sans", "Helvetica
Neue", Helvetica, Arial, sans-serif; }

Lato sekarang harus aktif dan berjalan, terlihat di semua teks kami di seluruh
situs web Styles Conference. Mari kita lihat lebih dekat logo kita dan perbarui
sedikit.

Dalam logoset aturan pemilih kelas, kita akan mulai dengan
menambahkan font-weightproperti dengan nilai 100untuk membuat teks cukup
tipis. Kami juga akan menggunakan text-transformproperti dengan
nilai uppercaseuntuk membuat semua huruf menjadi huruf besar,
serta letter-spacingproperti dengan nilai .5piksel untuk menambahkan sedikit
ruang di antara setiap huruf di dalam logo.

Secara keseluruhan gaya untuk logo kita akan terlihat seperti ini:

1 2 3 4 5 6 7 8 9 10 11.logo { border-top: 4px solid #648880; float: left;
font-size: 48px; font-weight: 100; letter-spacing: .5px; line-height: 44px;
padding: 40px 0 22px 0; text-transform: uppercase; }

Karena kita memiliki font-weightnilai properti yang 100tersedia, mari juga atur
elemen paragraf di dalam bagian pahlawan kita ke bobot itu. Kita dapat
menggunakan pemilih yang ada untuk melakukannya, dan kumpulan aturan baru akan
terlihat seperti ini:

1 2 3 4 5.hero p { font-size: 24px; font-weight: 100; }

Situs web Konferensi Gaya kami telah mengambil beberapa langkah besar dalam
pelajaran ini, dan tampilan serta nuansa situs web kami mulai benar-benar
bersinar.


Gambar 6

Halaman beranda Konferensi Gaya kami setelah menambahkan font web Lato Google

Demo & Kode Sumber

Di bawah ini Anda dapat melihat situs web Styles Conference dalam keadaan saat
ini, serta mengunduh kode sumber untuk situs web dalam keadaan saat ini.

Lihat Situs Web Konferensi Gaya atau Unduh Kode Sumber (file Zip)

Termasuk Kutipan & Kutipan

Menulis online terkadang melibatkan mengutip sumber atau kutipan yang
berbeda. Semua kasus kutipan dan kutipan yang berbeda dapat dicakup secara
semantik dalam HTML menggunakan elemen <cite>, <q>, dan <blockquote>. Karena
tampilannya biasanya dibedakan dari teks biasa, kita akan membahasnya di sini
dalam pelajaran tipografi.

Mengetahui kapan harus menggunakan elemen dan atribut mana untuk menandai
kutipan dan kutipan dengan benar membutuhkan sedikit latihan. Secara umum, ikuti
aturan berikut:

<cite>: Digunakan untuk referensi karya kreatif, penulis, atau sumber daya

<q>: Digunakan untuk kutipan pendek dan sebaris

<blockquote>: Digunakan untuk kutipan eksternal yang lebih panjang

Mengutip Karya Kreatif

Elemen <cite>sebaris digunakan dalam HTML untuk secara khusus mengutip karya
kreatif; elemen harus menyertakan judul karya, nama penulis, atau referensi URL
ke karya tersebut. Secara default, konten yang dibungkus dalam <cite>elemen akan
muncul dalam huruf miring di dalam browser.

Untuk referensi tambahan, ada baiknya menyertakan hyperlink ke sumber asli
kutipan jika relevan.

Di sini buku Steve Jobs , oleh Walter Isaacson, dirujuk dalam <cite>elemen
tersebut. Di dalam kutipan juga terdapat hyperlink ke buku.

1 2<p>The book <cite><a
href="http://www.amazon.com/Steve-Jobs-Walter-Isaacson/dp/1451648537">Steve
Jobs</a></cite> is truly inspirational.</p>

Mengutip Demo Karya Kreatif

Dialog & Kutipan Prosa

Cukup sering, dialog atau prosa dikutip sebaris, di dalam teks lain. Untuk
tujuan ini, <q>elemen inline (atau kutipan) harus diterapkan. Elemen
tersebut <q>secara semantik menunjukkan dialog atau prosa yang dikutip dan tidak
boleh digunakan untuk tujuan lain apa pun.

Secara default, browser akan memasukkan tanda kutip yang tepat untuk kita dan
bahkan akan mengubah tanda kutip berdasarkan bahasa yang diidentifikasi
dalam langatribut global.

Berikut ini contohnya:

1 2<p>Steve Jobs once said, <q>One home run is much better than two
doubles.</q></p>

Dialog & Kutipan Prosa

Atribut opsional untuk disertakan pada <q>elemen
adalah citeatribut. Atribut citetersebut bertindak sebagai referensi kutipan ke
kutipan dalam bentuk URL. Atribut ini tidak mengubah tampilan elemen; itu hanya
menambah nilai bagi pembaca layar dan perangkat lain. Karena atribut tidak dapat
dilihat di dalam browser, ada baiknya juga menyediakan hyperlink ke sumber ini
di sebelah kutipan yang sebenarnya.

Berikut ini contohnya:

1 2<p><a
href="http://www.businessweek.com/magazine/content/06_06/b3970001.htm">Steve
Jobs</a> once said, <q
cite="http://www.businessweek.com/magazine/content/06_06/b3970001.htm">One home
run is much better than two doubles.</q></p>

Demo Dialog & Kutipan Prosa

Kutipan Eksternal

Untuk mengutip blok teks besar yang berasal dari sumber eksternal dan mencakup
beberapa baris, kita akan menggunakan <blockquote>elemen. Itu <blockquote>adalah
elemen level blok yang mungkin memiliki elemen level blok lain yang bersarang di
dalamnya, termasuk heading dan paragraf.

Berikut ini contoh yang menggunakan <blockquote>elemen:

1 2 3 4<blockquote> <p>“In most people’s vocabularies, design is a veneer. It’s
interior decorating. It’s the fabric of the curtains, of the sofa. But to me,
nothing could be further from the meaning of design. Design is the fundamental
soul of a human-made creation that ends up expressing itself in successive outer
layers of the product.”</p> </blockquote>

Kutipan Eksternal

Kutipan yang lebih panjang yang digunakan dalam <blockquote>elemen akan sering
menyertakan kutipan. Kutipan ini dapat terdiri dari citeatribut
dan <cite>elemen.

Atribut citedapat disertakan pada <blockquote>elemen—dengan cara yang sama
seperti yang digunakan pada <q>elemen sebelumnya—untuk memberikan referensi
kutipan ke kutipan dalam bentuk URL. Elemen <cite>kemudian bisa jatuh setelah
kutipan itu sendiri untuk menentukan sumber asli kutipan, jika relevan.

HTML di sini menguraikan kutipan panjang dari Steve Jobs yang awalnya muncul di
majalah Fortune . Kutipan ditandai menggunakan <blockquote>elemen
dengan citeatribut untuk menentukan di mana kutipan awalnya
muncul. Dalam <blockquote>elemen, <cite>elemen, bersama dengan <a>elemen,
memberikan kutipan dan referensi tambahan untuk kutipan yang terlihat oleh
pengguna.

1 2 3 4 5<blockquote
cite="http://money.cnn.com/magazines/fortune/fortune_archive/2000/01/24/272277/index.htm">
<p>“In most people’s vocabularies, design is a veneer. It’s interior decorating.
It’s the fabric of the curtains, of the sofa. But to me, nothing could be
further from the meaning of design. Design is the fundamental soul of a
human-made creation that ends up expressing itself in successive outer layers of
the product.”</p> <p><cite>— Steve Jobs in <a href="http://money.cnn.com/
magazines/fortune/fortune_archive/2000/01/24/272277/index.htm"> Fortune
Magazine</a></cite></p> </blockquote>

Demo Kutipan Eksternal

Ringkasan

Mempelajari cara menata teks itu mengasyikkan, karena konten kami dapat mulai
menyampaikan beberapa emosi. Kami juga dapat mulai bermain-main dengan hierarki
konten kami, membuat situs web kami lebih mudah dibaca dan dicerna.

Untuk rekap cepat, dalam pelajaran ini kita membahas hal berikut:

Menambahkan warna pada teks kami untuk menyempurnakannya

Menerapkan fontproperti berbasis,
termasuk font-family, font-size, font-style, font-weight, dan lainnya

Menerapkan textproperti berbasis,
termasuk text-align, text-decoration, text-indent, text-shadow, dan lainnya

Sejarah di balik font web-safe dan cara menyematkan font web kami sendiri

Cara menandai kutipan dan kutipan dengan benar

Mempertajam teks kita dan sedikit mencoba-coba tipografi telah membawa desain
kita cukup jauh. Selanjutnya, kami akan membawa sedikit lebih banyak warna ke
situs web kami dengan membahas latar belakang dan gradien.

Sumber & Tautan

Elemen Gaya Tipografi yang Diterapkan ke Web melalui Richard Rutter

Lembar Cheat Properti Singkatan Font CSS melalui Web yang Mengesankan

Google Font




TAG : 
#AWDEV
#WEBSITE
#BLOOG
#SEO
#Search Engine Optimization
#UMKM
#E-COMERCE
#BUSSINES
#MARKETING
#MEDIA


SCORE :
www.awdev.eu.org


www.devoloper.awdev.eu.org


www.mikrover.awdev.eu.org


www.wahyu9kdl.github.io


www.wahyu9kdl.medium.com


www.alhikmah.my.id




http://kong.github.io/unirest-java/#requests


https://mvnrepository.com/artifact/com.konghq/unirest-java
🧰 SERVICE
📝 FORMULIR SERVICE 📥 💯 FREE DOWNLODER FILE


📊 FUNDING.yml
🏅Become a Patreon! 🎗SOCIABUZZ 🏅SUPPORT 🎗GIVE 🏅SAWERIA 🎗 Paypal






➡️ Share This Page. 


Thanks You 🤗♥️









santri indonesia bangkit

Salin



ANDA MUNGKIN MENYUKAI POSTINGAN INI

 * PELAJARAN 8 | MEMBUAT DAFTAR | E-LEARNING
     PELAJARAN 8 |MEMBUAT DAFTAR | E-LEARNING AWDEV DEVOLOPER FREE KURSUS
   ONLINEE-LEARNINGwww.awdev.eu.org Dalam Pelajaran ini8 HTML Daftar Tidak
   Terurut Daftar yang dipesan Dafta…
   
 * PELAJARAN 7 | MENGATUR LATAR BELAKAN & GRADIEN | E-LEARNING
     PELAJARAN 7 |MENGATUR LATAR BELAKAN & GRADIEN | E-LEARNING AWDEV DEVOLOPER
   FREE KURSUS ONLINEE-LEARNINGwww.awdev.eu.org Dalam Pelajaran ini7 CSS Warna
   latar belakang Gambar la…
   
 * PELAJARAN 6 | BEKERJA DENGAN TIPOGRAFI | E-LEARNING AWDEV DEVOLOPER FREE
   KURSUS ONLINE E-LEARNING www.awdev.eu.org
     PELAJARAN 6 |BEKERJA DENGAN TIPOGRAFI | E-LEARNING AWDEV DEVOLOPER FREE
   KURSUS ONLINEE-LEARNINGwww.awdev.eu.org Dalam Pelajaran ini : HTML Kutipan &
   Kutipan CSS Warna teks P…
   
 * PELAJARAN 5 | MEMOSISIKAN KONTEN E - LEARNING www.awdev.eu.org
    PELAJARAN 5| MEMOSISIKAN KONTEN E - LEARNINGwww.awdev.eu.org Memosisikan
   Konten Dalam Pelajaran ini :  ✔CSS ✔Pemosisian dengan Float ✔Pemosisian
   dengan Inline-Block ✔Membuat Tat…
   
 * PELAJARAN 9 | MENAMBAHKAN MEDIA | E-LEARNING AWDEV DEVOLOPER FREE KURSUS
   ONLINE
     PELAJARAN 9 |MENAMBAHKAN MEDIA | E-LEARNING AWDEV DEVOLOPER FREE KURSUS
   ONLINEE-LEARNINGwww.awdev.eu.org Dalam Pelajaran ini9 HTML Menambahkan Gambar
   Menambahkan Audio Menamb…
   
 * PELAJARAN 10 | FORMULIR BANGUNAN | E-LEARNING AWDEV DEVOLOPER FREE KURSUS
   ONLINE
     PELAJARAN 10 |FORMULIR BANGUNAN | E-LEARNING AWDEV DEVOLOPER FREE KURSUS
   ONLINEE-LEARNINGwww.awdev.eu.org Dalam Pelajaran ini10 HTML Menginisialisasi
   Formulir Bidang Teks & Ar…
   

Posting Komentar


POSTING KOMENTAR







POPULAR POSTS


PELAJARAN 1 | MEMBANGUN HALAMAN WEBSITE PERTAMA ANDA E-LEARNING

PELAJARAN 1 | MEMBANGUN HALAMAN WEBSITE PERTAMA ANDA E-LEARNING www.awdev.eu.org
Dalam Pelajaran ini : HTML Istilah HTML Umum Struktur Doku…


AWDEV DEVOLOPER FREE KURSUS ONLINE DESAIGN WEBSITE & PROGRAMER WWW.AWDEV.EU.ORG


PELAJARAN 2 | MENGENAL HTML E-LEARNING


PELAJARAN 4 | MEMBUKA MODEL KOTAK E-LEARNING


PELAJARAN 5 | MEMOSISIKAN KONTEN E - LEARNING WWW.AWDEV.EU.ORG


LABELS

BLOOG
BUSSINES
CSS
DEVOLOPER
E-LEARNING
GITHUB
HTML
IMAGE
NEWS
PEMOGRAMAN
SEO
VUE
 1.  
 2. PELAJARAN 6 |
 3. BEKERJA DENGAN TIPOGRAFI | E-LEARNING AWDEV DEVOLOPER FREE KURSUS
    ONLINEE-LEARNINGwww.awdev.eu.org
    1. Dalam Pelajaran ini :
    2. Menambahkan Warna ke Teks#warna
    3. Mengubah Properti Font
       1. Keluarga Font
       2. Ukuran huruf
       3. Gaya Tulisan
       4. Varian Font
       5. Berat Font
       6. Bobot Jenis Huruf
       7. Tinggi Garis
    4. Properti Font Singkatan
    5. Properti Font Semua Bersama
    6. CSS Pseudo-Class


 * 
 * 
 * 
 * 
 * 



-->
Diese Website verwendet Cookies von Google, um Dienste anzubieten und Zugriffe
zu analysieren. Deine IP-Adresse und dein User-Agent werden zusammen mit
Messwerten zur Leistung und Sicherheit für Google freigegeben. So können
Nutzungsstatistiken generiert, Missbrauchsfälle erkannt und behoben und die
Qualität des Dienstes gewährleistet werden.Weitere InformationenOk