Substansi:
- Pengertian CSS
- Fakta Menggunakan CSS
- 3 Cara Menginputkan CSS ke HTML
- Pengertian Selector, Property dan Value
- 5 Jenis Selector CSS
- Latihan Penggunaan Selector CSS
1. Pengertian CSS
Merupakan singkatan dari “Cascading Style Sheets” yang berarti The process of combining several style sheets and resolving conflicts atau Proses menggabungkan beberapa style sheet dan menyelesaikan konflik di antara mereka. yaitu standard pembuatan dan pemakaian style untuk dokumen terstruktur, guna mempersingkat penulisan tag HTML seperti font, color, text dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan. [Ref : http://people.opera.com/howcome/2006/phd/#h-357].
2. Fakta Menggunakan CSS
- Telah didukung oleh kebanyakan browser versi terbaru, namun tidak didukung oleh browser-browser lama
- Lebih fleksibel dalam penempatan posisi layout
- Menjaga HTML agar tetap minimalis atau penggunaan tag yang minimal.
3. 3 Cara Menginputkan CSS ke HTML
1. Metode Inline Style
2. Metode Internal Style Sheets
Sehingga memberikan efek secara masal terhadap <h1>
3. Metode External Style Sheets
Pada metode ini, halaman CSS atau file CSS berdiri sendiri dengan extensi file.css kemudian untuk memanggilnya dari halaman HTML, maka caranya adalah dengan mencantumkan link yang menuju file tersebut (bisa online maupun offline). Berikut ini adalah contoh offlinenya:
Berikut ini adalah isi dari file “belajar css3.css”;
Sehingga efeknya pun akan sama seperti sebelumnya;
4. Pengertian Selector, Property dan Value
- Selector adalah elemen/tag HTML yang ingin diberi style.
- Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text, warna background, jarak antar elemen, garis pinggir dan lain sebagainya.
- sedangkan, Value adalah nilainya.
5 Jenis Selector CSS
1. Universal Selector adalah sebuah pola (pattern) yang digunakan untuk ‘mencari’ suatu tag di dalam HTML.
Contoh:
*{
color: blue;
background-color: white;
}
2. Element Type Selector atau Tag Selector adalah istilah untuk selector yang nilainya adalah tag HTML itu sendiri. Contoh:
h1 {
text-decoration: underline;
}
p {
font-size:14px;
}
3. Class Selector. Class Selector akan ‘mencari’ seluruh tag yang memiliki atribut class dengan nilai yang sesuai. Contoh:
.paragraf_pertama {
color: red;
}
.judul {
font-size:20px
}
Implementasi pada HTML:
4. ID Selector. Penggunaannya mirip dengan class selector. Contoh:
#paragraf_ pembuka {
color: red;
}
#judul utama {
font-size:20px
}
Implementasi pada HTML:
5. Attribute Selector
Selector ini akan mencari seluruh tag yang memiliki atribut yang dituliskan. Contoh:
[href] {
font-size:20px ;
}
[type="submit"] {
width:30px;
}
6. Latihan Penggunaan Selector CSS
<!DOCTYPE html>
<html>
<head>
<title>Hello World, Latihan Membuat Halaman (title)</title>
</head>
<body>
<style type="text/css">
h1 { background-color:black; color:white;}
h3 { font-style:strong; color:blue; }
h2 { font-style:italic; color:green; }
p { color: red; }
</style>
<!-- element semantik harus berada diantara tag body -->
<!-- <header>...</header> Pada umumnya berisi logo, slogan, navigasi,
atau form pencarian.-->
<header>Pemrograman Web Statis (header) </header>
<!-- <nav>...</nav> element nav, digunakan untuk membuat menu link navigasi -->
<nav>
<ul>
<li><a href="www.gatewan.com">HOME (li)</a></li>
<li><a href="http://www.gatewan.com/2014/07/about-gatewawan.html">About Me (li)</a></li>
<li><a href="http://www.gatewan.com/2014/11/contact-us.html">Buku Tamu (li)</a></li>
</ul>
<!-- <article>...</article> element ini digunakan untuk konten artikel, berita atau opini.
jika dalam satu halaman hanya terdiri 1 artikel, bisa saja langsung menggunakan
konten <section>...</section>, akan tetapi itu menyalahi aturan semantik pada HTML5,
jadi meskipun artikel cuman 1 tetap harus menggunakan elemen <article>...</article> -->
<article>
<header>
<h1>
Artikel Ke-1 (h1)
</h1>
</header>
<br />
<br />
<!-- <section>...</section> element section, digunakan untuk menunjukan
bagian yang berbeda pada sebuah halaman web anda. section bisa digunakan
lebih dari satu, sesuai kebutuhan. misal section pada artikel, section
pada menu samping (a side). -->
<section>
#Artikel Pertama, Ini adalah latihan pertama saya dalam belajar HTML5 Tingkat Pemula (section)
</section>
</article>
<br />
<br />
<article>
<header>
<!-- <hgroup>...</hgroup> element ini biasa digunakan pada artikel, untuk pengelompokan
tag heading yang lebih dari satu. -->
<hgroup>
<h1>Pemrograman Web Statis (h1) </h1>
<h2>Menggunakan HTML5 Tingkat Dasar (h2) </h2>
<h3>Oleh Wawan Beneran (Newbie) (h3) </h3>
</hgroup>
<br />
<br />
</header>
<section>
#Artikel Kedua, Ini adalah latihan pertama saya dalam belajar HTML5 Tingkat Pemula (section)
</section>
<br />
<br />
<!-- <p>...</p> element tag paragraf ini digunakan untuk mengindikasikan suatu paragrap
dalam element artikel.-->
<p>
#Ini Paragraph pertama, dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text.
(p)
</p>
<br />
<br />
<p>
#Ini Paragraph kedua, dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text.
(p)
</p>
<br />
<br />
<!-- <aside>...</aside> element ini dirancang berada pada element artikel, biasa digunakan
untuk menampilkan berita terkait, kutipan atau gambar terkait.-->
<aside>Rekomendasi Artikel Terkait "Sejarah HTML5" (aside)</aside>
<aside>Rekomendasi Artikel Terkait "Pengembang HTML5" (aside)</aside>
</article>
<br />
<br />
<!-- <figure>...<figcaption>...</figcaption></figure> element figure ini dirancang untuk menampilkan
data personal, sedangkan figcaption untuk menampilkan keterangan gambar. -->
<figure>
<center>
<img width="150" height="150" src="https://lh3.googleusercontent.com/-OEU6BpqUlaI/AAAAAAAAAAI/AAAAAAAAJQU/5OVty3udCSQ/s120-c/photo.jpg" alt="ini logo gatewan" />
<figcaption>
Ini merupakan Icon Aplikasi Gatewan (figcaption)
</figcaption>
</center>
</figure>
<br />
<br />
<br />
<br />
<!-- <footer>...</footer> element footer biasa digunakan untuk
navigasi link tambahan kedua, atau untuk legal /copyright suatu halaman website.-->
<footer># footer -- Copyright <a href="www.gatewan.com">GATEWAN</a> 2015 - All Right Reserved</footer>
</body>
</html>
Simpan ke dalam format *html dan lihat hasilnya menggunakan browser kesayangan Anda!
