tutorial pengembangan web terbaru

Styles HTML - CSS

❮ Sebelumnya Berikutnya Bab ❯

CSS = Gaya dan Warna

memanipulasi Teks
Warna, box

Styling HTML dengan CSS

CSS singkatan dari Cascading Style Sheets

Styling dapat ditambahkan ke elemen HTML dalam 3 cara:

  • Inline - menggunakan atribut style dalam elemen HTML
  • Internal - menggunakan <style> elemen dalam HTML <head> bagian
  • Eksternal - menggunakan satu atau lebih file CSS eksternal

Cara yang paling umum untuk menambahkan styling, adalah untuk menjaga gaya di file CSS yang terpisah. Tapi, dalam tutorial ini, kita menggunakan styling internal, karena lebih mudah untuk menunjukkan, dan lebih mudah bagi Anda untuk mencoba sendiri.

Anda dapat mempelajari lebih banyak tentang CSS di kami Tutorial CSS .

Inline Styling (Inline CSS)

Styling inline digunakan untuk menerapkan gaya yang unik untuk elemen HTML:

Styling inline menggunakan style atribut.

Contoh ini mengubah warna teks dari <h1> elemen biru:

Contoh

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

Styling internal (Internal CSS)

styling internal yang digunakan untuk menentukan gaya untuk satu halaman HTML.

Styling internal didefinisikan dalam <head> bagian dari halaman HTML, dalam <style> elemen:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1   {color:blue;}
p    {color:green;}
</style>
</head>
<body>

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

</body>
</html>
Cobalah sendiri "

Eksternal Styling (External CSS)

Sebuah style sheet eksternal digunakan untuk mendefinisikan gaya untuk banyak halaman.

Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web dengan mengubah satu file!

Untuk menggunakan style sheet eksternal, menambahkan link ke dalam <head> bagian dari halaman HTML:

Contoh

<!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>
Cobalah sendiri "

Style sheet eksternal dapat ditulis dalam editor teks apapun. File harus tidak mengandung tag html. Gaya File sheet harus disimpan dengan .css ekstensi.

Berikut adalah bagaimana " styles.css " terlihat:

body {
    background-color: lightgrey;
}

h1 {
    color: blue;
}

p {
    color:green;
}

CSS Fonts

CSS color properti mendefinisikan warna teks yang akan digunakan untuk elemen HTML.

CSS font-family properti mendefinisikan font yang akan digunakan untuk elemen HTML.

CSS font-size properti mendefinisikan ukuran teks yang akan digunakan untuk elemen HTML.

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>
Cobalah sendiri "

CSS Box Model

Setiap elemen HTML memiliki kotak di sekitarnya, bahkan jika Anda tidak dapat melihatnya.

CSS border properti mendefinisikan perbatasan terlihat di sekitar elemen HTML:

Contoh

p {
    border: 1px solid black;
}
Cobalah sendiri "

CSS padding properti mendefinisikan padding (space) dalam perbatasan:

Contoh

p {
    border: 1px solid black;
    padding: 10px;
}
Cobalah sendiri "

CSS margin properti mendefinisikan margin (space) di luar perbatasan:

Contoh

p {
    border: 1px solid black;
    padding: 10px;
    margin: 30px;
}
Cobalah sendiri "

Contoh-contoh CSS di atas digunakan px untuk menentukan ukuran dalam pixel.

The id Atribut

Semua contoh di atas menggunakan CSS untuk gaya elemen HTML secara umum.

Untuk menentukan gaya khusus untuk satu elemen khusus, pertama menambahkan atribut id ke elemen:

<p id="p01">I am different</p>

kemudian menentukan gaya untuk elemen dengan spesifik id :

Contoh

#p01 {
    color: blue;
}
Cobalah sendiri "

The class Atribut

Untuk menentukan gaya untuk jenis khusus ( class ) dari unsur-unsur, menambahkan class atribut elemen:

<p class="error">I am different</p>

Sekarang Anda dapat menentukan gaya yang berbeda untuk elemen dengan kelas khusus:

Contoh

p.error {
    color: red;
}
Cobalah sendiri "

Gunakan id untuk mengatasi single elemen. Gunakan class untuk mengatasi groups dari elemen.

Bab Ringkasan

  • Gunakan HTML style atribut untuk styling inline
  • Gunakan HTML <style> elemen untuk mendefinisikan CSS internal yang
  • Gunakan HTML <link> elemen untuk merujuk ke file CSS eksternal
  • Gunakan HTML <head> elemen untuk menyimpan <style> dan <link> elemen
  • Gunakan CSS color properti untuk warna teks
  • Gunakan CSS font-family properti untuk font teks
  • Gunakan CSS font-size properti untuk ukuran teks
  • Gunakan CSS border properti untuk batas elemen yang terlihat
  • Gunakan CSS padding properti untuk ruang di dalam perbatasan
  • Gunakan CSS margin properti untuk ruang luar perbatasan

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 » Latihan 6»

HTML Style Tags

Menandai Deskripsi
<style> Mendefinisikan informasi style untuk dokumen HTML
<link> Mendefinisikan hubungan antara dokumen dan sumber daya eksternal

❮ Sebelumnya Berikutnya Bab ❯