Kamis, 06 April 2017

Belajar CSS Dasar Bagian 3 – Penempatan CSS

     Assalamualaikum Wr. Wb. Selamat datang kembali sahabat lupacode semua di blog Lupa code. Masih bersama saya selaku admin dari blog lupacode. Pada hari kemarin kita telah membahas mengenai Belajar CSS Dasar Bagian 2 – Anatomy CSS. Bagi sahabat lupacode yang baru saja gabung disini atau baru masuk ke artikel ini, saya sarankan untuk mempelajari pembahasan materi dari yang pertama agar sahabat paham maksud dari kelanjutan pembahasan yang selanjutnya. Atau sahabat bisa langsung mengunjungi halaman Daftar isi pada blog ini.

Belajar CSS Dasar Bagian 3 – Penempatan CSS

    Pada pembahasan kali ini saya akan membahas mengenai penempatan css. Sebelum kita melakukan coding css, ada baiknya kita pelajari terlebih dahulu penempatan css nya. Bagaimana cara penempatan css di dalam dokumen html kita. Ada beberapa cara dalam menmpatkan { CSS } di dalam html kita, jadi kita bisa simpan dihalaman yang sama atau kita buat file sendiri. File yang terpisah dengan extensi filenya css dan nanti kita hubungkan antara file html dan file css nya. 
  1. Cara yang pertama yang bisa kita lakukan adalah dengan cara yang namanya Embed " <style> </style> " Kita bisa simpan di dalam file yang sama dan nanti kita simpannya didalam bagian <head> di html nya, seperti waktu dulu kita pernah belajar di html apa saja yang bisa berada di dalam <head> dengan menggunakan tag <style> kita bisa menyimpan css ke dalam head.
  2. Cara yang kedua adalah dengan menggunakan atribut html Inline <p style=”color: blue;”> . . </p> " Cara yang kedua yang bisa kita lakukan adalah caranya masih didalam file yang sama dan kita gunakan atribut dari html yang namanya style=” “ jadi kita gunakan
  3. Cara yang ketiga adalah dengan External <link rel=”stylesheet” href=”style.css”> " Cara yang ketiga ini adalah dimana kita buat file css sendiri terpisah dengan html dan nanti kita hubungkan antara file html dengan css menggunakan tag html <link>
Baiklah sekarang kita coba tiga – tiga nya dalam latihan kali ini. Yang pertama adalah Embed <style> </style> "

Belajar CSS Dasar Bagian 3 – Penempatan CSS 1

    Dalam contoh diatas dimana saya mempunyai file html dan yang saya lingkari dengan kotak merah itu adalah code css nya yang ditulis di dalam bagian head dengan cara embed. Langsung saja kita coba, Syntax nya adalah seperti ini

<!DOCTYPE html>
<html>
<head>
            <title>Embed html</title>
            <style>
                        h1 {
                                    color: lightblue;
                                    font-family: arial;
                        }
            </style>
</head>
<body>

<h1>Hello World</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

Hasilnya kita lihat adalah seperti ini

Belajar CSS Dasar Bagian 3 – Penempatan CSS 2

   Itu merupakan cara pertama menggunakan embed. Sekarang kita coba cara yang ke dua yaitu dengan menggunakan inline jadi css bisa kita sisipkan langsung menggunakan atribut html. Contohnya seperti ini saya akan menambahkan warna pada si <h1>

<h1 style="color: blue; font-family: arial;">Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

dan kita lihat hasilnya sama saja seperti menggunakan cara yang pertama

Belajar CSS Dasar Bagian 3 – Penempatan CSS 3

    Sekarang kita coba menggunakan cara yang ketiga dengan menggunakan external. Mekanisme nya adalah seperti ini
Belajar CSS Dasar Bagian 3 – Penempatan CSS 4

      Jadi si html itu menggunakan css yang terpisah dengan file htmlnya. Sekarang kita coba membuat file css nya terlebih dahulu. dan saya simpan satu folder dengan file html nya. Di dalam file html nya syntax penulisan untuk contoh saya menggunakan syntax yang di atas. Dan sekarang saya akan membuat file css nya saja. Syntak nya seperti ini h1 { color: blue; }
    Sekarang kita panggil file css yang sudah kita buat tadi. Didalam file htmlnya saya tuliskan syntax seperti ini menggunakan atribut <link>

<!DOCTYPE html>
<html>
<head>
            <title>Embed html</title>
            <link rel="stylesheet" type="text/css" href="style.css">
            </style>
</head>
<body>

<h1>Hello World</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>


</html>

Hasilnya adalah seperti ini

Belajar CSS Dasar Bagian 3 – Penempatan CSS 5

     Oke sampai sini dulu mungkin untuk pembahasan tentang penempatan css nya. Kemudian kita akan melanjutkan ke dalam materi pembahasan berikutnya yaitu Belajar CSS Dasar Bagian 4 – Font Styling css

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon