Home Posts filed under CSS
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Thursday, July 6, 2017

√ Mengenal Apa Itu Css !

Comment


Dalam bahasa bakunya, menyerupai di kutip dari wikipedia, CSS ialah �kumpulan instruksi yang dipakai untuk mendefenisikan desain dari bahasa markup� , dimana bahasa markup ini salah satunya ialah HTML.

Untuk pengertian bebasnya, CSS ialah kumpulan instruksi jadwal yang dipakai untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita dapat mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua instruksi tag HTML.

CSS biasanya selalu dikaitkan dengan HTML, alasannya keduanya memang saling melengkapi. HTML ditujukan untuk menciptakan struktur, atau konten dari halaman web. Sedangkan CSS dipakai untuk tampilan dari halaman web tersebut. Istilahnya, �HTML for content, CSS for Presentation�.

Fungsi dan Kegunaan CSS

Awal mula diperlukannya CSS dikarenakan kebutuhan akan halaman web yang semakin kompleks. Pada awal kemunculan HTML, kita dapat menciptakan suatu paragraf bewarna merah dengan menulis pribadi instruksi tersebut didalam tag HTML, atau menciptakan latar belakang sebuah halaman dengan warna biru. Contoh instruksi HTML untuk hal itu ialah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
      <title>RuangIlmu</title>
</head>

<body>
  <p>
    CSS merupakan bahasanya <font color="red">desainer web</font>.
    Namun sebenarnya, apa itu CSS?
  <br />
    <font color="red">CSS </font> ialah kumpulan instruksi yang digunakan
    untuk mendefenisikan desain dari bahasa markup,
    <font color="red">salah satunya ialah HTML</font>.
  <br />
    Dengan CSS kita dapat mengubah desain dari
    <font color="red">text, warna, gambar dan latar belakang</font>
    dari (hampir) semua instruksi tag HTML.
  </p>
</body>
</html>


Menggunakan tag <font> untuk menciptakan beberapa kata di dalam paragraf tersebut berwarna merah. Hal ini tidak salah, dan semuanya berjalan sesuai keinginan. Untuk sebuah artikel yang mempunyai 5 paragraf, kita tinggal copy-paste tag <font color=�red�> pada kata-kata tertentu.

Namun sesudah website tersebut mempunyai katakanlah 50 artikel menyerupai diatas, dan alasannya sesuatu hal anda ingin merubah seluruh text merah tadi menjadi biru, maka akan dibutuhkan waktu yang usang untuk mengubahnya satu persatu, halaman per halaman.

Dalam kondisi inilah CSS mencoba �memisahkan� tampilan dari konten. Untuk paragraf yang sama, berikut instruksi HTML jika ditambahkan instruksi CSS:

<!DOCTYPE html>
<html>
<head>
   <title>RuangIlmu</title>
   <style type="text/css">
     .warna {
       color: red;
     }
   </style>
</head>
 
<body>
    <p>
      CSS merupakan bahasanya <span class=warna>desainer web</span>.
      Namun sebenarnya, apa itu CSS?
    <br />
      <span class=warna>CSS </span>adalah kumpulan kode
      yang dipakai untuk mendefenisikan desain dari bahasa markup,
      <span class=warna>salah satunya ialah HTML</span>.
    <br />
      Dengan CSS kita dapat mengubah desain dari
      <span class=warna>text, warna, gambar dan latar belakang</span>
      dari (hampir) semua instruksi tag HTML.
    </p>
</body>
</html>



Dalam pola CSS diatas, saya mengubah tag <font> menjadi tag <span>. Tag <span> sendiri merupakan tag yang tidak bermakna, namun dapat di kostumasi memakai CSS. Tag span saya tambahkan dengan atribut atribut class=�warna�. Atribut class mempunyai kegunaan untuk memasukkan instruksi CSS pada tag <style> di bab head.

Jika kita ingin merubah seluruh warna menjadi biru, maka tinggal mengubah isi dari CSS color: red menjadi color:blue, dan seluruh tag yang mempunyai class=�warna� akan otomatis bermetamorfosis biru.
Sumber http://informasigameindo11.blogspot.com

Wednesday, July 5, 2017

√ Cara Menginput Instruksi Css Ke Halaman Html !

Comment


Sebagaimana telah dipelajari pada ketika pembahasan perihal HTML, HTML pada dasarnya  yaitu kumpulan dari tag-tag yang disusun sehingga mempunyai bagian-bagian tertentu, menyerupai paragraf, list, tabel dan sebagainya. CSS dipakai untuk mendesain tag-tag HTML ini.

Secara garis besar, terdapat 3 cara menginput isyarat CSS ke dalam HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.

Metode Inline Style

Metode Inline Style yaitu cara menginput isyarat CSS eksklusif ke dalam tag HTML dengan memakai atribut style, pola penggunaan Metode Inline Style CSS yaitu sebagai berikut:

<!DOCTYPE html>
<html>
<head>
     <title>Contoh Inline Style CSS</title>
</head>
   <body>
      <h2 style="background-color:black; color:white" >
         Text ini akan bewarna putih dan background warna hitam
      </h2>
   </body>
</html>

Dalam isyarat diatas, aku menyisipkan atribut style pada tag <h2>, nilai dari atribut style ini yaitu isyarat CSS yang ingin diterapkan.

Penggunaan tag CSS menyerupai ini walaupun praktis, namun tidak disarankan, alasannya yaitu isyarat CSS eksklusif tergabung dengan HTML, dan tidak memenuhi tujuan dibuatnya CSS biar desain terpisah dengan konten.

Metode Internal Style Sheets

Metode Internal Style Sheets, atau disebut juga Embedded Style Sheets dipakai untuk memisahkan isyarat CSS dari tag HTML namun tetap dalam satu halaman HTML. Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah tag <style>. Tag style ini harus berada pada bab <head> dari halaman HTML.

Contoh penggunaan motode internal style sheets CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <style type="text/css">
        h2 {
        background-color:black;
        color:white;
        }
    </style>
</head>
<body>
    <h2>
        Text ini akan bewarna putih dan background warna hitam
    </h2>
</body>
</html>

Contoh metode internal style sheets diatas sudah jauh lebih baik daripada inline style, alasannya yaitu kita sudah memisahkan CSS dari HTML. Seluruh isyarat CSS akan berada pada tag head dari HTML.

Namun kekurangan menggunakan  internal style sheets, jikalau kita mempunyai beberapa halaman dengan style yang sama, maka kita harus menciptakan isyarat CSS pada masing-masing halaman tersebut. Hal ini sanggup diatasi dengan memakai metode external style sheets.

Metode External Style Sheets

Kekurangan dari metode internal style sheets sebelumnya yaitu jikalau ingin menciptakan beberapa halaman dengan tampilan yang sama, maka setiap halaman akan mempunyai isyarat CSS yang sama.

Metode External Style Sheets dipakai untuk �mengangkat� isyarat CSS tersebut kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan isyarat CSS, tinggal �memanggil� file CSS tersebut.

Masih memakai pola yang sama dengan internal style sheets, tahap pertama kita akan pindahkan isi dari tag <style> ke sebuah halaman baru, dan savelah sebagai belajar.css

Isi dari file belajar.css :

h2 {
background-color:black;
color:white;
}

Pastikan bahwa akhiran dari file tersebut yaitu .css dan untuk keperluan pola kali ini, savelah pada folder yang sama dengan halaman HTML kita.

Kembali kehalaman HTML, CSS menyediakan 2 cara untuk menginput Kode CSS tersebut ke halaman HTML, yang pertama yaitu memakai @import

Contoh penggunaan @import CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <style type="text/css">
        @import url(belajar.css);
    </style>
</head>
<body>
    <h2>
        Text ini akan bewarna putih dan background warna hitam
    </h2>
</body>
</html>

Untuk metode @import external style sheets ini, kita menyisipkan @import url(belajar.css); pada tag <style>. Alamat pada bab url sanggup berupa alaman relatif (seperti: folderku/belajar.css) maupun diktatorial (seperti www.googledrive.com/belajar.css).

