HTML Styles - CSS

HTML Styles - CSS

Styling HTML dengan CSS

CSS singkatan C ascading S tyle S heets.

CSS menjelaskan bagaimana elemen HTML yang akan ditampilkan pada layar, kertas, atau media lainnya .

CSS menghemat banyak pekerjaan dan juga dapat mengontrol tata letak beberapa  halaman web sekaligus.

CSS dapat ditambahkan ke elemen HTML dalam 3 cara:
Inline - dengan menggunakan atribut style dalam elemen HTML
Internal - dengan menggunakan <style> elemen di bagian <head>bagian
Eksternal - dengan menggunakan file CSS eksternal
Cara yang paling umum digunakan untuk menambahkan CSS, adalah menggunakan data file CSS yang terpisah. Namun, di sini kita akan menggunakan inline dan styling internal, karena ini lebih mudah untuk menunjukkan penggunaan CSS, dan lebih mudah bagi kamu untuk mencobanya sendiri.
Tip: kamu dapat mempelajari lebih banyak tentang CSS di Materi CSS .

CSS Inline 

CSS inline digunakan untuk menerapkan gaya yang unik untuk elemen HTML tunggal.

CSS inline menggunakan atribut gaya elemen HTML.

Contoh ini menetapkan warna teks dengan <h1> dengan elemen biru:

Contoh :
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">Ini adalah Judul Berwarna Biru</h1>

</body>
</html>
Kalian bisa mencobanya disini, Hasil :
CSS Inline
klik gambar untuk memperbesar

CSS internal

CSS internal digunakan untuk menentukan style untuk sebuah halaman HTML.

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

Contoh :
<!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>
Hasil :
CSS internal
klik gambar untuk memperbesar

CSS eksternal

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

Dengan style sheet eksternal, kamu dapat mengubah tampilan situs web secara keseluruhan, dengan hanya mengubah satu file!

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

Contoh :
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Ini tajuk</h1>
<p>Ini adalah paragraf.</p>

</body>
</html>
Style sheet eksternal dapat ditulis dalam editor teks apapun. file tidak harus berisi kode HTML, dan harus disimpan dengan ekstensi .css.

Berikut adalah code "styles.css" yang ada untuk contoh diatas:
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}
Hasil :
HTML Styles - CSS
klik gambar untuk memperbesar


CSS Fonts

CSS colorproperti digunakan untuk mendefinisikan warna teks yang akan digunakan.

CSS font-familyproperti digunakan untuk mendefinisikan font yang akan digunakan.

CSS font-size properti digunakan untuk 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>Ini adalah Tajuk</h1>
<p>Ini adalah paragraf.</p>

</body>
</html>
Hasil :
CSS Fonts
klik gambar untuk memperbesar

CSS Border

CSS borderproperti digunakan untuk mendefinisikan perbatasan sekitar elemen HTML:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 1px solid powderblue;
}
</style>
</head>
<body>

<h1>Ini Tajuk</h1>

<p>Ini Paragraf</p>
<p>Ini Paragraf</p>
<p>Ini Paragraf</p>

</body>
</html>
Hasil :
CSS Border
klik gambar untuk memperbesar

CSS Padding

CSS paddingproperti digunakan untuk mendefinisikan padding (spasi) antara teks dan perbatasan:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 1px solid powderblue;
  padding: 30px;
}
</style>
</head>
<body>

<h1>Ini Tajuk</h1>

<p>Ini Paragraf</p>
<p>Ini Paragraf</p>
<p>Ini Paragraf</p>

</body>
</html>
Hasil :
CSS Padding
klik gambar untuk memperbesar

CSS Margin

CSS marginproperti digunakan untuk mendefinisikan margin (ruang) di luar perbatasan:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 1px solid powderblue;
  margin: 50px;
}
</style>
</head>
<body>

<h1>Ini Tajuk</h1>

<p>Ini Paragraf</p>
<p>Ini Paragraf</p>
<p>Ini Paragraf</p>

</body>
</html>
Hasil :
CSS Margin
klik gambar untuk memperbesar

Id Atribut

Digunakan untuk menentukan gaya tertentu untuk satu elemen khusus, menambahkan idatribut elemen seperti berikut :
<p id="p01">Saya berbeda</p>
kemudian menentukan gaya untuk elemen dengan id tertentu:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
  color: blue;
}
</style>
</head>
<body>

<p>Ini Paragraf</p>
<p>Ini Paragraf</p>
<p id="p01">Ini Paragraf style berbeda dengan id p01</p>

</body>
</html>
Hasil :
Id Atribut
klik gambar untuk memperbesar

Catatan: Id dari elemen harus unik dalam suatu halaman, sehingga pemilih id digunakan untuk memilih salah satu elemen yang unik!

Kelas Atribut

Digunakan untuk menentukan gaya untuk jenis khusus dari elemen, menambahkan classatribut untuk elemen:
<p class="error">Saya berbeda</p>
kemudian menentukan gaya untuk elemen dengan kelas khusus:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p.error {
  color: red;
}
</style>
</head>
<body>

<p>Ini Paragraf.</p>
<p>Ini Paragraf.</p>
<p class="error">Ini Paragraf style berbeda dengan class error.</p>
<p>Ini Paragraf.</p>
<p class="error">Ini Paragraf style berbeda dengan class error juga.</p>

</body>
</html>
Hasil :
Kelas Atribut
klik gambar untuk memperbesar

Referensi eksternal

style sheet eksternal dapat dirujuk dengan URL penuh atau dengan path relatif ke halaman web saat ini.

Contoh yang menggunakan URL lengkap untuk link ke sebuah style sheet:

Contoh :
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

Contoh yang menggunakan link ke style sheet yang terletak di folder html di situs web saat ini:

Contoh :
<link rel="stylesheet" href="/html/styles.css">

Contoh ini link ke style sheet yang terletak di folder yang sama dengan halaman saat:

Contoh :
<link rel="stylesheet" href="styles.css">

Ringkasan


  • Gunakan HTML styleatribut 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 colorproperti untuk warna teks
  • Gunakan CSS font-familyproperti untuk font teks
  • Gunakan CSS font-sizeproperti untuk ukuran teks
  • Gunakan CSS borderproperti untuk perbatasan
  • Gunakan CSS paddingproperti untuk ruang di dalam perbatasan
  • Gunakan CSS marginproperti untuk ruang luar perbatasan
Disqus Comments