Belajar CSS Dasar Untuk Pemula

1. Pengenalan dasar CSS (Cascading Style Sheet)

CSS adalah singkatan dari Cascading Style Sheet, berfungsi untuk mempercantik penampilan HTML atau mempercantik sebuah website, seperti menentukan posisi, merubah warna teks, merubah background, mengganti font huruf dan masih banyak lagi.

perhatikan gambar contoh kode css di bawah ini:

Seperti gambar di atas ada tiga pokok yang penting harus kita ketahui di dalam kode CSS yaitu sebagai berikut:

a. selector

pada gambar di atas selector menunjukan pada tag/elemen HTML (h1) dalam kata lain tag tersebut adalah code yang ingin di beri style. Anda dapat menuliskan langsung nama tag yang ingin diberi style tanpa perlu menambahkan tanda < >. Pada contoh kode CSS di atas, kita akan memberi style pada seluruh tag h1 yang terdapat dalam file HTML.

Jika tag HTML yang ingin diberi style memiliki ID, anda dapat menuliskan nama ID tersebut dengan diawali tanda kress atau pagar (#).

#header

Dan jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukan dengan tanda titik (.) diikuti dengan nama class.

.benda

b. property

property merupakan jenis style yang kita inginkan seperti gambar di atas kita ingin merubah ukuran font huruf, mengubah warna mengubah posisi dan lain sebagainnya, dan di haruskan juga setelah menulis property kita di haruskan untuk menulis titik dua (:) pada akhir properti, seperti gambar di atas.

dan menurut saya property pada CSS itu sangatlah mudah dan gampang di mengerti walaupun itu menggunakan bahasa inggris. dan walaupun kita tidak terlalu faham dengan bahasa inggris sekarang google mempermudah kita untuk mentranslate bahasa tersebut, yaitu dengan menggunakan google translate.

owh iya di dalam property kita bisa mengedit atau memasukan kode sebagai berikut contohnya kita ingin merubah ukuran font yaitu dengan menggunakan atau memasukan kode font-size, merubah warna color dan lain sebagainnya.mudah di mengerti bukan?

c. Value

value merupakan sebagai patokan bentuk, warna, ukuran, dan lain sebagainnya contohnya kita ingin membuat ukuran hurf menjadi besar maka yang kita tulis yaitu dengan cara sebagai berikut.

h1 {

  color: red;

  font-size: large;

}

dengan kata large di atas tersebut berarti kita mengubah font dengan ukuran besar, dan dengan kata red di atas kita mengubah warna merah. owh iya setiap setelah menuliskan value kita mengharuskan menutup kode tersebut yaitu dengan cara memberi tanda titik koma ( ; ).

sangat mudah di mengerti bukan?

2. Penulisan CSS

anda masih bingung bagaimana cara penulisan CSS itu? Tenang kami punya solusinya dengan demikian cara penulisan CSS terbagi menjadi tiga cara yaitu inline, internal dan external. dari ketiga cara penulisan kode CSS tersebut bisa anda lakukan sesuai dengan kebutuhan, sebagai berikut simak penjelasannya.

a. Inline

Penulisan kode CSS dengan metode atau cara inline ini bisa dilakukan langsung pada tag tag yang ingin diberi style dengan menggunakan atribut style, dengan contoh sebagai berikut.

<html>

  <head>

    <body>

      <h1 style="font-size: 20px">ini adalah judul website</h1>

    </body>

  </head>

</html>

pada cara atau metode ini anda tidak perlu perlu menuliskan selector, Karena anda menuliskan CSS langsung pada tag yang ingin diberi style.

b. internal

Metode atau cara internal ini ditulis di dalam tag style yang ditempatkan pada tag head, sebagai berikut contohnnya.

<html>

  <head>

    <title>ini adalah website pertama saya</title>

    <style>

      h1 {

        color: blue;

        font-size: 10px;
      }

    </style>

  </head>

</html>

c. External

cara atau metode ini adalah yang terakhir dari cara kedua di atas, yaitu dengan cara memanggil nama file CSS untuk penempatan juga sama seperti contoh di atas yaitu pemanggilan di file di dalam tag head pada HTML, pemanggilan style CSS dilakukan dengan cara pemanggilan tag link sebagai contoh sebagai berikut.

<html>

  <head>

    <title>Website pertama saya</title>

    <link rel="stylesheet" href="Nama fileCSS.CSS" />

  </head>

</html>

Atribut rel adalah (relationship) dari tag link tersebut, yaitu sebagai stylesheet. href diisi dengan lokasi file CSS yang ingin dimuat. Pemanggilannya sama dengan pemanggilan gambar atau link. Penting : jika kita menggunakan cara ketiga ini atau cara di atas upayakan file CSS dan file html dalam satu folder.

Penutup

Mungki cukup itu saja terlebih dahulu tentang pembahasan CSS pemula kita sambung di postingan atau pertemuan selanjutnya.

Betahngetik