Cara input kedua external style sheets, yaitu memakai tag <link>. Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <link rel="stylesheet" type="text/css" href="belajar.css">
</head>
<body>
    <h2>
        Text ini akan bewarna putih dan background warna hitam
    </h2>
</body>
</html>

Pada metode link external style sheets ini, kita memakai atribut href pada tag <link>, yang akan berisi alamat dari halaman CSS, dalam hal ini belajar.css

Dari ketiga jenis cara input CSS ke dalam halaman HTML, yang paling direkomendasikan yaitu metode external style sheets, baik memakai @import maupun dengan tag <link>. Karena dengan memakai isyarat CSS yang dipisahkan, seluruh halaman web sanggup memakai file CSS yang sama, dan jikalau kita ingin mengubah seluruh tampilan halaman website, kita hanya butuh mengubah 1 file CSS saja.


Sumber http://informasigameindo11.blogspot.com

√ Hukum Dan Cara Penulisan Isyarat Css !

Comment


Aturan dan Cara Penulisan Kode CSS

Untuk lebih gampang memahami hukum dan cara penulisan instruksi CSS, dibawah ini yakni pola instruksi HTML + CSS sederhana yang akan kita bahas secara lebih mendalam:

<!DOCTYPE html>
<html>
<head>
<title>RuangIlmu</title>
<style type="text/css">
body {
     font-size: 14px;
     color: navy;
     }
p {
    font-family: calibri, helvetica, sans-serif;
  }
h1, h2 {
        text-decoration: underline;
        font-size: 23px;
        color: green;
       }
</style>
 
</head>
<body>
   <h1>Belajar Aturan dan Cara Penulisan Kode CSS</h1>
   
   <h2>Lorem ipsum dolor sit amet</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Nulla bersahabat dolor, ullamcorper in ultricies eget,
   fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet.</p>
   
   <p>Eam facilis omittantur at, usu efficiantur neglegentur
   delicatissimi et, in per vero splendide persequeris.
   Semper persius his te, ea mea omnium aliquip alienum,
   in gloriatur vituperata has. An per dicat clita oporteat,
   explicari deterruisset ex per. Liber tibique ullamcorper
   ei duo, at hinc civibus oporteat his.</p>

   <p>Nam verear constituto an, eu latine bonorum euripidis
   vim. Quidam maiorum interesset pri id, usu vero saepe
   graeci ea. Prompta nominati oportere te usu.
   Ad eam nulla accusamus.</p>
   
   <h2>Lorem ipsum dolor sit amet</h2>
   <p>Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla bersahabat dolor, ullamcorper in ultricies eget,
   fermentum rhoncus leo. Curabitur eu mi vitae
   metus posuere laoreet.</p>
 
</body>
</html>

Kode HTML di atas mempunyai instruksi CSS pada belahan head yang diinput memakai motode Metode Internal Style Sheets. Kita akan fokus pada belahan CSS saja:

body {
     font-size: 14px;
     color: navy;
     }
p {
    font-family: calibri, helvetica, sans-serif;
  }
h1, h2 {
        text-decoration: underline;
        font-size: 23px;
        color: green;
       }

Seperti yang sanggup dilihat dari pola diatas, hukum penulisan CSS yakni sebagai berikut:
  • Selector di tempatkan pada awal penulisan CSS. Dalam pola diatas, body, p, h1 dan h2 yakni selector. Khusus untuk selector yang lebih dari 1 (seperti pada pola selector terakhir: h1,h2) untuk memisahkan kedua selector tersebut, dipakai tanda koma (,)
  • Setelah penulisan selector, seluruh isi dari property dan valuenya (nilainya), berada di antara kurung kurawal �{� dan �}�.
  • Diantara property satu dengan yang lainnya, dipisahkan dengan tanda titik koma (;)
  • Diantara property dengan value (nilai), dipisahkan dengan anda titik dua (:).
  • Untuk property yang mempunyai 2 kata , spasi diantaranya digantikan dengan tanda hubung (-), contohnya: background-color dan border-left. 
  • Untuk properti yang berada pada baris terakhir, kita boleh mengabaikan tanda �;� sebagai tanda tutup, tetapi disarankan semoga tetap memakai tanda �;�, sebab sanggup saja kita lupa menuliskan tanda titik koma pada dikala menambahkan properti lainnya. Contoh property tanpa tanda �;� sanggup di lihat pada pola �text-decoration: underline�.


Sumber http://informasigameindo11.blogspot.com

Tuesday, July 4, 2017

√ Mengenal Pengertian Selector, Property Dan Value Pada Css !

Comment


Setelah mengetahui cara menginput aba-aba CSS ke halaman HTML, saatnya untuk memahami aba-aba CSS itu sendiri. Kali ini kita akan membahas inti dari CSS, yakni Pengertian Selector, Property dan Value pada CSS.

Pengertian Selector CSS

Karena aba-aba CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS membutuhkan suatu cara untuk �mengaitkan� atau menghubungkan aba-aba CSS dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam CSS.

Sesuai dengan namanya, selector digunakan untuk mencari bab web yang ingin dimanipulasi atau yang ingin di-style. Misalnya : �cari seluruh tag <p>�, atau �cari seluruh tag HTML yang mempunyai atribut class=�warning�� atau �cari seluruh link yang ada di dalam tag <p>�.

Selector paling dasar dari CSS yakni tag dari HTML itu sendiri, misalnya: tag p, i, h1, li, dll. Selector didalam CSS sanggup menjadi kompleks tergantung kebutuhannya. Mengenai selector, akan kita bahas secara lebih detail dalam tutorial-turorial CSS selanjutnya.

Pengertian Property CSS

Property CSS yakni jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS mempunyai puluhan property yang sanggup digunakan biar menampilkan hasil simpulan yang kita inginkan. Hampir semua property dalam CSS sanggup digunakan untuk seluruh selector.

Jika selector digunakan contohnya untuk �mencari seluruh tag <p>�, maka property yakni �efek apa yang ingin dimanipulasi dari tag p tersebut�, menyerupai ukuran text, warna text, jenis fontnya, dll.

Pengertian Value CSS

Value CSS yakni nilai dari property. Misalkan untuk property background-color yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya sanggup berupa red, blue, black, atau white.

Selector, Property dan Value ini yakni elemen inti dari CSS, 90% tutorial yang akan kita pelajari mengenai CSS akan membahas wacana ketiga aspek ini.
Sumber http://informasigameindo11.blogspot.com

√ Mengenal Jenis-Jenis Selector Dasar Css !

Comment


Selector ialah sebuah pola (pattern) yang digunakan untuk �mencari� suatu tag di dalam HTML. Analogi untuk selector, misalnya: mencari semua tag p, atau mencari seluruh tag h1 yang mempunyai atribut class=judul.

Universal Selector

Universal selector hanya ada 1 di dalam CSS, yaitu tanda bintang �*�. Selector ini bertujuan untuk �mencari� semua tag yang ada.

* {
   color: blue;
   background-color: white;
  }

Kode CSS diatas bermaksud untuk menciptakan seluruh tag HTML berwarna biru, dan background berwarna putih.

Element Type Selector

Element Type Selector atau Tag Selector ialah istilah untuk selector yang nilainya merupakan tag HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selector, dan seluruh tag tersebut akan ditangkap oleh selector ini.

h1 {
   text-decoration: underline;
   }

p {
  font-size:14px;
  }

Contoh aba-aba CSS diatas akan menciptakan semua tag <h1> akan bergaris bawah, dan seluruh tag <p> akan berukuran 14pixel.

Efek dari element type selector ialah dari awal tag, hingga simpulan tag. Jika didalam tag <p> terdapat tag <i>, maka tag tersebut juga akan berukuran 14 pixel, hingga ditemui tag epilog </p>.

Class Selector

Class Selector merupakan salah satu selector yang paling umum dan paling sering digunakan. Class Selector akan �mencari� seluruh tag yang mempunyai atribut class dengan nilai yang sesuai.

Untuk penggunaan Class Selector, kita harus mempunyai tag HTML yang mempunyai atribut class. Contohnya:

<p class=�paragraf_pertama�> Ini ialah sebuah paragraf pertama</p>

<h1 class=�judul�>Judul Artikel</h1>

<h2 class=�judul penting berwarna�>Sub Judul Artikel<h2>

Perhatikan bahwa untuk semua tag diatas, kita menambahkan atribut class dengan nilainya ialah nama dari kelas itu sendiri. Sebuah nama class sanggup dimiliki oleh lebih dari 1 tag, dan dalam sebuah tag sanggup mempunyai lebih dari 1 class.

Contohnya dalam baris terakhir pada rujukan diatas,tag h2 mempunyai atribut class=�judul penting berwarna�. Tag ini teridiri dari 3 class, yaitu judul, penting, dan class berwarna.

Sedangkan untuk aba-aba CSS Class Selector ialah sebagai berikut:

.paragraf_pertama {
                  color: red;
                  }

.judul {
       font-size:20px;
       }
   
.penting {
       color:red;
       font-size: 1em;
       }

Untuk memakai class selector, di dalam CSS kita memakai tanda titik sebelum nama dari class.

Untuk rujukan kita, seluruh class yang mempunyai nilai �paragraf_pertama�, warna text akan menjadi merah. Dan seluruh class judul akan mempunyai font 20 pixel.

ID Selector

ID Selector gotong royong dengan class selector merupakan selector paling umum dan juga sering digunakan (walau tidak sesering class selector). Penggunaan ID selector hampir sama dengan class selector, dengan perbedaan kalau pada Class Selector kita memakai atribut class untuk tag HTML, untuk ID selector, kita memakai atribut id.

Contoh penggunaan atribut id pada tag HTML

<p id=�paragraf_pembuka�> Ini ialah sebuah paragraf pembuka</p>

<h1 id=�judul_utama�>Judul Artikel</h1>

<h2 id=�sub_judul�>Sub Judul Artikel<h2>

Atribut id selain untuk selector CSS, juga berperan sebagai aba-aba unik untuk masing-masing tag (terutama digunakan untuk aba-aba JavaScript). Karena hal tersebut, id yang digunakan harus unik dan dihentikan sama. Dengan kata lain, id hanya bisa digunakan satu kali dalam sebuah halaman web dan dihentikan sama.

Contoh penggunaan id selector aba-aba CSS Class Selector ialah sebagai berikut:

#paragraf_ pembuka {
                   color: red;
                   }

#judul utama {
             font-size:20px
             }

Di dalam aba-aba CSS, kita memakai tanda pagar �#� sebagai penanda bahwa kita mencari tag yang mempunyai id tersebut.

Attribute Selector

Selector dasar terakhir kita ialah attribute selector. Selector ini sedikit lebih advanced dibandingkan dengan selector-selector sebelumnya. Atribut Selector ini digunakan untuk mencari seluruh tag yang mempunyai atribut yang dituliskan.

Contoh penggunaan Attribute Selector aba-aba CSS ialah sebagai berikut:

[href] {
       font-size:20px ;
       }

[type="submit"] {
                width:30px;
                }

Seperti yang sanggup dilihat dari rujukan diatas, setiap atribut selector harus berada diantara tanda kurung siku �[� dan �]�.

[href] akan cocok dengan seluruh tag yang mempunyai atribut href, apapun nilai dari href (href biasanya terdapat pada tag <a>). Untuk rujukan [type=�submit�] akan cocok dengan tag yang mempunyai atribut type dengan nilai submit, yang dalam hal ini ialah tombol submit dalam form.

Walaupun mempunyai kemampuan mencari tag yang sangat spesifik, namun atribut selector ini tidak terlalu sering digunakan.

Selain kelima selector dasar diatas, CSS masih mempunyai selector yang lebih �jauh� dalam menentukan tag yang akan dimanipulasi, salah satu contohnya, menyerupai pseudo selector yang digunakan untuk tiap event dari link, atau dikenal dengan efek mouseover, yaitu kita mencari kondisi pada ketika mouse berada di atas tag tertentu.



Sumber http://informasigameindo11.blogspot.com

√ Cara Penggunaan Selector Css !!

Comment


Cara Penggunaan Selector CSS

Pada tutorial CSS sebelumnya, kita telah mengenal 5 jenis selector dalam CSS, yaitu Universal Selector, Tag Selector, Class Selector , ID Selector, dan Attribute Selector. Selector tersebut tidak hanya bangun sendiri, namun sanggup digabung menjadi sebuah selector yang lebih spesifik.

CSS memungkinkan kita untuk menggabungkan beberapa jenis selector menjadi sebuah selector gabungan, contohnya kita butuh selector untuk mencari seluruh tag <em> yang berapa di dalam tag <h1>, atau seluruh tag <h1> yang didalamnya terdapat tag <a> dengan class �judul�.

<!DOCTYPE html>
<html>
    <head>
    <title>RuangIlmu</title>

    <style type="text/css">
    </style>

</head>
<body>
  <h2 class="judul">Belajar CSS</h2>
    <p> Ini <strong>adalah</strong> sebuah <em>paragraf</em> </p>

    <p id="belajar_html" class="paragraf" >Saya sedang mencar ilmu HTML dari
    <a href="http://www.ruangilmu.ga/" target="_blank">RuangIlmu</a>
    akan terbuka pada tab baru</p>

    <p id="belajar_css" class="paragraf">
    Saya sedang mencar ilmu CSS, mohon jangan diganggu</p>

    <br />

    <h3 class="judul subheader">Daftar Belanjaan</h3>
    <ol>
          <li><em>Minyak Goreng</em></li>
          <li>Sabun Mandi</li>
          <li>Deterjen</li>
          <li>Shampoo</li>
          <li>Obat Nyamuk</li>
    </ol>
 </body>
</html>

Halaman HTML diatas merupakan halaman HTML sederhana yang terdiri dari tag header (<h2>), paragraf(<p>), dan list (<ol>). Jika anda belum memahami tag-tag HTML diatas, keseluruhan tag ini telah kita bahas pada Tutorial Belajar HTML.

Perhatikan juga pada bab <head> dari belajar_css.html tersebut aku juga menyediakan tag <style> yang sebentar lagi akan kita isi dengan CSS. Beberapa dari tag HTML yang ada juga telah mempunyai atribut menyerupai �class� dan �id� yang siap di-�style� memakai CSS.


1. Membuat seluruh tag header <h2> berwarna biru

Karena kita menginginkan seluruh tag berwarna biru, maka tinggal memakai CSS Tag Selector. Inputkan kode CSS berikut diantara tag <style> dan </style> pada bab head:

h2 {
   color: blue;
   }


2. Membuat seluruh tag header <h3> juga berwarna biru

Untuk keperluan ini, kita tinggal menambahkan kode CSS menyerupai pola <h2> sebelumnya, sebagai berikut:

h2 {
   color: blue;
   }
h3 {
   color: blue;
   }

Namun CSS mempunyai cara yang lebih efisien kalau yang kita inginkan ialah style yang sama untuk kedua tag. Kita sanggup menggabungkan kode CSS diatas menjadi:

h2 , h3 {
        color: blue;
        }

Tanda koma (�,�) sebagai pemisah menginstruksikan kepada browser bahwa kedua tag akan berwarna biru. Tidak ada batasan seberapa banyak selector yang sanggup digunakan. Katakan kita ingin seluruh tag header dari <h1> hingga <h6> bewarna biru, maka kode CSSnya adalah:

h1 , h2, h3 , h4, h5 , h6{
    color: blue;
    }


3. Seluruh tag <strong> yang berada di dalam tag <p> berwarna merah

Jika yang kita maksud ialah seluruh tag <strong> dimanapun tag tersebut berada, maka kode CSSnya cukup sebagai berikut:

strong {
       color:red;
       }

Namun kode CSS tersebut akan menciptakan seluruh tag <strong> dimanapun, termasuk tag <strong> yang berada di dalam tag <h1> akan berwarna merah. Sehingga, kalau ditambahkan syarat hanya untuk tag <strong>yang berada di dalam tag <p>, maka kita harus menulis selector CSS menjadi:

p strong {
     color:red;
     }

