Belajar CSS Part 2 : Cara Penulisan CSS

CSS ( Cascading Style Sheet ) Merupakan sebuah bahasa pemrograman web yang memiliki fungsi dan tujuan untuk mengatur atau mendesign tiap-tiap komponen dari HTML seperti element dan tag. Dengan menggunakan CSS kita dapat mengatur ukuran, warna dan bentuk dari element HTML. Mengganti font, mengatur margin dan mengatur padding dan banyak lagi yang dapat dilakukan menggunakan CSS untuk mempercantik atau men-design halaman website.

CSS Menggunakan seletor(id dan class) untuk menentukan element yang akan di modifikasi atau yang akan diberi sentuhan CSS. Jika di ibaratkan HTML sebagai tiang pada sebuah bangunan rumah, maka CSS berfungsi sebagai cet dan dekorasi pada bangunan rumah tersebut. Ada tiga teknik metode penulisan CSS, yaitu :

Inline CSS Style
Internal CSS Style
External CSS Style

Ketiga teknik metode cara penulisan CSS tersebut akan kita bahas pada tutorial Belajar CSS Dasar Cara Penulisan Pada CSS

TEKNIK PENULISAN CSS INLINE STYLE
Teknik penulisan pertama yaitu dengan menulis syntax CSS dengan Inline Style adalah teknik penulisan Syntax CSS yang tidak memerlukan selector (id dan class ) sehingga syntax CSS diletakkan atau langsung disisipkan pada element HTML. Syntax CSS diletakkan di dalam atribut style=" ".

CONTOH PENULISAN INLINE STYLE
Untuk membuat contoh penulisan CSS dengan gaya inline caranya sediakan sebuah file HTML atau PHP. Disini saya menggunakan file html dan menamainya belajar2.html

belajar2.html


<!DOCTYPE html>
<html>
<head>
    <title>Penulisan CSS dengan Inline Style</title>
</head>
<body>
<h1 style="color: red">Belajar CSS Dasar <a href="www.script-kiddies.cf">Script Kiddies</a></h1>
</body>
</html>

Perhatikan contoh penulisan CSS Inline style diatas. Syntax CSS diletakkan dalam element h1 menggunakan atribut style=" ". Perintah color adalah perintah CSS yang berfungsi untuk mengatur warna font. Jadi pada contoh inline css style ini kita membuat heading h1 dengan warna font yang kita atur menjadi red ( merah ). Dan saat dijalankan di web browser seperti berikut.

CONTOH PENULISAN INLINE STYLE

TEKNIK PENULISAN CSS INTERNAL STYLE
Teknik Penulisan Syntax CSS Dengan Internal Style adalah teknik penulisan syntax css yang diletakkan satu file dengan file html atau php. Syntax CSS diletakkan di dalam tag <style> dan diakhiri dengan </style>. Dan biasanya diletakkan pada bagian tag <head> pada HTML

CONTOH PENULISAN INTERNAL STYLE


<!DOCTYPE html>
<html>
<head>
    <title>Penulisan CSS dengan Internal Style</title>
    <style type="text/css">
        #text{
            color: white;
        }
        .background{
            background: hotpink;
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="background">
<h1 id="text">Belajar CSS Dasar <a href="www.script-kiddies.cf">Script Kiddies</a></h1>
</div>
</body>
</html>

Perhatikan contoh penulisan CSS Inertnal Style diatas. Syntax CSS diletakkan satu file dengan file html. Syntax CSS diletakkan dalam tag <style> dan di bagian tag <head>. Syntax CSS Padding berfungsi sebagai pengatur jarak pada sisi dalam element. Pada contoh diatas kita memberi jarak sebesar 10px atau 1- pixel. CSS memanggil selector class dengan tanda titik " . " dan memanggil selector id dengan tanda pagar "#" .

<style type="text/css">
        #text{
            color: white;
        }
        .background{
            background: hotpink;
            padding: 10px;
        }
    </style>

CONTOH PENULISAN INTERNAL STYLE

TEKNIK PENULISAN EXTERNAL STYLE
Teknik Penulisan Syntax CSS Dengan External Style adalah teknik penulisan yang memisahkan file CSS dan HTML. penggunaan CSS yang baik adalah menggunakan teknik penulisan ini agar kode program kita tidak berantakan karena syntax css disimpan pada file css. File CSS dan HTML dihubungkan menggunakan

<link rel="stylesheet" type="text/css" href="file css anda">

CONTOH PENULISAN EXTERNAL STYLE
Untuk membuat External Style siapkan satu buah file HTML dan satu buah file CSS. Disini saya membuat sebuah file dengan nama index.html dan style.css

index.html


<!DOCTYPE html>  
<html>
<head>
    <title>Penulisan CSS dengan Internal Style</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="background">
<h1 id="text">Belajar CSS Dasar <a href="www.script-kiddies.cf">Script Kiddies</a></h1>
</div>
</body>
</html>

style.css


#text{
    color: white;
}
.background{
    background: orangered;
    padding: 10px;
}

Dan jika kita run dalam web browser maka hasilnuya

CONTOH PENULISAN EXTERNAL STYLE

Sampai sini saja Belajar CSS Part 2 : Cara Penulisan CSS untuk belajar CSS Part berikutnya akan saya share dikesempatan yang akan datang. Jika mengalami masalah silakan berikan komentar. Sekian Terima Kasih

Referensi : Malas Ngoding

TUTORIAL CSS LAINYA

Belajar CSS Part 1 : Pengertian dan Mengenal CSS
Belajar CSS Part 2 : Cara Penulisan CSS
Belajar CSS Part 3 : Mengubah Background Dengan CSS
Belajar CSS Part 4 : Margin dan Padding CSS
Belajar CSS Part 5 : Mengatur Font Dengan CSS
Belajar CSS Part 6 : Mengatur Hyperlink Dengan CSS
Belajar CSS Part 7 : Mengatur Format Text Dengan CSS
Belajar CSS Part 8 : Mengenal Position CSS
Belajar CSS Part 9 : Mengatur Border Dengan CSS
Belajar CSS Part 10 : Mengatur List Dengan CSS
Belajar CSS Part 11 : Mengatur Float Dengan CSS