Font adalah sekumpulan bentuk huruf pada komputer. Ada banyak jenis font yang bisa kita pakai dan beragam bentuknya. CSS menyediakan beberapa properti untuk mengatur font pada halaman html. Beberapa properti yang bisa digunakan adalah mengatur famili font, ukuran font, style font, varian font dan ketebalan font.

Berikut ini properti untuk font dan penjesannya :

1. font-family

Adalah properti CSS yang digunakan untuk mengeset nama font yang digunakan pada elemen html. Pada CSS terdapat dua cara mendeskripsikan font-family yaitu dengan nama generic dan nama family.

Generic font ada tiga jenis, yaitu :

• Serif, adalah jenis font yang memiliki akhiran garis kecil pada huruf
• Sans-serif, adalah jenis font tanpa akhiran garis kecil pada huruf. Kata Sans-berarti tanpa.
• Monospace, adalah jenis font yang mempunyai lebar yang sama untuk tiap-tiap huruf.

Sedangkan nama family font ada banyak sekali seperti font-font yang biasa kita pakai saat membuat dokumen melalui ms word atau libre office writer. Namun font-font ini bisa dikelompokkan kedalam tiga nama generic tadi.

Contoh pengelompokan font family :

• Times New Roman, Georgia , termasuk kelompok Serif
• Arial, Verdana , termasuk kelompok Sans-Serif
• Courier New, Lucida Console, termasuk kelompok Monospace.

Contoh penggunaan CSS font-family :

body {
    font-family: "Times New Roman", Times, serif;
}

Kita bisa berlatih CSS font-family disini >>

2. font-style

Adalah properti CSS yang digunakan untuk mengatur style font seperti cetak miring-italic, cetak miring-oblique atau normal. Normal berarti font ditampilkan secara normal tanpa style italic atau oblique.

Sekilas antara italic dan oblique tidak ada perbedaan. Style italic berarti mengambil font-family italic, jadi sudah miring dari asalnya. Sedangkan style oblique mengambil font-family true type lalu di tampilkan miring (condong). Pada beberapa font, penggunaan style oblique akan diperoleh kemiringan font yang lebih baik.

Contoh penggunaan CSS font-style :

p {
    font-style: italic;
}

Kita bisa berlatih CSS font-style disini >>

3. font-size

Adalah properti CSS yang digunakan mengatur ukuran font. Ada beberapa jenis satuan ukuran font yang bisa dipakai misalnya px (pixel) dan em.

Ada dua cara dalam menentukan ukuran font, yaitu absolute size dan relative size. Absolute size berarti mengeset ukuran font pada ukuran tertentu dan tidak mengijinkan user untuk mengubahnya, pada semua browser. Sedangkan relative adalah mengeset ukuran font kepada elemen sekitarnya. Relative font mengijinkan user mengubah ukuran font pada browser.

Contoh penggunaan CSS font-size secara absolute dengan pixel :

h1 {
    font-size: 16px;
}

Kita bisa berlatih CSS font-size absolute dengan pixel disini >>

Contoh penggunaan CSS font-size secara relative dengan em :

h1 {
    font-size: 1em;
}

Note : 
Ukuran em mengacu pada ukuran font current pada browser, yaitu sebesar 16px. namun ukuran em mengijinkan browser untuk mengubah ukuran font dengan setting default font pada browser. penggunaan em lebih direkomendasikan dan banyak dipakai oleh beberapa developer web.

Kita bisa berlatih CSS font-size absolute dengan em disini >>

4. font-weight

Adalah properti CSS yang digunakan untuk mengatur ketebalan font. Secara default, font weight akan diset normal. Nilai properti font-wight bisa diset normal, bold, bolder, lighter atau dengan angka seperti 100, 200 dan seterusnya.

Contoh penggunaan CSS font-weight :

p {
    font-weight: bold;
}

Kita bisa berlatih CSS font-weight disini >>

5. font-variant

Adalah properti CSS yang digunakan untuk mengatur varian font, seperti normal atau small caps. Dengan small caps akan membuat membuat lowercase menjadi uppercase. Selain itu juga bisa diset dengan nilai initial atau inherit.

Contoh penggunaan CSS font-variant :

p {
    font-variant: small-caps;
}

Kita bisa berlatih CSS font-variant disini >>

6. font

Adalah properti CSS yang merupakan penggabungan dari beberapa properti. Penggunaan properti font akan meringkas penulisan CSS font.