Maksud dari kode �p strong� ialah seluruh tag <strong> yang berada di dalam tag <p>. perhatikan bahwa kedua tag dipisahkan dengan tanda spasi. (Selector: p strong, berbeda pengertiannya dengan selector: p, strong)

Untuk pola extreme, katakan kita mempunyai halaman HTML yang cukup rumit, sehingga kita menginginkan warna merah untuk �seluruh tag <i> yang berada di dalam tag <span>, dimana tag <span> tersebut harus berada di dalam tag <h2>�, maka kode CSSnya adalah:

h2 span i {
      color:red;
      }

Yang perlu diingat dalam urutan ini adalah: tag yang dikenai style hanya tag yang paling terakhir, dimana dalam pola diatas, hanya tag <i> saja yang akan bewarna merah.


4. Seluruh tag <h2> yang mempunyai class judul, dan seluruh tag yang mempunyai class paragraf menjadi italic (huruf miring)

Prinsip dari penggabungan ini sama dengan tujuan 1 hingga 3 sebelumnya, cuma kali ini kita harus memakai class selector. Kode CSS untuk keperluan itu adalah:

h2.judul , .paragraf {
      font-style: italic;
      }

h2.judul diharapkan untuk mencari seluruh tag h2 dengan class judul, sedangkan .paragraf dipakai untuk mencari seluruh tag yang mempunyai class paragraf, apapun tag tersebut.


5. Ubah ukuran text menjadi 14pt untuk tag yang mempunyai id �belajar_html�, tag p dengan id �belajar_css� dan seluruh tag h3 yang mempunyai class �subheader�

Tujuan diatas terkesan rumit, namun kalau anda telah paham tujuan 1 hingga dengan 4 sebelumnya, maka kode CSS berikut akan menjelaskannya:

#belajar_html, p#belajar_css, h3.subheader {
       font-size:14pt;
       }

Sebagai penutup, hasil final dari halaman HTML belajar_css.html kita ialah sebagai berikut

<!DOCTYPE html>
<html>
    <head>
    <title>RuangIlmu</title>

    <style type="text/css">
        h2 , h3{
          color: blue;
          }
        p strong {
          color:red;
          }
        h2.judul , .paragraf {
          font-style: italic;
          }
        #belajar_html, p#belajar_css, h3.subheader {
          font-size:14pt;
          }
     </style>
</head>
<body>
  <h2 class="judul">Belajar CSS</h2>
    <p> Ini <strong>adalah</strong> sebuah <em>paragraf</em> </p>

    <p id="belajar_html" class="paragraf" >Saya sedang mencar ilmu HTML dari
    <a href="http://www.ruangilmu.ga/" target="_blank">RuangIlmu</a>
    akan terbuka pada tab baru</p>

    <p id="belajar_css" class="paragraf">
    Saya sedang mencar ilmu CSS, mohon jangan diganggu</p>

    <br />

    <h3 class="judul subheader">Daftar Belanjaan</h3>
    <ol>
          <li><em>Minyak Goreng</em></li>
          <li>Sabun Mandi</li>
          <li>Deterjen</li>
          <li>Shampoo</li>
          <li>Obat Nyamuk</li>
    </ol>
 </body>
</html>

Sampai disini setidaknya anda sudah sanggup membaca maksud dari sebagian besar selector dalam CSS. Sebagai contoh, anda tentunya tidak resah membaca kode CSS berikut:

table#daftar_hadir, table#daftar_kuliah {
    font-size:14pt;
    }

div.header, div.footer, div#main_menu {
    width:960px;
    }

Terlepas dari maksud property CSS menyerupai font-size:14pt; dan width:960px; (yang akan kita pelajari nantinya), pola selector CSS yang kedua merupakan selector yang sering dipakai untuk manipulasi tag div dalam merancang layout desain web.


Sumber http://informasigameindo11.blogspot.com

Sunday, June 18, 2017

√ Urutan Prioritas Selector Css (Cascading) !

Comment


Di dalam CSS, sebuah tag sanggup mempunyai lebih dari dari satu isyarat CSS. Dalam tutorial mengenal Urutan Prioritas Selector CSS ini kita akan membahas urutan atau prioritas dari isyarat CSS yang akan digunakan oleh tag HTML, atau dikenal dengan istilah Cascading.

Pengertian Cascading dari CSS

CSS yaitu abreviasi dari Cascading Style Sheet, dimana cascade dalam bahasa inggris sanggup berarti riam kecil yang berjatuhan dari atas ke bawah. Di dalam CSS, maksud dari cascading ini yaitu style yang sanggup ditimpa atau menimpa style lain sesuai urutannya, atau kita sebut saja sebagai prioritas CSS.

Mengenai kata �prioritas� untuk isyarat CSS, aku akan bagi menjadi 2 bagian, pada artikel ini hanya akan membahas ihwal prioritas atau urutan dari isyarat CSS kalau dilihat dari �sumber� isyarat tersebut. Kita akan menguji prioritas dari external style sheet, internal style sheet, dan inline style CSS. Pada tutorial berikutnya kita akan membahas ihwal prioritas CSS dilihat dari kespesifikannya.

Efek Cascading menurut sumber isyarat CSS

Misalkan kita mempunyai sebuah tag header <h2>, kemudian ingin menciptakan isyarat CSS memakai external style sheet untuk merubah tag header tersebut menjadi biru. Namun pada ketika yang sama kita  juga menciptakan internel style sheet untuk mengubahnya menjadi warna merah, maka warna apakah yang akan tampil di browser?

Untuk mengujinya, marilah kita mencobanya secara langsung, langkah pertama, buatlah sebuah file CSS yang akan diimport, misalkan prioritas.css, ketikkan isyarat CSS berikut:

h2 {
    color:blue;
   }

Lalu sebagai sample HTML, aku memakai prioritas.html, savelah kedua file pada folder yang sama:

<!DOCTYPE html>
<html>
<head>
   <title>Contoh Kasus Cascading CSS</title>
   <link rel="stylesheet" type="text/css" href="prioritas.css">        
   <style type="text/css">
            h2 {
               color:red;
               }
    </style>
</head>

<body>
   <h2>
       Akan berwarna apa saya?..1
   </h2>

   <h2 style="color:green">
       Akan berwarna apa saya?..2
   </h2>
</body>
</html>

Perhatikan bahwa sebelum tag <style>, aku �memanggil� file prioritas.css terlebih dahulu. Lalu pada tag <h2> yang kedua aku menambahkan atribut �color:green� pada tag <h2>.

Jika kita menjalankan isyarat HTML diatas, warna text pada kedua tag <h2> akan bewarna merah dan biru, dan tidak ada yang bewarna biru.

Dari teladan sederhana diatas, tag <h2> bersama-sama �dikenakan� atau �diubah� oleh 3 property CSS yang sama secara bersamaan, yakni ketiga selector tersebut ingin mengubah warna text dari tag <h2>, namun hanya ada satu isyarat yang akan �menang�.

Dalam dilema �timpa-menimpa� ini,  CSS mempunyai hukum prioritas tersendiri. Jika terdapat property CSS yang saling �bentrok�,  maka urutan prioritasnya yaitu sebagai berikut (dari yang paling kuat):

  • Inline style, yakni style yang eksklusif menempel pada tag.
  • Internal style, yakni style yang dideklarasikan pada awal halaman (tag <style>)
  • Eksternal style, yakni style yang dideklarasikan pada sebuah file .css , dan dipanggil melalui tag <link> atau @import

Maka kalau melihat sekali lagi isyarat HTML diatas, text �Akan berwana apa saya?..1� akan berwarna merah alasannya yaitu internal style color:red lebih menerima prioritas lebih tinggi daripada external style color:blue.

Sedangkan text �Akan berwana apa saya?..2� berwarna hijau alasannya yaitu inline style color:green lebih menerima prioritas daripada external style color:blue maupun internal style color:red.

Selain prioritas antar �sumber� isyarat CSS tersebut, proses cascading atau prioritas CSS juga masih berlanjut untuk isyarat CSS dalam file yang sama.
Sumber http://informasigameindo11.blogspot.com

