Pengertian CSS

22.40 0 Comments

Pengertian CSS Dasar

Sebelum mempelajari CSS anda harus mengetahui HTML DASAR  terlebih dahulu . CSS singkatan dari Cascading Style Sheet . CSS merupakan sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan komponen-komponen web yang beragam sesuai dengan keinginan kita  .

Soal gaya Masalah Besar

HTML tidak pernah dimaksudkan untuk berisi tag untuk memformat dokumen.
HTML itu dimaksudkan untuk menentukan isi dari sebuah dokumen, seperti:
<h1> Ini adalah heading </ h1>
<p> Ini adalah sebuah paragraf. </ p>
Ketika tag seperti <font>, dan atribut warna ditambahkan dengan spesifikasi HTML 3.2 , mulai mimpi buruk bagi pengembang web. Pengembangan situs web yang besar , dimana informasi font dan warna yang ditambahkan ke setiap halaman menjadi proses yang panjang dan mahal.

CSS Menyimpan Banyak Kerja .

CSS mendefinisikan cara elemen HTML yang akan ditampilkan.
Gaya biasanya disimpan dalam file css eksternal . Style sheet eksternal memungkinkan anda untuk mengubah tampilan dan tata letak semua halaman dalam sebuah situs web hanya dengan mengedit satu file tunggal .



CSS Styling Background

Properti CSS Bakground (Latar Belakang) digunakan untuk menentukan efek latar belakan dari suatu elemen.
Properti yang digunakan dalam CSS Background antara lain :
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background-color

Properti Background-color menetapkan warna latar belakang dari suatu elemen.
Warna latar berlakang ini didefinisikan dalam pemilih body .
contoh : body {background-color : #b0c4de ;}
Dengan CSS, warna paling sering ditentukan adalah :
* nilai HEX – seperti “# FF0000″
* sebuah nilai RGB – seperti “rgb (255,0,0)”
* nama warna – seperti “merah”

Bakcground-image

Properti Background-image menentukan warna gambar untuk digunakan sebagai latar belakang suatu elemen.
Secara default, gambar diulang sehingga mencakup seluruh elemen.
Gambar latar belakang untuk halaman bisa di set seperti ini:
contoh : body {background-image:url(‘paper.gif’) ;}

Background-repeat

Properti Background-repeat ini digunakan untuk mengulangi gambar, baik secaravertikal atau horizontal .
Properti  :
  • repeat
  • repeat-x (pengulangan horizontal)
  • repeat-y (pengulangan vertikal)
  • no-repeat (tanpa pengulangan)
contoh :
body
{
background-image:url(‘gradient2.png’);
background-repeat:repeat-x;
}

Background-attachment

properti Background-attachment digunakan untuk menentukan apakah gambar latar belakang tetap atau scroll dengan sisi halaman .
Properti  :
  • scroll
  • fixed
  • inherit

Background-position

Properti Background-position digunakan untuk mengatur posisi awal dari background image
contoh :
body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
background-position:right top;
}

CSS memiliki dua bagian utama: pemilih ( Selector ) , dan satu atau lebih deklarasi ( Declaration ).
q
  • Selector adalah HTML element yang ingin dibuat style nya.
  • Declaration  merupakan isi dari property dan nilai dari CSS.
  • Pemberian nilai dari property digunakan titik dua ( : ), akhir dari property digunakan titik koma ( ; )
Contoh CSS
Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal :
p {color:red;text-align:center;}
CSS Coment
Komentar digunakan untuk menjelaskan kode kita, dan dapat membantu kita ketika kita mengedit source code di kemudian hari. Komentar diabaikan oleh browser.
Sebuah komentar CSS diawali dengan “/*”, dan diakhiri dengan “*/”, seperti ini :
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}






CSS Styling Text

CSS Text

Text Color

Properti warna yang digunakan untuk mengatur warna teks.
Dengan CSS, warna yang paling sering ditentukan oleh:
  • nilai HEX – seperti “# ff0000″
  • sebuah nilai RGB – seperti “rgb (255,0,0)”
  • nama warna – seperti “merah”
Warna default untuk halaman didefinisikan dalam pemilih tubuh / body.
contoh :
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

Text Alignment

Properti text-align digunakan untuk mengatur alignment horizontal dari sebuah teks.
Teks dapat terpusat, atau berpihak ke kiri atau kanan, atau dibenarkan.Ketika text-align diatur untuk “membenarkan”, setiap baris ditarik sehingga setiap barismemiliki lebar yang sama, dan margin kiri dan kanan lurus (seperti di majalah dan surat kabar).
contoh :
h1 {text-align: center;}
p.date {text-align: right;}
p.main {text-align: justify;}

Text Decoration

Properti text-decoration digunakan untuk membuat atau menghapus dekorasi dari teks.
Properti text-decoration banyak digunakan untuk menghapus menggarisbawahi dari linkuntuk tujuan desain:
contoh :
a {text-decoration: none;}
Hal ininjuga dapat digunakan untuk menghias text :
contoh :
h1 {text-decoration: overline;}
h2 {text-decoration: line-melalui;}
h3 {text-decoration: underline;}
h4 {text-decoration: blink;}

Text Transformation

Properti teks transform digunakan untuk menentukan huruf besar dan huruf kecil dalam sebuah teks.
Hal ini dapat digunakan untuk mengubah segalanya menjadi huruf besar atau huruf kecil, atau memanfaatkan huruf pertama dari setiap kata.
contoh :
p.uppercase {text-transform: uppercase;}
p.lowercase {text-transform: lowercase;}
p.capitalize {text-transform: memanfaatkan;}

Text Identation

Properti teks lekukan digunakan untuk menentukan indentasi dari baris pertama dari teks.
contoh :
p {text-indent: 50px;}




Tutorial CSS ID dan Class


Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik . Id pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan “#“. Aturan style bawah ini akan diterapkan pada elemen dengan id = “para1″
#para1
{
text-align:center;
color:red;
}
nb: JANGAN memulai id dengan menggunakan nomor karena ini tidak akan bekerja pada Mozilla Firefox
Selector class digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda dengan pemilih id, kelas pemilih yang paling sering digunakan pada beberapa elemen . Dengan ini memungkinkan anda untuk menentukan gaya dan elemen HTML dengan class yang sama .
Selector Class menggunakan atribut class HTML, dan didefinisikan dengan “.”
Pada contoh di bawah ini, semua elemen HTML dengan class = “center”akan dibuat rata tengah :
.center {text-align:center;}
kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang dipengaruhi oleh kelas.
Pada contoh di bawah, elemen p semua dengan class = “center”akan di buat rata tengah :
p.center {text-align:center;}
nb: JANGAN memulai nama kelas dengan angka karena ini hanya didukung di Internet Explorer. 


Unknown

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard.

0 komentar:

Langganan: Posting Komentar (Atom)