/* padding */
div {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
}
/* border */
img {
border-style: solid;
border-width: 1px;
border-color: black;
}
Menata layout dengan display, position, dan float
Dengan CSS, Anda dapat menata layout halaman web dengan menggunakan properti display, position, dan float. Display digunakan untuk menentukan tampilan elemen, apakah elemen tersebut ditampilkan sebagai blok atau inline. Position digunakan untuk menentukan posisi elemen, sedangkan float digunakan untuk mengatur tata letak elemen secara horizontal.
Contoh pengaturan layout dengan display, position, dan float:
/* display */
p {
display: block;
}
span {
display: inline;
}
/* position */
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: white;
}
#content {
position: absolute;
top: 100px;
left: 50px;
}
/* float */
img {
float: left;
margin-right: 10px;
}
Dengan menggunakan CSS, Anda dapat mengatur tampilan halaman web dengan lebih fleksibel dan mudah. Anda dapat mengubah warna, font, tata letak, dan elemen lainnya dengan mudah. Dengan menguasai CSS, Anda dapat membuat tampilan halaman web yang menarik dan profesional.
Kesimpulan
Demikianlah artikel mengenai Mengelola Stylesheet dengan CSS, mulai dari pengenalan CSS, menambahkan CSS ke HTML, selector dan properti CSS, mengatur font, warna, dan background, mengatur margin, padding, dan border, serta menata layout dengan display, position, dan float.
Semoga artikel ini bermanfaat bagi Anda yang ingin mempelajari CSS. Jangan ragu untuk mencoba dan bereksperimen dengan CSS untuk membuat tampilan halaman web yang menarik dan profesional.
Follow us on
