. .

WEB DESIGN : Pengaturan Cascading Style Sheet

Posted by CHRISTIANTO D,WIBOWO | D3MI-2016 STMIK BUMI GORA On Senin, Januari 02, 2017 No comments

WEB DESIGN : Cascading Style Sheet Rules, Sebelum lanjutkan pembelajaran ini, perlu diketahui bacalah dulu artikel pembelajaran sebelumnya dan kuasai pengenalan pengetahuan dasar di :
WEB PROGRAMMING
  1. WEB DESIGN
  2. MEMULAI BELAJAR WEB PROGRAMMING
  3. Memulai Membangun WEBSITE Dengan HTML - Panduan Bagi Pemula
Pengaturan Cascading Stylesheet memberitahu browser seperti apa harusnya HTML terlihat, dan apa yang harus dilakukan. Aturan bisa mendikte apakah hanya akan melihat satu tag HTML yang terlihat, atau kita dapat membuat aturan sendiri untuk diaplikasikan sebagai dan di mana kita inginkan. Misalnya, aturan dapat diatur yang memberitahu browser untuk memformat setiap <P> tag sehingga baris pertama akan menjorok ke dalam. Atau kitaa bisa membangun aturan paragrapha sendiri, dan atau hanya menerapkan gaya untuk paragraf tertentu, tidak semua paragraf. Ada tiga bagian untuk pengaturan CSS - CSS Rule/CSS Syntax : The Selector,  dan Declaration, sedangkan Declaration sendiri terdiri atas Property, dan Value. Lihat Bagan CSS SYNTAX ini :
Selector points adalah perintah ke elemen HTML yang mana yang ingin kita beri gaya-style. Blok deklarasi berisi satu atau lebih deklarasi dipisahkan oleh titik koma. Setiap deklarasi CSS termasuk nama properti dan nilai dipisahkan oleh titik dua. Sebuah deklarasi CSS selalu berakhir dengan titik koma, dan blok deklarasi dikelilingi oleh kurung kurawal. Pada contoh berikut semua eleman <p> akan berada pada posisi di tengah dan di blok, dengan warna teks merah :
<!DOCTYPE html>
<html>
<head>
<style>
p {
    color: red;
    text-align: center;
}
</style>
</head>
<body>

<p>Be Informatics One !!!</p>
<p>Paragraph ini diberi gaya bentuk oleh CSS.</p>

</body>
</html>

