Beranda
CSS

Cara Menulis CSS - Belajar CSS Dasar #3

Cara Menulis CSS

Cara Menulis 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 elemen 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 di lakukan menggunakan CSS untuk mempercantik atau men-design halaman website.

CSS menggunakan selector (id dan class) untuk menentukan element yang akan di modifikasi atau yang akan di beri 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(inline, internal, external) tersebut akan kita bahas dan pelajari pada tutorial ini.

Teknik Penulisan CSS Inline Style

Teknik penulisan syntax css dengan Inline style adalah teknik cara penulisan syntax CSS yang tidak memerlukan selector (id dan class). Sehingga syntax CSS di letakkan atau langsung di sisipkan pada element HTML. syntax CSS di letakkan di dalam atribut style=””.

Contoh penulisan inline CSS style : Contoh Belajar CSS Dasar Cara Penulisan CSS. Untuk membuat contoh penulisan CSS dengan gaya inline caranya sediakan sebuah file HTML atau PHP di sini saya menggunakan HTML, saya membuat sebuah file dengan nama index.html.

File index.html

<!DOCTYPE html>
<html>
<head>
    <title>Penulisan CSS dengan Inline Style</title>
</head>
<body>
    <h1 style="color:rgb(27, 189, 121)">
        Belajar CSS Dasar Di
        <a href="https://anakti3.blogspot.com/">
        anakti3
        </a>
    </h1>
</body>
</html>

Catatan :

Perhatikan pada contoh di atas. Syntax css di letakkan 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 warna hijau.

Dan apabila kode programnya dijalankan, maka hasilnya akan jadi seperti dibawah ini :

Belajar CSS Dasar #1 - Cara Menulis CSS

Teknik Penulisan CSS Internal Style

Teknik penulisan syntax CSS dengan Internal style adalah teknik cara penulisan syntax css yang di letakkan satu file dengan file html atau file php. Syntax CSS di letakkan di dalam tag <style> dan di akhiri dengan tag </style> biasa nya tag <style> .. </style> di letakkan pada bagian tag <head> pada HTML.

Contoh penulisan internal CSS Style :

<!DOCTYPE html>
<html>
<head>
    <title>Menulis CSS dengan Internal Style</title>
    <style type="text/css">
        #tulisan{
            color: 10px;
        }
        .box{
            background: rgb(0, 226, 102);
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1 id="tulisan">Belajar CSS Dasar Di
            <a href="https://anakti3.blogspot.com/">
                anakti3
            </a>
        </h1>
    </div>
</body>
</html>

Perhatikan contoh penulisan internal css style di atas. syntax css di letakkan satu file dengan file html. syntax css di letakkan di dalam tag <style>. Syntax css padding berfungsi sebagai pengatur jarak pada sisi dalam element. pada contoh ini kita memberikan jarak sebesar 10px atau 10 pixel. CSS memanggil selector class dengan tanda titik ” . ” dan memanggil selector id dengan tanda pagar ” # “.

<style type="text/css">
        #tulisan{
            color: 10px;
        }
        .box{
            background: rgb(0, 226, 102);
            padding: 10px;
        }
    </style>

Dan jika kode programnya di jalankan, maka hasilnya akan jadi seperti di bawah ini :

Belajar CSS Dasar #1 - Cara Menulis CSS

Teknik Penulisan CSS 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 CSS ini karena kode program kita tidak akan berantakan karena syntax css di simpan pada file css. file css dan html di hubungkan menggunakan 

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

Contoh penulisan CSS menggunakan External Style :

Untuk membuat contoh penulisan CSS dengan External style siapkan satu buah file html dan satu buah file css. di sini saya membuat sebuah file dengan nama index.html dan style.css

Belajar CSS Dasar #1 - Cara Menulis CSS

File Index.html

<!DOCTYPE html>
<html>
<head>
    <title>Penulisan CSS dengan External Style</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="box">
        <h1 id="tulisan">Belajar CSS Dasar Di
        <a href="https://anakti3.blogspot.com/">anakti3</a>
        </h1>
    </div>
</body>
</html>

File style.css

#tulisan{
    color: 10px;
    }
    .box{
    background: rgb(0, 255, 85);
    padding: 10px;
    }

Dan jika file programnya di jalan, maka hasilnya akan seperti di bawah ini :

Belajar CSS Dasar #1 - Cara Menulis CSS

Mungkin cukup sampai disini dulu mengenai pembahasan mengenai cara menulis css, untuk selanjutnya kita akan belajar lebih lanjut mengenai css ini. Semoga sampai disini teman-teman bisa mengikutinya dengan baik ya, kalo ada yang mau ditanyakan bisa tinggalkan komentar di bawah ini iya teman-teman nanti akan saya jawab satu-satu ko pertanyannya.

Sekian dan terimakasih...

Posting Komentar