Cara Penulisan Kode Css
Cara penulisan kode css baik itu css internal, extarnal ataupun inline aturannya tetap sama, aturan -aturan penulisan kode CSS adalah sebagai berikut:
- Selector di tempatkan pada awal penulisan CSS. Dalam contoh diatas, body, p, h1 dan h2 adalah selector. Khusus untuk selector yang lebih dari 1 (seperti pada contoh selector terakhir: h1,h2) untuk memisahkan kedua selector tersebut, digunakan tanda koma (,)
- Setelah penulisan selector, seluruh isi dari property dan valuenya (nilainya), berada di antara kurung kurawal “{“ dan “}”.
- Diantara property satu dengan yang lainnya, dipisahkan dengan tanda titik koma (;)
- Diantara property dengan value (nilai), dipisahkan dengan anda titik dua (:).
- Untuk property yang memiliki 2 kata , spasi diantaranya digantikan dengan tanda hubung (-), contohnya: background-color dan border-left.
- Untuk properti yang berada pada baris terakhir, kita boleh mengabaikan tanda ‘;’ sebagai tanda tutup, tetapi disarankan agar tetap menggunakan tanda ‘;’, karena bisa saja kita lupa menuliskan tanda titik koma pada saat menambahkan properti lainnya. Contoh property tanpa tanda ‘;’ dapat di lihat pada contoh “text-decoration: underline”.
Setelah membaca aturan-aturan diatas disini kami akan memberikan contoh penulisan CSS untuk internal, external & inline, perhatikanlah contoh berikut ini
Contoh Penulisan Code CSS internal
HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar Nulis Kode</title>
<style type="text/css">
body {
font-size: 14px;
color: green;
}
p {
font-family: arial, calibri;
}
h1, h2 {
text-decoration: underline;
font-size: 16px;
color: brown;
}
</style>
</head>
<body>
<h1>Cara Penulisan Kode CSS</h1>
<h2>Ikutilah aturan ini agar anda tidak tersesat dijalan yang salah</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni fugit, nesciunt labore molestias voluptate asperiores consectetur inventore commodi reprehenderit tenetur cum, cumque facere accusantium nobis accusamus est, autem suscipit nostrum!</p>
</body>
</html>
Contoh Penulisan Code CSS External
HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar Nulis Code CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Cara Penulisan Kode CSS</h1>
<h2>Ikutilah aturan ini agar anda tidak tersesat dijalan yang salah</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni fugit, nesciunt labore molestias voluptate asperiores consectetur inventore commodi reprehenderit tenetur cum, cumque facere accusantium nobis accusamus est, autem suscipit nostrum!</p>
</body>
</html>
Contoh External CSS
CSS
body {
font-size: 14px;
color: green;
}
p {
font-family: arial, calibri;
}
h1, h2 {
text-decoration: underline;
font-size: 16px;
color: brown;
}
Contoh Penulisan Code CSS Inline
HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar Nulis Code CSS</title>
</head>
<body style="font-size: 14px;color: green;">
<h1 style="text-decoration: underline;font-size: 16px;color: brown;">Cara Penulisan Kode CSS</h1>
<h2 style="text-decoration: underline;font-size: 16px;color: brown;">Ikutilah aturan ini agar anda tidak tersesat dijalan yang salah</h2>
<p style="font-family: arial, calibri;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni fugit, nesciunt labore molestias voluptate asperiores consectetur inventore commodi reprehenderit tenetur cum, cumque facere accusantium nobis accusamus est, autem suscipit nostrum!</p>
</body>
</html>
Untuk penulisan css di inline tag HTML kalian harus menambahkan style di setiap elemennya seperti contoh diatas
Semoga tutorial CSS ini bermanfaat bagi anda, atas segala kekuranganya mohon dimaafkan dan jika ingin bertanya silahkan tinggalkan komentar.
Like, share & komen untuk dukung terus website ini agar terus berkembang, terimakasih.
