Belajar CSS Dasar Cara Penulisan CSS
Assalamuakaikum...Melanjutkan dari sesi belajar CSS dasar part1 dan sekarang dengan izin Allah Kita Belajar bareng di Implentasi penulisan css di website.
CSS(Cascading Style Sheet) merupakan sebuah bahasa pemrograman web yang memiliki fungsi dan tujuan untuk mengatur atau mendesign tiap-tiap komponen dari HTML seperti elemen dan tag. dengan menggunakan CSS kita dapat mengatur ukuran, warna dan bentuk dari element HTML. Mengganti font, mengatur margin dan mengatur padding dan banyak lagi yang dapat di lakukan menggunakan CSS untuk mempercantik atau men-design halamanwebsite.
Belajar CSS Dasar Cara Penulisan CSS
CSS menggunakan selector(id dan class) untuk menentukan element yang akan di modifikasi atau yang akan di berisentuhan css. css dan html saling melengkapi, untuk menghasilkan tampilan web yang keren
Ada tiga teknik metode penulisan CSS, yaitu :
- Inline CSS Style
- Internal CSS Style
- External CSS Style
Teknik penulisan CSS Inline Style
Teknik penulisan syntax css dengan Inline style adalah teknik cara penulisan syntax CSS yang tidak memerlukan selector(id dan class) sehingga syntax CSS di letakkan atau langsung di sisipkan pada element HTML. syntax css di letakkan di dalam atribut style=""Contoh penulisan inline css style
Contoh Belajar CSS Dasar Cara Penulisan CSS. Untuk membuat contoh penulisan CSS dengan gaya inline caranya sediakan sebuah file HTML atau PHP. di sini saya menggunakan HTML.<h3 style="color:red">Ini Cara Penulisan menggunakan Inline Style</h3>perhatikan pada contoh di atas. syntax css di letakkan dalam element h3 menggunakan atribut
.perintah color adalah perintah css yang berfungsi untuk mengatur warna font. jadi pada contoh
inline css style ini kita membuat heading h3 dengan warna font yang kita atur menjadi red ( merah ).
dan saat di jalankan maka hasilnya sebagai berikut:
 |
| Hasil setelah dibuka dibrowser |
Teknik penulisan CSS Internal Style
Teknik penulisan syntax CSS dengan Internal style adalah teknik cara penulisan syntaxcss yang di letakkan satu file dengan file html atau file php. syntax CSS di letakkan di dalam tag
dan di akhiri dengan biasa nya tag di letakkan pada bagian tag pada HTML.
Contoh penulisan internal CSS Style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
background-color: sandybrown;
padding: 15pt;
}
#h3{
color:#fff;
}
</style>
</head>
<body>
<div class="box">
<h3 id="h3">Ini Cara Penulisan menggunakan cara Inline Css Style</h3>
</div>
</body>
</html>
 |
| Hasil setelah dibuka dirowser |
Perhatikan contoh penulisan internal css style di atas. syntax css di letakkan satu file dengan file
html. syntax css di letakkan di dalam tag . syntax css padding berfungsi sebagai pengatur jarak pada
sisi dalam element. pada contoh ini kita memberikan jarak sebesar 10px atau 10 pixel. css memanggil selector class dengan tanda titik dan memanggil selector id dengan tanda pagar #.
Teknik penulisan CSS External Style
Teknik penulisan Syntax CSS dengan External Style adalah teknik penulisan yang memisahkan file css dan html. penggunaan css yang baik adalah menggunakan teknik penulisan CSS ini karena kode program kita tidak akan berantakan karena syntax css di simpan pada file css. file css dan html di hubungkan menggunakanContoh penulisan External CSS Style
File Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<h3 id="h3">Ini Cara Penulisan menggunakan cara Inline Css Style</h3>
</div>
</body>
</html>
File style.css
.box{
background-color: sandybrown;
padding: 15pt;
}
#h3{
color:#fff;
}
Hasil Dari Css
|
| Hasil setelah dibuka dibrowser |
Sekianlah Belajar CSS Dasar Cara Penulisan CSS. Mudah Bukan? Silakan dicoba Semoga Bermanfaat
Tidak ada komentar:
Tulis komentar