Belajar Dasar-dasar CSS untuk Pemula
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.
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.
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>
<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 :
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>
<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.
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
-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 :
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 ).
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 :
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>
<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.
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 :
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>
<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>
<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 :
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
lalu copy paste cript CSS berikut
h3 {font-family : calibri;
color : red;
font-style : italic}
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
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>
<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>
<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 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>
untuk memunculkan class gunakan <p>
biasanya id dan class digunakan untuk membagi-bagi bagian antara header footer dan juga sidebar, agar lebih spesifik.
