Belajar CSS Sesi 2: Dasar Penulisan Syntax CSS

Belajar CSS Sesi 2: Dasar Penulisan Syntax CSS – Semoga anda terbantu dengan isi dari Postingan ini. Sekarang kita lanjut ke tutorial yang ketiga yang membahas tentang “Dasar Penulisan Syntax CSS”. Tanpa basa basi yuk di simak selengkapnya tentang Dasar Penulisan Syntax CSS.

Dasar Penulisan Syntax CSS

Seperti yang sudah di jelaskan pada pembahasan sesi 1 yaitu tentang pengertian dan fungsi css, bahwa CSS kepanjangan dari Cascading Style Sheets merupakan sebuah style sheet language yang berarti bahasa pemrograman yang digunakan untuk mendesign pada halaman website supaya website tersebut dapat memberikan kesan bagi yang melihatnya.
CSS menggunakan selector untuk menentukan element yang akan di modifikasi, selector tersebut ada 2, yaitu id dan class.
Pada CSS, ada 3 metode penulisan pada CSS, yaitu:

Inline CSS Style
Internal CSS Style
External CSS Style

Ketiga metode tersebut akan saya bahas di artikel ini. Jadi disimak ya pembahasannya kali sampai tuntas.

CSS Inline Style

Untuk penulisan syntax dengan metode inline style sebelumnya sudah dibahas pada pembahasan Belajar HTML Sesi 5: Menggunakan Attribute Style Pada HTML Tag, anda bisa membacanya disana untuk penjelasannya, tetapi saya akan mengutip syntaxnya saja disini, berikut adalah syntax inline style:

<!DOCTYPE html>
<html>
<head>
        <title>Belajar CSS Sesi 2: Pengertian dan Fungsi CSS</title>
</head>
<body>
    <p style="color:red;">teks ini menggunakan attribute style</p>
</body>
</html>

Bisa anda perhatikan dimanakah letak menggunakan metode inline style? Untuk penjelasan mungkin sudah dijelaskan pada belajar html sesi 5 ya, tapi saya akan menjelaskan beberapa saja. Metode Inline Style tersebut menggunakan attribute yang bernama “style” yang memungkinkan anda untuk menggunakan syntax css pada attribute tersebut dengan memasukkan value pada attributenya. Pada contoh diatas, saya sedang mencoba untuk mengubah warna teks yang ada pada paragraf tag dengan warna “red” atau merah.

Internal CSS Style

Metode penulisan untuk Internal CSS Style adalah meletakkan syntax css yang dilakukan pada satu file dengan file html. Syntax CSS akan di letakkan pada <style> tag pada html, dan jangan lupa diakhiri dengan tag penutup ya. Bagaimana caranya untuk meletakkan syntax CSS? Anda letakkan syntax CSS pada element <style>, untuk contoh syntaxnya anda bisa melihatnya dibawah ini:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #tekswarna{
            color: 10px;
        }

        .kelasdiv{
            background: red;
        }
    </style>
        <title>Belajar CSS Sesi 2: Dasar Penulisan Syntax CSS</title>
</head>
<body>
    <div class="kelasdiv">
        <strong id="tekswarna">Basically Syntax CSS</strong>
    </div>
</body>
</html>

Coba anda perhatikan contoh penulisan internal css style pada contoh syntax di atas. Seperti yang sudah saya jelaskan sebelumnya bahwa syntax css tersebut di letakkan pada satu file dengan file html. Untuk selectornya, anda bisa melihatnya yang menggunakan symbol “#” dan “.” tersebut adalah selectornya. Lantas, yang mana class dan yang mana id? Oke akan saya jelaskan.
Untuk selector id anda bisa melihat symbol “#”, sedangkan untuk selector class terdapat symbol “.”.

CSS External Style

Metode penulisan syntax External Style sebenarnya sama saja dengan 2 metode yang sudah saya bahas sebelumnya, hanya saja yang berbeda dari External Style adalah anda harus menginclude/mengimport sebuah file yang berekstensi .css pada file html yang sudah anda buat sebelumnya. Untuk penulisan syntaxnya sama persis dengan Internal Style. Untuk perintah menginclude/mengimport sebuah file berekstensi .css anda bisa melihat html tagnya dibawah ini:

<link rel="stylesheet" type="text/css" href="namafile.css">

Untuk lebih lengkapnya menggunakan external style, anda bisa melihat gambar dan juga syntax yang ada dibawah ini:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
        <title>Belajar CSS Sesi 2: Dasar Penulisan Syntax CSS</title>
</head>
<body>
    <div class="kelasdiv">
        <strong id="tekswarna">Basically Syntax CSS</strong>
    </div>
</body>
</html>

        #tekswarna{
            color: 10px;
        }

        .kelasdiv{
            background: red;
        }

Sekian artikel ini, semoga kedapannya setelah anda membaca artikel “Belajar CSS Sesi 2: Dasar Penulisan Syntax CSS” dapat anda fahami dengan mudah artikel tersebut.

Tutorial CSS Dasar Lainnya:
Belajar CSS Sesi 1: Pengertian dan Fungsi CSS
Belajar CSS Sesi 2: Dasar Penulisan Syntax CSS
Belajar CSS Sesi 3: Mengatur Hyperlink Pada CSS

Shortcutid.com