hal yang terpenting dalam hidup ini ialah suatu awal untuk memulai sesuatu, dan sama dengan cara memulai css, jika kita tidak tahu bagaimana caranya kita memulai maka kita akan sangat kesusahan sekali untuk mengenal dan mendalami lebih jauh tentang css ini, tapi sebelum kita mulai izinkan saya untuk mengucapkan
salam sobat semua
Alhamdulillah saya panjatkan kepada Allah Tuhan Semesta Alam ini karena masih memberikan kesempatan ini untuk menulis dan berbagi dengan kalian lagi.
sudah agak lama rasanya saya tidak menulis di karenakan kegiatan agenda yang agak sedikit sibuk. tapi Alhamdulillah hari ini saya bisa menulis dan berbagi lagi
dengan kalian.
untuk kesempatan kali ini kita akan mencoba mengenal dan membuat file pertama CSS.
CSS itu kepanjangan dari Cascading Style Sheet. yang artinya kalau menurut saya adalah bedak, lipstik dan fashionnya HTML. jadi kalau HTML kita ingin cantik bagus dan
menawan maka HTML kita harus kita kasih bedak, lipstik dan fashion yang bagus dan itu namanya adalah CSS.
untuk membuat file CSS ada tiga cara,
1. untuk menulis atau membuat css kita bisa membuat atua menulisnya dalam file HTML itu sendiri dengan tag <style> dan ditutup dengan tag </style>. untuk lebih jelas
bagaimana penejelasan tersebut kita coba ketikkan atau kita copy paste code berikut
<html>
<head>
<title>Website Pertama</title>
<style>
h1{
color:green;
}
h2{
color:blue;
}
</style>
</head>
<body>
<h1>Pertama Belajar HTML 1</h1>
<h2>Pertama Belajar HTML 2</h2>
<h3>Pertama Belajar HTML 3</h3>
<h4>Pertama Belajar HTML 4</h4>
<h5>Pertama Belajar HTML 5</h5>
<h6>Pertama Belajar HTML 6</h6>
</body>
</html>
dari kode tersebut kita lihat untuk CSS nya kita tandai dengan tag <style> dan di tulis di antara tag head. sebenarnya untuk tag style kita bisa menulisnya
diantara tag mana saja. tapi kita tetap menghormati para sesepuh karena para sesepuh per web an ini untuk cara penulisan nya ya diantara tag head. dan untuk
hasil kode diatas maka akan menhasilkan seperti berikut
2. untuk menulis atau membuat css yang kedua bisa kita buat atau kita tulis menjadi attribut style atau di dalam tag yang ingin kita permak tampilannya. biar kita
lebih jelas maka simak, ketik atau copy paste kode berikut.
<html><head><title>Website Pertama</title></head><body><h1 style="color:gray;">Pertama Belajar HTML 1</h1><h2 style="color:blue;">Pertama Belajar HTML 2</h2><h3>Pertama Belajar HTML 3</h3><h4>Pertama Belajar HTML 4</h4><h5>Pertama Belajar HTML 5</h5><h6>Pertama Belajar HTML 6</h6></body></html>
dari kode diatas kita mempermak tampilan pada h1 dan h2 jadi kita tulis attribut style di dalam tag h1 dan h2, sehingga dari kode diatas akan menghasilkan seperti
berikut.
3. dan yang terakhir untuk penulisan atau pembuatan CSS yaitu membuat file css sendiri di luar file html yang mana akan kita panggil file tersebut di dalam file HTML
yang lebih dikenal dengan link style. untuk memperjelas kita langsung saja mencoba mengetik atau copy paste kode berikut pada tab baru notepad++ dan save
dengan nama terserah.css. untuk contoh di tulisan ini saya buat namanya dengan style.css
h1{
color:red;
}
h2{
color:blue;
}
dan kemudian kita buka tab baru pada notepad++ dan ketik atau copy paste lagi kode HTML berikut
<html>
<head>
<title>Website Pertama</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>Pertama Belajar HTML 1</h1>
<h2>Pertama Belajar HTML 2</h2>
<h3>Pertama Belajar HTML 3</h3>
<h4>Pertama Belajar HTML 4</h4>
<h5>Pertama Belajar HTML 5</h5>
<h6>Pertama Belajar HTML 6</h6>
</body>
</html>
dan jika kita ingin rapi maka kita bisa taruh file css kita dalam satu folder dan kemudian kita ubah atau kita tambahin nama folder tempat kita menyimpan file css
kita di dalam tag <link> dan semisal folder itu kita beri nama css maka kode diatas akan menjadi seperti berikut
<html>
<head>
<title>Website Pertama</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>Pertama Belajar HTML 1</h1>
<h2>Pertama Belajar HTML 2</h2>
<h3>Pertama Belajar HTML 3</h3>
<h4>Pertama Belajar HTML 4</h4>
<h5>Pertama Belajar HTML 5</h5>
<h6>Pertama Belajar HTML 6</h6>
</body>
</html>
maka dari kode diatas jika kita benar dalam pengaplikasiannya maka akan tampak seperti berikut
dan bagi kalian yang malas mau buat atau ketik silahkan download disini filenya untuk di simak
dan untuk tulisan kali ini cukup sekian dulu kawan, dan kita lanjut di next tulisan.
salam sobat semua
#css #web #website #websites #design #free #share #gratis #berbagi #dekstop #download #code #coding #style #sheet
Komentar
Posting Komentar