Saturday, June 17, 2017

√ Mengenal Sifat Penurunan Dalam Css (Inheritance) !

Comment


Pengertian Inheritance dalam CSS

Inheritance dalam CSS yaitu sifat penurunan efek CSS dari sebuah tag HTML kepada tag HTML lainnya. Syarat untuk inheritance adalah: tag tersebut harus berada di dalam tag lainnya.

Di dalam HTML, setiap tag umumnya akan berada di dalam tag lain. Untuk seluruh tag HTML, akan berada di dalam tag <html>, dan untuk seluruh tag yang tampil di web browser akan berada di dalam tag <body>.

<div><p>Saya sedang mencar ilmu <em>inheritance</em> CSS</p></div>

Dari rujukan diatas, tag <p> berada di dalam tag <div>, sehingga sanggup dikatakan tag <div> yaitu induk (parent) dari tag <p>. Sedangkan tag <em> yang berada di dalam tag <p> merupakan anak (child) dari tag <p> dan grandchild dari tag <div>.

Jika kita menciptakan arahan CSS sebagai berikut:

div {
color:green;
}

Maka efek dari arahan CSS tersebut akan menciptakan seluruh text di dalam tag <div> akan berwarna hijau, walapun di dalam tag <div> juga terdapat tag-tag lainnya. Dapat dikatakan bahwa efek CSS tersebut diturunkan (inherit) dari tag induk <div> kepada tag anak <p> dan <em>.

Namun perlu diperhatikan bahwa tidak semua property CSS akan diturunkan dari tag induknya. Misalnya property border, hanya berlaku untuk satu tag induk saja dan tidak akan diturunkan kepada tag anak.

Property menyerupai background-color yang dipakai untuk mengubah warna latar belakang sebetulnya juga tidak diturunkan, namun �seolah-olah� diturunkan. Hal ini terjadi alasannya nilai �default� dari property background-color yaitu �transparent�, dimana warna latar belakang tag induk akan dilewatkan, sehingga seperti juga bewarna menyerupai induknya.

Mengenal Nilai Property: inherit

Untuk �memaksa� proses penurunan, CSS mempunyai nilai property: inherit. Jika sebuah arahan CSS mempunyai nilai property inherit, maka property tersebut akan mencopy nilai dari tag induk (parent).

Sebagai contoh, alasannya property border secara default tidak diturunkan, maka kita akan mencoba nilai inherit pada property border.

Contoh HTML yang akan kita gunakan yaitu inherit.html:

<!DOCTYPE html>
<html>
<head>
   <title>Contoh Inheritance dalam CSS</title>
   <style type="text/css">
      div.satu {
            border: 1px solid black;
            color: blue;
      }

      div.dua {
            border: 1px solid black;
      }
      p.dua {
            border: inherit;
      }
    </style>
</head>

<body>
   <div class="satu">
     <p class="satu">
      Kalimat ini tanpa <em class="satu">nilai property inherit</em> CSS
     </p>
   </div>
   <br />
   <div class="dua">
     <p class="dua">
       Kalimat ini memakai <em class="dua">nilai property inherit</em> CSS
     </p>
   </div>
</body>
</html>

Dalam rujukan arahan HTML diatas, saya memakai dua kalimat yang mempunyai nama class yang berbeda, yakni class satu dan class dua.

Pada class=�satu�, saya hanya menciptakan property border dan color pada tag div.satu. Karena prinsip inheritance dalam CSS, seluruh kalimat pada tag <div> yang mempunyai class=�satu� akan berwarna biru (sesuai dengan sifat inheritance-nya), namun efek border tidak diturunkan kepada tag <p>.

Pada class=�dua�, saya menambahkan nilai inherit untuk property border pada tag <p>. Hasil dari nilai inherit ini akan menciptakan tag <p> juga mempunyai border yang sama dengan yang didefenisikan pada tag induknya.

Sifat inheritance CSS ini akan memudahkan dalam desain web, alasannya bila kita ingin menciptakan seluruh goresan pena menjadi warna dan ukuran tertentu, cukup dengan menciptakan style untuk tag induk, maka seluruh tag yang berada di dalamnya akan ikut berubah.

Misalkan kita ingin seluruh font berukuran 14px, maka arahan CSSnya, cukup dengan:

body {
font-size: 14px;
}

Dan seluruh tag yang berada di dalam tag body (hampir semua tag merupakan child dari tag body), ukuran fontnya akan bermetamorfosis 14px.
Sumber http://informasigameindo11.blogspot.com

√ Urutan Prioritas Selector Css (Specificity) !

Comment


Pengertian ke-spesifik-an selector CSS

Jika pada tutorial sebelumnya kita telah membahas ihwal urutan prioritas CSS menurut sumber isyarat CSS tersebut (dimana inline style mempunyai prioritas terkuat), pada artikel kali ini kita akan melihat urutan prioritas isyarat CSS jikalau seluruh isyarat CSS tersebut berada dalam file yang sama. Dalam masalah ini kita akan mempelajari apa yang akan terjadi jikalau beberapa isyarat CSS yang dibentuk saling menimpa.

<!DOCTYPE html>
<html>
<head>
   <title>Contoh Kasus Spesifik CSS</title>
   <style type="text/css">
            p  {
               color:red;
               }
            div p {
               color:green;
               }
            #aaa{
               color:orange;
               }
            body div p {
               color:yellow;
               }
            div p.kalimat {
               color:silver;
               }
    </style>
</head>

<body>
   <div>
    <p id="aaa">
        Sedang Belajar CSS...
    </p>
   </div>
</body>
</html>

Sebelum anda menjalankan file spesifik.html tersebut, silahkan perhatikan terlebih dahulu defenisi CSS diatas. Terdapat 5 jenis selector yang �mencoba� untuk merubah warna sebuah paragraf. Dan silahkan tebak akan bewarna apa paragraf �Sedang Belajar CSS��.

Dan, menyerupai yang kita lihat, paragraf tersebut tampak berwarna orange, dimana selector CSS �#aaa� yaitu daerah pendefenisisan warna �color:orange�, namun bagaimana ini sanggup terjadi? bagaimana dengan ke-4 defenisi lainnya?

Jawabannya: sebab selector #aaa dianggap paling spesifik atau paling detail dari ke-5 selector lainnya.

Cara Menghitung ke-spesifik-an Selector CSS

CSS mempunyai hukum tertentu ihwal ke-spesifik-an selector, yaitu dikala sebuah property dari CSS, saling menimpa satu sama lain, selector yang paling spesifik lah yang akan menang.

Aturan ke-spesifik-an CSS dihitung memakai formula 4 digit, contohnya: 0,1,0,0. Perhitungannya sama menyerupai hitung-hitungan kita sehari-hari, dimana 0,1,0,0 lebih besar dari 0,0,1,5, atau biar lebih gampang nilai 0,1,0,0 sanggup ditulis menjadi 0100, dan nilai 0,0,1,5 menjadi 0015.

Berikut yaitu nilai CSS Specificity untuk selector di dalam CSS:

  •     Setiap element/tag selector bernilai 0,0,0,1
  •     Setiap class selector, attribut selector bernilai 0,0,1,0
  •     Setiap ID selector bernilai 0,1,0,0
  •     Setiap inline style bernilai 1,0,0,0

Dengan memakai hukum tersebut, mari kita hitung angka ke-spesifik-an dalam referensi sebelumnya.

  •     Selector p, hanya terdiri dari 1 tag selector, maka nilainya: 0,0,0,1
  •     Selector div p, terdiri dari 2 tag selector, maka nilainya: 0,0,0,2
  •     Selector #aaa, terdiri dari 1 ID selector, maka nilainya: 0,1,0,0
  •     Selector body div p, terdiri dari 3 tag selector, maka nilainya: 0,0,0,3
  •     Selector div p.kalimat, terdiri dari 1 class selector dan 2 tag selector, maka nilainya: 0,0,1,2

Dari hasil yang kita peroleh, maka selector #aaa mempunyai nilai paling tinggi, yaitu 0,1,0,0. Maka, sebab itulah paragraf dalam referensi spesifik.html akan bewarna orange.

Sering kali dalam merancang sebuah website yang cukup kompleks, kita akan sering dibentuk pusing dan bertanya-tanya kenapa style yang telah ditulis tidak merubah isyarat HTML yang ada, atau tidak berefek apa-apa. Mungkin jawabannya yaitu nilai selector tersebut tertimpa oleh nilai selector lain yang lebih spesifik. Memahami hukum prioritas dan ke-spesifik-an CSS ini sangat penting untuk menghindari hal tersebut.

Mengenal perintah !important

Jika hukum prioritas diatas tidak cukup, CSS menyediakan �senjata� pamungkas, yaitu memakai perintah !important.

Perintah !important diletakkan di belakang propery dari CSS, dan perintah !important ini akan mengambil alih urutan prioritas CSS yang kita pelajari diatas. Mari kita ubah spesifik.html dengan menambahkan perintah !important.

<!DOCTYPE html>
<html>
<head>
   <title>Contoh Kasus Spesifik CSS !important</title>
   <style type="text/css">
            p  {
               color:red !important;
               }
            div p {
               color:green;
               }
            #aaa{
               color:orange;
               }
            body div p {
               color:yellow;
               }
            div p.kalimat {
               color:silver;
               }
    </style>
</head>

<body>
   <div>
    <p id="aaa" class="kalimat">
        Sedang Belajar CSS...
    </p>
   </div>
</body>
</html>

Perhatikan tamat baris pada selector p, aku menambahkan perintah !important diakhir property, dan menyerupai yang sanggup ditebak, paragraf kita kini akan berwarna merah.

Penggunaan perintah !important sebaiknya dipakai jikalau memang sudah terdesak dan sedapat mungkin dihindari,. Hal ini sebab perintah !important akan mengubah urutan prioritas dan akan menyulitkan perancangan CSS.
Sumber http://informasigameindo11.blogspot.com

√ Penulisan Aba-Aba Warna Pada Css !

Comment


Mengenal Model Warna RGB

Dalam desain di media visual menyerupai televisi maupun monitor komputer, model warna yang dipakai yaitu model warna RGB (Red Green Blue). Disebut RGB, alasannya yaitu warna merah, hijau dan biru inilah dasar dari warna lainnya. Warna menyerupai kuning, coklat, pink, hitam dan putih berasal dari perpaduan ketiga warna ini.

Didalam desain web, CSS mendukung hingga 16.777.216 kombinasi warna. Warna ini berasal dari perpaduan warna merah, hijau dan biru tersebut. Masing-masing warna dasar ini sanggup bernilai 0 hingga 255, dimana 0 yaitu tanpa warna, 255 yaitu warna maksimal. Dalam dunia ilmu komputer, kombinasi warna ini dikenal dengan 24bit warna, atau disebut juga true color. Perpaduan ketiga warna ini akan memberi kita 256 kombinasi merah x 256 kombinasi hijau x 256 kombinasi biru = 16.777.216 kombinasi warna.

Misalkan, untuk mendapat warna kuning, bergotong-royong warna kuning yaitu perpaduan warna merah dan hijau. Untuk mendapat warna kuning terang, maka kita harus mencampurkan merah sebanyak 255, hijau sebanyak 255, dan biru sebanyak 0.

Format #RRGGBB

Format penulisan warna #RRGGBB yaitu yang paling terkenal dipakai untuk CSS. Dimana RR yaitu nilai untuk warna merah, GG untuk hijau, dan BB untuk warna biru. Masing-masing nilai ini berisi angka 00 hingga dengan FF. Kenapa FF? Karena CSS memakai angka hexadesimal. FF yaitu nilai maksimal, equivalen dengan 255 dalam nilai desimal

Contohnya, #FF0000 yaitu warna merah �murni�, #00FF00 yaitu warna hijau murni, sedangkan #777777 yaitu aba-aba untuk warna silver.

Format #RGB

Selain memakai format warna 6 digit, CSS juga mendukung penulisan 3 digit. Format penulisan 3 digit ini merupakan penulisan singkat dari 6 digit. Contohnya #RGB merupakan penulisan singkat dari #RRGGBB, #F0F yaitu abreviasi dari #FF00FF, #09A sama dengan #0099AA (merah=00, hijau=99, biru=AA).

Penulisan Desimal

Selain penulisan hexadesimal, CSS juga menyediakan penulisan warna memakai angka desimal. Format penulisannya adalah: rgb(0, 160, 255) atau rgb(0%, 63%, 100%), dimana urutan warna yaitu merah, hijau, dan biru. Menggunakan format pertama, 255 sama dengan 100%. Jika kita menuliskan nilai diluar dari angka yang seharusnya, yakni 0 � 255 atau 0% � 100% maka CSS secara otomatis akan menyamakannya dengan nilai yang terdekat. Format penulisan warna menyerupai ini tidak terlalu sering digunakan.

Kata Warna (Keyword)

Selain memakai aba-aba warna dengan format RGB, CSS juga mendukung 17 kata warna dalam bahasa inggris, yakni: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, dan yellow. Kata-kata ini berasal dari warna dasar VGA pada Windows dan dikenal juga dengan istilah classic internet color. Berikut tabel lengkap kata warna CSS:


Selain tabel warna standar di atas, beberapa modern web browser juga mendukung keyword warna yang disebut 147 SVG colors (atau X11 colors). List lengkap untuk keyword warna perhiasan ini sanggup dilihat di : https://developer.mozilla.org/en-US/docs/CSS/color_value.

Nilai property: Transparent

Pada perkara tertentu, kita ingin sebuah tag dalam CSS menjadi transparan, untuk keperluan ini CSS menyediakan keyword transparent sebagai nilai. Dengan menawarkan nilai transparan, sebuah tag akan �melewatkan� warna dari tag dibelakangnya.

Sebagai teladan penggunaan aba-aba warna diatas, aku akan menampilkannya dalam file warna.html sebagai berikut:

<!DOCTYPE html>
<html>
<head>
   <title>Contoh Penulisan Kode Warna CSS</title>
   <style type="text/css">
            p.satu {
            color:#0000FF;
            }
            p.dua {
            color:#F00;
            }
            p.tiga {
            color:rgb(10, 255, 10);
            }
            p.empat {
            color:orange;
            }
            p.lima{
            color:transparent;
            }
    </style>
</head>

<body>
       <p class="satu">
          Kalimat ini akan berwarna biru
       </p>
   <br />
       <p class="dua">
          Kalimat ini akan berwarna merah
       </p>
   <br />
       <p class="tiga">
          Kalimat ini akan berwarna hijau
       </p>
   <br />
       <p class="empat">
          Kalimat ini akan berwarna orange
       </p>
   <br />
       <p class="lima">
          Kalimat ini tampaknya tidak akan terlihat
       </p>
</body>
</html>

Seperti yang terlihat dari aba-aba HTML di atas, setiap kalimat diset memakai aba-aba warna yang berbeda-beda. Yang menjadi menarik, nilai transparent yang diberikan kepada selector class=�lima� menjadi tidak terlihat, dan hanya terlihat kalau di blok.
Sumber http://informasigameindo11.blogspot.com

Friday, June 16, 2017

√ Mengenal Satuan Nilai (Value) Dalam Css !

Comment



Dalam merancang halaman web, kadang ada saatnya kita membutuhkan fleksibilitas dalam memilih nilai atau value tertentu untuk suatu properti, ibarat tinggi sebuah box, besar ukuran font maupun besar border dari tabel. Untuk keperluan ini, CSS menyediakan banyak sekali ukuran ibarat pixel, em, point, in, pc, dan pt.

Sebuah nilai dalam CSS sanggup bernilai positif maupun negatif, sanggup berupa angka bulat, maupun angka desimal. Namun beberapa properti juga mempunyai batasan, ibarat warna yang hanya sanggup bernilai 0-255 atau 0 hingga dengan FF.

Nilai Absolut

Nilai otoriter yakni sebuah nilai di dalam CSS, dimana nilai tersebut tidak dipengaruhi kondisi tag induknya (parent), dan didasarkan pada ukuran bahu-membahu di media printing. Di dalam CSS, nilai otoriter ini adalah: milimeter (mm), centimeter (cm), inchi (in), point (pt), dan pica (pc).

