Ticker

6/recent/ticker-posts

Mengenal CSS Cascading Stylesheet

May 30, 2017

Pengenalan-CSS


CSS atau kependekan dari Cascading Stylesheets adalah sebuah kode pemograman yang sangat luar biasa untuk menghias atau mengatur gaya halaman/ tampilan layout halaman sehingga lebih dinamis dan menarik.

CSS wajib bagi siapapun yang bekerja dalam bidang desain web /web design.

Tutorial ini akan membantu kamu memulai dan mengenal CSS hanya dalam waktu beberapa jam. Sangat mudah untuk dipahami, karena kita menggunakan teknik yang kreatif.

LEARNING CSS IS FUN


Ingat bahwa selama belajar tutorial ini, lakukanlah beberapa testing atau percobaan atau eksperimen pada setiap hal yang kamu pelajari pada setiap tutorial.

Nah, untuk dapat menggunakan CSS, kamu perlu punya sedikit pengalaman dalam menggunakan HTML
Jika belum familiar dengan HTML,akan lebih baik kamu belajar terlebih dahulu HTML sebelum ke CSS

Software apa saja yang kita dibutuhkan?

Kita tidak sedang membuat naskah ketikan, jadi jangan gunakan MS. Word dalam melakukan percobaan tutorial ini. Selain itu tidak disarankan menggunakan software yang memiliki kelas tinggi seperti Frontpage, Dreamweaver, karena mereka tidak akan membantumu belajar css dengan baik.

Yang kamu butuhkan hanya sebuah text editor yang mudah dan simpel seperti Notepad (program bawaan Microsoft Windows) yang biasanya terdapat pada Accesories dalam Start Menu.

Text editor yang simpel lebih ideal untuk mempelejari HTML dan CSS karena tidak akan memberi pengaruh atau merubah code yang kamu ketikkan.

Sukses atau error pada percobaan nanti bergantung pada dirimu, bukan pada softwarenya.

Kamu bisa menggunakan beberapa browser pada tutorial ini. Saya menyarankan kamu untuk selalu mengupdate browser milikmu dan menggunakan edisi terbaru.

Sebuah browser dan text editor yang simpel adalah yang kamu butuhkan.

Apa saja yang bisa dilakukan dengan CSS?

CSS adalah bahasa untuk mengatur, menghias yang mendifinisikan layout dokumen HTML. 

Sebagai contohnya , CSS meliputi pengaturan huruf, warna, margin, huruf, lebar, gambar background, posisi dan banyak hal lainnya. 

Saat ini CSS support/kompatible pada semua browser

Setelah belajar beberapa pelajaran pada tutorial ini kamu akan cukup mampu untuk melakukan styling menggunakan CSS untuk membuat sebuah website yang keren.

Let's get started !

Syntax dasar CSS

Pada percobaan pertama, kita akan memberi warna merah pada background halaman web.
Menggunakan HTML akan jadi seperti dibawah ini:

<body bgcolor='#FF0000">

dengan hasil yang sama namun dengan menggunakan CSS akan tampak seperti dibawah ini:

body{background-color:#FF0000;}


Menerapkan  CSS ke Dokumen HTML

Ada tiga cara untuk menerapkan CSS ke dalam dokumen HTML. Agar lebih mahir lebih baik kita gunakan cara ketiga.

Cara 1 : In Line (the attribute style)
satu cara yang dapat digunakan untuk menerapkan CSS ke dokumen HTML adalah dengan menggunakan atribut HTML.
Berikut contoh penerapannya:

<html>
<head>
</head> 
<title>Contoh</title>
<body style="background-color:#FF0000;">
<p>Halaman Berwarna Merah</p>
</body>
</html>

Cara 2 : Internal (tag style)
Cara lain untuk menerapkan CSS ke dokumen HTML adalah dengan menggunakan tag <style>
yang diletakkan diantara tag <head>...</head>

<html>
<head>
<title>Contoh</title>
<style>
body {background-color:#FF0000;}
</style>
</head>
<body>
<p>Halaman Berwarna Merah</p>
</body>
</html> 

Cara 3 : External (link to stylesheet)
Cara yang terakhir yaitu external. Mengapa dikatakan external? karena stylesheet akan diletakkan diluar dokumen html, kemudian untuk memanggil dokumen tersebut kita akan menggunakan link.

External style sheet adalah sebuat text file yang simple  yang berekstensi .css.
Seperti halnya dokumen html, kita bisa menempatkan stylesheet pada web server atau di hard disk.

Contoh, kamu mempunyai stylesheet yang telah kamu namai style.css dan kamu letakkan di folder dengan nama style.

Satu link dapat dibuat dengan sebuah baris kode HTML:

<link rel="stylesheet" type="text/css" href="style/style.css" />
lokasi file dapat dilihat pada atribut href

Teknik ketiga ini lebih efektif dan tidak akan membuang banyak tenagamu. Karena jika sebagai contoh kamu ingin merubah warna background 50 halaman, stylesheet akan dapat membantumu dari melakukan cara manual merubah satu persatu 50 Html dokumen.

Selain itu, CSS, jika kita melakukan perubahan kita hanya butuh beberapa detik dengan cara merubah kode pada stylesheet.

Mudah Bukan? :)

 



Tags:

Post a Comment

0 Comments