Belajar Dasar CSS bagi Pemula


Belajar Dasar CSS bagi Pemula
Buat kamu-kamu yang sedang belajar membuat website pasti pernah mendengar apa itu CSS. Yup CSS biasanya digunakan untuk mengatur format atau gaya suatu elemen HTML dalam mendesain suatu halaman website. Buat kalian yang pengen belajar CSS dari dasar, yuk kita ikuti aja artikel berikut.

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>, <p>, <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>
<p>
Ini adalah paragraf yang diformat menggunakan CSS
</p>
<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:
  1. 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
}
  2. 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;
}
  3. 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>
</head>
<body>
<center>
<a href="index.php" class="menu">Home</a> |
<a href="teknologi.php" class="menu">Teknologi</a> |
<a href="ekonomi.php" class="menu">Ekonomi</a>

<p>

<a href="artikel1.html" class="judul">Ini adalah judul artikel</a>

</body>
</html>
    Pada contoh di atas terlihat kita memilih selector a untuk tag <a>, 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"
     
  4. 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>
<p id="biru">
Tulisan ini diformat berwarna biru
</p>

<p id="hijau">
Tulisan ini difromat berwarna hijau
</p>

</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.berikut beberapa property CSS yang biasa digunakan, untuk selengkapnya bisa kalian lihat di w3schools.com
Properti CSS Deskripsi Value/Nilai Contoh
background-color Untuk mengatur warna latar warna: green, blue, #ff9900, dll p {background-color: green;}
font-size Mengatur ukuran tulisan ukuran tulisan: 1pt, 2pt, 7pt, 3px, 5px, dll a {font-size:10pt}
color Untuk mengatur warna tulisan warna: green, blue, #ff9900, dll #biru {color: blue}
border Untuk mengatur border atau bingkai suatu objek html warna: green, #ff9900
tebal: 1px, 2px
Style: solid, dashed, dotted, double		 div {border: 1px dashed red}


Sumber : Web Development - drzpost.com

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)