Kelima nilai otoriter ini berasal dari media percetakan. Kita tentunya sudah familiar dengan ukuran ibarat milimeter, dan centimeter. Sedangkan 1 inchi yakni sekitar 25,4 mm.

Ukuran point (pt) sering dipakai dalam media cetak offline ibarat Microsoft word dalam memilih ukuran dari font. 1 inchi setara dengan 72pt, sehingga ukuran font normal sebesar 12pt setara dengan seperdelapan inchi. Contoh penggunaannya dalam CSS: p {font-size: 18pt;} sama dengan p {fontsize: 0.25in;}.

Ukuran pica (pc) mungkin tidak terlalu familiar. 1pc setara dengan 12pt. teladan penulisannya dalam CSS yakni p {font-size: 1.5pc;}.

Kelima nilai otoriter tersebut, selain pt tidak terlalu sering digunakan, sebab konversi dari ukuran dunia positif ke dalam monitor dipengaruhi banyak hal, 1cm di satu monitor sanggup jadi berbeda dengan 1cm pada monitor lainnya, sehinga agak menyulitkan dalam mendesain isyarat CSS yang �pas�.

Nilai Relatif

Berbeda dengan nilai absolut, nilai relatif didalam CSS dipengaruhi oleh tag disekitarnya. CSS mendukung banyak nilai relatif, beberapa yang kita bahas adalah: pixel (px), Em-height (em), dan X-height (ex).

Ukuran pixel (px), merupakan ukuran yang paling sering dipakai dalam CSS. Di dalam CSS, pixel termasuk nilai relatif sebab ia tidak terikat dengan perbandingan media tertentu. Didalam spesifikasi CSS2. 1, 1 pixel disamakan dengan 0.26mm atau 1/96 inci, namun banyak browser yang mengabaikan spesifikasi ini dan menyamakan 1 pixel dengan 1 pixel sesungguhnya yang terdapat di monitor.

1 unit Em-height (em) sama dengan besar ukuran asal yang diturunkan tag tersebut. Ketika kita mendefenisikan sebuah paragraf sebesar 12pt, maka sebuah tag <em> yang berada di dalam paragraf tersebut disebut secara inheritance akan berukuran 1em. Jika kita merubahnya menjadi em {font-size: 1.2em;} maka tag <em> tersebut akan berukuran 1,2 kali lebih besar dari ukuran tag p.

Ukuran relatif terakhir yaitu X-height (ex). ex berasal dari tinggi sebuah karakter �x� (huruf x kecil) dari sebuah font. Namun, banyak font yang tidak mendukung hal ini, sehingga browser kadang-kadang menyamakan 1ex dengan 0,5em.

Nilai Persentasi

Nilai persentasi yakni sebuah nilai per seratus (%) dari suatu property yang relatif terhadap induk (parent) dari tag tersebut. Misalkan kita menciptakan sebuah defenisi CSS sebagai p {font-size: 10pt;}, dan em {font-size: 120%;}. Maka kalau terdapat tag <em> didalam tag <p>, maka ukuran font dari tag <em> akan menjadi 120% dari 10pt, atau sekitar 12pt.

Dengan menciptakan nilai font lainnya menjadi persen, hal ini akan memudahkan kalau suatu dikala kita ingin merubah seluruh tampilan web. Hanya merubah ukuran tag <p>, maka secara eksklusif tag <em> akan menyesuaikan tampilannya.

Berikut yakni teladan perbandingan_fontsize.html, dimana aku menampilkan ukuran property font-size dengn banyak sekali value:

<!DOCTYPE html>
<html>
<head>
   <title>Contoh Perbandingan Ukuran dari font-size</title>
   <style type="text/css">
            body    { font-size:14pt; }
            p.satu  { font-size:8mm; }
            p.dua   { font-size:0.35in; }
            p.tiga  { font-size:2.2pc; }          
            p.empat { font-size:20px; }
            p.lima  { font-size:1.8em }
            p.enam  { font-size:3ex; }
            p.tujuh { font-size:190%; }
    </style>
</head>

<body>
       <p>Kalimat ini akan berukuran 14 point</p>
       <p class="satu">Kalimat ini akan berukuran 8 milimeter</p>
       <p class="dua">Kalimat ini akan berukuran 0,35 inchi</p>
       <p class="tiga">Kalimat ini akan berukuran 2,2 pica</p>
       <p class="empat">Kalimat ini akan berukuran 20 pixel</p>
       <p class="lima">Kalimat ini akan berukuran 1,8 em</p>
       <p class="enam">Kalimat ini akan berukuran 3 ex</p>
       <p class="tujuh">Kalimat ini akan berukuran 190%</p>
</body>
</html>

Jika diperhatikan lagi, aku menciptakan sebuah selector body {font-size:14pt;} pada kepingan awal definisi CSS. Selector body akan menurunkan (inherit) ukuran font ini ke seluruh tag <p> yang berada di dalam tag <body>, namun pada masing-masing tag <p>, aku menambahkan property HTML �class�, sehingga ukuran font akan ditimpa (override) oleh nilai lainnya.

Khusus untuk class=lima, class=enam, dan class=tujuh, aku memakai nilai relatif em, ex, dan %, sehingga nilainya bergantung dengan nilai induknya (parent), yakni body {font-size:14pt;}. Cobalah mengubah ukuran font-size pada body ini, kemudian jalankan kembali perbandingan_fontsize.html, maka secara otomatis ketiga kalimat tersebut juga akan berubah ukurannya.
Sumber http://informasigameindo11.blogspot.com

Wednesday, January 25, 2017

√ Mencar Ilmu Css (Cascading Style Sheets)

Comment

Fungsi dan Kegunaan CSS

HTML (Hypertext Markup Laguage) dan CSS (Cascading Style Sheets) merupakan bab tak terpisahkan dari teknologi pemrograman web modern ketika ini. HTML dibentuk dan dipakai untuk menampilkan konten dan merupakan kerangka logis dari sebuah halaman website, sedangkan CSS berfungsi mengatur beberapa gaya / style elemen-elemen HTML menyerupai mengganti jenis font, ukuran font, perataan, dan pengaturan lainnya dalam dokumen HTML.

Penggunaan CSS lebih dianjurkan daripada menggantikan jenis font dan pengaturan lainnya dengan memakai atribut HTML. CSS lebih gampang diterapkan alasannya ialah untuk merubah banyak elemen HTML dengan style yang sama hanya dengan berbagi satu style, beda dengan kalau dengan memakai HTML yang diharuskan merubah setiap atributnya.

Perhatikan pola berikut :

merupakan bab tak terpisahkan dari teknologi pemrograman web modern ketika ini √ Belajar CSS (Cascading Style Sheets)
tampilan di atas kalau memakai isyarat html biasa, dapat ditulis dengan isyarat sepert ini :
Script 1 :
<html>
<head>
<body>
   <title>Test Warna tanpa CSS</title>
  </head
>Saya duduk di dingklik Sekolah
<font color="red"> Sekolah Menengah kejuruan Al-Manshuriyah</font>. <br>
Sekarang aku sedang menempuh pendidikan di kelas
<font color="red"> X Semester 2</font><br>
jurasan Teknik Komputer Jaringan <font color="red"> TKJ</font>.
</body> </html>

Kemudian kalau memakai CSS maka ditulis menyerupai script berikut, dan akan menghasilkan tampilan yang sama.
Script 2 :
<html>
<head>
   <title>Test Warna dengan CSS</title>
   <style type="text/css">
     .warna {
       color: red;
     }
   </style>
</head>
<body>
Saya duduk di dingklik Sekolah
<span class=warna> Sekolah Menengah kejuruan Al-Manshuriyah</span>. <br>
Sekarang aku sedang menempuh pendidikan di kelas
<span class=warna> X Semester 2</span><br>
jurasan Teknik Komputer Jaringan <span class=warna> TKJ</span>.
</body>
</html>
Coba perhatikan kalau kita ingin megubah warna merah pada halaman web di atas  :
Pada Sript1 : kita harus merubah nilai atribut color dari tag font, sebanyak tag font. Dalam hal ini kita harus melaksanakan perubahan sebanyak 3 kali.
Pada Sript2 : kita hanya merubah nilai color pada tag style saja. Dalam hal ini kita hanya melaksanakan perubahan sebanyak 1 kali.