Contoh penggunaan CSS font :

p {
    font: italic bold 12px arial, sans-serif;
}

Kita bisa berlatih CSS font disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/css/css_font.asp

CSS menyediakan properti yang cukup lengkap dalam memformat teks. Mulai dari mengatur warna teks, posisi teks, dekorasi teks dan sebagainya dapat disetting melalui CSS. Selain itu kita juga bisa mentransformasikan teks dan mengatur spasi antar huruf dan kata pada teks melalui CSS. Bahkan mengatur arah teks (text direction) juga bisa dilakukan dengan CSS.

Ada 13 properti yang bisa digunakan untuk memformat teks, yaitu color, text-align, text-decoration, text-transform, text-indent, text-shadow, letter-spacing, word-spacing, line-height, vertical-align, white-space, direction dan unicode-bidi.

Berikut ini penjelasan masing-masing properti tersebut :

1. color

Adalah Adalah properti CSS yang digunakan untuk memformat warna teks.

Ada tiga cara dalam menentukan nilai warna, yaitu :

• menggunakan nama warna seperti red, blue, green dan sebagainya
• menggunakan kode heksa warna seperti #ff0000 untuk warna merah dan #0000ff untuk warna biru, dan seterusnya.
• menggunakan nilai RGB seperti rgb(255,0,0) untuk warna merah, rgb(0,0,255) untuk warna biru dan seterusnya.

Contoh penggunaan CSS color :

body {
    color: #e0ffff;
}

Kita bisa berlatih CSS color disini >>

2. text-align

Adalah properti CSS yang digunakan untuk mengatur alignment text horizontal. Alignment teks bisa diset left, right, center dan justify.

Left berarti teks rata kiri, right berarti rata kanan, center berarti rata tengah dan justify berarti rata kiri kanan.

Contoh penggunaan CSS text-align :

p {
   text-align: center;
}

Kita bisa berlatih CSS text-align disini >>

3. text-decoration

Adalah properti CSS yang digunakan untuk mengeset dan membuang dekorasi teks.

Ada empat nilai yang bisa ditetapkan pada properti text-decoration, yaitu :

• none, berfungsi membuang semua dekorasi teks.
• underline, berfungsi membuat teks bergaris bawah.
• line-through, berfungsi membuat teks bergaris tengah
• overline, berfungsi membuat teks bergaris atas.

Contoh penggunaan CSS text-decoration :

a {
   text-decoration: underline;
}

Kita bisa berlatih CSS text-decoration disini >>

4. text-transform

Adalah properti CSS yang digunakan untuk mentransformasi huruf pada teks.

Ada 3 nilai yang bisa ditetapkan pada properti text-transform, yaitu :

• uppercase, berfungsi mengubah semua huruf menjadi huruf besar
• lowercase, berfungsi mengubah semua huruf menjadi huruf kecil
• capitalize, berfungsi mengubah huruf paertama pada setiap kalimat menjadi huruf besar.

Contoh penggunaan CSS text-transform :

.besar {
   text-transform: uppercase;
}

Kita bisa berlatih CSS text-transform disini >>

5. text-indent

Adalah properti CSS yang digunakan untuk mengatur posisi menjorok sebuat teks (inden teks)

Contoh penggunaan CSS text-transform :

p {
   text-indext: 50px;
}

Kita bisa berlatih CSS text-indent disini >>

6. text-shadow

Adalah properti CSS yang digunakan untuk membuat efek bayangan pada teks.

Contoh penggunaan CSS text-shadow :

h1 {
    text-shadow: 1px 1px #ff6a54;
}

Kita bisa berlatih CSS text-shadow disini >>

7. letter-spacing

Adalah properti CSS yang digunakan untuk mengatur jarak antar huruf pada teks.

Contoh penggunaan CSS letter-spacing :

h1 {
     letter-spacing : 2px;
}

Kita bisa berlatih CSS letter-spacing disini >>

8. word-spacing

Adalah properti CSS yang digunakan untuk mengatur jarak antar kata pada teks.

Contoh penggunaan CSS word-spacing :

h1 {
     word-spacing : 2px;
}

Kita bisa berlatih CSS word-spacing disini >>

9.line-height

Adalah properti CSS yang digunakan untuk mengatur tinggi tiap baris teks.

Contoh penggunaan CSS line-height :

p {
     line-height : 150%;
}

Kita bisa berlatih CSS line-height disini >>

