-->

Halo !!! Saya Kang Ismet, ini adalah blog tentang AMP HTML dan cara penerapannya

Dasar-Dasar CSS

CSS icon

Cascade Style Sheet

CSS yang memiliki kepanjangan Cascade Style Sheet ini digunakan para web designer untuk mengatur style elemen yang ada dalam halaman web mereka, mulai dari memformat text, sampai pada memformat layout. Tujuan dari penggunaan CSS ini adalah supaya diperoleh suatu kekonsistenan style pada elemen tertentu.
Perkembangan CSS sendiri diawali pada tahun 1996, dimana W3C (World Wide Web Consortium), sebuah konsorsium untuk standarisasi web, menyusun draft proposal untuk membuat CSS ini dan akhirnya dapat berjalan. Selanjutnya pada pertengahan tahun 1998, W3C mengembangkan CSS2 yang diperbarui untuk kepentingan media lain (tidak hanya untuk PC web browser). Akhirnya mulai pada tahun 2000, telah dikembangkan CSS3 oleh W3C yang sampai saat ini masih terus diperbarui lagi.

Keuntungan Penggunaan CSS

Dengan menggunakan CSS, Anda (sebagai webmaster) akan lebih mudah untuk mengatur style elemen dalam halaman web Anda. Sebagai contoh, misalnya untuk mengatur style elemen heading, Anda menginginkan jenis font nya adalah Arial, 20 pixel dan berwarna merah. Dengan CSS, Anda cukup menuliskan properti dari elemen heading tersebut sekali saja, dan Anda akan memperoleh hasil yang diinginkan. Bandingkan apabila tidak menggunakan CSS, Anda akan mengatur style pada setiap elemen heading yang ada. Tentu saja hal ini akan sangat merepotkan.


Aturan penggunaan CSS

secara umum Di susun oleh tiga bagian yaitu, selector (elemen yang akan di defenisikan) property (atribut yang akan di ubah) dan nilai sebagai mana berikut.

selector { property : value }

antara properti dan nilai dipisahkan dengan titik dua seperti

boyd {color : black}

jika nilai berupa beberapa kata gunakan tanda petik ganda

p {font-family : "san serif"}

Jika lebih dari satu properti pisahkan dengan titik koma

p {text-align : center ; color : blue}

Jika selector ingin di kelompokkan 

h1,h2,h3,h4,h5,h6, {color : blue }

Jika menggunakan attribut class

p.kanan {text-align:right}
p.kiri {text-align : left}

berikut ini sintak dalam penulisan dalam dokumen HTML menggunakan defenisi di atas 

<p class="kanan"> ini adalah paragraph </p>
<p class="kiri"> ini adalah paragrap </p>

jika menggunakan ID attribut

#kanan {text-align : center}

berikut ini sintaks yang ditulis dalam dokumen menggunakan defenisi ID attribut di atas

<p id="kanan"> ini adalah paragraph </p>
<h2 id="kanan"> ini adalah paragraph kedua </p>


Penulisan CSS sendiri dapat dilakukan dengan dua cara. yaitu CSS external dan CSS internal.

CSS EXTERNAL

berikut ini style sheet yang di defenisikan secara external dimana LISTING : contoh1.css digunakan oleh Belajar01.html.
ingat dalam pendefenisian external tidak di perlukan Tag HTML. dan extenseion file harus di simpan dalam .css

  • contoh listing : contoh1.css
body {background-color : sienna }
h1 {color : blue }
h2 {color : white }
p { margin-left : 50px}

jika sudah selesai menuliskan listing di atas jangan lupa simpan dengan nama >> contoh1.css


  • Untuk memanggil listing >> contoh1.css kedalam HTML berikut ini adalah caranya :
<html>
<head>
<title> belajar css external </title>
<link rel="stylesheet" type="text/css" href="contoh1.css">
</head>
<body>
<h1> heading 1 ini menggunakan warna blue </h1>
<h2> heading 2 ini menggunakan warna putih </h2>
<p> paragraph dengan margin left sebanyak 50px </p>
</body>
</html>

jika sudah selesai menulis listing HTML diatas simpan nama file dengan >>>> belajar01.html
HASIL DARI CONTOH DI ATAS :
Cascade Style Sheet









 

CSS INTERNAL

css internal ditulis didalam HTML itu sendiri dan di awali dengan menulis <style type="text/css> dan diakhri dengan </style> tepat di bawah section <head>

  • contoh penulisan secaara internal :
<html>
<head>
<title> belajar css internal </title>
<style type="text/css">
body {background-color : green }
h1 {color : red }
h2 {color : blue }
p { margin-left : 50px}
</style>
</head>
<body>
<h1> heading 1 ini menggunakan warna merah </h1>
<h2> heading 2 ini menggunakan warna biru </h2>
<p> paragraph dengan margin left sebanyak 50px </p>
</body>
</html>

Jika sudah menuliskan listing diatas simpan dengan nama apa saja dengan extensi .html. misalnya dengan nama maribelajar.html
HASIL DARI CONTOH DIATAS :
Cascade Style Sheet









 Jika ingin mengetahui penggunaan CSS secara lanjut anda bisa Klik Disini atau Bisa Juga Disini.

2 komentar: