Sign in Subscribe
css

Belajar Memberikan Style Pada HTML

Muhammad Satria Herman

• 4 min read
Belajar Memberikan Style Pada HTML

Halo kawan-kawan, jumpa lagi nih. pada kesempatan kali ini saya akan memberikan tutorial "gimana sih cara memberikan style pada HTML". cus langsung ke kodingan kuy.

Persiapan

Pertama-tama kita akan siapkan file html yang akan kita beri style. untuk file bisa di download ya

sekarang coba kita buka filenya di browser

file html

nah, sekarang kita akan memberikan sedikit style pada html kita agar terlihat lebih rapi. untuk yang pertama kita akan menghubungkan file html kita dengan bahasa styling yang disebut css. untuk itu, kita bisa mengetikkan seperti ini

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>

setelah itu kita akan buat file style.css.

struktur file

nah dalam file style.css coba kita berikan style pada <body> dan navigasi dengan menuliskan seperti ini

body {
  padding: 0 30px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: sans-serif;
}

nav > ul {
  list-style: none;
}

nav > ul > li > a {
  color: #333333;
  text-decoration: none;
  margin-left: 10px;
}

coba perhatikan kode diatas. untuk memberikan style pada tag html kita harus menuliskan tag yang ingin kita berikan styling setelah itu style ditulis dalam kurung kurawal {}

untuk style diatas akan saya jelaskan dibawah:

  • padding untuk memberikan jarak didalam element body penulisannya adalah seperti ini : top - right - bottom - left, jadi angka pertama untuk memberikan style pada bagian atas, yang kedua pada bagian kanan dan seterusnya. jika hanya diberikan satu angka maka style tersebut terpasang pada semua sisi, jika hanya diberikan dua angka maka angka pertama untuk bagian atas dan bawah, angka kedua untuk bagian kanan dan kiri.
  • displayuntuk mengatur cara menampilkan sebuah element, style display flex diatas berfungsi agar element ditampilkan secara sejajar.
  • align-items align items adalah property milik flex yang berfungsi untuk mengatur posisi sumbu Y element yang ada didalam flex. sehingga logo dan navigasi pada web kita bisa sejajar ditengah
nah, pas ditengah kan jarak sumbu y nya?
  • justify-content untuk mengatur letak justify pada flex. pada kode diatas kita memberikan nilai space-between sehingga element di dalam flex berada di seberang sisi pinggir masing-masing
ada jarak antar elementnya kan?
  • color digunakan untuk mengubah warna font
  • margin-left digunakan untuk mengatur jarak kiri dari sebuah element terhadap element lain
  • text-decoration digunakan untuk mengatur dekorasi dari sebuah text seperti : underline, strikethrough dll.

Note :

  1. pada style diatas saya memakai selector nav > ul . maksud dari selector ini adalah memberikan style pada tag <ul> yang ada didalam tag <nav> yang berada satu level. untuk css selector ini akan saya bahas dipostingan yang akan datang
  2. saya menggunakan hex code untuk memberikan warna text pada <a>. untuk memberikan warna di css ada banyak cara salah satunya adalah menggunakan hex code. metode hex code ini menggunakan kode hexadecimal dalam memberikan warna. untuk list hex code bisa kalian lihat disini

Styling Pada Main Content

selanjutnya kita akan melakukan styling pada main content. silahkan tulis seperti ini : 


main {
  max-width: 800px;
}

main > p {
  line-height: 150%;
}

button {
  outline: none;
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  background-color: lightblue;
  cursor: pointer;
}

saya akan jelaskan tentang style diatas :

  • max-width digunakan untuk mengatur batas lebar dari sebuah element. jika diatas nilai max-width adalah 800px maka lebar dari <main> tidak bisa lebih dari 800px
  • line-height digunakan untuk mengatur spasi antar baris
  • outline digunakan untuk mengatur garis saat di klik pada button
  • border digunakan untuk mengatur garis pada button
  • border-radius digunakan untuk mengatur kelengkungan pada sisi
  • background-color digunakan untuk mengatur warna latar
  • cursor digunakan untuk mengubah tampilan pada mouse ketika button di hover

tampilan pada web kita akan jadi seperti ini :

lebih rapi bukan?

yang terakhir, kita akan memberikan style pada footer website kita. silahkan kalian tulis seperti ini: 


footer {
  background-color: #282a3c;
  color: white;
  font-family: sans-serif;
  padding: 12px 20px;
  margin-top: 30px;
}

footer > ul {
  list-style: none;
  padding-left: 0;
}

footer > ul > li {
  margin-top: 8px;
  margin-left: 10px;
}
footer > ul > li > a {
  color: white;
}

saya akan jelaskan beberapa style diatas:

  • font-family digunakan untuk mengatur jenis font
  • list-style digunakan untuk mengatur style pada <li> , selengkapnya bisa dilihat disini
  • margin-top digunakan untuk mengatur jarak atas dari sebuah element terhadap element lain

Sekarang coba kita lihat hasil dari tampilan website kita

tampilan akhir website kita

wahh, keren bukan tampilannya?. sekian dulu tutorial dari saya, bila ada yang ingin ditanyakan silahkan hubungi saya dengan cara mengunjungi portfolio saya disini

Wassalamu'alaikum Warahmatullahi Wabarakatuh

Sign up for more like this.

Enter your email
Subscribe