Langsung ke konten utama

belajar CSS dasar bersama part 2 : Cara penulisan CSS yang benar

  


sebelum melangkah dan mengenal lebih jauh tentang css, yang terpenting adalah kita harus tahu bagimana caranya kita menulis kode css dengan baik, rapi dan benar. sebelum kita mulai izinkan saya untuk mengucapkan

Salam sobat semua

Alhamdulillah saya panjatkan yang tidak akan pernah henti-henti, karena Allah masih memberikan diriku untuk bisa bersujud dan menulis serta berbagi

dengan kalian, mudah mudah an tulisan ini bisa di ambil manfaatnya untuk kita semua terutamanya buat diriku pribadi. tak lupa sholawat serta salam

saya haturkan kepada Mahluk termulya Sayyidina Muhammad ibni Abdillah S.A.W. dan juga kepada para keluarga dan sahabat beliau, karena dengan beliau lah diriku bisa 

berbagi, bisa menulis tulisan ini.


untuk kesempatan kali ini, kita akan mencoba bagaimana cara penulisan CSS itu dalam file html atau di luar file html. untuk cara penulisan yang akan kita coba ini

ada beberapa yang tidak akan berfungsi atau tidak bisa dipakai dalam penulisan css atau style dalam tag atau attribut. cara penulisan ini bisa dipakai atau bisa 

berfungsi dalam penulisan file html dan di luar file html.

oke langsung saja kawan untuk penulisan css itu sperti di bawah ini kawan

selector{
property:value;
}

untuk selector itu artinya kalau menurut saya sih yaitu penanda atau identitas yang akan kita ubah. selector itu ada tiga yaitu 

- tag

- id

- class


1. selector tag

untuk selector atau penanda tag ini akan memberikan atau merubah tag yang di sebut dalam css pada hasil output html. jadi untuk semua tag yang disebut dalam css 

akan berubah hasilnya pada output html. sperti contoh

h1{

color:#0be9f7;

}

ketik kode diatas atau copy paste kode diatas pada tab baru notepad++ kemudian save dengan nama style1.css, kemudian ketik atau copy paste kode html dibawah ini

 <html>

<head>

<title>Website Pertama</title>

<link href="style1.css" rel="stylesheet" type="text/css">

</head>

<body>

<h1>Pertama Belajar HTML 1</h1>

<h2>Pertama Belajar HTML 2</h2>

<h3>Pertama Belajar HTML 3</h3>

<h1>Pertama Belajar HTML 4</h1>

<h5>Pertama Belajar HTML 5</h5>

<h6>Pertama Belajar HTML 6</h6>

</body>

</html>

maka dari kode diatas akan menghasilkan seperti berikut


dari hasil diatas maka kita bisa dapatkan penjelasan bahwa semua yang bertag h1 maka warna tulisannya akan berubah sesuai dengan nilai pada css. dan jika ditambah

pada css nya seperti berikut,

h1{

color:#0be9f7;

text-align:right;

}

maka dari kode diatas akan dihasilkan sperti berikut


 dari hasil diatas bisa kita ambil kesimpulan bahwa semua yang bertag h1 akan berubah warnanya sesuai dengan nilai pada css dan untuk posisinya akan berpindah pada

sebelah kanan.


2. Selector ID

selctor id ini ditulis dengan tanda pagar(#) kemudian diberi nama. dan untuk pemanggilan di html nya di jadikan atau di tulis dalam nilai dalam attribut id. biar lebih

jelas dan gamblang kita akan coba, dan sekarang kita coba ketik atau copy paste kode berikut dalam css

h1{
color:#0be9f7;
text-align:right;
}
#tulisanmerah{
color:red;
text-align:center;
}

dan pada file htmlnya kita ketik atau copy paste seperti berikut 

 <html>

<head>

<title>Website Pertama</title>

<link href="css/style1.css" rel="stylesheet" type="text/css">

</head>

<body>