10.vertical-align

Adalah properti CSS yang digunakan untuk mengatur alignment sebuah elemen pada teks. Nilai properti ini bisa diset text-top yaitu elemen rata atas dengan teks atau text-bottom yaitu elemen rata bawah dengan teks. Secara default vertical-align diset text-bottom.

Contoh penggunaan CSS vertical-align :

img {
     vertical-align : text-top;
}

Kita bisa berlatih CSS vertical-align disini >>

11.white-space

Adalah properti CSS yang digunakan untuk menetapkan aksi penanganan terhadap white space sebuah teks. NIlai properti white-space bisa diset wrap dan nowrap. Secara default white-space akan ditangani dengan cara nowrap.

Contoh penggunaan CSS white-space :

p {
     white-space : wrap;
}

Kita bisa berlatih CSS white-space disini >>

12. direction

Adalah properti CSS yang digunakan untuk mengatur arah penulisan teks. Arah penulisan diisi ltr (left to right) atau rtl (right to left). Secara default arah penulisan adalah ltr yaitu dari kiri ke kanan.

Contoh penggunaan CSS direction :

h1 {
     direction : rtl;
}

Kita bisa berlatih CSS direction disini >>

13. unicode-bidi

Adalah properti CSS yang digunakan untuk mengatur bidirectional unicode karakter pada teks. unicode-bidi biasanya digunakan sepasang dengan CSS direction.

Contoh penggunaan CSS unicode-bidi:

h1 {
     direction : rtl;
     unicode-bidi: bidi-override;
}

Kita bisa berlatih CSS unicode-bidi disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/css/css_text.asp

Background adalah latar belakang elemen pada halaman html. Background bisa diterapkan pada body (keseluruhan halaman) atau bisa diterapkan untuk elemen yang lebih kecil seperti paragraf atau bahkan untuk satu teks atau satu huruf saja. Background bisa berupa warna tunggal atau berupa gambar (image).

Ada enam properti yang bisa digunakan untuk mengatur background, yaitu :

1. background-color,
2. background-image
3. background-repeat
4. background-position
5. background-attachment
6. background (penggabungan beberapa properti dalam satu deklarasi)

Dan berikut ini penjelasan masing-masing properti tersebut.

1. background-color

Adalah properti CSS yang digunakan untuk mengatur warna background.

Ada tiga cara dalam menentukan nilai warna, yaitu :

• menggunakan nama warna seperti red, blue, green dan sebagainya
• menggunakan kode heksa warna seperti #ff0000 untuk warna merah dan #0000ff untuk warna biru, dan seterusnya.
• menggunakan nilai RGB seperti rgb(255,0,0) untuk warna merah, rgb(0,0,255) untuk warna biru dan seterusnya.

Contoh penggunaan CSS background-color :

body {
    background-color: #e0ffff;
}

Kita bisa berlatih CSS background-color disini >>.

2. background-image

Adalah properti CSS yang digunakan untuk mengatur background berupa gambar (image). File gambar yang akan diterapkan pada background ditulis pada atribut URL. Secara default, gambar akan ditampilkan secara berulang secara horisontal dan vertikal untuk memenuhi area elemen yang ditetapkan.

Contoh penggunaan CSS background-image :

body {
    background-image: url("bg.gif");
}

Kita bisa berlatih CSS background-image disini >>.

3. background-repeat

Adalah properti CSS yang digunakan untuk mengatur perulangan background-image. Secara default, background-image akan diulang secara vertikal dan horizontal.

Dengan CSS background-repeat ini kita bisa mengatur perulangan dengan beberapa nilai sebagai berikut :

• no-repeat, artinya background image tidak akan di ulang.
• repeat-x, artinya background image akan diulang secara horizontal
• repeat-y, artinya background image akan diulang secara vertikal.

Contoh penggunaan CSS background repeat :

body {
    background-image: url("bg.gif");
    background-repeat: repeat-x;
}

Kita bisa berlatih CSS background-repeat disini >>.

4. background-position

Adalah properti CSS yang digunakan untuk mengatur posisi background image pada elemen html. posisi background image bisa diset left, right, top dan bottom. Salah satu fungsi dari penempatan background image agar tidak mengganggu tampilan teks pada halaman html.

Contoh penggunaan CSS background-position :

body {
    background-image: url("bg.gif");
    background-repeat: repeat-x;
    background-position : right top;
}

Kita bisa berlatih CSS background-position disini >>.

5. background-attachment

Adalah properti CSS yang digunakan untuk mengatur bagaimana background itu disematkan dalam halaman. Apakah fix atau ikut scroll bersama elemen. Secara default properti background-attachment akan diset scroll.

Ada beberapa nilai yang bisa dipakai untuk backdround-attachment :

• scroll , background ikut discroll bersama dengan elemen.
• fixed, background fix jadi saat elemen di scroll, posisi background tetap.
• local, background ikut discroll bersama dengan isi dari elemen
• initial, nilai diset sesuai nilai inisial dari elemen diatasnya.
• inherit, nilai diwarisi dari elemen diatasnya.

Contoh penggunaan CSS background-attachment :

body {
    background-image: url("bg.gif");
    background-repeat: repeat-x;
    background-position : right top;
    background-attachment: fixed;
}

Kita bisa berlatih CSS background-attachment disini >>.

6. background

Adalah properti yang bisa diisi dengan nilai dari kelima properti diatas. Jadi properti background bisa dikatakan sebagai penggabungan dari kelima properti background sebelumnya. Cara ini dipakai untuk mempersingkat penulisan.

Contoh penggunaan CSS background-attachment :

body {
     background: #ff00ff url("bg.png") no-repeat right top;
}

Pada contoh terlihat ada penumpukan antara background color dan background image. Ini digunakan untuk mencegah kekosongan background jika load image dinon-aktifkan oleh user atau image gagal dimuat karena suatu sebab tertentu. Jadi jika image tidak tampil akan diganti dengan background warna.

Kita bisa berlatih CSS background disini >>.

Kesimpulan :

Yang perlu diperhatikan dalam menerapkan background adalah jangan sampai background membuat teks tidak jelas terbaca.

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/css/css_background.asp
• //www.w3schools.com/cssref/pr_background-attachment.asp

Selector pada CSS berfungsi untuk memilih elemen html yang di-style sesuai dengan deklarasi pada selector tersebut. Pada tulisan sebelumnya kita telah mengenal selector CSS menggunakan elemen-elemen html seperti paragraf (p) dan heading (h1). Selector CSS dengan nama elemen ini juga berlaku untuk elemen yang lain seperti link (a), list (ul dan ol), table dan yang lainnya.

Kemudian muncul pertanyaan bagaimana jika kita akan menerapkan style yang berbeda untuk elemen yang sama? Misalnya paragraf pertama dibuat margin 10px lalu paragraf kedua dibuat margin 20px. Jawabannya, kita bisa menggunakan selector Id dan Class.

Menggunakan Selector Id pada CSS

Selector Id digunakan untuk memilih satu elemen unik pada html. Cara menggunakan selector Id adalah dengan menambahkan attribut id pada elemen html tertentu. Id ini harus unik dalam satu page, jika kita bisa menerapkan CSS kepada satu elemen yang dimaksud (unique element).

Cara penulisan selector Id

Untuk menuliskan selector Id kita menggunakan karakter hash (#). Kemudian nama Id ditulis tepat setelah tanda # tanpa spasi. Deklarasi CSS untuk ID ini ditulis diantara kurung kurawal seperti pada selector elemen.

Kemudian pada elemen html tertentu kita taruh atribut “id” dengan nama yang sama dengan id pada CSS tadi. Atribut id ini juga digunakan untuk pemrograman Javascript, jadi bisa saling pakai Id.

Contoh penggunaan selector Id

 <html>  
 <head>  
 <title>Contoh Selector Id CSS</title>  
 </head>  
   
 <style>  
 h1 {  
   font-size: 20px;  
 }  
        
 #top {  
      color: red;  
 }  
   
 #bottom {  
   color: blue;  
 }  
   
 </style>  
   
 <body>  
 <h1>Contoh Penggunaan Selector Id</h1>  
 <p id="top">Paragraf paling atas warna merah</p>  
 <p>Paragraf ditengah tidak di-style</p>  
 <p id="bottom">Paragraf paling bawah warna biru</p>  
 </body>  
 </html>  

Pada contoh diatas, kita mempunyai dua buah id, yaitu “top” dan “bottom”. Pada CSS, paragraf dengan id “top” kita buat warna merah dan paragraf dengan id “bottom” kita buat warna biru.

Kemudian pada tag <p> untuk paragraf paling atas kita tambahkan attribut id=”top” dan pada paragraf paling bawah kita tambahkan atribut id=”bottom”.

