Biongo Attacker

Seputar Programing Dan Informasi tentang Teknologi masa kini

  • Home
  • P Website
  • _HTML
  • _CSS
  • _Javascript
  • __Jquery
  • _PHP
  • __Codeigniter
  • Informasi
  • Tips dan Trick
  • Lainnya
  • -label/template,blog,script,Alat
Home Archives for 05/12/16

Tutorial CSS Part 1 : Pengertian css dan cara Penulisan kode css

Alsaskar Mirando Alsaskar Mirando 02:54:00 | #css
Selamat sore, tidak sangka kalau kita sudah masuk ke tutorial css.Sebelumnya kita sudah membahas tentang html dan bisa anda lihat tutorial-tutorial nya di Tutorial HTML.Tutorial ini mungkin cocok untuk kalian yang baru belajar tentang css.

Pengertian Css

Kepanjangan dari css adalah cascading style sheet.Css adalah sebuah bahasa pemogramman yang digunakan untuk mendesign sebuah website html agar terlihat rapih.HTML sering digunakan untuk membuat struktur sebuah website atau konten dari website, sedangkan untuk css digunakan sebagai mendesign tampilan website.Dengan css kita bisa mendesign seperti text, gambar, warna, latar belakang (background) pada tag html.

Cara Penulisan kode css

Dalam penulisan css terdapat selector, properti, dan value.Untuk lebih jelasnya mari ketik script di bawah ini.

<!DOCTYPE html>
<html>
<head>
 <title>Belajar CSS dengan Biongo Attacker</title>
 <style type="text/css">
  h1{
   color: blue;
   font-family: arial;
   font-size: 20px;
  }

  p{
   font-family: verdana;
   color: red;
   font-size: 15px;
  }
 </style>
</head>
<body>
  <h1>Mari belajar css</h1>
  <p>Saya seorang pribadi yang kurang baik</p>
</body>
</html>

Tutorial CSS : Pengertian css dan cara Penulisan kode css
Tutorial CSS : Pengertian css dan cara Penulisan kode css
Pada kode css diatas saya menggunakan teknik internal (tertera pada bagian head).

Selector terdapat pada awal kode css.Selector terdiri dari tag, class, dan id.Kita juga bisa menggunakan dua selector sekaligus dengan menambahkan tanda koma pada bagian selector (h1, p).Jika setelah selector selesai dibuat, properti dan value mengikuti, dan berada di antara kurung kurawal "{" dan "}".

Jika properti selesai di isi kita harus menambahkan value dengan tanda awal ":" dan di tutup oleh ";".
Contohnya, jika kita ingin membuat properti font-family maka valuenya adalah arial, vardana, dan sebagainya.

h1{
   /*Color adalah properti dan blue adalah value*/
   color: blue;
   font-family: arial;
   font-size: 20px;
  }

Dan untuk properti yang memiliki lebih dari satu kata atau dua kata, kita tinggal menambahkan tanda "-", contohnya font-size dan font-family (terdapat pada kode di atas).

Baca juga :
Mengenal ID dan Class pada html
Perbedaan tag div dan tag span

Bagaimana sudah pahamkan? Jika belum bisa langsung bertanya pada kolom komentar (Tidak usah malu-malu atau gengsi).

Semoga artikel ini bermanfaat untuk anda, sekain dan terima kasih banyak.
  • Share
  • Tweet
  • Share
  • Share
  • Share
Subscribe to: Posts (Atom)

Popular

  • Cara mengganti warna navbar pada bootstrap
    Cara mengganti warna navbar pada bootstrap
    Cara mengganti warna navbar pada bootstrap - Banyak yang bingung bagaimana untuk mengganti warna navbar pada bootstrap.Saya juga waktu itu...
  • Download Script Phising PB Garena Recoded By Biongo Attacker
    Download Script Phising PB Garena Recoded By Biongo Attacker
    Selamat malam gan., di malam hari ini saya akan share script phising PB Garena.Karena saya lihat banyak teman-teman saya yang bermain Point ...
  • Download Aplikasi Perpustakaan Berbasis Web Sederhana
    Download Aplikasi Perpustakaan Berbasis Web Sederhana
    Selamat siang teman-teman.Ketemu lagi nih dengan saya, tapi kesempatan ini saya tidak kasih mengenai tutorial, tetapi dikesempatan ini saya ...