CSS Selectors
CSS Selectors digunakan untuk "menemukan" atau memilih elemen HTML berdasarkan mereka nama elemen, id, kelas, atribut, dan lainnya. Ada tiga jenis CSS Selector: HTML selector, Class selector, dan ID selector.
  • HTML Selector adalah bagian teks dari tag HTML. Tag paragraf lengkap <P>. Jadi Selector memilih hanya P' saja, strip kurung sudut off dan kita mendapatkan Selector HTML.
  • Class Selector adalah salah satu yang kita dapat atur diri sendiri, untuk digunakan di mana saja di halaman web. Class Selector memilih elemen dengan atribut class khusus. Untuk memilih elemen dengan class tertentu, menulis titik (.)character, diikuti dengan nama class.
  • ID Selector mirip dengan pemilih Class, tetapi kita menggunakannya untuk mengidentifikasi elemen tertentu, misalnya, kotak teks elemen pada formulir. ID Selector menggunakan atribut ID dari elemen HTML untuk memilih elemen tertentu. ID dari elemen harus unik dalam sebuah halaman, sehingga ID Selector digunakan untuk memilih salah satu elemen yang unik. Untuk memilih elemen dengan ID tertentu, menulis hash/pound (#) - HASHTAG karakter, diikuti oleh ID dari elemen.
Berikut ini adalah contoh dari  tiga selector dalam tag STYLE.
<style>
        H1 {text-align: center;color: Red;}
        .NewFont{Font-Size:20pt;}
        #NewTextColour {Color: Blue;}
</style>
  • Pertama, H1, adalah Selector HTML. Perhatikan bahwa mereka telah memiliki kurung sudut yang dihapus. Dengan Selector HTML, semua tag HTML pada halaman tersebut akan diformat dalam gaya yang telah ditetapkan menjadi H1, semua teks antara tag <H1> </ H1> pada halaman web akan berada pada kondisi Red -   H1 {text-align: center;color: Red;}.
  • Kedua,  .NewFont, adalah Class Selector. Perhatikan bahwa Class Selector harus dimulai dengan berhenti penuh (periode) (.)character. Kemudian kita ketik nama untuk Selector kita , apa pun yang kita inginkan. Tidak ada spasi yang ditambahkan antara berhenti penuh dan nama Selector kita.
  • Ketiga, #NewTextColour, adalah ID SelectorID Selector dimulai dengan simbol hash/pound (#) - HASHTAG. Kita kemudian ketik nama yang ingin kita gunakan untuk ID Selector. Sekali lagi, tidak ada spasi yang ditambahkan antara simbol dan nama ID Selector.  Catatan: Sebuah nama ID tidak dapat memulai dengan angka !
<!DOCTYPE html>
<html>
<head>
<style>
      H1{text-align: center;color: red;}
      .NewFont{Font-Size:16pt}
      #NewTextColour {Color:Blue}
</style>
</head>
<body>
<h1>Teks berwarna merah dan berada di blok tengah.</h1>
<p>Teks berwarna default dengan font size 16 point.</p>
<p id="NewTextColour">Teks berwarna biru dengan font size 16 point.</p>
</body>
</html>

Property and Value
Setelah kita telah mengatur Selector, kita kemudian menentukan Properties dan Value/Nilai untuk Selector itu.
Properti untuk Selector adalah hal dimana kita mencoba untuk merubahnya. Contohnya adalah: Font, Warna, Latar Belakang, Margin, Text.
Value/Nilai untuk Selector adalah pengaturan baru untuk properti. Misalnya, untuk properti COLOR, kita dapat mengaturnya untuk nilai warna yang sebenarnya (merah, biru, kuning), atau kode warna hexa (# FFFF00, # 000000). Properti dan nilai diapit kurung kurawal {}. Sintaks untuk seluruh hal itu akan seperti bagan diatas.
Jika kita ingin menambahkan lebih dari satu properti dan value/nilai, ada dua cara untuk melakukannya: semua dalam satu baris, dengan masing-masing pasangan sifat dan nilai-nilai dipisahkan oleh titik koma (;). Atau kita dapat menempatkan masing-masing pasangan sifat dan nilai-nilai di beberapa baris dipisahkan oleh titik koma (;). Seperti ini:
H1 {Color: Red; Font-weight: Bold; Font-Size: 16pt;}
atau dengan multiple lines/beberapa baris
<style>
H1 {
      Color: Red;
      Font-weight: Bold;
      Font-Size: 16pt;
   }
</style>

Elemen HTML juga dapat merujuk ke lebih dari satu class. Pada contoh di bawah ini, <p> elemen akan ditata sesuai dengan class = "center" dan class = "besar":
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
    text-align: center;
    color: red;
}

p.large {
    font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">Heading ini tidak akan terpengaruh</h1>
<p class="center">Paragraf ini akan menjadi merah dan di tengah-blok.</p>
<p class="center large">Paragraf ini akan menjadi merah, tengah-blok, dan dalam font-size besar.</p>

</body>
</html>

Grouping Selectors
Jika kita memiliki elemen dengan definisi gaya yang sama, seperti ini:
h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}
Ini akan lebih baik untuk membuat Grouping Selectors, untuk meminimalkan kode. Untuk Grouping Selectors, memisahkan setiap selectors dengan koma. Pada contoh di bawah kita telah mngelompokkan Selectors - Grouping Selectors dari kode di atas :
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1>INI HEADING SATU</h1>
<h2>YANG INI HEADING DUA</h2>
<p>DAN YANG INI ADALAH PARAGRAPHNYA</p>

</body>
</html>

CSS Comments
Komentar digunakan untuk menjelaskan kode, dan dapat membantu ketika kita mengedit kode sumber di kemudian hari. Komentar akan diabaikan oleh browser. Sebuah komentar CSS dimulai dengan / * dan diakhiri dengan * /. Komentar juga dapat span beberapa baris :
<!DOCTYPE html>
<html>
<head>
<style>
p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */
</style>
</head>
<body>

<p>Be Informatics One</p>
<p>Gaya Paragraph Dengan CSS.</p>
<p>CSS comments tidak akan muncul di output browser.</p>

</body>
</html>
Dalam pembelajaran berikutnya, kita akan melihat di mana untuk menempatkan gaya kita.  Where to put your styles.






0 komentar:

Posting Komentar