Dan berikut ini hasil tampilan dari contoh penggunaan selector Id diatas :

Menggunakan Selector Class pada CSS

Selector Class digunakan untuk memilih elemen html yang memiliki sifat atau perilaku yang sama dalam satu halaman. Selector Class ini bisa digunakan untuk beberapa elemen dalam satu halaman. Penerapan selector Class sebaiknya memperhatikan kesamaan elemen-elemen pada halaman html.

Sebagai contoh kita akan menerapkan style pada paragraf yang berada diantara paragraf pertama dan paragraf terakhir pada contoh diatas. Kemudian kita buat class “midle” untuk mendefinisikannya. Jadi setiap paragraf dengan class “midle” akan dikenakan style yang kita buat.

Cara penulisan selector class

Penulisan selector class pada CSS diawali dengan huruf titik (.) atau dot. Kemudian nama class ditulis tepat setelah tanda titik. Deklarasi CSS untuk Class ini ditulis diantara kurung kurawal seperti pada selector elemen dan selector id.

Kemudian pada elemen html tertentu kita taruh atribut “class” dengan nama yang sama dengan nama class pada CSS tadi.

Contoh penggunaan selector class

 <html>  
 <head>  
 <title>Contoh Selector Class CSS</title>  
 </head>  
   
 <style>  
 h1 {  
   font-size: 20px;  
 }  
        
 #top {  
      color: red;  
 }  
   
 #bottom {  
   color: blue;  
 }  
   
 .midle {  
   color: green;  
 }  
   
 </style>  
   
 <body>  
 <h1>Contoh Penggunaan Selector Id</h1>  
 <p id="top">Paragraf paling atas warna merah</p>  
 <p class="midle">Paragraf ditengah warna hijau</p>  
 <p class="midle">Paragraf ditengah warna hijau</p>  
 <p id="bottom">Paragraf paling bawah warna biru</p>  
 </body>  
 </html>  

Pada contoh diatas kita menambahkan sebuah selector class dengan nama “midle” dan diset dengan warna hijau. Kemudian untuk semua paragraf yang ditengah kita taruh atribut class=”midle”.

Dan berikut ini hasil tampilan dari contoh penggunaan selector class diatas :

Perbedaan selector id dan selector class

Untuk memahami perbedaan penggunaan selector id dan selector class pada css perlu digaris bawahi bahwa id itu unik dan hanya ada satu dalam satu halaman html. Sedangkan class bisa lebih dari satu yang penting mempunyai kesamaan anta elemen dalam satu class.

Jika kita sengaja atau tidak sengaja menggunakan id untuk beberapa elemen memang css akan tetap bisa bekerja, namun tetap dianjurkan untuk menggunakan class khususnya jika dalam halaman tersebut juga ada javascript-nya.

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/cssref/css_selectors.asp

CSS adalah singkatan dari Cascading Style Sheet. CSS berfungsi sebagai pengendali komponen pada elemen sebuah website. CSS menentukan tampilan sebuah website melalui nilai-nilai properti style yang disetting pada tiap-tiap elemen dalam website tersebut.

Latar belakang penggunaan CSS

Penggunaan CSS didasari oleh kebutuhan akan tampilan sebuah website. Sebagaimana diketahui bahwa selain isi, tampilan sebuah website merupakan faktor yang tidak kalah pentingnya. Tampilan website yang baik akan membuat pengunjung nyaman dalam membaca dan mengakses isi sebuah website. Hal ini tentu positif bagi perkembangan website tersebut.

Tata letak website yang baik merupakan susunan dari tiap-tiap bagian secara baik dan proporsional. Sebagai contoh saat kita mengatur jarak antar bagian melalui margin dan padding, juga saat mengatur penggunaan font, ukuran font dan warna font.

Cara Membuat CSS

Dalam membuat CSS ada empat hal utama yang perlu diketahui, yaitu:

1. Selector, adalah bagian atau elemen website yang akan diatur stylenya.
2. Deklarasi, merupakan pernyataan yang menetapkan style yang berisi Properti dan Nilai.
3. Properti, adalah parameter tampilan yang akan kita atur.
4. Nilai, merupakan ukuran yang itetapkan pada parameter properti.

Contoh membuat CSS untuk paragraf :

p {
    margin: 10px;
}

Penjelasan contoh diatas :

