Postingan hari ini tentang menggabungkan HTML dengan CSS, langsung saja...
Styling HTML dengan CSS
CSS singkatan dari Cascading Style Sheets.
CSS menjelaskan bagaimana elemen HTML yang akan ditampilkan pada layar atau media lainnya.
CSS menghemat banyak pekerjaan. Hal ini dapat mengontrol tata letak halaman web beberapa sekaligus.
CSS dapat ditambahkan ke elemen HTML dalam 3 cara:
- Inline - dengan menggunakan atribut style dalam elemen HTML
- Internal - dengan menggunakan elemen <style> dalam <head>
- Eksternal - dengan menggunakan file CSS eksternal
Inline CSS
Inline CSS digunakan untuk menerapkan gaya unik untuk elemen HTML.
Sebuah CSS inline menggunakan atribut gaya elemen HTML.
Contoh ini menetapkan warna teks elemen <h1> adalah biru :
<h1 style="color:blue;">This is a Blue Heading</h1>
CSS internal
Sebuah CSS internal digunakan untuk menentukan gaya untuk halaman HTML.
Sebuah CSS internal didefinisikan dalam <head> halaman HTML, dalam elemen <style> :
<!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>
CSS eksternal
Style sheet eksternal digunakan untuk menentukan gaya untuk banyak halaman HTML.
Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web, dengan mengubah satu file saja.
Untuk menggunakan style sheet eksternal, menambahkan link ke dalam <head> dari 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>
Style sheet eksternal dapat ditulis dalam editor teks, file tidak harus berisi kode HTML, dan harus disimpan dengan ekstensi .css.
Berikut adalah bagaimana "styles.css" terlihat:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Font
CSS color 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.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Border
CSS border 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;
}
Sekian postingan kali ini mengenai penggabungan HTML dengan CSS, silahkan dicoba semoga bermanfaat.
wassalamualaikum wr. wb.
Referensi :
- http://www.w3schools.com/html/html_css.asp
Tidak ada komentar:
Posting Komentar