Selasa, 27 Desember 2016

06.35

By Unknown



No comments

Mari Mengenal HTML Part 6 : HTML CSS

Pada kesempatan kali saya akan memposting tentang Styling HTML CSS, berikut pengertianya

CSS merupakan singkatan dari Cascading Style Sheet, css menjalankan bagaimana elemen HTML yang akan ditampilkan pada layar. Keuntungan dari css tersendiri dapat menghemat banyak pekerjaan dikarenakan dapat mengontrol tata letak halaman web beberapa sekaligus.

CSS dapat ditambahakan ke element HTML ada 3 yaitu :
  • Inline, dengan menggunakan atribut style dalam elemen HTML
  • Internal, dengan menggunakan <style> elemen dalam <head>
  • Eksternal, dengan menggunakan file CSS eksternal
Cara yang paling umum untuk menambahkan CSS, adalah untuk menjaga gaya dalam file CSS yang terpisah. Namun, di sini kita akan menggunakan inline dan styling internal, karena ini lebih mudah untuk menunjukkan, dan lebih mudah bagi Anda untuk mencoba sendiri.

  • Inline, digunakan untuk menerapkan gaya unik untuk elemen HTML.
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a Blue Heading</h1>

</body>
</html>
  • CSS internal, digunakan untuk menentukan gaya untuk halaman HTML. 
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


  • Style sheet eksternal digunakan untuk menentukan gaya untuk banyak halaman HTML.
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>  

 Dari contoh script  yang ada diatas anda dapat mencobanya sendiri.
 
Style CSS 
Font CSS
CSS warna properti mendefinisikan warna teks yang akan digunakan.
CSS font-family properti mendefinisikan font yang akan digunakan.
CSS font-size properti mendefinisikan ukuran teks yang akan digunakan.

<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>

CSS Border
CSS perbatasan properti mendefinisikan perbatasan sekitar elemen HTML:

p {
    border: 1px solid powderblue;
}

CSS Padding
CSS Padding properti mendefinisikan padding (spasi) antara teks dan perbatasan:

p {
    border: 1px solid powderblue;
    padding: 30px;
}

CSS Margin
CSS Margin properti mendefinisikan margin (ruang) di luar perbatasan:
p {
    border: 1px solid powderblue;
    margin: 50px;
}

Dari contoh script  yang ada diatas anda dapat mencobanya sendiri.

Sekian dan terimakasih
Semoga Bermanfaat 

Referensi:
 
 
 




 
  

0 komentar:

Posting Komentar