css

1. CSS

• CSS (Cascading Style Sheet) adalah sebuah cara untukmemisahkan isi dengan layout dalam halaman-halaman webyang dibuat.

• CSS digunakan untuk mempersingkat penulisan tag HTMLseperti font, color, text dan tabel menjadi lebih ringkassehingga tidak terjadi pengulangan tulisan.

• CSS mengendalikan beberapa komponen dalam sebuah websehingga akan lebih terstruktur dan seragam.

• Penggunaan CSS pada sebuah web akan lebih fleksibel dalampenampilannya dan juga akan meminimalkan penggunaantag yang berpengaruh pada ukuran file.

• Meskipun CSS telah didukung oleh kebanyakan browser saatini, penerjemah tiap browser untuk menampilkan CSS akanBerbeda-beda.

CSS (Cascading Style Sheet)2. Struktur CSS Dalam pembuatan dokumen web menggunakan style CSS dikenal

adanya aturan atau struktur penulisan baku agar style CSS yang dibuat dapat tampil dengan baik dalam dokumen web.

Contoh:

<html>

<head><title>HTML selector</title>

<style type="text/CSS">



</style></head>

<body>

<p>penggunaan HTML selector dalam CSS</p>

</body></html>

CSS (Cascading Style Sheet)3.Selector Selector : nama-nama yang diberikan untuk style-style

yang berbeda, baik itu style internal maupun eksternal.

Karena CSS memiliki aturan tersendiri dalam penulisansintaknya, penulisan sintaks tersebut terbagi ke dalam tigabagian, yaitu: selector, property dan value.

Contoh : selector {property:value;}

Selector disini merupakan elemen yang akan didefinisikandalam style CSS berupa tag HTML ataupun class

Poperty CSS adalah atribut yang berfungsi untukmendefinisikan selector.

Value : nilai atau harga dari sebuah property

CSS (Cascading Style Sheet) contoh:

<html>





</style></head>

<body>

<b><p>penggunaan HTML selector dalam CSS</p></b>

</body></html>

CSS (Cascading Style Sheet) Tampilannya sebagai berikut:

Maksud dari <!– aturan css --> di atas adalah agar browser yang tidak mendukung CSS tidak menampilkan perintah-perintah CSS dan dianggap sebagai komentar HTML dan tidak akan ditampilkan dalam browser.

CSS (Cascading Style Sheet)4. Class Selector

Class selector digunakan untuk : menentukan style yang dapat digunakan tanpa menentukan lagi tag HTML sederhana.

Penulisan class adalah dengan menggunakan tanda titik atau dot.

CSS mengenal clas selector dimana dalam elemen yang sama, anda dapat menerapkan lebih dari satu style.

CSS (Cascading Style Sheet)Contoh:

<html>





</style></head>

<body>

<f class="times"> Ini adalah contoh penggunaan Class sebagai Selector,

tipe hurufnya adalah Times New Roman</f><br>

<f class="verdana">Ini adalah contoh penggunaan Class sebagai Selector,

tipe hurufnya adalah Verdana</f><br>

<f class="courier">Ini adalah contoh penggunaan Class sebagai Selector,

tipe hurufnya adalah courier</f>

</body></html>

CSS (Cascading Style Sheet) Tampilannya adalah sebagai berikut:

Keterangan:

Pada contoh diatas tag f memiliki 2 class yang berbeda untuk memformat paragraf yaitu: .times dan .verdana dikarenakan tag class .times dan .verdana adalah class yang dimiliki oleh tag f maka ia hanya dapat dikenakan pada elemen f saja

Class .courier ia dapat dipergunakan oleh semua elemen tanpa harus menggunakan tag f di awal dan akhir elemen yang akan diformat

CSS (Cascading Style Sheet)5. ID Selector

ID selector digunakan untuk menentukan style yang berhubungan dengan objek-objek dengan sebuah ID.

ID selector hanya dapat digunakan pada satu elmen saja pada setiap halaman web yang kita buat.

ID Selector menggunakan tag # (kres) sebelum menggunakan nama selector.

Contoh: #helvetica {font-family:helvetica;}

Dalam penerapan HTML anda dapat menggunakan atribut span ataupun div. contoh;

<span id = “helvetica”> Huruf Helvetica </span>

Atau

<div id=“helvetica”>Huruf helvetica</div>

CSS (Cascading Style Sheet)Contoh:<html><head><title>ID Selector</title><style type="text/CSS"></style></head><body><div id="times">Huruf Times New Roman</div><br><div id="verdana">Huruf Verdana</div><br><div id="times">Huruf Courier</div></body></html>

CSS (Cascading Style Sheet) Tampilannya adalah sebagai berikut:

CSS (Cascading Style Sheet)6. Penempatan CSS dalam HTML

Ada beberapa cara penempatan CSS dalam HTML yaitu:

1. Inline Style

Adalah CSS yang dibuat dalam sebuah tag HTML yang hanya berlaku untuk dokumen yang diapitnya saja.

Teknik ini digunakan pada pemformatan khusus padasebuah elemen HTML dan tidak digunakan untukmemformat seluruh elemen dalam dokumen web.

Penulisannya cukup dengan menambahkan atribut style dalam tag HTML tersebut

CSS (Cascading Style Sheet) Contoh Penggunaan INLINE Style

<html>

<head><title>Belajar CSS</title></head>

<body>

<font style=“arial; font-family: arial; font-size: 20px;

background-color:yellow”> Penerapan INLINE Style

</font></body>

<html

Tampilannya sebagai berikut:

CSS (Cascading Style Sheet)2. Internal Style

Pada teknik ini style diletakkan pada tengah tag antara tag <head> dan </head>

Aturan-aturan dalam style ini diatur sedemikian rupa untuk digunakan pada suatu tempat maupun untuk keseluruhan situs.

CSS (Cascading Style Sheet)Contoh Penggunaan Internal Style

<html><head>

<title>CSS</title>

<style type="text/css">



</style>

</head>

<body>

<div class=blog>Belajar CSS Susah-susah Gampang</div>

</body></html>

CSS (Cascading Style Sheet) Maksud dari <!– aturan css --> di atas adalah agar

browser yang tidak mendukung CSS tidak menampilkan perintah-perintah CSS dan dianggap sebagai komentar HTML dan tidak akan ditampilkan dalam browser.

CSS (Cascading Style Sheet)2. External Style

Suatu teknik yang digunakan untuk memanggil style CSS pada file CSS yang menggunakan perintah “Link rel” yang berfungsi untuk menghubungkan ke dalam sebuah style CSS ekternal dengan nama yang sudah ditentukan.

Contoh :

<link rel=“stylesheet” type=“text/CSS” href=“default.CSS”>

Keterangan :

Dari contoh diatas , menghubungkan sebuah dokumen HTML

dengan sebuah style eksternal dengan nama default.css yang

telah dibuat sebelumnya sehingga style tersebut dihubungkan

untyuk memformat tampilan dalam dokumen HTML tersebut.

CSS (Cascading Style Sheet) Tugas, Buatlah tampilan sebagai berikut dengan

menggunakan CSS dan HTML:

css

Documents