Makara dengan CSS kita dipermudah dalam melaksanakan perubahan tampilan halaman web. Dengan CSS kita dapat merubah tampilan dari suatu halaman web tanpa harus merubah isi halaman tersebut.

Mari kita perlajari materi selanjutnya mengenai CSS :
1. Pengertian CSS
2. Cara Meng-input isyarat CSS ke dalam HTML




Sumber http://afm98.blogspot.com

Tuesday, January 24, 2017

√ Pengertian Dan Klarifikasi Komponen Css (Selector, Property, Value)

Comment
Setelah kita mempelajari Pengertian CSS, Selanjutnya kita bahas mengenai
Pengertian dan Penjelasan Komponen CSS (Selector, Property, Value).

Pengertian dan Penjelasan Komponen CSS √ Pengertian dan Penjelasan Komponen CSS (Selector, Property, Value)
Pengertian Selector CSS

CSS berfungsi untuk memanipulasi  atau mengubah tampilan dari HTML yang terdiri dari susunan tag. Untuk mengaitkan antara tag tag HTML yang akan dimanipulasi atau diubah, maka CSS memerlukan sebuah cara bagaimana CSS menghubungkan dan mengaitkan kodenya ke dalam tag HTML yang dimaksud. Maka cara itulah yang disebut dengan Selector CSS.

Selector dipakai untuk mencari bab web (tag) yang akan yang tampilannya akan dimanipulasi dengan style sesuai impian kita. Misalnya : tag <p>, tag <h1>, tag <table>, dan lain-lain. Supaya lebih terang mengenai selector css, perhatikan gambar di atas.

Pengertian Property CSS

Property CSS merupakan elemen atau sanggup disebut sebagai atribut dari sebuah selector di dalam CSS. Property inilah yang akan diubah ubah nilainya untuk mendapat jenis tampilan yang kita inginkan dari sebuah tag HTML.

CSS memiliki aneka macam  property yang sanggup kita gunkan untuk mengatur tampilan dari halaman web yang kita inginkan. Sebagai contoh, selector yang dipakai yaitu untuk paragraph (tag <p>), maka propertinya yaitu jenis abjad dari paragraf tersebut, ukuran huruf, warna huruf, abjad miring, abjad tebal, dan lain sebagainya. Supaya lebih terang mengenai property css, perhatikan gambar di atas.

Pengertian Value CSS

Value CSS yaitu nilai yang diberikan untuk sebuah property. Misalnya untuk untuk mengubah warna latar belakang dari sebuah selector, maka  background-color sebagai property nya yag dipakai untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya sanggup kita berikan warna merah (red), warna biru (blue), hitam (black), atau putih (white).

Supaya lebih terang mengenai value css, silahkan perhatikan gambar di atas.

Sumber http://afm98.blogspot.com

√ Cara Menginput Instruksi Css Ke Halaman Html

Comment

  

Cara Menginput atau memasukan instruksi CSS ke dalam halaman HTML

HTML atau Hypertext Markup Language intinya  merupakan kumpulan kode-kode dalam bentuk tag yang disusun untuk menampilkan menampilkan objek berupa teks, gambar, audio, dan video, ataupun dokuen lainnya. Tag-tag tersebut dibentuk menurut fungsi dan kegunaannya, menyerupai untuk menciptakan tabel <table>, untuk menciptakan paragraf <p>, dan lain-lain.

Nah CSS atau Cascading Style Sheet digunakan untuk merancang tag-tag HTML tersebut semoga dapat tampil lebih manis sesuai dengan keingingn kita.

Sekarang bagaimana cara memasukan dan menggabungkan instruksi CSS ke dalam HTML.
Secara garis besar, ada 3 cara memasukan instruksi CSS ke dalam dokumen HTML yaitu

  1. Inline Style 
  2. Internal Style 
  3. External Style 

1. Metode Inline Style Sheet

Metode Inline Style Sheet merupakan cara memasukan/menginput instruksi CSS secara pribadi ke dalam instruksi di dalam HTML dalam ruang lingkup tag <body> dengan memakai atribut style. Berikut pola penggunaan metode Inline Style CSS :

<html>
<head>
     <title>Contoh Inline Style CSS</title>
</head>
   <body>
      <h1 style="background-color:blue; color:white" >
         Text ini akan bewarna putih dengan background warna biru
      </h2>
   </body>
</html>
Jika script di atas dijalankan di browser, maka akan tampil menyerupai di bawah ini :


2. Metode Internal Style Sheets 

Metode Internal Style Sheets atau disebut juga Embedded Style Sheets. Dengan metode ini kode CSS dipisahkan dari tag HTML,  tetapi nasih tetap ditulis dalam satu halaman HTML.
Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah tag <style>. Tag style ini harus berada pada bab <head></head> dari halaman HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Internal Style CSS</title>
    <style type="text/css">
        h2 {
        background-color:red;
        color:white;
        }
    </style>
</head>
<body>
    <h2>
        Text ini akan bewarna putih dengan latar belakang merah
    </h2>
</body>
</html>
Jika script di atas dijalankan di browser, maka akan tampil menyerupai di bawah ini :



3. Metode External Style Sheet


 Kalau kita perhatikan dua metode di atas yaitu inline style sheet dan internal style sheet, semua instruksi css digabung di dalam instruksi HTML, sehingga bila ada halaman html yang lain, yang memerlukan style yang sama, maka halaman tersebut pun harus memasukan instruksi css yang sama. Tentu saja hal ini menciptakan instruksi semua halaman html menjadi panjang. Jika ada kesalahan script tentu sangat report bagi seorang web programmer.
Makara kelemahan dan kekurangan kedua metode tersebut yakni bila ingin menciptakan beberapa halaman dengan tampilan yang sama, maka setiap halaman akan mempunyai instruksi CSS yang sama.

Untuk mengatasi kekurangan dan kelemahan kedua metode di atas, maka diciptkanlah metode yang ketiga yaitu Metode External Style Sheets.

Metode External Style Sheets memisahkan semua instruksi CSS dari  semua instruksi HTML, dan masing-masing disimpan di dalam file yang terpisah. Sehingga bila file HTML memerlukan instruksi css, maka cukup memanggil instruksi tersebut dengan memanggil filenya, tidak perlu menuliskan instruksi css-nya.

Sebagai contoh, kita gabungkan format css dari dua metode sebelumnya, dan disimpan dalam sebuah file yang ber-extensi css.

h1 {
        background-color:blue;
        color:white;
        }
h2 {
        background-color:red;
        color:white;
        }
simpan instruksi di atas ke dalam sebuah file berjulukan kode.css

Kemudian buat sebuah fie HTML dengan memakai instruksi css yang ada di dalam file kode.css
dan disimpan di dalam folder yang sama dengan file kode.css.

Bagaimana cara memanggil file kode.css?

Ada 2 cara memanggil file css dari sebuah halaman html.
Yang pertama dengan memakai tag <link>

<html>
<head>
    <title>Contoh External Style CSS</title>
    <link rel="stylesheet" type="text/css" href="kode.css"></head>
<body>
    <h1> Judul ini ini bewarna putih dan background warna biru</h1>
    <h2> Sub Judul ini bewarna putih dan background warna merah </h2>
</body>
</html>

Yang kedua dengan memakai tag <style> dan @import url(file.css)

<html>
<head>
    <title>Contoh External Style CSS</title>
    <style type="text/css"> 
       @import url(kode.css);
    </style>
</head>
<body>
    <h1> Judul ini ini bewarna putih dan background warna biru</h1>
    <h2> Sub Judul ini bewarna putih dan background warna merah </h2>
</body>
</html>







Sumber http://afm98.blogspot.com
Subscribe to: Posts (Atom)