Cara benar menerapkan css di html

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.

Cara menggunakan CSS di HTML: embedded style/Internal Styles

<style>

</style>

<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).

Cara menggunakan CSS di HTML: Inline style

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

Cara benar menerapkan css di html

1 Response to "Cara benar menerapkan css di html"