https://bl.id/kumpulink_io_art

Cara menginput kode Css pada Html


sekarang seoke.com akan berbagi sedikit dengan postingan postingan yang telah seoke.com bagikan.kali ini seoke.com akan berbagi postingan untuk para pemula yang begitu belum mengerti dengan penempatan/menginput kode kode Css pada Html.


foto By maringngerrang.blogspot.co.id

nah seoke.com sekarang pengen postingan tentang Cara menginput kode Css pada Html,dalam hal ini cara mnegipust kode tersebut kita bagi dengan 3 bagian diantaranya yaitu :
  • moetode inline style
  • internal style sheets
  • external style sheets
Yang di maksud dengan metide inline style ialah untuk menginput kode Css pada halaman/tag Html di haruskan menggunakan atribut style,contoh dengan cara penemptan dan atribut yang akan di pasang lihat contohnya di bawah ini 

1
3
4
5
6
7
8
9
10
11
 <!DOCTYPE html>
 <html>
 <head>
      <title>Contoh Inline Style CSS</title>
 </head>
    <body>
       <h2 style="background-color:black; color:white" >
          Text ini akan bewarna putih dan background warna hitam
       </h2>
    </body>
 </html>

saat penempatan kode Css tersebut seoke.com menambahkan atributnya pada h2.

internal style sheets ialahuntuk memisahkan kode Css dari halam Html namun dalam satu halaman Html,atribut style yang sebelumnya berada dalam tag di kumpulkan pada tag <style>. tag style ini harus berada dalam <head> dari halaman Html,kita lihat contohnya di bawah ini :


1
2
3
4
5
6
7
9
10
11
12
13
14
15 
16 
17
 <!DOCTYPE html>
 <html>
 <head>
     <title>Contoh Inline Style CSS</title>
     <style type="text/css">
         h2 {
         background-color:black;
         color:white;
         }
     </style>
 </head>
 <body>
     <h2>
         Text ini akan bewarna putih dan background warna hitam
     </h2>
</body>
</html>

Menggunakan internal style sheets ini lebih baik dari pada metode inline style,karena sudah memisahkan Css dari Html tersebut.dan kekurangan saat menggunakan internal style sheets ialah jika kita memeiliki beberapa halaman yang sama,maka kita harus membuat kode Css pada masing masing halam tersebut.

external style sheets ialah untuk mengankat  kode Css tersebut ke dalam sebuah file yang terpisah dari halaman Html,setiap halaman yang membutuhkan kode Css tersebut.
Contoh sama seoerti dengan saat menggunakan internal style sheets.yang pertama kita lakukan ialah memindahkan isi tag <style> ke halaman baru.dan contohnya seperti ini :


1
2
3  
 h2 {
 background-color:black;
color:white;
}
Pastikan akhir dari file tersebut Css.dan kembali ke halaman Html 
disini Css akan kita bagikan menjadi 2 cara untuk menginput kode Css ke halaman Html tersebut yaitu 

@import 

contohnya seperti ini :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <style type="text/css">
        @import url(belajar.css);
    </style>
</head>
<body>
    <h2>
        Text ini akan bewarna putih dan background warna hitam
    </h2>
</body>
</html>

Pada metode @impor ini kita akan sisipkan @impor URL pada Tag  <style> 
dan yang kedua input pada external style sheets dengan mengunakan Tag <LINK>.contohnya seperti ini :

1
2
4
5
6
7
8
9
10
11
12
 <!DOCTYPE html>
 <html>
 <head>
     <title>Contoh Inline Style CSS</title>
     <link rel="stylesheet" type="text/css" href="belajar.css">
 </head>
 <body>
     <h2>
         Text ini akan bewarna putih dan background warna hitam
     </h2>
 </body>
 </html>
Dalam meto de ini kita menggunakan href pada <link> yang akan berisi alamat dari halam Css.

mungkin hanya segitu yang bisa seoke.com terangkan dan jika kalian tidak mengerti dengan apa yang telah sampaikan di atas atau kalian punya keritik dan saran tenta blog seoke.com ini,kalian bisa tinggalkan pesannya di komentar.
Dan seoke.com berterima kasih kalian sudah berkenan mengunjungi blognya seoke.com yang berusaha untuk menyajikan kode kode html untuk para blogging yang bersumber dari para master blogging.

jika kalian butuh kode  Html pasang teks area untuk blog, bisa baca di postingan saya yang lainya di kumpulan kode teks area
Terima kasih 


G+

Ditulis Oleh : Seoke.com Blogger

seoke.com Terima kasih telah berkunjung di Cara menginput kode Css pada Html.Silahkan kalian masukan mail kalian untuk berlangganan lewat mail tentang artikel terbaru dari SEOKE.COM.

Subscribe To Email!

0 komentar:

Post a Comment