Konsep dasar CSS dan cara menghubungkan HTML – CSS (part 4)

Bismillaahirrohmaanirrohiim…

CSS digunakan untuk memberi style atau gaya pada HTML.
Misalkan kita akan membuat sebuah rumah.
HTML adalah rumahnya, sementara CSS nya digunakan untuk mewarnai temboknya, menentukan tinggi rumahnya, lebar kamarnya, menghias terasnya, dll.

Ada 3 cara menghubungkan HTML dan CSS
1. css diletakkan sebagai atribut pada tag html / inline.
2. css diletakkan dalam dokumen html/internal (Tag, ID, Class).
3. css diletakkan di file terpisan sebagai file.css.

Semua penjelasan dan keterangan sudah dimasukkan di dalam kode contoh.
Jadi silahkan ketikkan kode html dan css di bawah ini.

– Buat file html-css.html di folder “belajar-css”
Lokasi filenya seperti di bawah ini
C:\xampp\htdocs\belajar\belajar-css\html-css.html

<!DOCTYPE html>
<html>
    <head>
        <title>Menghubungkan HTML dan CSS - webku.com</title>

        <!-- css external, ditulis sebagai file terpisah -->
        <link rel="stylesheet" type="text/css" href="style.css" />

        <style type="text/css">
            /*contoh CSS di embed di dokumen HTML*/

            /*class menggunakan titik, format key : value;*/
            .content_block {
                /*set warna background*/
                background-color: #eeeeee;
                /*set jarak dengan atasnya*/
                margin-top: 20px;
                /*set lebar jarak isi area*/
                padding: 5px;
            }
            .miring {
                /*set teks menjadi miring*/
                font-style: italic;
            }
            .merah {
                /*set teks menjadi berwarna merah*/
                color: red;
            }

            /*ID menggunakan tanda pagar*/
            #kecil {
                /*set teks menjadi berukuran kecil*/
                font-size: 10px;
            }

            /*TAG langsung diketik tagnya*/
            li {
                /*set teks menjadi berwarna biru*/
                color: blue;
            }

        </style>
    </head>

    <body>

        <div class="header">
            <h1>3 Cara Menghubungkan CSS dengan HTML</h1>
        </div>

        <div class="content_block">

            <h4>1. CSS diletakkan sebagai atribut pada tag HTML / inline</h4>
            
            <!-- contoh css inline didalam tag html -->
            <p style="font-size: 20px;font-weight: bold;">
                Ini adalah sebuah paragraf dengan ukuran 20px, tebal.
            </p>

        </div>

        <div class="content_block">

            <h4>2. CSS diletakkan dalam dokumen html/internal (Tag, ID, Class)</h4>
            
            <p class="miring">
                Ini adalah paragraf dengan font miring dan ini <span class="merah">teks warna merah</span>.
            </p>
            <p class="miring">
                Ini adalah paragraf dengan font miring dan ini <span class="merah">teks warna merah</span>.
            </p>

            <p id="kecil">
                Ini teks dengan ukuran kecil
            </p>

            <!-- tag li di atur css nya di atas -->
            <ul>
                <li>list biru pertama</li>
                <li>list biru kedua</li>
                <li>list biru ketiga</li>
            </ul>

        </div>        

        <div class="content_block">

            <h4>3. CSS diletakkan di file terpisan sebagai file.css</h4>
            
            <p class="huruf_besar">
                Ini paragraf jadi huruf besar.
            </p>

            <!-- contoh tag html berisi banyak class -->
            <div class="huruf_besar tengah miring tebal">
                diatur dari style.css
            </div>

        </div>        

    </body>
</html>

– Buat file style.css di folder “belajar-css”
Lokasi filenya seperti di bawah ini
C:\xampp\htdocs\belajar\belajar-css\style.css

.huruf_besar {
    /*set teks menjadi huruf besar semua*/
  text-transform: uppercase;
}
.tengah {
    /*set teks menjadi ditengah halaman*/
  text-align: center;
    /*set teks menjadi berwarna hijau*/
  color: green;
}

Setelah itu buka browser dan ketiikan http://localhost/belajar/belajar-css/html-css.html

Hasilnya:

Konsep dasar CSS dalam hubungannya dengan HTML:
– Dalam sebuah dokumen HTML, boleh berisi banyak nama class yang sama.
– Dalam sebuah dokumen HTML, hanya boleh berisi satu nama ID yang sama.
– Sebaiknya kode CSS atau file CSS diletakkan di dalam tag <head>
– Format penulisan kode CSS sama seperti contoh file di atas.
– Untuk memberikan style pada class, menggunakan karakter titik (.)
– Untuk memberikan style pada ID, menggunakan karakter pagar (#)
– Sebuah tag HTML bisa berisi beberapa class

Demikian konsep dasar cara menghubungkan HTML dan CSS, tidak begitu sulit kan.

Sengaja artikel tentang css tidak begitu lengkap, hanya ke pokok dan poin-poin pentingnya saja,
karena ke depan, kita akan menggunakan framework css yang terkenal, yaitu bootstrap untuk membuat desain web menjadi lebih mudah.

Demikian juga dengan javascript, ke depan kita akan menggunakan framework javascript yang sangat populer dan legendaris, yaitu JQuery.

Setelah memahami konsep dasar CSS, selanjutnya kita akan belajar
HTML dan Javascript yang ternyata hubungannya mudah dipahami.

Belajar mudah HTML, CSS, Javascript, PHP, MySQL
1. Pengantar – Memulai belajar web programming secara otodidak (part 1)
2. HTML Dasar – HTML dasar yang mudah sekali (part 2)
3. Tag HTML Penting – Tag HTML yang sering dipakai untuk membuat halaman website (part 3)
4. HTML CSS – Konsep dasar CSS dan cara menghubungkan HTML – CSS (part 4)
5. HTML Javascript – HTML dan Javascript ternyata hubungannya mudah dipahami (part 5)
6. HTML – PHP – Konsep dasar PHP dan cara menghubungkan dengan HTML (part 6)
7. HTML CSS JS – PHP MySQL – Membuat CRUD dengan PHP MySQL HTML CSS JS (part 7)