Blog Belajar Css: Februari 2015

Jumat, 27 Februari 2015

Properti font-weight Css

Properti font-weight digunakan untuk mengatur kadar ketebalan font. Umumnya adalah normal atau bold (tebal). Namun, Anda dapat mengaturnya lebih detail (berjenjang).

Ada dua cara yang bisa Anda lakukan, dengan menuliskan nilai ketebalan dengan huruf yang telah dikenal css atau dengan angka kelipatan 100.

Nilai (value) yang dikenal css pada properti font-weight:

normal
Ketebalan font dalam batas normal, setara dengan 400.

bold
Font dalam keadaan ditebalkan, setara dengan 700.

lighter
Ketebalan font dikurangi dari ukuran ketabalan font di awal didekalarasikan.

bolder
Ketebalan font ditambah dari ukuran ketabalan font di awal didekalarasikan.

Contoh: font_weight.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Properti font-weight css</title>
            <style type="text/css">
                /*set nilai awal h1 normal*/
                h1{font-weight: normal;}
                /*jadikan h1 dalam level bold*/
                h1.bold{font-weight: bold;}
                /*jadikan h1 normal ke level lighter*/
                h1.lighter{font-weight: lighter;}
                /*jadikan h1 normal ke level bolder*/
                h1.bolder{font-weight: bolder;}
            </style>
        </head>
    <body>
        <h1 class="normal">Ketebalan font dalam batas normal.</h1>
        <h1 class="bold">Ketebalan font dalam level bold.</h1>
        <h1 class="lighter">Ketebalan font dalam batas normal dikurangi ketebalannya.</h1>
        <h1 class="bolder">Ketebalan font dalam batas normal ditambah kadar ketebalannya.</h1>
    </body>
    </form>
</html>

Tampilan:

Tampilan font-weight berdasarkan level.

Nilai ketebalan font dengan angka
Dimulai dengan angka 100 dalam kategori ketebalan font tipis kemudian naik; 200, 300 sampai 900, level ketebalannya semakin naik. Jika disimpulkan, level 100 sampai 500 berada di level ketebalan normal, sedangkan 600-900 sudah berada di level bold. Untuk lebih jelasnya: levelangka.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Properti font-weight css level 100</title>
            <style type="text/css">
                p.lev100{font-weight: 100;}
                p.lev200{font-weight: 200;}
                p.lev300{font-weight: 300;}
                p.lev400{font-weight: 400;}
                p.lev500{font-weight: 500;}
                p.lev600{font-weight: 600;}
                p.lev700{font-weight: 700;}
                p.lev800{font-weight: 800;}
                p.lev900{font-weight: 900;}
            </style>
        </head>
    <body>
        <p class="lev100">Ketebalan font berada di lever 100</p>
        <p class="lev200">Sekarang di level 200</p>
        <p class="lev300">Level 300</p>
        <p class="lev400">Naik menjadi 400</p>
        <p class="lev500">Sudah 500</p>
        <p class="lev600">Naik 100 lagi menjadi 600</p>
        <p class="lev700">700 deh..</p>
        <p class="lev800">Kasih 100 lagi menjadi 800</p>
        <p class="lev900">Berada di level tertinggi, level 900</p>
    </body>
    </form>
</html>

Tampilan:

Level 100.

Referensi tulisan:

font-weight Css; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 27 Februari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Rabu, 25 Februari 2015

Properti font-size Css

Untuk mengatur ukuran font tulisan web dengan css maka gunakan properti font-size. Ukuran font sangat menentukan apakah tampilan web ramah bagi pengguna. Artikel dengan ukuran pas dimata adalah contohnya, pengunjung web merasa nyaman dengan ukuran font artikel, tidak terlalu kecil tidak pula terlalu besar.

Untuk mengatur properti font-size banyak satuan yang digunakan, salah satunya ukuran px (pixel). Ada juga dengan kata kunci nilai absolute berupa pilihan kata dalam bahasa Inggris dari yang terkecil sampai terbesar, misalnya: xx-small, x-small, small, large dan seterusnya. Lebih jelasnya dijabarkan sebagai berikut:

a. kata kunci nilai absolute. nilai: xx-small, x-small, small, medium, large, x-large, xx-large

b. lebih besar, lebih kecil. Nilai: larger, smaller
Menentukan ukuran font berdasarkan ukuran font sebelumnya, lebih besar (larger) atau lebih kecil (smaller) dari font-size awal.

c. length. Nilai: ex atau em
Ukuran nilai em dinamis. Nilai em sama dengan ukuran font yang berlaku untuk parent dari elemen yang bersangkutan. Jika Anda belum mengatur ukuran font di manapun pada halaman, maka browser secara default mengaturnya mungkin 16px. Akhirnya 1em = 16px, dan 2em = 32px. Jika Anda menetapkan font-size 20px pada elemen body, maka 1em = 20px dan 2em = 40px.

