Belajar SEO

Ini Contoh Internal, External & Inline CSS

Info Web Desain 1
jasa SEO

Meski saya bukan seorang yang ahli dalam bidang web desain tapi dalam kesempatan ini saya ingin menuliskan sejumlah contoh-contoh penggunaan CSS yang saya ketahui. Dan sudah tentu contoh-contoh yang akan saya berikan ini masih berhubungan dengan pembahasan utama kita yakni tentang SEO.

Saya sudah katakan bahwa SEO adalah perpaduan antara, teknologi, management, insting dan seni. CSS masuk kedalam area seni tentunya karena tujuan utama dari CSS adalah bagaimana membuat tampilan website menjadi tambah menarik.

CSS dapat kita pakai untuk beragam kebutuhan so! CSS tidak terpatri pada lingkup web desain saja. Lebih dari itu CSS dapat kita manfaatkan untuk kegiatan marketing dengan tujuan bisa memberikan perbedaan antara apa yang ingin anda tonjolkan didalam situs penjualan anda.

CSS dapat kita pasang didalam website menggunakan 3 metoda yakni memanfaatkan internal, external dan inline CSS.

Internal Stylesheet (CSS)

Internal Stylesheet adalah kode CSS untuk halaman web yang disematkan di bagian <head> dari file tertentu (yang saya sebut dengan file tertentu ini adalah file unik yang namanya tergantung daripada script yang anda gunakan untuk membuat website). Internal CSS ini bisa memudahkan kita untuk menerapkan gaya seperti “class” atau “id” dalam rangka untuk menggunakan style yang sama kepada “atribut” yang ingin kita atur.

Keuntungan menggunkaan internal CSS ini adalah: dapat mudah mengelola satu buah halaman web tanpa mengganggu pengaturan CSS dihalaman lainnya

Kekurangan menggunakan internal CSS ini adalah: pekerjaan membangun web menjadi tidak efisien karena anda harus mengatur setiap style berdasarkan halaman walaupun anda masih menggunakan “class” dan “id” yang sama atau berbeda

Contoh Membuat Internal CSS:

Untuk membuat internal CSS maka anda harus memulainya dengan <style> dan mengakhirinya dengan </style> diantara bagian <head> hingga </head>

Contoh internal CSS ini dapat anda temukan pada template blogger karena hampir semua blogger template menggunakan internal CSS. Tapi untuk lebih jelasnya anda bisa melihat contoh internal CSS dibawah ini:

<head>
<title>Internal CSS</title>
<style type="text/css">
h1 {color:blue; text-align: center;}
p {color:white; background: black; padding: 10px 10px;}
</style>
</head>
<h1>Ini Contoh Internal CSS</h1><br />
<p>Hallo! ini adalah bagian contoh penggunaan internal CSS yang bisa anda buat sendiri dirumah!. Semoga bermanfaat ya!</p>

[viral-lock]Download Contoh Internal CSS[/viral-lock]

External Stylesheet (CSS)

Bila anda menggunakan teknik external CSS ini maka anda membutuhkan file yang berextensi .css yang anda simpan disebuah folder yang dapat diakses menggunakan kode “href”. Penggunaan CSS external ini adalah yang paling banyak di gunakan oleh template/themes ataupun script modern. Bila anda menggunakan external CSS maka dapat dengan mudah mengatur style/gaya website anda secara global.

Keuntungan menggunakan external CSS adalah: membuat pekerjaan membuat website menjadi lebih efisien karena semua gaya yang terdapat didalam lembar html diatur pada satu lembar css saja. Anda dapat menggunakan gaya/style yang sama untuk setiap class ataupun id pada lembar html.

Kekurangan menggunakan teknik external CSS adalah: perlu beberapa tambahan style bila anda ingin mengkostumisasi style-style tertentu pada halaman website dan begitu pula pada proses rendering bila terlalu banyak menggunakan file css maka website membutuhkan waktu render yang lebih lama.

Contoh Penggunaan External CSS:

<head>
<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>

bila anda menggunakan kode diatas maka anda harus membuat file CSS yang diberi nama style.css yang disimpan didalam folder “css”.

Inline Stylesheet (CSS)

Sedangkan untuk inline CSS adalah gaya yang diterapkan pada tag html tertentu dan berlaku pada html yang diaturnya saja. Menggunakan inline CSS ini sebenarnya di fokuskan untuk mengkostum beberapa tag html saja agar tampak berbeda dengan pengaturan yang sudah kita buat entah itu menggunakan internal ataupun external css.

Contoh Penggunaan Inline CSS:

<p style="background: red; color: white; font-weight: bold; padding: 5px 5px; border-radius: 2px 2px;">Ini adalah contoh penggunaan inline CSS fungsinya adalah untuk membuat perbedaan pada tag html tertentu agar tidak mengikuti pengaturan global yang terdapat pada internal ataupun external css.</p>

Hasil dari pengaturan inline CSS:

Ini adalah contoh penggunaan inline CSS fungsinya adalah untuk membuat perbedaan pada tag html tertentu agar tidak mengikuti pengaturan global yang terdapat pada internal ataupun external css.

Nah sekarang kita telah berhasil membuat style tersendiri untuk tag html <p> (paragraph) seperti contoh diatas. Tampak perbedaan dengan jelas walau pengaturan css secara global terhadp tag <p> adalah menggunakan background berwarna putih dan font color berwarna hitam.

Bila anda ingin belajar CSS anda bisa langsung mengunjungi situsnya seperti:

  1. http://www.w3schools.com/css/
  2. http://learnlayout.com/
  3. https://www.codecademy.com/learn/web
Tags:
Jasa Pembuatan Website

One Response

  1. author

    Faqih Adz-DzakySeptember 27, 2017 at 9:40 pmReply

    terimakasih ilmunya gan…sangat bermanfaat..

Leave a Reply