#1 CSS – Apa itu CSS?

CSS (Cascading Style Sheets) merupakan suatu aturan untuk mengatur halaman website atau aturan untuk mengatur bagaimana html akan ditampilkan seperti merubah warna background, merubah ukuran heading, mengatur margin dan masih banyak lagi hal-hal yang bisa dilakukan CSS untuk mempercantik html.

Cara menempatkan CSS

Terdapat 3 cara menyematkan CSS pada HTML antara lain:
1. External style sheet
2. Internal style sheet
3. Inline style

1. External style sheet

CSS dibuat pada file terpisah dari html, file CSS berekstensi .css contoh style.css. Cara pemanggilan style eksternal dengan cara menuliskan tag <link> pada head html.

<head>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>

Berikut contoh code index.html :

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <h1>Hello World!</h1>
    <h2>Hello World!</h2>
    <h3>Hello World!</h3>
    <h4>Hello World!</h4>
</body>

</html>

Berikut contoh code style.css :

h1 {
    color: brown;
}

h2 {
    color: rebeccapurple;
}

h3 {
    color: crimson;
}

h4 {
    color: deepskyblue;
}

2. Internal style sheet

Internal style sheet merupakan CSS yang langsung disematkan pada satu halaman yang sama dengan html, ditulis didalam tag <style></style> dan disematkan kedalam <head>. Berikut contohnya :

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

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

</body>
</html>

3. Inline style

Penulisan CSS yang langsung dituliskan kedalam tag html, contoh :

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Tinggalkan sebuah komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *