DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial belajar css # Mengatur gaya atau style pada elemen html

advertisement
Mengatur gaya atau style pada elemen html

Pada artikel sebelum-sebelumnya kita sudah belajar bagian-bagian penting dalam menulis kode css.
Seperti membuat selector, properti, rule css dan function value properti.
Pada tutorial kali ini kita akan coba mengimplementasikannya untuk mengatur elemen-elemen html agar sesuai dengan yang kita inginkan.
Seperti mengatur latar belakang,gaya teks, font, visual format dan lain sebagainya.
Yuk kita mulai tutorialnya.

Properti untuk mengubah gaya elemen

Berikut adalah beberapa properti yang akan kita gunakan untuk mengatur gaya tampilan dari elemen.
Properti Keterangan Nilai
background Digunakan untuk mengatur latar belakang secara instan. url("walpaper.png") no-repeat center,
border Digunakan untuk mengatur bingkai dari elemen. 1px solid #eaeaea
border-radius Digunakan untuk mengatur lengkung pojok bingkai sisi kiri 9px
display Digunakan untuk mengatur mode tampilan elemen none | block | inline-block | inline | grid
position Digunakan untuk mengatur posisi elemen static | fixed | absolute | relative | sticky
top Digunakan untuk mengatur jarak bagian atas 20px
right Digunakan untuk mengatur jarak bagian kanan 21px
bottom Digunakan untuk mengatur jarak bagian bawah 23px
left Digunakan untuk mengatur jarak bagian kiri 20px
float Digunakan untuk mengatur posisi dengan mode mengapung left | right | center | none
z-index Digunakan untuk mengatur indek layer elemen 99
overflow Digunakan untuk menentukan mode ketika lebar atau tinggi elemen lebih besar dari parentnya visible | scroll | auto | hidden
overflow-x Digunakan untuk mengatur  horizontal overflow visible | scroll | auto | hidden
overflow-y Digunakan untuk mengatur vertical overflow visible | scroll | auto | hidden
visibility Digunakan untuk menentukan apakah elemen terlihat atau tersebunyi  visible | hidden | collapse
box-shadow Diguanakan untuk mengatur bayangan elemen none | blur | h-offset | v-offset |20px 20px 10px grey| spred | inset
font Digunakan untuk mengatur font teks. 14px|18em
margin Digunakan untuk menatur jarak batas elemen. 50px | 50%
outline Digunakan untuk membuat garis tepi elemen secara instan. 10px solid blue
padding Digunakan untuk mengatur lebar lapisan elemen ke bagian dalam. 50px | 50% 
height Digunakan untuk mengatur tinggi elemen 50px | 50%
max-height Digunakan untuk mengatur maksimal tinggi elemen 100px | 50%
max-width Digunakan utnuk mengatur maksimal lebar elemen. 250px | 50%
min-height Digunakan untuk mengatur minimal tinggi elemen 520px | 50%
min-width Digunakan untuk mengatur minimal lebar elemen 520px | 50%
width Digunakan untuk mengatur lebar elemen 510px | 50%
text-align Digunakan untuk menentukan posisi teks. auto | left | right | center | justify | start | end
text-shadow Digunakan untuk mengatur bayangan. 2px 2px #ff0000;
line-height Digunakan untuk mengatur tinggi dari teks. noraml | angka | %
Color Digunakan untuk memberi warna pada teks elemen rgb | Hexa | nama warna dalam bhs.inggris
Daftar properti diatas adalah properti yang akan sering kita gunakan. Masih ada banyak properti lainnya yang bisa kita gunakan untuk mengatur styling pada elemen. Kalian bisa lihat di artikel sebelumnya tentang apa itu properti css.

Mengatur style pada elemen

Latar belakang

Salah satu hal yang bisa dilakukan css adalah mengatur latar belakang elemen.
Mendesain latar belakang tentu menjadi hal penting yang perlu dilakukan untuk menghasilkan halaman web yang menarik dan modern.
Untuk melakukan hal tersebut, kita dapat menggunakan salah satunya properti background.
Dengan properti ini, kita dapat mengatur warna latar belakang, mengganti latar belakang dengan gambar, membuat latar belakang statik ataupun scolling dan lain sebagainya.
Contoh kodenya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         *{ line-height:3;padding:10px;}
         #p1 {background:blue;}
         #p2 {background:url('gambar.jpg') fixed center repeat;}
      </style>
   </head>
   <body>
      <p id="p1">Ini Elemen P 1</p>
      <p id="p2">Ini Elemen P 2</p>
   </body>
</html>
Hasilnya,
Mengatur gaya atau style pada elemen html

Dimensi

