Ayam Koding

Belajar Algoritme & Pemrograman

Pengertian dan Fungsi CSS

Updated on 2017-01-04

Saat ini kita akan membahas mengenai pengertian dan fungsi CSS, sebuah bahasa yang susah susah gampang untuk dipelajari. Sebelum mempelajari CSS alangkah baiknya anda mengerti terlebih dahulu dasar dari bahasa pemrograman HTML.

Apa sih CSS itu…?

CSS singkatan dari Cascading Style Sheets, yang digunakan untuk memperindah tampilan elemen dari HTML ke dalam web browser. (intinya digunakan sebagai desain website).

Jika dianalogikan antara HTML dan CSS mungkin seperti “Mobil :: HTML ibarat dari kerangkanya sedangkan CSS untuk mempercantik tampilan dengan cat biru, spion merah, velg racing, dsb.

Apakah file CSS bisa diedit…?

Tentu bisa, File dari CSS ini akan disimpan dalam bentuk format ‘*.css’, misalnya ‘style.css’. Untuk mengedit file CSS memerlukan teks editor misalnya Notepad. Saya sarankan untuk menggunakan teks editor seperti Notepad++, Sublime, Atom, dll karena ada Syntax Highlight yang warna-warni. Hehe…

Oke, kembali ke kode dibawah… Kode tersebut merupakan sebuah HTML yang dipercantik menggunakan CSS. Coba amati…!

Terlihat ada elemen tag <style> didalam tag <head>…</head>, disini merupakan pendeklarasian sebuah CSS dalam HTML.

Contoh CSS:

<!DOCTYPE html>
<html>
    <head>
        <style>
        body {
            background-color: #9999;
        }
        h1 {
            color: red;
            text-align: center;
        }
        p {
            font-family: "Times New Roman";
            font-size: 18px;
        }
        </style>
    </head>
    <body>

    <h1>Contoh penggunaan CSS</h1>
    <p>Tutorial CSS Web Design.</p>
    </body>
</html>

Output :

pengertian dan fungsi css

Hasil tersebut terlihat ada kostumisasi pada huruf sehingga menjadi warna merah dan berada ditengah. CSS sangat baik untuk mengatur tata letak elemen dari website untuk terlihat lebih interaktif.

Demikian tutorial belajar CSS mengenai pengertian dan fungsi CSS. CSS tentu sangat bermanfaat untuk pengembangan desain dari sebuah website. Semoga tutorial ini berguna untuk anda dan terima kasih.