Cara Menggunakan CSS Di Kode HTML Dengan Mudah

HTML+CSS
Pada artikel ketiga ini saya akan membahas menggenai cara menggunakan CSS di HTML masih ingat kan kode-kode atau tag-tag html ? kalau masih belum tenang saja karena pada tutorial ini saya akan menjelaskannya lagi agar kita dapat mengingat kembali kode-kode HTML dengan begitu akan lebih mudah nantinya untuk menambahkan kode CSS. pasti kita hapal dengan kode html yang paling utama kan, jika hapal maka kita hanya perlu lanjutkan saja tanpa perlu ke tutorial pertama lagi.

Apa Itu CSS?

CSS (Castanding Style Sheet) adalah sebuah bahasa pemrograman yang dimana kegunaan dari CSS ini untuk membuat sebuah tampilan web menjadi lebih menarik dan akan terlihat bagus apabila menggunakan CSS tentu saja berbeda dengan HTML yang harus membuat satu-persatu CSS nya, berbeda dengan menggunakan CSS maka kita hanya perlu memasang kode-kode CSS maka semua kode HTML akan berubah sedimikian yang kita inginkan.

Cara Menggunakannya CSS di HTML

 

Untuk menggunakan CSS kita hanya perlu menambahkan kodenya pada <head>...</head> nah maka kode CSS akan tampil dan tentu saja kita harus membuat kode-kode seperti background, border, margin, widht, height, dan lainnya.

Sekarang mari kita lakukan pemasangan kode CSS di HTML, pertama buatlah pada notepad atau sublime text dan ketik kode dibawah ini.

<html>
<head>
<title> Penggunaan CSS Pada HTML </title>
<style type="text/css">
body {background-color: blue;}
</style>
</head>
<body>
<p> Kalian sekarang bisa melihat background berubah menjadi warna biru </p>
</body>
</html>

Simpan kode diatas, jika menggunakan notepad pilih save as dan pilih all file kasih namanya CSS.html lalu kita jalankan kode diatas dan lihat perubahannya.

Nah penempatan kode CSS adalah dengan kode <style type='text/css'> untuk bagian paling atasnya dan diakhiri dengan penutupnya </style> setelah membuat pembuka dan penutup sekarang untuk membuatnya adalah dengan menambahkan kode seperti body { gunaakan kurung kurawa pembuka dan penutup } lalu isikan kode seperti background-color maupun margin dan widht.

Sebelum melanjutkannya, sebenarnya ada 3 cara untuk pemasangan CSS di HTML yaitu dengan :
  1. Internal style sheet
  2. Inline style sheet 
  3. External style sheet
Nah kode diatas akan saya beritahukan satu-satu kegunaan nya akan tetapi masih tetap sama saja hanya untuk pemasangan CSS di HTML.

Setelah hapal kode diatas mari kita lanjutkan pada latihan berikutnya agar kalian lebih terbiasa dengan CSS dan HTML.

Buka aplikasi programan kalian seperti sublime text atau notepad pilih salah satu saja. Lalu ketik kode dibawah ini.

Cara Pertama Internal Style Sheet 

 

seperti yang sudah saya jelaskan diatas bahwa penerapan kode CSS diletakkan pada kode <head>...</head> untk menerapkannya tambahkan kode <style> atau <style type='text/css'> diatas kode </head> dan diakhiri dengan kode </style>

 Contoh Pemasangannya :

<html>
<head>
<title> Penggunaan CSS Pada HTML </title>
<style type="text/css">
body {background-color: blue;}
</style>
</head>
<body>
<p> Kalian sekarang bisa melihat background berubah menjadi warna biru </p>
</body>
</html>

Kita simpan dengan contoh.html dan lihat perubahannya kode ini sudah sama seperti kode diatas yang saya gunakan untuk contoh penerapan pertama.


Cara Kedua Inline style sheet  

 

Inline style sheet adalah cara penerapan kode css yang dimana kode css ini dimasukan ke dalam kode HTML dengan begitu kita bisa langsung memberikan style dengan cara memasukkan css pada kode HTML.

Contoh kode HTML tanpa CSS

<html>
    <head>
        <title> Inline style sheet </title>
</head>
    <body>
        <p> Ini adalah kalimat paragraf, dan kalian akan lihat hasilnya </p>
    <p> Ini adalah kalimat paragraf, dan paragraf ini juga ingin keliatan kece seperti paragraf kesatu </p>
    </body>
</html>

Kode HTML diatas jika dijalankan hanya akan terlihat tulisan saja tanpa adanya perubahan style, jika ingin merubah warna paragraf tersebut sesuai keinginan kita, maka bisa langsung memberikan atribut style pada huruf pertama seperti contoh berikut.

<html>
    <head>
        <title> Inline style sheet </title>
</head>
    <body>
        <p style="color: white;background-color: #6591C2;border-radius: 

4px;max-height: 500px;"> Ini adalah kalimat paragraf, dan kalian akan lihat 

hasilnya </p>
    <p style="color: white;background-color: #6591C2;border-radius: 

4px;max-height: 500px;"> Ini adalah kalimat paragraf, dan paragraf ini juga 

ingin keliatan kece seperti paragraf kesatu </p>
    </body>
</html>

Nah sekarang kode diatas sudah saya tambahkan style dan kalian coba jalankan kodenya dan lihat perubahan saat menggunakan kode CSS diatas. Hanya saja kode ini terbilang tidak efisien karena kita harus membuat style pada setiap kode HTML yang ada jadi kalau dibayangkan bisa pusing kepala kalian kalau harus pasang style pada setiap kode HTML pada dokumen.

Cara Ketiga Eksternal style sheet

 

Ini adalah metode paling makyus dan manjur :'v karena bisa digunakan untuk merubah style pada semua kode HTML, akan tetapi cara yang ini mengharuskan kita untuk membuat file CSS. setelah kita membuat file CSS, maka file tersebut bisa kita panggil dalam tag <link>

Contoh penerapannya, pertama kita buat dulu file dengan nama contoh.css, ketikkan kode berikut untuk merubah semua tulisan elemen paragraf maupun background layar.

body {background-color: #6591C2;border-radius:4px;max-height: 500px;;}
p {color:white}

Untuk pemanggilannya kita harus membuat kode pemanggil yaitu dengan menambahkan kode <link> pada HTML.

<link href="contoh.css" rel="stylesheet" type="text/css" media="screen" />

Sehingga kode diatas akan terlihat menjadi seperti ini

<html>
    <head>
        <title> Eksterna style sheet </title>
 <link href="contoh.css" rel="stylesheet" type="text/css" media="screen" />
</head>
    <body>
        <p> Ini adalah kalimat paragraf, dan kalian akan lihat hasilnya </p>
    <p> Ini adalah kalimat paragraf, dan paragraf ini juga ingin keliatan kece  seperti paragraf kesatu </p>
    </body>
</html>

Sekarang kita coba jalankan kode diatas maka akan terlihat perubahannya pada background dan warna teksnya. Dan metode ini sering sekali digunakan oleh para pengembang web.

Untuk Melihatnya kalian bisa lihat dibawah ini

Sekian tutorial dari Mas Riyan dan semoga bermanfaat buat kita semua, dan apabila jika dirasa ada yang ingin ditanyakan silahkan memberikan kometar.
di
Label: ,