Rabu, 11 Februari 2015

0
Pengenlan Tentang CSS

1. Pengertian dari CSS

Cascading Style Sheet (CSS) adalah salah satu bahasa pemrograma web yang digunakan untuk mempercantik halaman web dan mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
CSS dapat kita gunakan dalam mengendalikan ukuran gambar, warna 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.
Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

2. Kelebihan CSS

Adapun beberapa kelebihan CSS adalah sebagai berikut:
1. Memisahkan desain dengan konten halaman web.
2. Mengatur desain sefisien mungkin.
3. Jika kita ingin mengubah suatu tema halaman web, cukup modifikasi pada CSS saja.
4. Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML.
5. Lebih mudah didownload karena lebih ringan ukuran filenya.
6. Satu CSS dapat digunakan banyak halaman web.

3. Jenis-Jenis Selector CSS

CSS memiliki 3 jenis selector basic yaitu class selector, id selector, dan tag selector.
a. Class selector.
Class adalah “agen bebas” yang dapat diterapkan untuk tag HTML apapun.
Kita dapat membuat nama class dengan hampir semua nama apapun. Karena
class selector dapat diterapkan ke beberapa tag HTML sekaligus, maka class
Penulisan code di dalam dokumen HTML :
....
<h3 class=’judul’>
Belajar Membuat Website
</h3>
....
Penulisan code dalam CSSnya :
.judul{
Font : 12pt Impact;
}

b. ID Selector
Hampir sama dengan class, ID dapat diterapkan untuk hampir semua tag
HTML, tetapi penggunaanya hanya sekali dalam satu halaman untuk satu tag
HTML tertentu.
Penulisan code di dokumen HTML
....
<h1> Mengarungi Samudra PHP </h1>
<h1> Belajar HTML dan CSS </h1>
....
Penulisan code di CSSnya
h1{
font: 12pt Impact;
color:red;
}

c. Tag selector
Nama dari element HTML digunakan sebagai selector untuk mendefinisikan
tag HTML yang berasosiasi. Misalnya, selector dari <h1> adalah h1. HTML
selector digunakan dalam CSS rule untuk mendefinisikan bagaimana suatu tag
akan ditampilkan.
Penulisan code di dokumen HTML
....
<h1> Mengarungi Samudra PHP </h1>
<h1> Belajar HTML dan CSS </h1>
....
Penulisan code di cssnya
h1{
font: 12pt Impact;
color:red;
}

Ada 3 cara penggunaan CSS yaitu inline CSS, embedded CSS, external CSS.
a. Inline CSS
Inline css merupakan cara penggunaan css dengan menambahkan langsung di
tag dokumen htmlnya sebagai atribut.
Contoh:
....
<p style="color:blue">
Membuat tulisan warna biru
</p>
<p style="font-style:italic;">
Membuat tulisan miring
</p>
....
b. Embedded CSS
Embedded CSS merupakan cara penggunaan css yang disisipkan di dalam tag
<style> ...</style>. Tag style tersebut disimpan di antara tag <head>...</head>
Contoh:
<html>
<head>
<style>
p{
color:green;
font-family:arial;
font-size:120%;
}
</style>
</head>
<body>
<p>Belajar Css Mudah</p>
<p>Pengaturan paragraf dengan menggunakan
CSS di dalam header dokumen html</p>
<p>Dengan contoh ini, maka setiap paragraf
atau yang berada diantara </p><p>dan</p>akan
memiliki format yang sama
</body>
</html>
c. External CSS.
Cara ini menggunakan file Css yang dituliskan secara terpisah dengan
dokumen html. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS
yang digunakan untuk semua halaman web anda.
Ada dua langkah yang harus dikerjakan untuk menggunakan css dengan cara
ini
1) Anda membuat satu file dengan notepad atau teks editor lain, dan
berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file
tersebut.
p{
font-family: arial;
font-size: small;
}
h1{
color: red;
}
2) Langkah kedua adalah memanggil file style.css dari semua halaman web.
Caranya dengan memasukkan kode di bawah ini yang disisipkan di antara
tag < head > dan < / head >
....
<head>
<link rel=”stylesheet” href=”style.css”
type=”text/css”></link>
</head>
....

Facebook
Google
Twitter

0 komentar:

Langganan: Posting Komentar (Atom)