ruang belajar 2: CSS

Home Posts filed under CSS

Showing posts with label CSS. Show all posts

Thursday, July 6, 2017

√ Mengenal Apa Itu Css !

July 06, 2017 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

CSS

√ Cara Menginput Instruksi Css Ke Halaman Html !

July 05, 2017 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

CSS

√ Hukum Dan Cara Penulisan Isyarat Css !

July 05, 2017 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

CSS

√ Mengenal Pengertian Selector, Property Dan Value Pada Css !

July 04, 2017 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

CSS

√ Mengenal Jenis-Jenis Selector Dasar Css !

July 04, 2017 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

CSS

√ Cara Penggunaan Selector Css !!

July 04, 2017 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

CSS

√ Urutan Prioritas Selector Css (Cascading) !

June 18, 2017 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

Thursday, July 6, 2017

Wednesday, July 5, 2017

Tuesday, July 4, 2017

Sunday, June 18, 2017

Template information