Cara menggunakan inline css adalah

Question

Tampilan atau interface memiliki peran penting dalam suatu aplikasi tak terkecuali aplikasi berupa website. Hal ini karena tampilan merupakan salah satu faktor bagaimana suatu website bisa menarik para pengunjung.

Table of Contents Show

Mengenal CSS
Menambahkan CSS ke Dokumen HTML
Internal CSS
Eksternal CSS
Tiga Cara Menyisipkan CSS
CSS Eksternal
Internal CSS
Multiple Sytle CSS
Apa itu inline style CSS?
Atribut apakah yang digunakan untuk mendefinisikan inline CSS?
Berapa cara menggunakan CSS?
Bagaimana cara menggunakan Memanggil CSS dalam HTML?

Dengan adanya tampilan yang cantik maka pengunjung akan betah berlama-lama di website kita. Semakin cantik tampilan website maka pengunjung akan semakin tertarik menelusuri berbagai konten yang ada dalam website kita.

Untuk mengatur tampilan website dalam HTML perlu adanya kerjasama dengan yang namanya CSS.

Apa itu CSS? Bagaimana menggunakannya? Mari simak pembahasan berikut.

Mengenal CSS

CSS merupakan singkatan dari Cascading Style Sheet yang fungsi utamanya yaitu mengatur tampilan dari elemen yang ditulis pada dokumen HTML. Bahasa inilah yang memiliki peran penting untuk mempercantik tampilan antarmuka (interface) website.

Salah satu contoh sederhana hasil penerapan dari CSS.

Menambahkan CSS ke 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>

Untuk mengetahui contoh penerapannya maka simak pembahasan berikut.

Inline CSS

Inline CSS adalah cara menambahkan CSS dengan menggunakan atribut style pada tag pembuka elemen HTML. Cara ini biasanya digunakan untuk memberi gaya atau style unik pada suatu elemen.


<!DOCTYPE html>
<html>
<head>
	<title>Mengenal CSS</title>
</head>
<body>
	<h1 style="padding: 5px; background-color: red;">Tutorial Penerapan CSS</h1>
	<p style="padding: 10px; background-color: green;">
		Selamat datang di website kami!
	</p>
</body>
</html>

Keluaran:

Perlu dicatat bahwa menambahkan CSS dengan cara ini sangat tidak disarankan, tapi bila hanya untuk sekedar latihan masih diperbolehkan.

Lantas apakah ada cara lain yang lebih disarankan?

Ada! untuk mengetahuinya silahkan simak pembahasan selanjutnya.

Internal CSS

Internal CSS merupakan cara menambahkan CSS dengan menggunakan tag <style> di dalam tag <head>. Cara ini diperuntukkan untuk mengatur style untuk satu halaman website.


<!DOCTYPE html>
<html>
<head>
	<title>Mengenal CSS</title>
	<style type="text/css">
		h1{
			padding: 5px; 
			background-color: red;
		}
		p{
			padding: 10px; 
			background-color: green;
		}
	</style>
</head>
<body>
	<h1>Tutorial Penerapan CSS</h1>
	<p>Selamat datang di website kami!</p>
</body>
</html>

Keluaran:

Untuk cara ini masih diperbolehkan untuk digunakan ketika membuat suatu website.

Eksternal CSS

Eksternal CSS adalah cara menambahkan CSS dengan menggunakan tag <link> yang didefinisikan pada setiap dokumen HTML. Cara ini merupakan cara yang paling umum digunakan oleh para pengembang, karena dengan cara ini memungkinkan kita untuk membuat hanya satu style CSS yang kemudian dapat diterapkan ke semua halaman website.

Untuk menerapkan cara ini kita perlu menulis kode CSS secara terpisah dari dokumen HTML.

Kemudian dokumen HTML dan file dari kode CSS tadi selanjutnya dihubungkan dengan menggunakan tag yang didefinisikan pada bagian dalam dokumen HTML.

Ketika browser membaca style sheet, browser akan memformat dokumen HTML sesuai dengan informasi di style sheet.

Section Artikel

Tiga Cara Menyisipkan CSS

Ada beberapa cara yang dapat dilakukan untuk menggunakan CSS, 3 cara tersebut adalah :

CSS Eksternal
CSS internal
CSS sebaris

CSS Eksternal

Dengan eksternal CSS, kita dapat mengubah tampilan seluruh situs web hanya dengan mengubah satu file!

Setiap halaman HTML harus menyertakan referensi ke file eksternal CSS di dalam elemen, di dalam bagian head halaman HTML tersebut.