Rumus: em = nilai elemen pixel diinginkan / elemen parent font-size dalam pixel

Misalnya, font-size body halaman diberi 1em, dengan standar browser 1em = 16px; jika font-size yang Anda inginkan adalah 12px, maka nilainya 0.75em (12/16 = 0,75). Demikian pula, jika Anda ingin ukuran font 10px, kemudian tentukan 0.625em (10/16 = 0,625); untuk 22px, menjadi 1.375em (22/16 = 1,375em).

d. persentase. Nilai: %
Membesarkan ukuran font dari sebelumnya, 1 kali pembesaran sama dengan 100%. Misalnya ukuran font h1 diberpesar 3 kali, maka setara dengan 300%.

e. pixel. Nilai: px
Pilihan yang baik ketika Anda membutuhkan akurasi pixel, meskipun hasilnya mungkin sedikit berbeda di masing-masing browser.

Contoh dibuat satu per satu:

absolute.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Font-size nilai absolute</title>
            <style type="text/css">
                p.xxsmall{font-size: xx-small;}
                p.medium{font-size: medium;}
                p.large{font-size: large;}
            </style>
        </head>
    <body>
        <p class="xxsmall">Ini font ukuran xx-small.</p>
        <p class="medium">Ini font ukuran sedang (medium).</p>
        <p class="large">Ini font ukuran large.</p>
    </body>
    </form>
</html>

Tampilan:

Tampilan kata kunci nilai absolute.

l_besar_keci.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Font-size nilai larger-smaller</title>
            <style type="text/css">
                /*nilai awal medium*/
                p.medium{font-size: medium;}
                /*diperbesar*/
                p.larger{font-size: larger;}
                /*diperkecil*/
                p.smaller{font-size: smaller;}
            </style>
        </head>
    <body>
        <p class="medium">Ini font ukuran sedang (medium).</p>
        <p class="larger">Diperbesar dengan larger.</p>
        <p class="smaller">Diperkecil dengan smaller (dari ukuran awal: medium).</p>
    </body>
    </form>
</html>

Tampilan:

Tampilan larger-smaller.

em.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Font-size nilai em</title>
            <style type="text/css">
                /*atur elemen body 1em=16px */
                body{font-size: 1em;}
                /*ukuran 12 px setara 0.75em */
                p.ukuran12{font-size: 0.75em;}
                /*ukuran 22 px setara 1.375em */
                p.ukuran22{font-size: 1.375em;}
            </style>
        </head>
    <body>
        <p>Ini ukuran font elemen body (secara umum).</p>
        <p class="ukuran12">Ini font setara 12px (0.75em).</p>
        <p class="ukuran22">Ini font setara 22px (1.375em).</p>
    </body>
    </form>
</html>

Tampilan:

Tampilan nilai em.

persentase.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Font-size nilai persentase</title>
            <style type="text/css">
                /*ukuran h1 diperbesar 3 kali*/
                h1{font-size: 300%;}
            </style>
        </head>
    <body>
        <h1>Ini ukuran h1 diperbesar 300% (3 kali lipat), 100%=1 kali lipat.</h1>
    </body>
    </form>
</html>

Tampilan:

Tampilan nilai persentase (%).

px.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Font-size nilai pixel (px)</title>
            <style type="text/css">
                p.ukuran12{font-size:12px;}
                p.ukuran22{font-size:22px;}
                p.ukuran30{font-size:30px;}
            </style>
        </head>
    <body>
        <p class="ukuran12">Ini ukuran font 12 px.</p>
        <p class="ukuran32">Ini ukuran font 22 px.</p>
        <p class="ukuran30">Ini ukuran font 30 px.</p>
    </body>
    </form>
</html>

Tampilan:

Tampilan nilai px.

Referensi tulisan:

font-size - CSS; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 25 Februari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Sabtu, 21 Februari 2015

Properti font-family Css

Properti font-family mengizinkan pilihan beberapa jenis font dan daftar pertama menjadi prioritas yang dipilih browser. Jika tidak tersedia, font kedua yang dipilih, jika tidak font ketiga dan selanjutnya. Dukungan tersedianya font tergantung apakah font yang dimaksud terpasang di komputer pengguna.

Pemilihan font lebih dari satu karena tidak ada jaminan jika hanya satu font yang disediakan tersedia di komputer pengguna web.

Aturan penulisan font-family:

