-->

Belajar Koding HTML & CSS Bagian 1: Membuat Dasar Utama CSS

 

Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mengatur tampilan dan format elemen dalam dokumen HTML. Dengan CSS, Anda dapat mengendalikan warna, font, ukuran, dan tata letak elemen di halaman web.

Ada tiga cara utama untuk menyisipkan CSS ke dalam HTML:​

  1. Inline CSS: Menambahkan gaya langsung pada atribut style di elemen HTML.​html

<p style="color: blue; font-size: 14px;">Ini adalah teks dengan inline CSS.</p>


  1. Internal CSS: Menuliskan kode CSS di dalam tag <style> pada bagian <head> dokumen HTML.​

 

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <title>Contoh Internal CSS</title>

    <style>

        p {

            color: blue;

            font-size: 14px;

        }

    </style>

</head>

<body>

    <p>Ini adalah teks dengan internal CSS.</p>

</body>

</html>

 

  1. External CSS: Menyimpan kode CSS dalam file terpisah dengan ekstensi .css, kemudian menghubungkannya ke dokumen HTML menggunakan tag <link>.​

File style.css:

p {

    color: blue;

    font-size: 14px;

}

 

File index.html:

 

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <title>Contoh External CSS</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <p>Ini adalah teks dengan external CSS.</p>

</body>

</html>

Dan Outputnya Hasilnya Seperti Ini

Untuk pemula yang ingin mempelajari CSS lebih lanjut, berikut beberapa sumber belajar yang dapat membantu:​

  • Tutorial CSS di Petani Kode: Menyediakan panduan dasar CSS dalam bahasa Indonesia, mulai dari pengenalan hingga teknik lanjutan. ​
  • W3Schools CSS Tutorial: Sumber belajar CSS dalam bahasa Inggris dengan contoh interaktif dan referensi lengkap.
  • Belajar CSS di Rumahweb: Artikel yang membahas dasar-dasar CSS dan cara menggunakannya dalam pengembangan web.

 

REFERENSI

RevoU

W3Schools.com

Codepolitan

Malas Ngoding

Dicoding

 

0 Response to "Belajar Koding HTML & CSS Bagian 1: Membuat Dasar Utama CSS"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel