Mempelajari CSS sangatlah mudah saat mengetahui kunci dari sebuah syntak.
Introduction: Tutorial ini akan menjadi bagian kedua dari dua bagian dasar tentang cara membuat halaman web dasar dengan komponen penting menggunakan HTML dan CSS murni. Struktur: Halaman web kita akan terdiri dari tajuk yang menutupi lebar penuh konten di bagian atas halaman, bagian tubuh yang mencakup sebagian besar dari tajuk hingga cukup jauh ke bawah halaman, bilah samping yang berisi widget di sisi kanan dari halaman - di samping bagian badan utama halaman, dan kaki yang menutupi lebar yang sama (dan mungkin tinggi) sebagai bagian header; di bawah bagian body dan side bar yang digunakan untuk membuat bagian samping kanan atau samping kiri dari sebuah halaman website. Bagian pertama: Bagian pertama adalah tentang HTML (Hypertext Markup Language), bagian kedua ini akan memberikan style pada komponen-komponen pada CSS (Cascade Style Sheets). All Components: Pertama, kami ingin memastikan bahwa semua komponen memiliki gaya default kami, bukan gaya default browser yang saat ini digunakan pengguna untuk mengakses halaman web. Kami melakukan ini dengan mengatur properti semua komponen yang merupakan bintang / asterix (*)
* {
padding: 0px;
margin: 0px;
font-size: 18px;
font-color: #0a0a0a;
font-family: Verdana;
}Kami memberikan semua komponen nilai default tanpa padding atau margin (tanpa spasi atau spasi tambahan), dan ukuran font default, warna, dan keluarga. (Catatan; Warna harus dieja dengan cara amerika (color)). Kami menyetel properti default untuk semua komponen sekaligus karena akan memudahkan kami di kemudian hari tanpa harus mengetik ulang kode properti yang sama untuk banyak komponen berbeda. HTML: Bagian ini tidak terlalu diperlukan tetapi kami juga menyetel tag html agar memiliki lebar 100% penuh dari seluruh jendela penelusuran dan tinggi default (ini harus berhenti di mana pun komponen bekerja)
html {
width: 100%;
height: auto;
color : white;
align : center;
}Wrapper: Selanjutnya kita memiliki kelas wrapper. Kelas wrapper ini, seperti yang disebutkan di tutorial sebelumnya, akan menetapkan batas untuk komponen lainnya. Karena kita ingin komponen lainnya berada di tengah halaman (dengan alasan tertentu), kita akan memberikan div class ini dengan lebar hawrappernya 980px (pada dasarnya lebar desktop yang paling umum digunakan) dan memusatkannya ke tengah dari tag html lebar browser 100%.
Kami memusatkan kelas wrapper dengan memberikan margin '0px auto', ini mengatur atas dan bawah ke 0px ruang putih / ruang ekstra, dan sisi kiri dan kanan ke otomatis - yang berarti mereka harus sama, dan oleh karena itu memusatkan wadah. Header: Sekarang kita perlu memberi style pada header. Seperti yang Anda lihat, kami menyetel warna latar belakang wrapper ke kode hex #ccc yang berwarna abu-abu terang. Kami akan mengatur header agar memiliki lebar 980px juga, pusatkan di div wadah wrapper dan berikan warna latar belakang hitam
.wrapper {
width: 980px;
margin: 0px auto;
background-color: #f2f2f2;
height: 50px;
}.header {
width: 980px;
height: 70px;
background-color: red;
margin: 0px auto;
}Kami juga menyetel properti ketinggian pada kelas header karena kami ingin dapat melihatnya tanpa konten. Secara default, properti height dan width diatur ke auto yang berarti mereka hanya akan sebesar yang mereka butuhkan, jadi karena kita tidak memiliki konten di dalam div, mereka tidak akan muncul sama sekali. Content: Sekarang kita memiliki div konten. Alih-alih memberikan yang ini lebar halaman browser 980px penuh, kami ingin itu berdiri di sisi bilah samping jadi kami mengatur konten ke lebar 700px, memberikan ruang kosong 280px untuk digunakan.
.content {
width: 700px;
min-height: 450px;
float: left;
background-color: yellow;
margin: 0px auto;
}Kami juga mengapungkan blok konten ke kiri yang berarti blok tersebut akan pergi sejauh mungkin dan penampung lain memiliki kemampuan untuk sejajar atau melewatinya. Warna latar belakang bagian konten ini berwarna biru. Side: Bilah samping mengisi sisa ruang di sebelah bagian konten. Bagian ini memiliki lebar browser 260px, yang ditambah dengan lebar browser 700px dari wadah konten, memberikan kita total 960px digunakan memberikan 20px cadangan. Jadi kami menggunakan 20px ini untuk memisahkan dua bagian dengan memberi bilah samping ini bantalan 20px di sebelah kirinya.
.side {
width: 260px;
min-height: 450px;
padding-left: 20px;
float: right;
background-color: red;
margin: 0px auto;
}Sekali lagi, kami menetapkan tinggi minimum default, sama dengan wadah konten karena kami mungkin ingin mereka memiliki ukuran minimal yang sama untuk membuat halaman terlihat seperti memiliki tata letak seperti kisi yang bagus. Warna latar belakang bilah samping berwarna merah. Footer: Akhirnya kita memiliki wadah footer, footer ini memiliki properti yang telah kita lihat di semua komponen sebelumnya tetapi ada satu yang baru Clear keduanya berarti float yang terjadi diatas section yang sudah clear: kedua section tersebut tidak lagi mempengaruhi komponen. Ini berarti bahwa itu akan pergi dengan tata letak seperti kisi. Sedangkan jika kita tidak memiliki properti yang jelas ini di footer, itu hanya akan pergi dan bersembunyi di balik konten dan wadah bilah samping - coba, hapus baris dan segarkan halaman index.html Anda.
.footer {
clear: both;
width: 980px;
height: 80px;
background-color: green;
margin: 0px auto;
}