DASAR - DASAR CSS

Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. CSS adalah kode untuk mengatur bagaimana elemen HTML ditampilkan dalam suatu halaman website. Elemen HTML dimaksud di sini adalah tag-tag HTML misalnya, tag <body>, , <table>, <div>
tag tag atau kode HTML lainnya yang digunakan dalam mendesain HTML.
Di Mana dan Bagaimana Menulis Kode CSS

Di mana kita bisa menulis kode-kode CSS? sama halnya seperti HTML, kita menulis kode CSS di teks editor seperti notepad atau bisa langsung di aplikasi pembuat website seperti MS Frontpage atau Dreamweaver.

Kode CSS biasanya di tulis di file yang sama dengan file tempat kode-kode HTML kita, yang bisa saja ber-ekstensi .html, .php. .asp

Contoh, file : index.html, kalian ketik kode di bawah di Notepad, lalu save as index.html. Jangan lupa save as type: All File (*.*)

<html>
<head>
<style>
p{font-size:17pt;}
</style>
</head>
<body>
Ini adalah paragraf yang diformat menggunakan CSS
<br />

<div style="border: red 1px solid;">
Ini juga di atur menggunakan CSS, di mana kode CSS langsung ditulis di tag atau elemen HTML
</div>
</body>
</html>

Jika kita lihat kode di atas:
Kode CSS bisa ditulis di antara tag <style> dan <style>
Kode CSS juga bisa ditulis langsung di dalam element HTML yang ingin atur formatnya <div style="border:red 1px solid">

Output dari kode di atas adalah:

Belajar CSS

Kode CSS bisa juga di tulis di file terpisah, dengan menyimpannya ber-ekstensi .css

Contoh: ketiklah kode di bawah di notepad lalu simpan dengan nama gaya.css

p{font-size:17pt;}

Lalu bagaimana cara menyatukan file css di atas ke dalam kode HTML kita, cukup menulis kode berikut di dalam kode HTML kita:

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

Syntax CSS

Setelah kalian tahu di mana dan bagaimana cara menulis kode CSS, sekarang kita mulai belajar kode CSS. Aturan sintaks penulisan kode CSS adalah sebagai berikut:

selector {property: value}

Selector: adalah tag atau element HTML yang ingin diatur gaya atau formatnya, misalnya p, table, body, div dan lainnya
Property: adalah kode CSS untuk mengatur format element HTML. Misalnya font-size, border, background-color, dan lainnya.
Value: adalah nilai dari property CSS di atas, misalnya nilai font-size kita set 17pt
Lebih Lanjut dengan Selector CSS

Jika kita lihat sintaks CSS di atas, selector adalah tag atau elemen HTML yang akan di atur. Ada macam-macam cara memilih selector:

    Selector Normal
    Yaitu, kamu langsung menulis tag HTML apa yang akan diatur format CSS nya.
    Contoh:

    body {color: black}

    p {font-family: "sans serif"}

    p
    {
    text-align: center;
    color: black;
    font-family: arial
    }

    Selector Grouping
    Anda bisa menggroup-kan elemen-elemen HTML yang akan diformat CSS nya, mungkin karena formatnya sama. Contoh:

    h1,h2,h3,h4
    {
    color: blue;
    }

    Class Selector
    Biasanya kita ingin mengatur suatu paragraf atau div dengan format yang berbeda-beda, maka kita bisa buat kelas-kelas. Contoh:

    <html>
    <head>
    <style>
    a.menu{color:black;text-decoration:none}
    a.judul{color:blue;font-size:15pt}
    </style>
    </div>
</table>
</body>
    <body>
    <center>
    <a class="menu" href="http://www.blogger.com/index.php">Home</a> |
    <a class="menu" href="http://www.blogger.com/teknologi.php">Teknologi</a> |
    <a class="menu" href="http://www.blogger.com/ekonomi.php">Ekonomi</a>

    <a class="judul" href="http://www.blogger.com/artikel1.html">Ini adalah judul artikel</a>

    </center>
</body>


    Pada contoh di atas terlihat kita memilih selector a untuk tag <a href="http://www.blogger.com/blogger.g?blogID=1733603682017083721">, lalu kita buat kelas-kelas dengan cara memberi titik (.) diikuti nama kelas.

    Jika anda membuat kelas, jangan lupa di tag HTML ditambahkan properti class="nama kelas"

    ID Selector
    Selain menggunakan kelas, kita juga bisa menggunakan id selector, caranya: kode atau tag HTML yang akan diatur CSSnya kita kasih id, yaitu dengan menambahkan properti id="nama-id" pada tag HTMLnya.
    Contoh:

    <html>
    <head>
    <style>
    #biru {color:blue}
    #hijau {color:green}
    </style>
    </head>
    <body>
    <div id="biru">
Tulisan ini diformat berwarna biru
    </div>
<div id="hijau">
Tulisan ini difromat berwarna hijau
    </div>
</body>
    </html>

Property CSS
Setelah kita mengetahui bagaimana cara memilih elemen atau tag HTML mana yang akan diformat CSS, saatnya kita mengatur format dari HTML. Property CSS adalah kode css untuk mengatur format atau gaya dari elemen HTML yang ingin ditampilkan di halaman website kita.

Tio Note

DASAR - DASAR CSS

Post a Comment for "DASAR - DASAR CSS"