CSS singkatan dari <em><strong>Cascading Style Sheets</strong></em>. Secara bahasa berarti lembaran gaya yang mengalir ke bawah. Kamu akan kebayang dengan istilah ini setelah nanti tau penggunaan dan bentuknya. Secara istilah, CSS adalah bahasa penulisan yang digunakan untuk <strong>mendeskripsikan penampilan</strong> sebuah dokumen <em>markup. </em>CSS selalu digunakan bersamaan dengan HTML, meskipun kita dapat juga menggunakannya untuk mengatur style dokumen <em>markup</em> lain seperti XML, SVG dan XUL. Agar lebih terbayang, coba perhatikan tiga dokumen HTML di bawah ini dan lihat perbedaan tampilannya.

<strong>Dokumen #1:</strong>
<iframe src="//jsfiddle.net/yllumi/pecLfhsL/embedded/result,html,css/" width="100%" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

<strong>Dokumen #2:</strong>
<iframe src="//jsfiddle.net/yllumi/pecLfhsL/2/embedded/result,html,css/" width="100%" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

<strong>Dokumen #3:</strong>
<iframe src="//jsfiddle.net/yllumi/pecLfhsL/3/embedded/result,html,css/" width="100%" height="350" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Ketiga dokumen HTML di atas isinya sama. Tapi dokumen yang kedua dan ketiga dilengkapi dengan CSS sedangkan yang pertama hanya dokumen HTML saja (tanpa CSS). Untuk melihat bagaimana tampilan penulisan CSS, klik tab CSS yang ada di bagian atas dokumen kedua dan ketiga.
<h2>Mengapa Harus Menggunakan CSS?</h2>
HTML dirancang tidak ditujukan untuk mendesain sebuah halaman web, tapi hanya untuk menampilkan konten saja. Pada saat HTML beranjak ke versi 3.2, diperkenalkan tag &lt;font&gt; yang digunakan untuk mengatur tampilan sebuah teks, seperti jenis font yang digunakan, warna, dan ukuran. Tapi dengan adanya tag ini, malah jadi menyulitkan proses development, karena tag ini mesti disematkan di banyak halaman untuk mendapatkan hasil <em>style</em> yang sama. Bayangkan ketika kita sudah memiliki banyak halaman web, belasan atau puluhan, lalu kemudian hendak mengedit beberapa style saja misalkan ukuran font dan ingin semua halaman mendapatkan perubahan yang konsisten. Maka kita harus memperbaharui tag tersebut di setiap halaman satu per satu!

Untuk itu, dibuatlah CSS, yang memisahkan style dari halaman web, sehingga antara konten pada HTML dan desain tampilan pada dokumen CSS dapat dikerjakan di dua tempat berbeda. Dengan kata lain, dokumen HTML cukup berisi konten saja, dan satu dokumen CSS dapat disematkan pada setiap dokumen HTML agar semuanya menampilkan style yang sama dan konsisten.
<h2>Penerapan CSS Pada HTML</h2>
CSS biasanya disimpan di dalam sebuah file berekstensi .css dan disematkan di dalam dokumen HTML untuk memberikan style pada halaman tersebut. Meski demikian, kita tetap dapat menambahkan sintaks CSS langsung di dalam dokumen HTML, di dalam tag <code>&lt;style&gt;&lt;/style&gt;</code> untuk mengakomodir penerapan style yang hanya digunakan di dalam dokumen tersebut. Kita juga dapat menyematkan sintaks CSS langsung di dalam atribut <code>style</code> pada suatu tag HTML untuk menerapkan style yang hanya digunakan pada tag itu saja. Berikut adalah contoh penerapan ketiga mode tersebut:

<strong>Dokumen yang disematkan file style.css:</strong>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;HTML dengan CSS&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
    &lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Selamat Datang, Programmer!&lt;/h1&gt;
    &lt;p&gt;Selamat belajar pemrograman di CodePolitan&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<strong>Dokumen dengan CSS di dalamnya:</strong>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;HTML dengan CSS&lt;/title&gt;
        &lt;style&gt;
            h1 { text-align: center; color: lightsteelblue; }
        &lt;/style&gt;
    &lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Selamat Datang, Programmer!&lt;/h1&gt;
    &lt;p&gt;Selamat belajar pemrograman di CodePolitan&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<strong>Dokumen dengan CSS pada tag:</strong>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;HTML dengan CSS&lt;/title&gt;
    &lt;/head&gt;
