CSS Tutorial Part 4 : Mengatur Font atau gaya Tulisan dengan CSS

Assalammualaikum Wr.Wb.

Create-script - haii gaesss....kali ini saya akan sharing tentang bagaimana caa mengatur gaya tulisan menggunakan CSS...bagaimana caranya?, apa persyaratannya?...mari kita simak pembahasan berikut ini :).

A. PENDAHULUAN

Pengertian

Font adalah gaya tulisan yang sebuah tampilan huruf yang memiliki ukuran, berat dan gaya tulisan tertentu.

Latar Belakang

Rasa Penasaran dan keinginan saya untuk bisa CSS membuat saya mempelajari dan sharing sedikit ilmu saya pada kali ini

Maksud dan Tujuan

agar penulis dan pembaca dapat menggunakan dan men-setting gaya tulisan dengan CSS. karena kita sama-sama belajar :).

Hasil yang Diharapkan

Dapat mengatur gaya tulisan seperti yang diharapkan.

B. ALAT DAN BAHAN

Text Editor
Web Browser

C. PEMBAHASAN
Font adalah gaya tulisan yang sebuah tampilan huruf yang memiliki ukuran, berat dan gaya tulisan tertentu. kita dapat mengatur font menggunakan atribut-atribut berikut pada CSS. Berikut ini adalah syntax-syntaxnya :

font-size : digunakan untuk mengatur ukuraan font.
font-weight : digunakan untuk mengatur ketebalan font.
font-family : digunakan untuk memmilih gaya tulisan atau font.
font-style : digunakan untuk mengubah gaya pada font.
color : digunakan untuk mengubah warna font.

Praktek :
sebagai contoh pertama, ketikkan script HTML berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Create-script</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1 class="tulisan1">Tulisan Pertama Menggunakan CSS</h1>
    <h1 class="tulisan2">Tulisan Kedua Menggunakan CSS</h1>
    <h1 class="tulisan3">Tulisan Ketiga Menggunakan CSS</h1>
</body>
</html>

kemudian save, dan buat file CSS bernama style.css. ketikkan script berikut :

.tulisan1{
    color: red;
    font-family: sans-serif;
    font-style: normal;
}
.tulisan2{
    color: green;
    font-family: HACKED;
    font-size: 24pt;
    font-style: italic;
}
.tulisan3{
    color: red;
    font-family: Lato;
    font-weight: bold;
    font-style: oblique;
}

kemudian save satu folder bersama file HTML kita tadi.

dan buka file HTML nya di browser anda, maka hasilnya akan menjadi seperti ini :

Penjelasan :

color : digunakan untuk mengatur warna text
font-family : digunakan untuk mengatur gaya tulisan (mengatur font)
font-size : digunakan untuk mengatur ukuran tulisan
font-style : digunakan untuk mengatur gaya tulisan (seperti: efek garis miring, dll.)
font-weight : digunakan untuk mengatur level ketebalan text

D. HASIL YANG DIDAPATKAN

Kita dapat mengatur gaya Tulisan atau Font dengan CSS

E. KESIMPULAN

Mengatur gaya tulisan atau Font sebenarnya tidak sulit, kita hanya perlu font yang akan kita gunakan, dan memanggilnya menggunakan font-family. juga mengatur dengan atribut-atribut lainnya.

F. REFERENSI

malasngoding
wikipedia

sekian yang bisa saya sampaikan tentang tutorial kali ini, semoga bermanfaat...

Wassalammualaikum Wr.Wb

Share this