CSS = Cascading Style Sheets

By Web Programming di 5:19 PM

ADSENSE HERE!

PENGERTIAN CSS

CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.

Beberapa hal yang dapat dilakukan dengan CSS

Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.
Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda.

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:

External Style Sheet
Aturan CSS disimpan pada suatu file sehingga terpisah dari dokumen HTML. Kemudian tambahkan kode pemanggilan file CSS dalam dokumen HTML. Akhiran file CSS adalah .css

  file CSS (misalnya style.css) berisi :  
         p{text-align:justify;}  
 Dokumen HTML berisi :  
 <head>  
  <title>CSS secara eksternal</title>  
  <link rel="stylesheet" type="text/css" href="style.css"/>  
 </head>  
 <body>  
  <p>Paragraph yang ini diatur CSS secara eksternal</p>  
 </body>

Internal Style Sheet
Aturan CSS ditulis pada bagian HEAD dokumen HTML menggunakan tag <style>

 <head>  
   <title>CSS secara internal</title>  
   <style type="text/css">  
   P{text-align:justify;}  
  </style>  
 </head>  
 <body>  
   <p>Paragraph yang ini diatur CSS secara internal</p>  
 </body>

Inline Style Sheet

Aturan CSS ditulis langsung pada tag HTML yang akan diatur tampilannya menggunakan atribut style:
```
 <p style="text-align:justify;">Paragraph yang ini diatur CSS secara inline</p>  
```

SATUAN DALAM CSS

Statik
Relatif

MENULIS CSS

Sintaks penulisan CSS sebagai berikut:

Penjelasan:

Aturan CSS terdiri 2 bagian:

Selector
Biasanya berupa tag HTML, id, class id menggunakan tanda # didepan nama selector class menggunakan tanda titik didepan nama selector
contoh :
h1 { color : blue ; } ==> tag html h1
#teks { color :green; } ==> id
.warna { color : red; } ==> class
Declaration
Berisi aturan-aturan css yang terdiri dari properti dan nilainya yang dipisahkan oleh tanda titik dua. Setiap aturan css harus diakhiri dengan tanda titik koma.

Selector ID dan Class pada CSS

Untuk selector id pada css ditandai dengan tanda #(pagar) contoh penulisan seperti berikut :

 #teks  
 {  
  color: blue;  
  font-family: Calibi;  
 }

Penggunaanya dalam script HTML :

 <body>  
  <p id="teks"> TEST </p>  
 </body>

Yang perlu di perhatikan jika menggunakan selector id :

Sebuah elemen HTML hanya boleh memiliki 1 id

Setiap halaman hanya boleh memiliki 1 elemen dengan id tersebut

Dapat di gunakan sebagai penanda halaman untuk link

Digunakan juga untuk javascript

Sebaiknya tidak digunakan untuk css ( lebih baik gunakan class)

Untuk selector class pada css ditandai dengan tanda .(titik) contoh penulisan seperti berikut :

 .warna  
 {  
  background-color: Lightgreen;  
 }

Penggunaanya dalam script HTML :

 <body class="warna">  
 </body>

Properti-properti CSS

Properti CSS jumlahnya sangat banyak, berikut beberapa diantaranya:

PSEDUO-CLASS

Adalah sebuah kelas semu yang dimiliki oleh elemen HTML, yang membuat kita dapat mendefinisikan style pada keadaan tertentu dari elemen tersebut. Pseduo-class terbagi menjadi beberapa type, sebagai berikut :

Yang berhubungan dengan link

: link
: hover
: active
: visisted

Yang berhubungan dengan posisi elemen (ada pada css 3)

: first-child
: last-child
: nth-child(n)
: first-of-type
: last-of-type

PADDING, MARGIN DAN BORDER

Dalam CSS dikenal istilah „Box Model‟.

Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam

Border : Adalah garis tepi dari komponen

Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border

CSS menggunakan konsep ini dalam mengatur tag-tag HTML. Pada gambar, bayangkan area „Content‟ misalnya adalah sebuah paragraph. Obyek paragraph ini akan dianggap CSS memiliki area padding, border, dan margin disekitarnya. Keberadaan area-area ini berguna untuk pengaturan tata letak. Misalnya ingin diatur agar 2 buah gambar yang terletak berdampingan tidak terlalu rapat, maka kita dapat memperbesar lebar dari area margin agar jarak antara gambar lebih lebar.

Padding

ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau Anda bisa menggunakan

padding-left:5px; ==> ini adalah untuk pengaturan padding bagian kiri

padding-right:5px; ==> ini adalah untuk pengaturan padding kanan

padding-top:5px; ==> untuk bagian atas dan

padding-bottom:5px; ==> untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti sesuai satuan yang lain yang sesuai

Border

Ditulis dengan CSS border:1px dotted #000000; ==> urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan

border-width:1px; ==> ini adalah ketebalan border

border-style:dotted; ==> ini adalah jenis bordernya bisa kamu ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya

border-color:#FFFFFF; ==> ini adalah warna dari border.. kamu bisa mengganti code warnanya (www.colorschemer.com/online)

Margin

Ditulis dengan CSS margin:5px 5px 5px 5px; ==> urutanya atas, kanan, bawah dan kiri,

atau bisa menngunakan seperti padding diatas

margin-left:5px;

margin-right:5px;

margin-top:5px;

margin-bottom:5px;

keterangan lainya bisa mengikuti keterangan padding diatas