Bagaimana cara menuliskan script css dalam script html?

Menggunakan style CSS dalam HTML

Kalian bisa menggunakan elemen HTML seperti <b>, <i> dan <u> untuk mengubah bentuk tulisan dalam HTML. Kalian juga bisa menggunakan elemen <font> untuk mengubah bentuk huruf, walaupun itu sudah mulai ditinggalkan oleh HTML. Tapi, cara tersebut kurang efisien kalau kalian ingin menerapkan sekumpulan perubahan yang relatif sama pada banyak halaman HTML. Kalau kalian ingin menggunakan banyak perubahan bentuk tampilan sekaligus untuk satu elemen HTML kalian bisa menggunakan CSS. Kode CSS dalam HTML bisa ditambahkan dengan 3 cara.

Table of Contents

  • Menggunakan style CSS dalam HTML
  • CSS Internal
  • CSS Eksternal
  • Bagaimana cara menulis script CSS di HTML jelaskan?
  • Berapa cara penerapan CSS untuk HTML?
  • Bagaimana penggunaan CSS?
  • Mana sajakah yang termasuk metode untuk memasukkan kode CSS?

  1. Inline CSS dengan menggunakan atribut style
  2. Elemen <style> yg berisi kode CSS.
  3. File CSS terpisah yang dihubungkan dengan file HTML menggunakan elemen <link>.

kode CSS bisa digunakan untuk mengubah jenis huruf, warna huruf, background, tinggi halaman, lebar halaman, dll.  Jika kalian hanya ingin menggunakan CSS pada satu elemen HTML, gunakan atribut style. Berikut ini adalah contoh penggunaan atribut style dalam kode HTML yang bisa kalian coba pahami sendiri setelah disimpan dan dieksekusi di browser.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <h2 style="color : red">Judul</h2>
    <p>paragraf 1</p>
    <p>paragraf 2</p>
    <p>paragraf 3</p>
    <p>paragraf 4</p>
    <p>paragraf 5</p>
    <p>paragraf 6</p>
    <p style = "color : #00ff00">paragraf 7</p>
    <p>paragraf 8</p>
</BODY>
</HTML>

Bagaimana cara menuliskan script css dalam script html?

CSS Internal

Jika kalian ingin menggunakan style css pada beberapa elemen HTML di halaman HTML yang sama kalian bisa menggunakan elemen <style>. Elemen <style> bisa berisi kode CSS yang berisi sekumpulan selector dengan properti dan nilainya. Satu selektor bisa digunakan untuk mempengaruhi tampilan beberapa elemen dalam kode HTML. Kode HTML di bawah ini menggunakan elemen <style> untuk mengubah warna huruf pada elemen <p>.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
        p{
            color: blue;
        }
    </style>
</HEAD>
<BODY>
    <h2>Judul</h2>
    <p>paragraf 1</p>
    <p>paragraf 2</p>
    <p>paragraf 3</p>
    <p>paragraf 4</p>
    <p>paragraf 5</p>
    <p>paragraf 6</p>
    <p style = "color : #00ff00">paragraf 7</p>
    <p>paragraf 8</p>
</BODY>
</HTML>

Kode CSS dalam elemen <style> di atas mengubah semua warna tulisan dalam paragraf atau isi elemen <p> kecuali yang memiliki atribut style. Salah satu elemen <p> pada kode HTML di atas menggunakan atribut style. Teks dalam elemen tersebut memiliki warna berbeda dengan elemen <p> lainnya.

Huruf p sebelum tanda kurung kurawal { ... } disebut dengan selector CSS. Selain berdasarkan nama elemen HTML, kalian bisa mengubah sebagian tampilan isi elemen HTML dengan menggunakan class atau id. Untuk saat ini, fokus saja ke cara penggunaan kode CSS-nya. Pembahasan yang lebih rinci tentang CSS akan saya tulis secara terpisah.

CSS Eksternal

