CSS Layouting Dasar

-





Halo teman-teman kali ini saya akan membahas mengenai CSS Layout adalah teknik untuk mengatur tata letak sebuah halaman web dengan menggunakan kode CSS. Berikut materinya.


Buatlah html sepeti dibawah, lalu div digunakan untuk mengelompokkan elemen atau bermacam-macam tag agar menjadi suatu grup. Tag div ini juga sering digunakan untuk mendefinisikan ID atau Class dari CSS. Selanjutnya ada span digunakan untuk menciptakan inline agar memudahkan dalam pemberian gaya tampilan oleh CSS. Tampilan dari elemen ini adalah bersifat inline, yang artinya ditempatkan di dalam elemen induk secara sejajar dengan isi.

Ini adalah tampilan jika sudah dijalankan.

Dalam 1 file html kita beri style CSS seperti dibawah.
<style>
    .link{
        background-color: pink;
    }
    .main-contain{
        background-color: lightgreen;
    }
    .main-contain span {
        background-color: red;
    }
</style>

Hasilnya jika kita menggunakan CSS

Jika kita ingin merubah ukuran background color terhadap link maka tidak akan terjadi apa-apa dan jika kita menambah tulisan link agar lebih panjang maka background color akan mengikuti seberapa panjang kalimat yang ditulisan. Kalo kita ingin merubah ukuran background color caranya adalah menambahkan value display inline-block 
<style>
    a {
        background-color: lightgreen;
        width: 200px;
        height: 200px;
        display: inline-block;
    }
</style>

Inilah hasil jika kita menggunakan value display inline block


Ini adalah style block, dimana block ini memberi warna pada elemen tersebut dengan warna pink. Block adalah display suatu elemen html yang tetap bergerak Horizontal, tetapi otomatis menambahkan baris baru untuk elemen selanjutnya.
<style>
    h1, h2, p {
        background-color: pink;
    }
</style>

Tampilan jika minimize browser lalu diubah ukurannya secara horizontal maka tulisan dan warna background akan mengikuti browser tersebut.

Buat list seperti dibawah karna kita akan mengubah perilaku list yang biasanya tukuran kebawah maka akan kita jadikan inline atau sejajar.

<style>
    .link li {
        display: inline;
    }
</style>

 <div class="link">
        <h2>Daftar Link</h2>

        <ol>
            <li> <a href="#">link1</a></li>
            <li> <a href="#">link2</a></li>
            <li> <a href="#">link3</a></li>
            <li> <a href="#">link4</a></li>
            <li> <a href="#">link5</a></li>
        </ol>  
    </div>

Maka akan berubah perlaku dari list menjadi inline.






















Komentar

Posting Komentar

Postingan populer dari blog ini

Filter

-
Gambar
 Filter CSS adalah untuk melakukan berbagai efek terhadap suatu elemen biasanya gambar, efek yang bisa dilakukan properti filter misalnya: saturasi warna, brightness, contrast, efek blur, grayscale, sepia, drop-shadow, invert, hue-rotate, opacity. <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < style >         img {         filter : brightness ( 300 % ) ;        }         /* Filter             brightness(angka%)             constrast(angka%)             blur(angka px)             saturate(angka%)             grayscale(angka%)             sepia(angka%)             hue-rotate(angka deg)             invert(angka%)             opacity(angka%)             drop-shadow(angka%)             */     </ style > </ head > < body >     < im
Baca selengkapnya

Percabangan Python

-
Gambar
 Hallo balik lagi nih diblog saya setelah sekian lama saya tidak membuat blog. kali ini saya akan membahas tentang Percabangan adalah cara yang digunakan untuk mengambil keputusan apabila di dalam program dihadapkan pada kondisi tertentu, jumlah kondisinya bisa satu, dua atau lebih. percabangan mengevaluasi kondisi atau ekspresi yang hasilnya benar atau salah. Kondisi tersebut disebut ekspresi boolean. Hasil dari pengecekan kondisi adalah True atau False. Bila benar (True), maka pernyataan yang ada di dalam blok kondisi tersebut akan dieksekusi. Bila (False), maka blok pernyataan lain yang dieksekusi. Di Python ada 3 jenis pernyataan yang digunakan untuk percabangan, yaitu sebagai berikut: No Pernyataaan Deskripsi 1. if Pernyataan if terdiri dari ekspresi Boolean diikuti oleh satu baris atau lebih pernyataan 2. If…else Bila pernyataan if benar, maka blok pernyataan if dieksekusi. Bila salah, mak
Baca selengkapnya

Transition

-
Gambar
CSS Transition atau Transisi adalah Efek Transis yang memungkinkan sebuah elemen secara bertahap berubah dari satu gaya ke yang lain. <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < style >         .kotak {         width : 100 px ;         height : 100 px ;         background-color : red ;         transition : 1 s ;        }         .container {         height : 400 px ;         width : 100 px ;         border : 0.1 px solid black ;        }         .container:hover .kotak {         transform : rotate ( 180 deg );         margin-top : 300 px ;         background-color : yellow ;        }     </ style > </ head > < body >     < div class = "container" >         < div class = "kotak" ></ div
Baca selengkapnya