Contoh
Eksternal CSS yang ditentukan dalam elemen , di dalam bagian dari halaman HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>Ini adalah Heading</h1>
<p>Ini adalah Paragaraf.</p>

</body>
</html>

Eksternal CSS dapat ditulis di editor teks apa pun, dan harus disimpan dengan ekstensi .css.

File .css eksternal tidak boleh berisi tag HTML apa pun.

Berikut adalah tampilan file “mystyle.css”:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Catatan: Jangan menambahkan spasi antara nilai properti dan unit (seperti margin-left: 20 px;). Cara yang benar adalah: margin-left: 20px;

Internal CSS

Internal CSS dapat digunakan jika satu halaman HTML memiliki gaya/tampilan yang unik.

Internal CSS ditentukan di dalam elemen

Contoh
Gaya internal ditentukan dalam elemen

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>Ini Heading</h1>
<p>Ini Paragraf.</p>

</body>
</html>

Inline CSS

Inline CSS dapat digunakan untuk menerapkan gaya unik untuk satu elemen. Untuk menggunakan Inline CSS, tambahkan atribut ke elemen yang relevan. Atribut style dapat berisi properti CSS apa pun.

Contoh
Inline CSS ditentukan dalam atribut “gaya” dari elemen yang relevan:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">Ini adalah Heading</h1>
<p style="color:red;">Ini adalah Paragraf.</p>

</body>
</html>

Tips: Inline CSS ini menghilangkan beberapa kelebihan dari CSS yang dikenal untuk meringkas code.Gunakan metode ini dengan hemat.

Multiple Sytle CSS

Jika beberapa properti telah ditentukan untuk pemilih (elemen) yang sama di halaman CSS berbeda, nilai dari style terakhir yang akan digunakan.

Asumsikan bahwa lembar gaya eksternal memiliki gaya berikut untuk elemen

h1 {
  color: navy;
}

Kemudian, asumsikan bahwa css internal juga memiliki gaya berikut untuk elemen

h1 {
  color: orange;   
}

Contoh
Jika CSS internal ditentukan setelah ditautkan ke CSS eksternal, elemen akan menjadi “oranye”:

<!DOCTYPE html>
<html>
  <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>
<body>

<h1>Ini adalah Heading</h1>
<p>Ini adalah Paragraf.</p>

</body>
</html>

Contoh
Namun, jika CSS internal ditentukan sebelum tautan ke CSS eksternal, elemen akan menjadi “navy”:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>Ini adalah Heading</h1>
<p>Ini adalah Paragraf.</p>

</body>
</html>

Urutan CSS

Style yang mana yang akan digunakan jika ada lebih dari satu style yang ditentukan untuk elemen HTML?Semua Style dalam halaman akan “CSS” menjadi lembar style “virtual” baru dengan aturan berikut, dengan nomor satu memiliki prioritas tertinggi:

Inline CSS (di dalam elemen HTML)
Eksternal dan internal CSS (di bagian kepala)
Default browser

Jadi, inline css memiliki prioritas tertinggi, dan akan menggantikan Eksternal dan internal style serta default browser.

Apa itu inline style CSS?

Inline CSS Inline CSS adalah kode CSS yang dituliskan di dalam file HTML. Jenis CSS ini hanya mempengaruhi satu baris kode HTML. Inline CSS tidak bisa diaplikasikan ke semua halaman website sekaligus. Namun, jenis CSS ini tepat digunakan ketika Anda ingin membuat elemen HTML dengan format khusus di sebuah halaman.

Atribut apakah yang digunakan untuk mendefinisikan inline CSS?

Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML. Setiap elemen HTML memiliki atribut style, di situ lah inline CSS ditulis. Cara ini kurang efisien karena setiap tag HTML yang diberikan harus memiliki style masing-masing.

Berapa cara menggunakan CSS?

Ada tiga cara dalam menggunakan CSS pada file HTML..

Inline. Metode ini digunakan dengan cara memasukkan file css ke dalam tag HTML secara langsung..

Internal. Metode ini menggunakan CSS dengan tag <style> pada file html. ... .

External. Metode ini digunakan dengan cara memisahkan file html dan juga file css..

Bagaimana cara menggunakan Memanggil CSS dalam HTML?

Untuk memasukkan CSS ke dalam file HTML kita akan memakai tag <link rel="stylesheet" href="path_ke_css_file" /> . Jika sedang membuat project web yang besar, sebaiknya menggunakan mode external CSS karena akan jauh lebih mudah untuk maintenance dan juga efisiensi size CSS.

kode css