Selain dengan menggunakan dua cara di atas, style CSS juga bisa disimpan pada file terpisah dengan ekstensi *.css dan digunakan untuk beberapa file HTML. Satu file CSS bisa digunakan untuk mengubah banyak file sekaligus. Untuk menggunakan file CSS kalian perlu menambahkan tag <link> seperti di bawah ini.

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

"nama_file.css" pada href bisa kalian ganti dengan nama file CSS yang kalian gunakan. Kalian bisa menambahkan beberapa tag link di antara tag <head> dan penutupnya.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <link rel="stylesheet" href="nama_file.css">
</HEAD>
<BODY>
    <h2>Judul</h2>
    <p>paragraf 1</p>
    <p>paragraf 2</p>
    <p>paragraf 3</p>
    <p>paragraf 4</p>
    <p>paragraf 5</p>
    <p>paragraf 6</p>
    <p style = "color : #00ff00">paragraf 7</p>
    <p>paragraf 8</p>
</BODY>
</HTML>

Isi file CSS sama dengan isi yang kalian lihat di tengah tag <style>. Kalian tidak perlu tag <style> lagi dalam file CSS, walaupun kalian tetap bisa menggunakannya.

p{
    color: blue;
    font-weight: bold;
    font-size: 24px;
}

Jika hanya disebutkan nama file tanpa foldernya, File CSS perlu diletakkan di folder yang sama dengan file HTML yang memerlukan file tersebut.

  • Tweet
  • Share
  • Share
  • Share

Bagaimana cara menulis script CSS di HTML jelaskan?

Untuk menuliskan kode CSS dalam HTML, Anda dapat melakukannya dengan 3 cara yaitu inline, internal dan eksternal..

Inline – menuliskan perintah CSS langsung pada elemen HTML..

Internal – menuliskan perintah CSS di bagian <head> HTML..

Eksternal – menuliskan perintah CSS pada file yang berbeda (eksternal).

Berapa cara penerapan CSS untuk HTML?

Untuk menambahkan CSS pada suatu halaman HTML, kita bisa menggunakan 3 buah cara yaitu; inline, internal, dan eksternal. CSS inline artinya kita menyisipkan CSS secara langsung pada suatu elemen HTML menggunakan atribut style .

Bagaimana penggunaan CSS?

CSS digunakan bersama dengan bahasa markup, seperti HTML dan XML untuk membangun sebuah website yang menarik dan memiliki fungsi yang berjalan baik. CSS juga berguna untuk mengatasi keterbatasan HTML dalam mengatur format halaman website.

Mana sajakah yang termasuk metode untuk memasukkan kode CSS?

Secara garis besar, terdapat 3 cara menginput kode CSS ke dalam HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.

Bagaimana format penulisan CSS dalam program HTML?

Untuk menuliskan kode CSS dalam HTML, Anda dapat melakukannya dengan 3 cara yaitu inline, internal dan eksternal..
Inline – menuliskan perintah CSS langsung pada elemen HTML..
Internal – menuliskan perintah CSS di bagian <head> HTML..
Eksternal – menuliskan perintah CSS pada file yang berbeda (eksternal).

Bagaimana cara menambahkan CSS pada dokumen HTML?

Ada tiga cara untuk menambahkan CSS ke dalam dokumen HTML: Inline – menggunakan atribut style dalam elemen HTML. Internal – menggunakan elemen <style> di dalam elemen <head> Eksternal – menggunakan elemen <link> di dalam elemen <head>

Bagaimana penulisan CSS?

Ada tiga cara menulis CSS di HTML: Internal CSS –> ditulis di dalam tag <style> ; Inline CSS –> ditulis di atribut elemen HTML; External CSS –> ditulis di file CSS terpisah dengan HTML.

Apa itu script CSS?

Cascading Style Sheet atau CSS adalah sebuah pemrogamaran atau boleh dibilang script yang mengendalikan beberapa komponen (tag html) dalam sebuah website sehingga tampilan akan menjadi lebih terstruktur dan seragam. Ada tiga jenis cara dalam penggunaan CSS ini, yaitu: External Style Sheet. Internal Style Sheet.