29 Januari 2015

Contoh Sederhana Penggunaan CSS Pada HTML

       5 Komentar
Pada kesempatan ini saya akan memberikan contoh sederhana penggunaan CSS pada HTML. Sebelumnya apa yang harus anda ketahui terlebih dahulu sebelum menerapkan kode CSS di dalam HTML. Penerapan kode CSS dapat di bagi menjadi 3 cara, yaitu secara eksternal,internal,dan embed(inline) di HTML. secara eksternal berarti kode css berada di luar atau terpisah dengan kode HTML, untuk contoh dapat di lihat dari potongan kode HTML berikut ini :

<html>
<head>
<title>Eksternal css</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="warna">ini contoh kode CSS menggunakan cara eksternal</h1>
</body>
</html>

simpan kode diatas dengan nama "eks.html"
kemudian langkah berikut buat kode css, seperti di bawah ini :
.warna{
color:blue;
font-size:12px;
font-family: Times New Roman;
}

simpan kode css diatas dengan nama "style.css" . Kemudian jika tampilan browser ketika kode diatas coba dijalankan seperti pada gambar di bawah ini, maka implementasi kode css untuk eksternal sudah benar


Untuk contoh penerapan kode css dengan cara internal dan inline kita bahas pada kesempatan berikutnya :)

5 komentar:

  1. cara tuntaskan penyakit TBC paling ampuh02 April, 2015

    nice postingannya gan,,,
    saya tunggu postingan selanjutnya

    BalasHapus
  2. Unknown05 Oktober, 2018

    Keren bgt gan artikelnya tentang Contoh Sederhana Penggunaan CSS Pada HTML. Disini sy jadi tau cara menggunakan CSS: linked style/External Styles, ini adalah metode yang bisa digunakan untuk merubah style pada semua elemen di semua page, cara ini mengharuskan kita untuk membuat file CSS. Setelah kita membuat file CSS, maka file tersebut kita panggil dalam tag link. Sukses terus ya gan......Makasih.....

    Jangan lupa ya.....
    kunjungi website saya ya : https://lurriekurniasih.mahasiswa.atmaluhur.ac.id
    dan website kampus saya : http://www.atmaluhur.ac.id

    BalasHapus
    Balasan
    1. hn cahyo25 Juni, 2020

      ok, terima kasih sudah berkunjung ke sini

      Hapus
  3. Shikamaru Nara03 September, 2019

    yuhuuu, bermanfaat sekali min
    solder uap

    BalasHapus
  4. Shikamaru Nara25 September, 2019

    mantab banget gan
    Solder uap

    BalasHapus