Mengatur dimensi atau ukuran elemen perlu dilakukan, agar elemen tersebut bisa terlihat rapi dan memiliki ukuran yang sesuai. Ini bisa dilakukan dengan menggunakan properti width dan height
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         *{ line-height:3;padding:10px;}
         #p1 {width:97%;height:99px;background:blue;color:white;}
         #p2 {width:97%;max-width:550px;height:99%;background:blue;color:white;}
         #p3 {width:97%;height:99%;max-height:155px;background:blue;color:white;}
         #p4 {width:97%;min-width:150px;height:99%;min-height:55px;background:blue;color:white;}
      </style>
   </head>
   <body>
      <p id="p1">Ini Elemen P 1</p>
      <p id="p2">Ini Elemen P 2</p>
      <p id="p3">Ini Elemen P 3</p>
      <p id="p4">Ini Elemen P 4</p>
   </body>
</html>
Hasilnya,
Mengatur gaya atau style pada elemen html

Font dan Format teks

Dengan menentukan font dan mengatur format teks kita dapat menyejikan informasi yang lebih informatif kepada pengunjung halaman web seperti menebalkan kata yang dianggap penting, membuat teks miring untuk kata yang dianggap asing, membuat garis bawah pada kata atau kalimat yang ditandai dan lain sebagainya.
Sebelumnya kita pernah belajar membuat format teks menggunakan tag html.
Kita juga dapat melakukan hal yang sama dengan menggunakan kode css.
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         @font-face{font-family:'Roboto';src:url(//fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2);}
         * {line-height:3;padding:10px;color:red;}
         #p1 {font:18px bold italic robot;}
         #p2 {font:14px normal italic san-serif;}
         #p3 {text-align:justify}
         #p4 {text-shadow:2px 2px #ff0000;}
      </style>
   </head>
   <body>
      <p id="p1">Ini Elemen P 1</p>
      <p id="p2">Ini Elemen P 2</p>
      <p id="p3">Ini Elemen P 2</p>
      <p id="p4">Ini Elemen P 2</p>
   </body>
</html>
Hasilnya,
Mengatur gaya atau style pada elemen html

Format teks menggunakan css lebih di sarankan dari pada langsung menggunakan tag html. Selain lebih efisien, dokumen html menjadi lebih mudah untuk di edit. 

Bingkai dan area

Pemberian bingkai pada elemen bukan hanya sekedar hiasan, tapi juga memiliki fungsi untuk memisahkan elemen satu dengan elemen yang lain, elemen dengan kontennya dan elemen dengan elemen childnya. properti yang umum di gunakan untuk melakukan hal ini adalah border, margin, pading dan outline.
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         #p1,#p2,#p3 { border:1px solid blue;text-align:center}
         #p1{margin:20;}
         #p2{padding:20px;}
         #p3{border:1px dashed red;}
         #p4{outline:#4CAF50 solid 2px;}
      </style>
   </head>
   <body>
      <p id="p1">Ini Elemen P 1</p>
      <p id="p2">Ini Elemen P 2</p>
      <p id="p3">Ini Elemen P 3</p>
      <p id="p4">Ini Elemen P 4</p>
   </body>
</html>
Hasilnya,
Mengatur gaya atau style pada elemen html

Tata letak dan posisi

Kalian pasti setuju bahwa mengatur tata letak dan posisi adalah hal yang penting.
Memposisikan elemen pada tempat-tempat yang telah ditentukan seperti head disebelah atas, navigasi di bawah head atau sebelah kiri, sidebar di sebelah kanan, artikel di tengah dan footer di bagian bawah dapat dilakukan menggunakan kode css.
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         body > div{border:1px solid #eaeaea;margin:3px;background-color:blue;color:white;text-align:center}
         #div1{width:calc(100% - 18px);position:fixed;z-index:99}
         #div2{width:calc(100% - 9px);position:relative;top:25px}
         #div3{display:inline-block;width:calc(50% - 18px);margin-top:39px}
         #div4{display:inline-block;width:calc(50% - 18px);}
         #div5{width:calc(100% - 9px)}
      </style>
   </head>
   <body align="center">
      <div id="div1">Ini Menu</div>
      <div id="div2">Ini Header</div>
      <div id="div3">Ini isi konten</div>
      <div id="div4">Ini Sidebar</div>
      <div id="div5">Ini Footer</div>
   </body>
</html>
Hasilnya,
Mengatur gaya atau style pada elemen html


Sampai disini tutorial mengatur style pada elemen. Kalian bisa coba improvisasi dengan mengatur value propertinya atau mencoba properti properti styling yang lainnya.
Silahkan berkreasi.

Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share. Dan jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis dikolom komentar.
Good luck!

advertisement



0 Komentar untuk " Tutorial belajar css # Mengatur gaya atau style pada elemen html"

Silahkan berkomentar dengan baik dan bijak!