Pembelajaran CSS 09 Inline Internal dan External

Pada artikel css sebelumnya kita sudah belajar bagaimana menulis komentar agar mempermudah dalam pengeditan dikemudian hari kamu bisa mengecek materi sebelumnya Pembelajaran CSS 08 Membuat Komentar.

Pada artikel ini saya akan menjelaskan bagian cara untuk proses memasukan css didalam html dan caranya dengan menggunakan metode : Inline style CSS, Internal style CSS, dan External style CSS.

1. Inline Style CSS

Dalam peng-inputan koda css ada sebuah cara yang paling praktis untuk menginput kode CSS yaitu dengan inline style CSS. Dengan menggunakan cara ini kamu bisa meletakan kode css langsung didalam tag <html>. Agar lebih jelas coba kamu perhatikan contoh dibawah ini

Kode pertama css <p style="color: red"> dibawah bertujuan membuat paragraf menjadi warna merah :

kode-pertama.html

<p style="color: red">
  Semangat belajar css dengan alodospem
</p>

Pada kode kedua css dibawah ini menunjukkan bahwa ada penambahan 2 kode css selain mengubah warna merah, kode setelahnya yaitu font-size:20px bertujuan membuat tulisan berukuran 20 pixel. dan dalam proses membuat kode css lebih dari satu, kamu bisa memberikan pemisah seperti tanda titik dua koma " ; " lihat pada contoh kode dibawah ini :

kode-kedua.html

<p style="color:red; font-size:20px">
  Semangat belajar css dengan alodospem.
</p>

Kali ini paragraf tersebut akan ditampilkan dengan warna merah dan berukuran 20 pixel. Berikut contoh lengkapnya di dalam halaman HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Alodospem | Pembelajaran CSS 09 Inline, Internal, dan External</title>
    <style>
        .belajar {
        color: blue;}
    </style>
</head>
<body>
        <h1>Belajar CSS</h1>
            <p style="color:red; font-size:20px">
                Semangat belajar css dengan alodospem.
            </p>
            <p style="font-weight:bold">
                Semangat belajar css dengan alodospem.
            </p>

    </body>
</html>

Bagikan ke media sosial :

Pembelajaran CSS 09 Inline Internal dan External

1. Inline Style CSS

Tags

Artikel Terbaru

Programmer Harus Tahu Aplikasi Yang Cocok Buat Skripsi Bertema Pelayanan Kesehatan

Pembelajaran PHP 03 Pengenalan Text Editor 2023

Woow Gaji Programmer Bisa Sampai 30 Juta Per Bulan

Biaya Geospasial 2023 Google Maps

Pembelajaran CSS 09 Inline Internal dan External

Pembelajaran CSS 08 Membuat Komentar