&lt;body&gt;
    &lt;h1 style="text-align:center; color:lightsteelblue;"&gt;Selamat Datang, Programmer!&lt;/h1&gt;
    &lt;p&gt;Selamat belajar pemrograman di CodePolitan&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<h2>Sintaks CSS</h2>
Sekarang mari kita perhatikan sintaks penulisan kode CSS:
<pre>h1 { text-align: center; color: red; }</pre>
Pada contoh kode di atas:
<ul>
 	<li><code>h1</code> -&gt; selector</li>
 	<li><code>{ text-align: center; color: red; }</code> -&gt; deklarasi style</li>
 	<li><code>text-align</code> -&gt; property</li>
 	<li><code>center</code> -&gt; value</li>
 	<li><code>color</code> -&gt; property</li>
 	<li><code>red</code>-&gt; value</li>
</ul>
<strong>Selector adalah bagian CSS untuk merujuk elemen HTML yang ingin dikenakan style</strong>. Ada beberapa jenis selector yang dapat kita gunakan untuk memudahkan pekerjaan styling kita pada CSS, seperti selector element, selector class, dan selector id.

Pada kode di atas elemen yang dirujuk oleh kode CSS kita adalah <code>&lt;h1&gt;</code>. Elemen <code>&lt;h1&gt;</code> ini kita buat supaya tulisannya rata tengah, maka kita beri property <code>text-align</code> dengan value <code>center</code>. Property dan value CSS dipisahkan dengan tanda titik dua (<code>:</code>). Kita dapat memberikan lebih dari satu property style dengan memisahkan antar property dengan tanda titik koma (<code>;</code>).  property dan value disimpan di dalam kurung kurawal <code>{</code> dan <code>}</code>.
<h2>Selector Element</h2>
Selector ini mengacu elemen HTML berdasarkan nama elemennya. Pada contoh berikut:
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;HTML dengan CSS&lt;/title&gt;
        &lt;style&gt;
            h1 { color: red; }
            p { color: blue; }
        &lt;/style&gt;
    &lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Welcome&lt;/h1&gt;
    &lt;h1&gt;Selamat Datang, Programmer!&lt;/h1&gt;
    &lt;p&gt;Selamat belajar pemrograman di CodePolitan&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
itu berarti kita menerapkan style <code>color:red</code> pada <strong>semua</strong> elemen <code>&lt;h1&gt;</code> yang ada di dokumen dan menerapkan style <code>color:blue</code> pada semua elemen <code>&lt;p&gt;</code>.

&nbsp;
<h2>Selector class</h2>
Selector ini mengacu elemen berdasarkan nama classnya. <strong>Nama class pada elemen diacu dengan nilai atribut class diawali oleh tanda titik (<code>.</code>)</strong>. Pada contoh berikut:
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;HTML dengan CSS&lt;/title&gt;
        &lt;style&gt;
            .merah { color: red; }
        &lt;/style&gt;
    &lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Welcome&lt;/h1&gt;
    &lt;h1 class="merah"&gt;Selamat Datang, Programmer!&lt;/h1&gt;
    &lt;p class="merah"&gt;Selamat belajar pemrograman di CodePolitan&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
pada dokumen di atas <strong>semua</strong> elemen yang memiliki atribut class <code>merah</code> yakni elemen <code>&lt;h1&gt;</code> yang kedua dan <code>&lt;p&gt;</code> akan berwarna merah. Elemen <code>&lt;h1&gt;</code> yang pertama tidak dikenai style karena tidak memiliki atribut <code>class="merah"</code>.

Contoh lain:
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;HTML dengan CSS&lt;/title&gt;
        &lt;style&gt;
            h1.merah { color:red; }
        &lt;/style&gt;
    &lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Welcome!&lt;/h1&gt;
    &lt;h1 class="merah"&gt;Selamat Datang, Programmer!&lt;/h1&gt;
    &lt;p class="merah"&gt;Selamat belajar pemrograman di CodePolitan&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
pada dokumen di atas, elemen yang teksnya berwarna merah hanyalah elemen <code>&lt;h1&gt;</code> yang kedua karena selector <code>h1.merah</code> berarti hanya memilih elemen <code>&lt;h1&gt;</code> yang memiliki atribut <code>class="merah"</code> saja. Elemen <code>&lt;p&gt;</code> juga tidak dikenai style meskipun memiliki atribut class <code>merah</code>.