1. p merupakan selector untuk elemen paragraf
2. {…}, merupakan deklarasi, dalam hal ini berisi margin: 10px;
3. margin, merupakan properti untuk mengatur jarak dengan elemen lain.
4. 10px, merupakan nilai yang ditetapkan untuk properti margin.

Dalam sebuah deklarasi kita bisa menyetting beberapa properti sekaligus, seperti contoh berikut ini :

p {
    margin: 10px;
    padding: 5px;
    font-size: 10px;
}

Cara Penulisan CSS

Untuk menggunakan CSS ada tiga cara yang bisa dilakukan yaitu dengan cara Inline CSS, Embedded CSS dan External CSS.

1. Inline CSS

Adalah penulisan CSS didalam elemen html secara langsung. Jadi dalam hal ini kita tidak memerlukan penulisan selector karena sudah langsung tertuju pada elemen yang dimaksud. Sebagai gantinya, kita menggunakan tag style=”…” pada elemen tersebut.

Contoh penulisan Inline CSS:

<p style="margin:10px;">

Penjelasan dari kode diatas adalah, kita menetapkan properti margin sebesar 10px untuk elemen paragraf (p). Diantara tanda petik dua (“) kita bisa menyisipkan beberapa deklarasi properti dan nilai sekaligus dengan cara masing-masing deklarasi tetap diakhiri dengan tanda titik koma (;).

2. Embedded CSS

Adalah penulisan CSS secara tersendiri namun berada dalam satu file html. Cara ini membutuhkan selector dalam penulisannya. Beberapa kode CSS ditulis didalam tag <style>…</style>. kita bisa menuliskan beberapa selector beserta deklarasi properti dan nilai didalam tag <style> ini.

Contoh penulisan Embedded CSS dalam sebuah file html:

 <html>  
 <head>  
 <title>Contoh Embedded CSS</title>  
 </head>  

 <style>  
   p {  
     margin: 10px;  
   }  
   h1 {  
     font-size: 15px;  
   }  
 </style>  

 <body>  
 <h1>Judul dengan font 15px</h1>  
 <p>Ini adalah paragraf pertama</p>  
 <p>Ini adalah paragraf kedua</p>  
 </body>  
 </html>  

Pada contoh embeddes CSS diatas kita menetapkan font untuk heading h1 sebesar 15px dan margin antar paragraf sebesar 10px.

3. Eksternal CSS

Ini adalah cara paling efektif dan banyak dipakai oleh kebanyakan website saat ini. Dengan eksternal CSS kita menaruh kode-kode CSS didalam sebuah file tersendiri lalu membuat link didalam file html menuju file CSS yang telah dibuat. Cara ini lebih efisien dan mempermudah pekerjaan mendesain dan mengelola sebuah website.

Contoh penulisan Eksternal CSS :
– Pertama kita membuat kode berikut ini pada file .css, lalu menyimpannya misalnya dengan nama style.css

  
   p {  
     margin: 10px;  
   }  
   h1 {  
     font-size: 15px;  
   }  

– Kemudian kita buat file html berikut ini yang menggunakan css dari file style.css lalu disimpan misalnya dengan nama index.php

 <html>  
 <head>  
 <title>Contoh Embedded CSS</title>  
 <link rel="stylesheet" type="text/css" href="style.css">  
 </head>  
   
 <body>  
 <h1>Judul dengan font 15px</h1>  
 <p>In adalah paragraf pertama</p>  
 <p>In adalah paragraf kedua</p>  
 </body>  
 </html>  

Pada contoh diatas kita menggunakan CSS yang sama daricontoh sebelumnya, hanya saja kali ini kita memisahkan kode-kode css didalam fle tersediri, yang kita beri nama style.css.

Kemudian pada bagian head dari file index.html kita taruh link menuju file css dengan kode <link rel=”stylesheet” type=”text/css” href=”style.css”>. Hasil tampilan dari contoh ini sama dengan contoh sebelumnya,

Keuntungan dari cara ini adalah kita bisa lebih mudah mengelola CSS untuk banyak halaman secara sekaligus. Selain itu proses membuka website untuk halaman kedua dans eterusnya menjadi lebih ringan karena tidak perlu loading ulang css.

Untuk membuat file CSS dapat menggunakan aplikasi teks editor untuk pemrograman web seperti pada pembuatan script HTML dan PHP.

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //id.wikipedia.org/wiki/Cascading_Style_Sheets
• //www.w3schools.com/css/css_intro.asp