Dasar CSS

Dasar CSS

(Cascading Style Sheet)

Oke .... welcome to Lorong4.com. Ini adalah artikel pertama saya yang membahas tentang Pemrograman Web khususnya CSS, semoga ini adalah awal yang baik bagi blog ini Amiiin... Bagi yang ingin mempelajari tentang CSS, lebih baik atau seharusnya terlebih dahulu mengetahui dasar web yaitu HTML. Pembahasan kali ini adalah Dasar CSS jadi cuma dasarnya saja ya kalau mau lebih cari referensi yang lain seperti di w3schools.com atau tanya saja Mbah Gugel. Langsung saja kita masuk ke pembahasannya.

CSS atau Cascading Style Sheet adalah salah satu bahasa pemrograman web yang berguna untuk membangun, menghias, dan mengatur tata letak setiap komponen atau elemen dalam halaman web yang bertujuan agar tampilan halaman web terlihat lebih rapi, terstruktur, cantik, menarik, dan untuk mempersingkat script dalam membangun sebuah web.

CSS adalah bahasa pemrogramn yang wajib dikuasai oleh setiap orang yang ingin terjun ke dunia web, terlebih lagi untuk pendesain web atau yang biasa disebut dengan Web Designer. Sampai saat ini CSS telah dikembangkan hingga versi CSS3.

Sintaks Dasar CSS

Sintaks atau cara penulisan CSS adalah sebagai berikut :

Selector {

Property : Value ;

}

Keterangan :

Selector : elemen dalam html yang ingin diubah atau diatur.

Property : apa yang ingin diubah.

Value : bisa dibilang seperti apa perubahan yang dinginkan kepada elemen tersebut.

Contoh :

Kita ingin mengubah salah satu elemen html contohnya paragraf atau dalam tag html adalah <p>...</p> .

Yang ingin kita ubah kali ini adalah warna tulisan dari element tersebut.

Dan kita ingin mengubah warna tulusannya menjadi merah.

Jadi begini cara kita menuliskannya

p {

color : red;

}

Dimana selectornya adalah p, propertynya adalah color, dan valuenya adalah red.

Jika ingin melihat hasilnya paste-kan kode dibawah ini di notepad atau text editor seperti notepad++ atau yang lain dan save dalam format .htm atau .html

<html>

<head>

</head>

<style>

p {

color: red;

}

</style>

<body>

<p>Ini adalah paragraf yang tulisannya berwarna merah<p>

</body>

</html>

Lalu buka file html tersebut menggunakan browser yang ada di komputer mu.

Biasanya dengan langsung mempraktekkannya sendiri orang – orang akan lebih mudah mengerti dari pada cuma mendengarkan atau membaca teorinya saja.

Cara menggunakan CSS

Terdapat 3 cara bagaimana kita nantinya akan menggunakan CSS tersebut yaitu Embedded, Inline, dan Eksternal. Perbedaannya adalah:

1. Embedded, sama seperti contoh sebelummnya yaitu dengan menaruhnya di dalam dokumen hmtl dengan cara menggunakan tag <style>...</style> diantara elemen head dan body.

Contohnya :

<html>

<head>

<title> Embedded </title>

</head>

<style>

p {

color: green;

}

</style>

<body>

<p>Ini adalah paragraf yang tulisannya berwarna hijau</p>

</body>

</html>

Lalu buka file html tersebut menggunakan browser yang ada di komputer mu.

2. Inline, sama halnya dengan embedded kita akan menaruhnya di dalam dokumen html. Bedanya adalah kita akan menyisipkannya langsung di dalam tag html dengan menggunakan attribut “style”.

Contohnya :

<html>

<head>

<title>Inline CSS</title>

</head>

<body>

<p style=”color: red;”>Ini adalah paragraf yang tulisannya berwarna hijau</p>

</body>

</html>

Lalu buka file html tersebut menggunakan browser yang ada di komputer mu.

3. External atau Linked, yaitu dengan membuat file tersendiri berformat .css .

Oke langsung saja pada parakteknya agar lebih mudah dimengerti

Pertama buat file berformat .html atau .htm dengan nama “linked.html” atau “linked.htm” seperti berikut:

<html>

<head>

<title>Linked CSS</title>

<link rel=”stylesheet” href=”style.css” type=”text/css”>

</head>

<body>

<p>Ini adalah paragraf yang tulisannya berwarna merah</p>

</body>

</html>

Kedua buatlah file berformat .css dengan nama ”style.css” seperti dibawah :

p {

color: yellow;

}

Pastikan bahwa kedua file tersebut berada di folder yang sama !

Lalu buka file html tersebut menggunakan browser yang ada di komputer mu.

Perhatikan tulisan yang ditebalkan pada script di atas. Jadi fungsi href=”style.css” diatas adalah “style.css” adalah file css yang akan digunakan dalam html tersebut.

Demikianlah dasar dari Cascading Style Sheet, sebagai pemula ada masih banyak lagi yang belum saya ketahui tentang CSS. Jika ingin lebih carilah referensi lain yang dapat membantu anda dalam mempelajari Cascading Style Sheet.

Sekian dulu artikel kali ini, terima kasih telah mengunjungi blog saya. Jika ada yang belum dimengerti, silahkan berkomentar di bawah !

Apabila ada kekurangan mohon dimaafkan karena karena kebenaran hanya milik Allah SWT. dan kesalahan itu datang dari diri saya sendiri sebagai manusia yang tidak sempurna.

Wassalamu Alaikum Warahmatullahi Wabarakatuh