Archive

  • ►  2017 (4)
    • ►  March (1)
      • ►  Mar 12 (1)
    • ►  February (2)
      • ►  Feb 26 (1)
      • ►  Feb 22 (1)
    • ►  January (1)
      • ►  Jan 26 (1)
  • ▼  2016 (65)
    • ►  December (1)
      • ►  Dec 02 (1)
    • ►  September (4)
      • ►  Sept 11 (1)
      • ►  Sept 09 (2)
      • ►  Sept 02 (1)
    • ►  August (5)
      • ►  Aug 30 (1)
      • ►  Aug 29 (1)
      • ►  Aug 13 (1)
      • ►  Aug 12 (1)
      • ►  Aug 10 (1)
    • ►  July (6)
      • ►  Jul 29 (1)
      • ►  Jul 16 (1)
      • ►  Jul 14 (1)
      • ►  Jul 13 (1)
      • ►  Jul 12 (1)
      • ►  Jul 09 (1)
    • ►  June (5)
      • ►  Jun 29 (1)
      • ►  Jun 28 (1)
      • ►  Jun 06 (1)
      • ►  Jun 05 (1)
      • ►  Jun 01 (1)
    • ▼  May (6)
      • ►  May 29 (1)
      • ►  May 24 (1)
      • ►  May 20 (1)
      • ►  May 19 (1)
      • ▼  May 12 (1)
        • Tutorial CSS Part 1 : Pengertian css dan cara Penu...
      • ►  May 01 (1)
    • ►  April (24)
      • ►  Apr 30 (1)
      • ►  Apr 28 (1)
      • ►  Apr 27 (1)
      • ►  Apr 26 (2)
      • ►  Apr 25 (2)
      • ►  Apr 23 (2)
      • ►  Apr 22 (1)
      • ►  Apr 08 (1)
      • ►  Apr 07 (1)
      • ►  Apr 06 (2)
      • ►  Apr 05 (2)
      • ►  Apr 04 (2)
      • ►  Apr 03 (2)
      • ►  Apr 02 (3)
      • ►  Apr 01 (1)
    • ►  March (10)
      • ►  Mar 30 (2)
      • ►  Mar 29 (2)
      • ►  Mar 26 (1)
      • ►  Mar 24 (1)
      • ►  Mar 22 (1)
      • ►  Mar 13 (2)
      • ►  Mar 01 (1)
    • ►  February (4)
      • ►  Feb 24 (1)
      • ►  Feb 18 (1)
      • ►  Feb 16 (1)
      • ►  Feb 13 (1)
  • ►  2015 (15)
    • ►  December (2)
      • ►  Dec 30 (1)
      • ►  Dec 29 (1)
    • ►  November (3)
      • ►  Nov 20 (1)
      • ►  Nov 12 (2)
    • ►  October (8)
      • ►  Oct 24 (1)
      • ►  Oct 23 (2)
      • ►  Oct 22 (1)
      • ►  Oct 21 (2)
      • ►  Oct 13 (1)
      • ►  Oct 05 (1)
    • ►  September (1)
      • ►  Sept 29 (1)
    • ►  August (1)
      • ►  Aug 09 (1)

Comment

recentcomment

Fanspage

Biongo Attacker

[fa fa-tag] Category

ajax Alat android blog bootstrap cerita codeigniter css html info javascript jquery motivasi pascal php script sublime text template Tips dan Trick visual basic

Tentang

Sebuah blog yang dibuat untuk membagikan tutorial seputar programming dan juga memberikan informasi seputar teknologi masa kini.

Pengikut

Copyright © 2017 Biongo Attacker All Right Reserved
Template By Bloggerku
Kontak | Daftar Isi | Privacy Policy | TOS