Bandingkan contoh di atas dengan contoh di bawah ini:
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;HTML dengan CSS&lt;/title&gt;
        &lt;style&gt;
            h1 .merah { color:red; }
        &lt;/style&gt;
    &lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Welcome!&lt;/h1&gt;
    &lt;h1 class="merah"&gt;Selamat Datang, &lt;span class="merah"&gt;Programmer&lt;/span&gt; !&lt;/h1&gt;
    &lt;p class="merah"&gt;Selamat belajar pemrograman di CodePolitan&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
Pada contoh terakhir ini, teks yang berwarna merah hanya yang bertuliskan <code>Programmer</code> saja. Perhatikan selector pada CSS di atas, terdapat spasi antara <code>h1</code> dan <code>.merah</code>. Spasi antar selector berarti mengacu pada elemen turunannya. <code>h1 .merah</code> berarti memilih elemen berclass <code>merah</code> yang ada di dalam elemen <code>h1</code>.
<h2>Selector id</h2>
Selector ini mengacu elemen berdasarkan nama idnya. <strong>Nama id pada elemen diacu dengan nilai atribut id diawali oleh tanda pagar (<code>#</code>)</strong>. Pada contoh berikut:
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;HTML dengan CSS&lt;/title&gt;
        &lt;style&gt;
            #judul-utama { color:red; }
            #subjudul { color:blue; }
        &lt;/style&gt;
    &lt;/head&gt;
&lt;body&gt;
    &lt;h1 id="judul-utama"&gt;Welcome!&lt;/h1&gt;
    &lt;h2 id="subjudul"&gt;Selamat Datang, Programmer!&lt;/h2&gt;
    &lt;p&gt;Selamat belajar pemrograman di CodePolitan&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
elemen <code>&lt;h1&gt;</code> akan berwarna merah dan <code>&lt;h2&gt;</code> akan berwarna biru.

Perhatikan lagi contoh ini:
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;HTML dengan CSS&lt;/title&gt;
        &lt;style&gt;
            #hijau { color:green; }
        &lt;/style&gt;
    &lt;/head&gt;
&lt;body&gt;
    &lt;h1 id="hijau"&gt;Welcome!&lt;/h1&gt;
    &lt;h1 id="hijau"&gt;Selamat Datang, Programmer!&lt;/h1&gt;
    &lt;p id="hijau"&gt;Selamat belajar pemrograman di CodePolitan&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
Pada contoh di atas, hanya elemen <code>&lt;h1&gt;</code> yang pertama saja yang berwarna hijau. Berbeda dengan selector class, selector id bersifat unik, artinya mesti hanya ada satu id spesifik dalam sebuah dokumen. Apabila ada dua atau lebih elemen yang ber-id sama seperti contoh di atas, maka hanya elemen yang ditemukan pertama kali (dari atas) pada dokumen saja yang dikenai style.

Untuk mengenakan style ke banyak elemen, gunakanlah class.
<h2>Menggabung Selector</h2>
Kita dapat mengenakan style yang sama kepada berbagai elemen, dengan memisah antar selector dengan tanda koma (<code>,</code>).
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;HTML dengan CSS&lt;/title&gt;
        &lt;style&gt;
            h1, p { color:#333; text-align:center; }
        &lt;/style&gt;
    &lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Selamat Datang, Programmer!&lt;/h1&gt;
    &lt;p&gt;Selamat belajar pemrograman di CodePolitan&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
Pada contoh di atas,  semua elemen <code>&lt;h1&gt;</code> dan <code>&lt;p&gt;</code> pada dokumen akan dikenai style yang sama.
<h2>Penutup</h2>
Pada tutorial kali ini kita telah mempelajari apa itu CSS, apa kegunaan CSS dan cara menggunakannya, bagaimana sintaks CSS, apa itu selector, bagaimana menggunakan selector element, class dan id, serta menggabungkan selector untuk style yang sama.

&nbsp;

Referensi: <a href="http://www.w3schools.com/css" target="_blank">http://www.w3schools.com/css</a>

Background cover oleh <a href="http://www.freepik.com/free-photos-vectors/background">Freepik</a>

Pengenalan dan Sintaks Dasar CSS

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Pengenalan dan Sintaks Dasar CSS

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Micro Python, Bahasa Python untuk Pemrograman Mikrokontroller

CodeIgniter PHP Framework Sekarang Punya Rumah Baru

Ikuti Giveaway dari CoderTalk dan Menangkan 6 Hadiah Menarik

Membuat Website Statis Gratis dengan Memanfaatkan Github Pages

Cara Install Node.js

Digital Input Output pada Arduino