Belajar CSS - Memahami Perbedaan Perintah Inline, Internal dan External pada CSS

Tutorial Hari Ini
Pengantar HTML-CSS
Memahami Perintah CSS Inline
Penerapan Perintah CSS Internal
Penerapan Perintah CSS External
Pembahasan Materi Selanjutnya
Penutup

Pengantar HTML-CSS

Sahabat semua, berjumpa kembali pada tutorial hari ini yang mana merupakan kelanjutan dari tutorial sebelumnya. Pada aritikel sebelumnya, sahabat semua diajak untuk memahami aturan penulisan dari CSS(Cascading Style Sheets) hal tersebut penting dilakukan untuk membangun struktur pondasi yang kuat pada pembuatan aplikasi web base, sehingga ketika sudah menggunakan template-template yang tren digunakan saat ini, pada saat mengimplemantasi ke aplikasi web base profesional sudah siap digunakandigunakan. Pada artikel CSS yang kedua ini sahabat semua diajak untuk memahami dan menggunakan serta perbedaan dari perintah untuk menyisipkan dengan Inline, Internal dan External ketika diterapkan pada TAG-TAG HTML. Sahabat! untuk menyelesaikan materi ini tidak lama cukup 20 menit. Mari mulai belajar ...

Memahami Perintah CSS Inline

Apa itu perintah Inline ? perintah Inline berfungsi untuk mendeklarasikan CSS secara langsung dalam atribut elemen TAG HTML. Pada setiap baris TAG HTML yang membutuhkan CSS dapat langsung dideklarasikan atau ditulis didalam TAG <style>, sebagai contoh:

<p style="color:green;text-align:right;text-weight:bold;font-size:20 px;">Hello, sahabat ini paragraf</>

Bila diperhatian script diatas, cara penulisan seperti ini selalu harus ada <style> pada setiap baris yang membutuhkan CSS. Penulisan seperti ini menjadi tidak efektif dan tidak direkomen- dasikan. CSS Inline hanya mengubah 1 baris elemen saja.

Baca juga: Fundamental CSS.

Latihan-1: CSS Inline

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Latihan1 Penulisan Inline</title>

</head>

<body>

<h2 style="color:green;text-align:center;">Website Geriatama</h2>

<p style="color:red;text-weight:bold;font-size:20 px;">Ini Paragraph dengan warna Merah.</p>

</body>

</html>

Latihan-2: CSS Inline

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Latihan1 Penulisan INLINE</title>

</head>

<body>

<h1 style=‚color:green;>Daftar Buah Alpukat Import</h1>

<ul>

<li>Red Vietnam</li>

<li>Yellow Apocado</li>

</ul>

</h2>

</body>

</html>

Kelebihan CSS Inline

» Hanya membantu ketika hanya membutuhkan satu elemen baris pada HTML.

» Untuk mengedit atau memperbaiki script lebih cepat.

Kekurangan CSS Inline

» Penulisan script menjadi tidak efektif, sebab Inline CSS hanya dapat diterapkan pada satu

baris elemen HTML.

Memahami Perintah CSS Internal

Perintah Internal berfungsi untuk mendeklarasikan baris-baris perintah CSS diantara TAG <head>...</head> pada HTML. Penulisan seperti ini lebih efektif dan direkomendasikan. Sebagai contoh:

<head>

<style>

h1 {

color: blue;

text-align: right;

}

</style>

<style>

h2 {

color: green;

text-align: center;

}

</style>

<style>

h2 {

color: red;

text-align: left;

}

</style>

<style>

body {

background-color: Pale Yellow;

}

</style>

</head>

Bila diperhatian script diatas, penulisan seperti ini lebih terorganisasi dan efektif, cara ini direkomendasikan dalam penulisan CSS.

Latihan-3: CSS Internale

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Penulisan Internal</title>

<head>

<style>

body {

background-color: Khaki;

}

h1 {

color: blue;

text-align: right;

}

h2 {

color: green;

text-align: center;

}

h3 {

color: red;

text-align: left;

}

</style>

</head>

<body>

<h1>Selamat Datang di Perkebunan Alpukat</h1>

<h2>Di Lembah Permai Hanjuang, Cimahi Utara Jawa Barat

</h2><hr>

<h3>Alpukat Jenis Import:

<ol>

<li>Red Vietnam</li>

<li>Yellow Apocado</li>

</ol>

</h3>

</body>

</html>

Kesimpulan Penulisan CSS Internal

» Penulisan CSS lebih terorganisasi penulisan seperti ini sangat dianjurkan.

» Untuk mengedit atau memperbaiki script lebih cepat.

Memahami Perintah CSS External

Pada penulisan perintah-perintah CSS External penggunaan perintah ini sangat direkomendasi kan pada HTML. Untuk selanjutnya cara penulisan css external ini untuk belajar web base akan paling banyak digunakan juga file-file CSS banyak yang menyediakan tinggal mengunakan, oleh sebab itu yang paling penting bagi sahabat pemula betul-betul cara penggunaan dasar wajib dikuasai.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Penulisan CSS External</title>

</head>

<body>

<h1>Ini Cara Penulisan CSS External</h1><hr>

<p>Isi Konten-konten Website.</p>

</body>

</html>

Selanjutnya buat file css dan berikan nama mycss.css, script nya, sbb:

/*-- File: mycss.css

penulisan Documen CSS */

body {

background-color: MediumSeaGreen;

}

h1 {

color: navy;

margin-left: 20px;

}

Kesimpulan Penulisan CSS External

» Penulisan CSS External sangat direkomendasikan karena penulisan script HTML jadi lebih

rapi dan kecepatan loading lebih baik.

» Dapat digunakan pada website yang berbeda-beda, dengan kebutuhan file css yang sama.

» Pada setiap pemanggilan wajib menggunakan TAG <link> & masih diletakkan pada TAG:

Materi Selanjutnya
Penutup

Sekian pembahasan tutorial CSS part2 tentang memahami perintah Inline, internal, dan external pada CSS. Selanjutnya akan dibahas tentang lanjutan merangkai perintah-perintah CSS. Sekian semoga bermanfaat. Salam.