CSS merupakan singkatan dari Cascading Style, yang berguna untuk
mempercantik tampilan web yang akan kita buat. Di sini bukan berarti
HTML dapat digantikan dengan CSS tetapi dini CSS hanya berguna untuk
mempermudah mendesign halaman WEB saja.
Pada awal di temukannya CSS yaitu sekita tahun 90 an, CSS terus
berkembang dan semakin di perbaharui untuk memberi kemudahan bagi para
design web, dan sampai saat ini CSS sudah sampai versi yang ke 3.
Agar dapat melihat hasil CSS secara maksimal saya sarakan untuk terus
meng update web browser yang anda gunakan. Seperti menggunakan Mozilla
Firefox versi 7.
Sama seperti membuat bahasa HTML, di dalam CSS anda hanya perlu menggunakan sebuah notepad untuk membuat halaman web.
Untuk pertemuan awal pengertian dasar CSS saya akhiri di sini. Untuk
lebih jelas nya silahkan baca artikel saya selanjutnya, mengenai Belajar
Dasar CSS.
Merubah font dengan Css
Untuk mengatur Warna teks, anda dapat menggunakan code CSS seperti contoh berikut :
<html>
<head>
<title> Tutorial CSS – Cara Merubah Warna Tulisan Teks </title>
<style>
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
</style>
<body>
<h1> Saya sedang belajar CSS</h1>
<h2>Saya sedang belajar CSS</h2>
Saya sedang belajar CSS
</body>
</html>
Keterangan :
Code {color:kode warna;} , teks yang berwana biru (kode warna ) bisa anda ubah sesuai dengan keinginan anda.
Pesan tanpa judul
cara membuat background warna, dan lain-lain.
Untuk lebih memahami lebih jauh silahkan simak contoh code berikut :
<html>
<head>
<title>Tutorial CSS – Cara Mengatur/membuat Background</title>
<style>
body {background-color : red;
background-image:url(logo.jpg);
background-position: center center}
</style>
</head>
<body>
</body>
</html>
Keterangan :
Pada background-image:url(logo.jpg), kata “logo.jpg” dapat diganti
sesuai dengan gambar background apa yang hendak anda gunakan. Untuk
mempermudah letakan gambar yang anda inginkan pada folder yang sama
dengan code HTML yang ada save.
Selain code background di atas, anda juga dapat mempercantik atau pun
mengatur background menggunakan code-code background di bawah ini :
-Backgorund-color , untuk menentukan warna backgound
-Background-image , untuk menggunakan file gambar sebagai background
-background-repeat , berguna untuk mengatur pengulangan gambar. Secara
default, gambar akan diulang hingga memenuhi halaman tetapi anda dapat
mengatur nya dengan menggunakan code berikut
-background-repeat: repeat-x , gambar akan di ulang secara horizontal, kiri dan kanan
-background-repeat: repeat-y , gambar akan di ulang secara vertikal, dari atas ke bawah.
-Background-repeat: no=repeat , gambar tidak akan di ulang
-background-position : mengatur posisi gambar apakah gambar berada di tenagh, kiri, kanan atau gabungan dari keduanya
Dasar penulisan CSS
untuk menuliskan sebuah sript dalam CSS sedikit berbeda dengan
menuliskan HTML biasa. Pada umumnya sript CSS terdiri dari komponen
Selector { property : value }
Selector merupakan tag HTML atau elemen ( Class/id ) yang di pilih oleh pembuat web
Property merupakan atribut atau fungsi yang bisa anda atur nilainya atau pun jenis nya.
Value merupakan nilai yang di masukan pada atribut
untuk lebih jelasnya perhatikan sript CSS berikut :
P {color : blue }
Dimana P merupakan sebuah selector, Color merupakan sebuah property dan value merupakan sebuah nilai dari property.
Contoh sript di atas berguana untuk menjadikan semua Tag P menjadi berwarna biri “blue”.
Nilai value dapat di definisikan dengan tanda titik dua ( : ) dan
nilai property dapat di definisikan dengan tanda ( { untuk meng awali
dan } untuk mengakhiri ).
Sekian dulu untuk tutorial CSS mengenai pengenalan Dasar CSS,
Silahkan baca tutorial saya yang selanjutnya mengenai Cara Memasukan
Sript CSS ke dalam HTML, tutorial ini merupakan tutorial yang paling
mendasar dan wajib anda pahami bila ingin belajarlebih jauh mengenai
HTML.
Memasukan css kedalam html
Untuk memasukan atau menggunakan Script CSS ke dalam HTML ada 3 cara
yang dapat dilakukan. Yaitu bisa dengan cara Inline Style, header style
dan juga bisa dengan menggunakan Linked CSS.
1. Untuk pertama-tama kita bahas terlebih dahulu mengenai cara
Inline style, Inline style merupakan salah satu cara yang dapat
dilakukan untuk menggunakan atau memasukan sript CSS ke dalam HTML
dengan cara menuliskan Script CSS satu persatu ke dalam HTML.
Untuk lebih jelasnya perhatikan Sript di bawah ini :
<html>
<header>
<title>Belajar CSS</title>
</header>
<body>
<p style=”color : red”> Teks ini berwarna merah </p>
<p style=”color : Blue”> teks ini berwarna biru </P>
<p style=”color : green”> teks ini berwarna hijau </p>
</body>
</html>
Dapat terlihat komposisi Sript CSS di atas menggunakan style=”property : value”> menjadi style=”color : red”.
Untuk melihat hasilnya anda bisa copy sript di atas ke dalam notepad, lalu safe dengan format ( .HTML ).
dapat terlihat terjadi perbedaan warna di setiap kalimatnya.
2. Yang ke dua anda bisa menggunakan header style, dimana kita dapat
menuliskan sript CSS pada bagian header. Di mana bagian script html
terpisah dengan scipt CSS. Bagian HTML terletak di bagian body sedangkan
bagian CSS terletak di bagian Header.
Keunggulan dengan menggunakan cara ini kita tidak perlu menuliskan satu
per satu sript HTML tapi cukup hanya dengan menuliskan Script CSS yang
di butuhkan maka script CSS dapat digunakan di setiap tag HTML. Untuk
lebih memahainya silahkan lihat contoh di bawah ini :
<head>
<title> Belajar tutorial CSS</title>
<style>
h3 {font-family : calibri;
color : red;
font-style : italic}
</style>
</head>
<Body>
<h3>kalimat ini memiliki font jenis calibri, warna merah dan juga di cetak miring</h3>
</body>
</html>
Dari contoh di atas dapat dilihat bahwa semua yang berada di dalam
tag h3 akan memiliki apa yang telah di tuliskan pada bagian CSS di
header tadi, yaitu akan memiliki font calibri, berwarna merah dan juga
di cetak miring.
3. Yang ketiga adalah dengan menggunakan Linked CSS. Linked CSS
adalah salah satu cara untuk memasukan menggunakan Script CSS dimana,
sript html dipisahkan dengan sript CSS, lalu di hubungkan dengan link.
Untuk lebih jelasnya lagi silahkan ikuti petunjuk di bawah ini :
a. Buka notepad, notepad ini digunakan untuk menuliskan sript CSS.
lalu copy paste cript CSS berikut
h3 {font-family : calibri;
color : red;
font-style : italic}
Setelah itu save notepad
B. Buka notepad kembali, notepad yang satu ini di gunakan untuk menuliskan sript HTML.
Lalu copy paste sript HTML berikut
<head>
<title> Belajar tutorial CSS</title>
<link rel=”stylesheet” href=”nama file Css yang telah di save” type=”text/css”>
</head>
<Body>
<h3>kalimat ini memiliki font jenis calibri, warna merah dan juga di cetak miring</h3>
</body>
</html>
lalu save as file notepad tersebut di folder yang sama dengan file
notepad CSS. Tulisan yang berwarna biru di atas mewajibkan anda untuk
menuliskan nama fie notepad HTML yang telah ada simpan, Contoh :
format.css
Mengenal class dan ID css
agar anda dapat lebih mengetahui Class dan Id pada CSS silahkan perhatikan contoh berikut :
<html>
<head>
<title>tutorial CSS : Mengenal Class dan Id</title>
<style>
#header {background-color: blue; padding: 1 em}
.intro {color : red; font-weight:blod}
</style>
</head>
<body>
<div id=”header”>
<h1>Latihan CSS</h1>
<p>Saya sedang belajar CSS</p>
<p>Saya sedang belajar Class dan Id</p>
</div>
</body>
</html>
Keterangan :
Untuk penggunaan Id maka setiap menuliskan code CSS wajib didahului oleh tanda paga (#)
Untuk penggunaan Class maka setiap menuliskan code CSS wajib didahului oleh tanda titik (.)
Seperti contoh di atas
#header : Id
.intro : Class
Untuk memunculkan Id gunakan <div id=”nama id”>
untuk memunculkan class gunakan <p>
biasanya id dan class digunakan untuk membagi-bagi bagian antara
header footer dan juga sidebar, agar lebih spesifik. (Berasambung)
Postingan