<h1>Pertama Belajar HTML 1</h1>

<h2 id="tulisanmerah">Pertama Belajar HTML 2</h2>

<h3>Pertama Belajar HTML 3</h3>

<h1>Pertama Belajar HTML 4</h1>

<h5 id="tulisanmerah">Pertama Belajar HTML 5</h5>

<h6>Pertama Belajar HTML 6</h6>

</body>

</html>

jika kode kita benar dan tepat maka kita akan mendapatkan hasil seperti berikut



dari hasil output diatas maka kita akan menjadi paham bahwa semua atrribut id yang bernilai tulisanmerah maka semua tulisan akan menjadi warna merah dan tulisan akan

berada pada posisi tengah.


3. selector class

selector class ini untuk penulisannya ditulis dengan tanda titik(.) kemudian di beri identitas atau nama. dan untuk pemanggilan di html nya dijadikan atau ditulis

dalam nilai attribut class. mungkin kita bisa langsung mencoba ketik atau copy paste kode berikut dalam css.

 h1{

color:#0be9f7;

text-align:right;

}

#tulisanmerah{

color:red;

text-align:center;

}


.tulisanhijau{

color:green;

text-align:left;

}

dan kemudian ketik atau copy paste kode berikut pada file html. 

<html>

<head>

<title>Website Pertama</title>

<link href="css/style1.css" rel="stylesheet" type="text/css">

</head>

<body>

<h1>Pertama Belajar HTML 1</h1>

<h2 id="tulisanmerah">Pertama Belajar HTML 2</h2>

<h3 class="tulisanhijau">Pertama Belajar HTML 3</h3>

<h1>Pertama Belajar HTML 4</h1>

<h5 id="tulisanmerah">Pertama Belajar HTML 5</h5>

<h6 class="tulisanhijau">Pertama Belajar HTML 6</h6>

</body>

</html>

dari kode diatas jika penulisan kita benar dan tepat maka akan didapatkan seperti berikut



 dari hasil diatas kita bisa memahami kan, bahwa semua attribut class yang bernilai tulisanhijau pada identitas class tulisannya akan berubah warnanya menjadi hijau, 

dan tulisan akan berada pada posisi sebelah kiri.


dan untuk penulisan selector ini bisa kita gabung jika properti dan value nya sama antara tag,id dan class seperti contoh berikut pada kode css

h1,#tulisanmerah,.tulisanhijau{

color:#0be9f7;

text-align:right;

}

dan pada kode html seperti berikut

<html>

<head>

<title>Website Pertama</title>

<link href="css/style1.css" rel="stylesheet" type="text/css">

</head>

<body>

<h1>Pertama Belajar HTML 1</h1>

<h2 id="tulisanmerah">Pertama Belajar HTML 2</h2>

<h3 class="tulisanhijau">Pertama Belajar HTML 3</h3>

<h1>Pertama Belajar HTML 4</h1>

<h5 id="tulisanmerah">Pertama Belajar HTML 5</h5>

<h6 class="tulisanhijau">Pertama Belajar HTML 6</h6>

</body>

</html>

maka dari kode diatas akan menghasilkan sperti berikut


sedangkan untuk properti dan value sendiri banyak sekali, misal untuk properti sendiri yaitu seperti berikut

- margin

- padding

- text

- list

- border

- table

- background

- font

- dan lain sebagainya hehehe


untuk value sendiri itu ada yang pakai pixel(px) satuannya ada juga yang em ada juga yang pakai %(percent)

ada juga yang pake bahasa inggris ada juga yang pake hexadecimal seperti yang saya contohkan untuk warna

#0be9f7.


nah untuk warna nilai seperti itu kita akan coba di next tulisan ya. untuk kali ini tulisannya cukup sekian dulu kawan

kita lanjut di next tulisan. dan untuk kalian bisa juga download filenya disini

 salam sobat semua


#css #selector #tag #id #class #web #websites #free #share #gratis #berbagi #html

 

 

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