Cara Membuat CSS (Cascading Style Sheet)

Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Dalam tutorial CSS kami Anda akan belajar bagaimana menggunakan CSS untuk mengontrol gaya dan tata letak beberapa halaman Web sekaligus.

Contoh CSS

body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}

Ada tiga cara untuk memasukkan sebuah style sheet:
  1. Eksternal style sheet
  2. Internal style sheet
  3. Inline style

Eksternal style sheet

Style sheet eksternal sangat ideal bila gaya yang diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian kepala:

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

Style sheet eksternal dapat ditulis dalam editor teks apapun. File seharusnya tidak berisi tag html. Style sheet harus disimpan dengan ekstensi css.. Contoh dari sebuah file style sheet adalah sebagai berikut:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

Jangan memberi spasi antara nilai properti dan unit (seperti margin-left: 20 px). Benar cara: margin-left: 20px

Internal Style Sheet

Style sheet internal harus digunakan bila dokumen tunggal memiliki gaya yang unik. Anda mendefinisikan gaya internal di bagian kepala halaman HTML, dengan menggunakan tag <style>, seperti ini:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Inline Styles


Gaya inline akan kehilangan banyak keuntungan dari style sheet dengan mencampurkan konten dengan presentasi. Gunakan metode ini hemat!

Untuk menggunakan gaya inline Anda menggunakan atribut style pada tag yang relevan. Atribut style dapat berisi properti CSS. Contoh ini menunjukkan cara mengubah warna dan margin kiri paragraf:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Beberapa Style Sheets


Jika beberapa properti telah ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda, nilai-nilai akan diwariskan dari style sheet lebih spesifik.

Sebagai contoh, sebuah style sheet eksternal memiliki sifat ini untuk pemilih h3:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

Dan style sheet internal memiliki sifat ini untuk pemilih h3:

h3
{
text-align:right;
font-size:20pt;
}

Jika halaman dengan internal style sheet juga link ke style sheet eksternal properti untuk h3 akan menjadi:

color:red;
text-align:right;
font-size:20pt;

Warna diwariskan dari style sheet eksternal dan teks-alignment dan font-size diganti dengan style sheet internal.

Gaya Beberapa Will Cascade ke Satu

Gaya dapat ditentukan:
  • di dalam sebuah elemen HTML
  • di dalam bagian kepala halaman HTML
  • dalam file CSS eksternal

Tip: Bahkan beberapa style sheet eksternal dapat dirujuk di dalam dokumen HTML.

Cascading rangka


Apa gaya akan digunakan ketika ada lebih dari satu gaya yang ditentukan untuk elemen HTML?

Secara umum kita dapat mengatakan bahwa semua gaya akan "cascade" ke dalam lembaran baru "virtual" gaya sesuai aturan berikut, di mana nomor empat memiliki prioritas tertinggi:
  1. Browser default
  2. Eksternal style sheet
  3. Internal style sheet (di bagian kepala)
  4. Inline style (di dalam elemen HTML)
Jadi, gaya inline (di dalam elemen HTML) memiliki prioritas tertinggi, yang berarti bahwa itu akan menimpa gaya didefinisikan di dalam tag <head>, atau dalam style sheet eksternal, atau dalam browser (nilai default).

Catatan: Jika link ke style sheet eksternal ditempatkan setelah style sheet internal di <head> HTML, style sheet eksternal akan menimpa style sheet internal!

0 komentar:

Post a Comment

◄ Posting Baru Posting Lama ►
 

Pengikut

lazada

Copyright © 2013-2014. Abtista Blog's - All Rights Reserved Tamplate Design by Blogger