1. Jika font lebih dari satu pisahkan dengan tanda koma.
2. Jika nama lebih dari satu kata (mengandung spasi) ditandai dengan kutip dua (") atau kutip satu (').
3. Font yang pertama menjadi prioritas.

Tipe font-family:

a. serif (runcing pada bagian ujung huruf): Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif
b. sans-serif (polos pada ujung huruf): 'Trebuchet MS', 'Liberation Sans', 'Nimbus Sans L', sans-serif
c. monospace (memiliki lebar sama): "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace
d. cursive (identik dengan tulisan miring, mirip tulisan sambung dengan tangan).
e. fantasy (tulisan yang identik untuk representasi karakter lucu).

Penulisan font-family di css:


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Penulisan font-family css</title>
            <style type="text/css">
                .fserif{font-family: Palatino, "Palatino Linotype", 
                Palladio, "URW Palladio", serif;}
                .fsanserif{font-family: 'Trebuchet MS', 'Liberation Sans', 
                'Nimbus Sans L', sans-serif;}
                .fmonospace{font-family: "DejaVu Sans Mono", Menlo, Consolas, 
                "Liberation Mono", Monaco, "Lucida Console", monospace;}
                .fcursice{font-family: cursive;}
                .ffantasy{font-family: fantasy;}
            </style>
        </head>
    <body>
        <p class="fserif">Ini contoh tulisan font serif.</p>
        <p class="fsanserif">Ini contoh tulisan font san serif.</p>
        <p class="fmonospace">Ini contoh tulisan font monospace.</p>
        <p class="fcursice">Ini contoh tulisan font cursive.</p>
        <p class="ffantasy">Ini contoh tulisan font fantasy.</p>
    </body>
</html>

Output:

Output di Firefox.

Selamat mencoba!

Referensi tulisan:

font-family; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 21 Februari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Selasa, 17 Februari 2015

Properti color Css

Properti color pada Css digunakan untuk mengganti warna tulisan (teks) pada web. Warna default teks di web adalah hitam. Properti color ditulis: color: warna;

warna bisa ditulis dengan warna bahasa Inggris yang terdaftar dan dikenali css, bisa dengan warna (kode) hexa, rgba, rgb, hsl dan hsla.

contoh: colorcss.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh properti color css</title>
            <style type="text/css">
                p.biru{color: #0068C8}
            </style>
        </head>
    <body>
        <p class="biru">Ini tulisan jadi biru.</p>
    </body>
</html>

Output:

Tampilan di Firefox.

Untuk contoh lain, menggunakan warna yang dikenali dalam bahasa Inggris ganti nilai color menjadi: color: blue Untuk rgb menjadi: color: rgb(0,104,200) Warna RGB merupakan kombinasi warna Red (Merah), Green (hijau), dan Blue (biru).

Selanjutnya contoh rgba, menjadi: color: rgba(0,104,200,0.5) Huruf a pada rgba berisi nilai di mulai dari 0.1 untuk mengatur warna tulisan terang atau buram. Semakin besar nilai (di atas 0.1) semakin jelas warna tulisan.

Untuk format warna hsl, menjadi: color: hsl(246, 100%, 50%) Untuk hsla bisa menjadi: color: hsla(246, 100%, 50%, 0.3) Kode warna yang dijelaskan di atas dapat Anda temui pada color picker, misalnya di Adobe Photoshop atau color picker online.

Referensi tulisan:

color; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 17 Februari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Sabtu, 14 Februari 2015

Css: Class dan Id

Halo pembaca! Class di Css ditandai dengan . (titik) sedangkan id ditandai dengan # (tagar). Bedanya, class bisa dipanggil (digunakan) berulang-ulang dalam satu halaman sedangkan id hanya satu kali saja (di halaman yang sama).

Contohnya; Anda mempunyai class warna maka ditulis dengan .warna. Jika id maka #warna. Deklarasi atribut misalnya color untuk mengganti warna tulisan menjadi merah sama saja caranya, yaitu dengan menuliskan: color: red; atau menggantinya dengan kode warna heksa.

Untuk lebih jelasnya, perhatikan contoh berikut: classid.html


<!DOCTYPE HTML>

    <html>

        <head>

            <title>Contoh Css: Class dan Id</title>

            <style type="text/css">

                .warna{

                    color:red;

                }

                #warna{

                    color:red;

                }

            </style>

        </head>

    <body>

        <p class="warna">Ini tulisan warnanya merah</p>

        <p id="warna">Ini tulisan warnanya merah 2</p>

        <p class="warna">Ini tulisan warnanya merah 3</p>

        <p>Ini tulisan warnanya default (hitam)</p>

    </body>

</html>

Output:

Output di Firefox.

Contoh di atas penulis menggunakan elemen HTML <p>, Anda bisa menggantinya dengan elemen HTML lain, misalnya <span>, <div>, <li> atau lainnya.

<span class="warna">teks..</span>
<div class="warna">teks...</div>