Langsung ke konten utama

belajar CSS dasar bersama part 1 : Membuat CSS pertama

  


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

 

 

 

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

belajar CSS dasar bersama part 3 : Cara mengetahui dan menetapkan nilai hex warna pada CSS atau HTML dengan offline beserta kelebihannya

   warna di css merupakan bagian terpenting, karena warna akan mempercantik sebuah tampilan website yang nanti akan kita buat, namun kita harus tahu bagaimana cara membuat atau memberi nilai atau value hex warna di css sehingga tampilan HTML kita akan cantik dan menarik, tapi sebelum kita memulai izinkan saya untuk mengucapkan Salam sobat semua Alhamdulillah atas segala sesuatu nikmat yang telah Allah berikan kepada diri ini, dan salah satu nya nikmat masih di beri kesempatan untuk bisa menulis dan berbagi dengan kalian. dalam kesempatan kali ini sesuai janji saya pada tulisan sebelumnya bahwa kita akan mencoba bagaimana caranya mendapat nilai hex warna pada CSS atau html secara offline. dan untuk kali ini kita akan memakai aplikasi pembantu yaitu adobe photoshop. dan ini sudah saya lakukan bertahun-tahun dalam pembuatan websites ataupun blog. bagi yang belum punya adobe photoshop di perangkatnya silahkan kalian  baca tutorial sebelumnya tentang adobe photshop disini. kal...
Posting Komentar
Baca selengkapnya

Install Notepad ++

Install Notepad ++ Salam semuanya sobat Pada kesempatan kali ini saya ingin menyimpan tata cara instal notepad ++ dan filenya. Agar tidak usah mencari di blog lain hehehehe. Fungsi notepad ++ ini sangatlah banyak dan sering saya gunakan untuk keperluan sehari-hari seperti koding php, html, perl dan lain-lain. Bagi saya tools kecil ini sangat bermanfaat. Dan siapa tahu juga bermanfaat buat kalian semua pembaca. Oke langsung saja download aplikasi notepad ++ nya disini Kemudian ekstrak filenya dan klik file exe installernya dua kali, sehingga akan tampil serperti pada gambar, dan kemudian pilih english saja dan klik ok. Kemudian klik next seperti pada gambar  Kemudian klik i agree Dan kemudian klik next saja kalo ingin letak folder installer atau pemasangannya di defaultkan oleh kita.  Kalau ingin dipindah, tinggal klik browse saja dan kemudian pilih letak foldernya  Kemudian ada beberapa pilihan atau opsi. Ikuti seperti gambar ya hehehehe: D  Dan yang terkahir seles...
Posting Komentar
Baca selengkapnya