CSS Part 1 : Cara menginputkan Kode CSS ke dalam HTML

Setelah di dalam tutorial sebelumnya telah membahas tentang dasar dasar CSS kali ini kita akan membahas bagaimana cara menginputkan kode CSS ke dalam HTML. HTML pada dasarnya  adalah kumpulan dari tag-tag yang disusun sehingga memiliki bagian-bagian tertentu, sepertiparagraf,list,tabel dan sebagainya. CSS digunakan untuk mendesain tag-tag HTML ini.

Hypertext Markup Language adalah standart bahasa yang digunakan untuk memformat halaman net sehingga bisa di tampilkan melalui document web. Bisa berupa

1. Publikasi record secara online.

2. Membuat tampilan halaman net.

Three. Menambahkan object berupa photograph, audio video dll.

Nah sekarang bagaimana caranya menyisipkan kode CSS ke dalam HTML, ada beberapa metode yang bisa di gunakan diantaranyaInline Style,Internal Style Sheets, danExternal Style Sheets

1. Inline Style

Metode Inline Style adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style, contoh penggunaannya adalah sebagai berikut:

<!DOCTYPE html>

<html>

<head>

<title>Contoh Inline Style CSS</title>

</head>

<body>

<h 2 style= "background-color:black; color:white" >

Text bewarna putih dan historical past berwarna hitam

</h 2 >

</body>

</html>

2. Internal Style Sheets

Internal Style Sheets, digunakan untuk memisahkan kode CSS dari tag HTML namun tetap dalam satu kerangka halaman HTML. Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah tag <style>. Tag style ini harus berada pada bagian <head> halaman HTML.

<!DOCTYPE html>

<html>

<head>

<title>Contoh Inline Style CSS</title>

<style type= "text/css" >

h 2 {

background-color : black ;

color : white ;

</style>

</head>

<body>

<h 2 >

Text bewarna putih dan historical past berwarna hitam

</h 2 >

</body>

</html>

Kekurangan dari metode internal style sheets adalah jika ingin membuat beberapa halaman dengan tampilan yang sama, maka setiap halaman harus memiliki kode CSS yang sama.

3.Metode External Style Sheets

digunakan untuk membuat kode CSS kedalam sebuah file tersendiri yang terpisah  dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, tinggal di panggil file CSS yang sudah di buat.

Kita akan membuat report belajar.Css

h 2 {

background-color : black ;

color : white ;

lalu file belajar.css akan kita panggil dengan menggunakan @import CSS

<!DOCTYPE html>

<html>

<head>

<title>Contoh Inline Style CSS</title>

<style type= "text/css" >

@import url (belajar.css);

</style>

</head>

<body>

<h 2 >

Text bewarna putih dan historical past berwarna hitam

</h 2 >

</body>

</html>

Cara menginputkan external style sheets, bisa menggunakan tag <link> :

<!DOCTYPE html>

<html>

<head>

<title>Contoh Inline Style CSS</title>

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

</head>

<body>

<h 2 >

Text bewarna putih dan historical past berwarna hitam

</h 2 >

</body>

</html>

Dari ketiga metode diatas yang paling rekomendasikan yakni menggunakan external style sheets, keuntungannya adalah file css bisa di pisahkan dan semua hahalam net dapat menggunakan document CSS tersebut. Jika ingin merubah semua tampilan halaman web kita hanya butuh merubah satu record CSS saja.

0 Response to "CSS Part 1 : Cara menginputkan Kode CSS ke dalam HTML"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel