cara benar menerapkan css di html - cara menarapkan atau menggunakan css di html ada tiga cara, cara pertama menerapkan css di html dengan cara embedded style sheet, cara kedua menerapkan css di html dengan cara inline style sheet, dan cara yang ketiga menerapkan css di html dengan cara linked style sheet. saya akan bahasa satu persatu tentang menerapkan css pada html. ikuti langkah berikut.

  1. Cara menggunakan CSS di HTML: embedded style/Internal Styles

    2. Embedded style adalah  cara penulisan kode dimana penulisan CSS diterapkan pada tag HTML, yaitu pada tag <style> ... </style> dan umumnya diletakkan di dalam tag atau elemen <head>... </head>.

    Penulisan Embedded Style
      <style type="text/css"> 
      <!—Atribut CSS -->
       </style>

    contoh penulisan Embedded Style

    <html>
     <head>
      <title>contoh title</title>
      <style type="text/css">
      body{
       background: #3498db;
       color: #ecf0f1;
       font-size: 14px;

      }
      </style>
     </head>
     <body>
      <p>ini contoh penggunaan paragraf sederhana</p>
      <b>ini adalah contoh huruf tebal(bold)</b>
      <br/><!-- fungsi br merupakan ganti baris-->
      <i>ini adalah contoh huruf miring(italic)</i>
      <p><b></i>ini adalah contoh sebuah paragraf sederhana yang berhuruf tebal dan berhuruf miring</i></b></p>
     </body>
    </html>


    Hasil contoh penulisan embedded style

    penulisan-Embedded-style-sheet-css-di-html

    Keterangan kode program diatas

    <!DOCTYPE html> Deklarasi DOCTYPE mendefinisikan jenis dokumen HTML
    Teks antara <html> dan </ html> menggambarkan sebuah dokumen HTML
    Teks antara <head> dan </ head> memberikan informasi tentang dokumen
    Teks antara <title> dan </ title> memberikan judul untuk dokumen
    didalam <Style>...</style> terdapat kode body dan di dalamnya ada background,
    color, font-size. artinya didalam body nantinya warna background sudah diset
    color yang di dalam body sudah diset, color berfungsi untuk memberikan warna 
    pada text, dan font-size merupakan ukuran text Teks antara <body> dan </ body>
    menggambarkan isi halaman yang terlihat Teks antara <p> dan </p> merupakan 
    sebuah paragrap, <b>dan</b> merupakan contoh bold <br/> tag untuk ganti baris,
    seperti yang saya bilang tadi ada tag html yang tidak ada pasangannya.
    dan tag <i>dan</i> untuk teks miring(italic).
     
  2. Cara menggunakan CSS di HTML: Inline style

    3. Inline style sheet adalah cara penggunaan CSS langsung pada tag HTML yang di butuhkan  saja. Cara ini dilakukan umumnya dikarenakan hanya sedikit properti yang dibutuhkan

    Penulisan Inline Style
      <tag HTML style="Properti:value/nilai"> ... </tag HTML>

    contoh penulisan inline style

    <html>
     <head>
      <title>contoh inline </title>

     </head>
     <body>
      <h1 style="background: #ccc; color: #fff; text-align: center;" >contoh inline style sheet</h1>
     </body>
    </html>


    hasil dari penulisan inline style



    keterangan kode program diatas

    <!DOCTYPE html> Deklarasi DOCTYPE mendefinisikan jenis dokumen HTML
    Teks antara <html> dan </ html> menggambarkan sebuah dokumen HTML
    Teks antara <head> dan </ head> memberikan informasi tentang dokumen
    Teks antara <title> dan </ title> memberikan judul untuk dokumen
    Teks antara <body> dan </ body> menggambarkan isi halaman yang terlihat
    pada heading <h1></h1> didalamnya terdapat inline style yaitu memiliki background
    abu-abu(#ccc), memiliki warna putih(#fff) dan text-align center atau rata tengah