CSS Dasar : Belajar CSS untuk pemula - OMJUAN.COM - Website Pragraming Learning
News Update
Loading...

10/16/2019

CSS Dasar : Belajar CSS untuk pemula

Tutorial CSS
Halo sobat-sobatku semua, pada sesi artikel kali ini yang saya akan update sesuai dengan judul artikel ini ya. Pada kesempatan kali ini kita akan belajar tentang css untuk pemula, mungkin dari sebagian teman-teman sudah mengerti dengan apa itu css, tetapi saya yakin masih ada juga teman-teman yang belum paham atau mengerti dengan css tersebut.

Oleh karena itu pada artikel kali ini saya akan membahas tentang css. Silahkan untuk teman-teman yang belum paham atau mengerti tentang css, simak denga baik. Oke langsung saja pada sesi css kali ini kita akan belajar tentang. CSS merupakan bahasa kedua dari HTML yang di pelajari oleh web designer developer. Pengetahuan tentang CSS sangatlah penting bagi seorang Web Designer, karena dengan menggunakan CSS kita dapat memuat :

  • Halaman landing page yang sangat menarik
  • Template situs yang menarik
  • Mengubah PSD Desain Web menjadi HTML
  • dan masih banyak lagi.

Apa saja yang akan kita bahasa dalam artikel kali ini ?

  • Apa itu CSS?
  • Siapa yang ciptakan CSS & Kapan CSS pertama kali di perkenalkan
  • Structur dasar dari CSS
  • Kemudian cara menulis CSS di dalam HTML

Apa itu CSS ?

CSS (Cascade Style Sheet) adalah sebuah bahasa yang di ciptakan untuk mengatur tampilan dari sebuah website agar website tersebut terlihat lebih indah dan menarik. Dengan CSS juga kita dapat mengatur layout , font, warna, garis, header, dll.

Lalu siapa yang ciptakan CSS & Kapan CSS pertama kali di perkenalkan ?

Hakon Wium Lie adalah pencipta css lahir pada tahun 1965 di Norwegia. Kemudian di juga penah bekerja dengan tim Berners-Lee di CERN lalu kemudian mengusulkan CSS pada tahun 1996. Dan pada saat itu juga dia menjadi CTO Opera hingga saat ini.

Versi CSS setiap Tahun

Dari sejak awal diperkenalkan hingga kini CSS memiliki beberapa variasi, yakni:
  1. CSS Pertama ( Versi 1) -> (17 Desember 1996)
  2. CSS Kedua (Versi 2) -> (Mei 1998)
  3. CSS Ketiga (Versi 2.1) -> (7 Juni 2011)
  4. CSS Keempat (Versi 3) -> (2012)
  5. CSS kelima (Versi 4) -> Masih dalam pengembangan

Lalu kalau kita dari setiap perubahannya ini bedanya dari setiap versi tersebut apa saja ?
Sudah tentu ada penambahan dan pengurangan pada CSS tersebut, dari memperbaiki bug hingga menambahkan fungsi-fungsi yang menarik.

Strucktur Kode atau Sintaks dari dari CSS

Untuk structur dari kode CSS ini terdiri dari tiga bagian, yakni:
  1. Selector
  2. Blok Deklarasi
  3. Properti
  4. Nilai

Tutorial CSS


Untuk lebih paham mari kita mencoba dan membahasanya satu per satu ...

Selector

Selector merupakan sebuah kata kunci untuk memilih sebuah elemen HTML yang akan kita atur atau mempercantiknya.

Contoh:
h1 {
    color: bluesky;
}

Yang artinya, Kita memilih semua elemen dengan tag , kemudian kita berikan bluesky (warna biru) langit pada teks tersebut.

Kemudian apa itu Seletor ?
Untuk Selector dapat berupa sebuah nama tag, clas, id, dan atribut.

Contoh:
/* Selektor dengan nama tag */
h2 {
    color: bluesky;
}
/* Selektor degnan class */
.bg-yellow {
    backgound-color: grey;
}
/* selektor dengan ID elemen */
#header {
    background: yellow;
}
/* Selektor dengan Atribut */
input[type=text]{
    background: yellow;
}

Untuk pembahasan lebih detail dan lanjur, silahkan baca di W3Schools tentang CSS Selector Reference

Blok Deklarasi

Blok deklarasi merupakan suatu tempat dimana kita menuliskan atribut-atribut CSS yang akan diberikan kepada selector.

Contoh:
p {
    font-size: 16px;
}

Yang artinya kita akan mengatur ukuran dari font tag sebesar 16px. Blok deklarasi akan di mulai atau dibuka dengan sebuah tanda { kemudia di tutup dengan }.

Properti dan Nilai


Sebuah Properti merupakan atribut atau sebuah kesimpulan aturan yang akan diberkan kepada elemen yang dipilih.
p {
    property: "nilai";
}

Perlu di ingat setiap properti yang kita buat, harus berahir dengan titik koma (;). Tetapi jika hanya terdapat satu properti, boleh untuk tidak menggunakan titik koma(;).

Properti tersebut harus di dalam blok deklarasi.

Contoh:
blockquote {
    background: orange;
}

Jangan di tulis seperti dibawah ini !
background: orange;
   p {

}

Menulis Kode CSS dalam HTML


Jika kita mau menuliskan kode CSS di dalam HTMl dapat di lakukan di dalam tag <style>. tag tersebut dapat kita tuliskan di dalam tag <head> atau <body>.
Namum kebanyakan orang menulikannya di dalam tag . Seperti contoh di bawah ini :

<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS di www.omjuan.com</title>

<style type="text/css">
    p { color: blue}
</style>

</head>

<body>
    <p>Sebuah contoh paragraf yang di berikan oleh www.omjuan.com</p>
</body>
</html>

Hasilnya seperti gambar di bawah ini, elemen berwarna biru:

Tutorial CSS

Selain dengan cara yang di atas ini, masih banyak lagi cara yang dapat kalian baca di W3School. Kita juga dapat menggunakan dua cara, yaitu:

  1. Inline CSS
  2. External CSS
Silahkan baca di : Tutorial Lengkap CSS
Nah itu dia sedikit penjelasan tentang CSS, bisa di pahami teman-teman ?. Jika kalian merasa bingun atau ada yang mau di tanyakan silahkan kalian langsung saja komentar di bawah ini, nanti saya akan bantu kesulitan kalian semua. Jika kalian suka juga dengan artikel yang ada di situs ini kalian bisa klik button lonceng di paling kanan atas untuk medapatkan updaten terbaru tentang artikel yang kami upload.

Share with your friends

Give us your opinion

Terimakasih telah mengunjungi situs ini. Silahkan berkomentar dengan bijak.Komentar spam atau berisikan link aktif tidak akan di tampilkan. Terimakasih

Notification
This is just an example, you can fill it later with your own note.
Done
Asal SEO Responsive Blogger Template
Pro Version 2 Pro Dark Version Pro Version 1 Pro Version 5 Proversion 4 Pro Version 3
Eclipse Responsive Blogger Template
Pro Version 3 Pro Version 2 Pro Version 1