Langsung ke konten utama

CSS (Cascading Style Sheet)



Pada artikel sebelumnya saya saya telah membahas tentang Pengertian HTML dan Dasar Penggunaan HTML. Dan pada tahap ini saya anggap bahwa Anda telah memahami cara penggunaan HTML sehingga saya akan melanjutkan ke tahap selanjutnya yaitu CSS (Casading Style Sheet).

Pengertian CSS

CSS (Cascading Style Sheet) 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 body 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.


Cara Penulisan CSS



Inline style sheet
Penulisan di dalam elemen HTML.

Contoh script 1






Embedded Style Sheet
Penulisan CSS di dalam dokumen HTML dan menggunakan tag <style></style>

Contoh script 2



Linked Style Sheet
Penulisan skrip CSS dihalaman berbeda atau terpisah dari html.

Contoh script 3


Contoh script style1.css




Aturan Penulisan CSS

Selector
Terdiri dari tag,class,ID

Declaration
Mendeskripsikan property dan value
Contoh


H1 

{ 

Color : #0000FF 

}


Keterangan :
Selector : H1
Properti : Color
Value : #0000FF

Macam-macam Selector

Tag/Elemen
Setiap tag yang ada pada HTML bisa dijadikan selector

Class
Diawal penulisan menggunakan tanda titik, pada HTML ditambahkan class
style1.css


h1

{

color:red;

}

.isiteks

{

font-family:arial,halvetica;

font-size:24px;

color:#6699FF;

}


contoh script
<html> 

<head> 

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

</head> 

<body> 

<p class='isiteks'>Contoh Class</p> 

</body> </html>



Contoh Class


ID
Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain web karena didefiniskan denga ID berbeda.
Misal.

style1.css
 h1 

{ 

color:red; 

} 

.isiteks 

{ 

font-family:arial,halvetica; 

font-size:24px; 

color:#6699FF; } 

.judul1 { font-family:arial,halvetica; 

font-size:12px; color:#6699FF; 

}


contoh script


<html> 
<head> 
<link href='style1.css' rel="stylesheet" type='text/css'> 
</head> <body> 
<p id='judul1'>Contoh ID</p> 
</body> </html>


Contoh ID

Label

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Menampilkan Gambar Pada PictureBox Di Visual Basic .Net

Pada kesempatan kali ini saya akan menunjukkan bagaimana cara menampilkan gambar pada PictureBox di Visual Basic .NET. Terdapat beberapa cara untuk menampilkan gambar pada PictureBox dan disini saya akan memberikan beberapa cara yang saya ketahui serta kelebihan dan kekurangan dalam menggunakan cara tersebut. Pertama-tama buatlah sebuah project baru dengan memilih File > New > New Project . Kemudian Drag And Drop PictureBox dari jendela Toolbox ke form. Menampilkan Gambar Dengan Cara Standar Yang saya maksud dengan cara standar disini adalah cara yang biasa dilakukan oleh programmer atau developer dan yang dianjurkan oleh MSDN pada artikel How to: Set Pictures at Run Time dan  How to: Load a Picture Using the Designer Kelebihan Mudah diimplementasikan terutama bagi programmer/developer pemula. Kekurangan Ada kemungkinan gambar yang diload/ditampilkan ke PictureBox akan dilock/dikunci untuk digunakan oleh user yang mengakses gambar tersebut, sehingga user lain tidak dapat men...
Posting Komentar
Baca selengkapnya

Membuat Situs Traffic Exchange

Membuat Situs Traffic Exchange Pada saat ini situs-situs traffic exchange semakin marak di dunia internet. Karena semakin berkembangya teknologi sehingga membuat hal lain pun ikut berkembang. Situs Traffic Exchange ini misalnya, saat ini banyak situs-situs traffic exchange yang tidak hanya menyediakan layana traffic exchange namun sekarang  telah ada situs traffic exchange yang menawarkan Social Exchange seperti twitter followers, facebook like, google+ circle dan lain sebagainya. Dan bahkan ada juga situs traffic exchange yang menyediakan layanan SEO seperti Directory Submission.  Pada postingan ini saya tidak akan berbicara banyak kepada Anda, karena saya tahu saat Anda masuk ke halaman ini berarti Anda sedang mencari cara Membuat Situs Traffic Exchange. Mungkin Anda sampai ke halaman ini karna mungkin hanya sedikit blog/website lain yang membahas tentang hal ini. Dan mungkin niat Anda adalah Membuat Situs Traffic Exchange secara gratis sehingga Anda tidak perlu mengeluarkan...
Posting Komentar
Baca selengkapnya

Mengisi Data Dari Mysql Ke DataGridView Di Visual Basic .Net

Pada postingan kali ini kita akan mencoba untuk mengisi data dari database mysql ke DataGridView di Visual Basic .Net. Sebelum memulai pastikan Anda telah menginstall Mysql Connector untuk Visual Studio, jika belum Anda dapat mendownload dll library yang saya berikan pada akhir postingan ini. Nantinya hasil akhir dari program akan menjadi seperti berikut : Berikut langkah-langkahnya : Buatlah project baru dengan memilih File > New > Project Masukkan beberapa control dan ubah name serta text pada masing-masing control sesuai dengan tabel berikut Name Text Type server - TextBox user - TextBox password - TextBox cmbDatabase - ComboBox Label1 Server Label Label2 User Label Label3 Password Label Label4 Database Label DGV - DataGridView showData Show Data Button getDatabase Get Database Button Sesuaikan letak setiap control sesuai dengan gambar hasil akhir program. Sekarang inisialisasikan variabel yang akan kita gunakan Dim conn As MySqlConnection Dim cmd As MySqlCommand Dim dr As My...
Posting Komentar
Baca selengkapnya