ANALASIS CSS

1. body {
 font-family: 'Open Sans Condensed', 'Arial Narrow', serif;
Jenis font yang digunakan di dalam body.
 font-weight: 400;
Ketebalan font yang digunakan pada body.
 font-size: 15px;
Ukuran font yang digunakan.
 color: #333;
Untuk mengatur warna font
 background: #cdc url("LtdNdBp.jpg") repeat top left;
Menginputkan gambar sebagai wallpaper background html dan akan diulang dengan
posisi background mulai dari atas sebelah kiri.

Memberikan style/efek pada html hanya yang ada di dalam body saja yang akan
diterapkan .
1. .container {
 width: 100%;
Menggunakan ukuran 100%
 position: relative;
Posisi mengikuti alur dari dokumen html

Memberikan style/efek pada html yang menggunakan class .container.

2. .container > .header {

 margin: 10px;
Mengatur ukuran spasi luar dari border
 padding: 20px 10px 10px 10px;
Untuk pemberian jarak di di dalam kotak/bidang html.
 position: relative;
Posisi mengikuti alur dari dokumen html.
 display: block;
Setiap ada elemen baru dengan sifat yang sama maka akan mengalir ke
bawah
 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
Untuk membuat bayangan pada text di html
 text-align: center;
Posisi text berada di tengah halaman html pada class ini.

Memberikan style/efek pada html yang menggunakan class .container>.header

3. .container > .header h1 {

 font-size: 40px;
Mengatur ukuran text di halaman html
 line-height: 40px;
Untuk mengatur jarak antar paragraf di dalam sebuah halaman html
 margin: 0;
Mengatur ukuran spasi luar dari border
 position: relative;
Posisi mengikuti alur dari dokumen html
 font-weight: 300;
Ketebalan font yang digunakan pada body
 color: #707a8d;
Mengatur warna untuk text
 text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
Untuk membuat bayangan pada text di class ini
 }

Memberikan style/efek pada html yang menggunakan class .container>.header

h1.

4. .container > .header h1 span{

 font-weight: 700;
Ketebalan font yang digunakan pada body

Memberikan style/efek pada html yang menggunakan class .container>.header

h1 span.

5. .container > .header h2 {

 font-size: 14px;
Mengatur ukuran text di halaman html.
 font-weight: 300;
Ketebalan font yang digunakan pada body.
 margin: 0;
Mengatur ukuran spasi luar dari border.
 padding: 15px 0 5px 0;
Untuk pemberian jarak di di dalam kotak/bidang html.
 color: #4d525d;
Warna font yang digunakan yaitu hitam terang.
 font-family: Cambria, Georgia, serif;
Jenis font yang digunakan di dalam class.
 font-style: italic;
Text yang digunakan diberi efek miring/italic
 text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
Untuk membuat bayangan pada text di html.

Memberikan style/efek pada html yang menggunakan class .container>.header

h2.
1. .sp-slideshow {
 position: relative;
Posisi mengikuti alur dari dokumen html.
 margin: 10px auto;
Mengatur ukuran spasi luar dari border dengan otomatis 10px.
 width: 80%;
Untuk mengatur ukuran pada html sebesar 80% dari halaman html.
 max-width: 1000px;
Untuk mengatur ukuran maksimal pada halaman html.
 min-width: 260px;
Untuk mengatur ukuran minimal pada halaman html.
 height: 460px;
Untuk mengatur ketinggian pada halaman html.
 border: 10px solid #ddd;
Untuk mengatur ketebalan border dan warna dari border dengan garis solid.
 border: 10px solid rgba(255,255,255,0.9);
Untuk mengatur ketebalan border dan warna dari border dengan garis solid.
 box-shadow: 0 2px 6px rgba(0,0,0,0.4);
Untuk memberi efek bayangan bada border.

Memberikan style/efek pada html yang menggunakan class .sp-slideshow.

1. .sp-content {
 background: #7d7f72 url("wO5gzQp.png") repeat scroll 0 0;
Untuk menampilkan background pada class dengan mengulang pada setiap
posisi 0,0.
 position: relative;
Posisi mengikuti alur dari dokumen html.
 width: 100%;
Mengatur ukuran pada class.
 height: 100%;
Mengatur tinggi pada class.
 overflow: hidden;
Untuk menyembunyikan scroll.

Memberikan style/efek pada html yang menggunakan class .sp-content.

1. .sp-parallax-bg {
 background: url('L6XmtEs.png') repeat-x scroll 0 0;
Untuk menampilkan background pada class dengan mengulang pada setiap
posisi 0,0.
 background-size: cover;
Mengatur ukuran background dengan mengcover seluruhnya.
 position: absolute;
Mengatur posisi dan elemen akan dihilangkan / dicabut dari alur dokumen,
dan elemen lainnya akan bekerja sebagaimana mestinya (tidak terganggu
dengan elemen yang diberikan properti absolute) untuk membuat sebuah
tumpukkan.
 top: 0;
Posisi akan di mulai dari titik atas 0.
 left: 0;
Posisi akan di mulai dari titik kiri 0.
 width: 100%;
Mengatur ukuran pada class.
 height: 100%;
Mengatur tinggi pada class.
 overflow: hidden;
Untuk menyembunyikan scroll.

Memberikan style/efek pada html yang menggunakan class .sp-parallax-bg.

1. .sp-slideshow input {
 position: absolute;
Mengatur posisi dan elemen akan dihilangkan / dicabut dari alur dokumen,
dan elemen lainnya akan bekerja sebagaimana mestinya (tidak terganggu
dengan elemen yang diberikan properti absolute) untuk membuat sebuah
tumpukkan.
 bottom: 15px;
Posisi akan di mulai dari bawah.
 left: 50%;
Posisi akan di mulai dari kiri.
 width: 9px;
Mengatur ukuran pada class.
 height: 9px;
Mengatur tinggi pada class.
 z-index: 1001;
Untuk mengatur urutan lapisan yang akan tampil.
 cursor: pointer;
Untuk mendefinisikan tipe cursor (Pointer Mouse).
 opacity: 0;
Untuk mentransparansi.

Memberikan style/efek pada html yang menggunakan class .sp-slideshow input.

1. .sp-slideshow input + label {
 position: absolute;
Mengatur posisi dan elemen akan dihilangkan / dicabut dari alur dokumen,
dan elemen lainnya akan bekerja sebagaimana mestinya (tidak terganggu
dengan elemen yang diberikan properti absolute) untuk membuat sebuah
tumpukkan
 bottom: 15px;
Posisi akan di mulai dari bawah
 left: 50%;
Posisi akan di mulai dari kiri
 width: 6px;
Mengatur ukuran pada class
 height: 6px;
Mengatur tinggi pada class
 display: block;
Setiap ada elemen baru dengan sifat yang sama maka akan mengalir ke
bawah
 z-index: 1000;
Untuk mengatur urutan lapisan yang akan tampil
 border: 3px solid #fff;
Untuk mengatur ketebalan border dan warna dari border dengan garis solid
 border: 3px solid rgba(255,255,255,0.9);
Untuk mengatur ketebalan border dan warna dari border dengan garis solid
 border-radius: 50%;
Mengatur jarak antar border
 transition: background-color linear 0.1s;
Untuk menentukan durasi dari efek transisi
}

Memberikan style/efek pada html yang menggunakan class .sp-slideshow input

+ label.
1. .sp-slideshow input:checked + label {
 background-color: #fff;
Untuk mengatur warna background
 background-color: rgba(255,255,255,0.9);
Untuk mengatur warna background

Memberikan style/efek pada html yang menggunakan class .sp-slideshow

input:checked + label
1. .sp-selector-1, .button-label-1 {
 margin-left: -36px;
Sebagai pemberi jarak atau batas (bagian luar) pada tag html.
}
Memberikan style/efek pada html yang menggunakan class .sp-selector-
1, .button-label-1.

2. .sp-selector-2, .button-label-2 {
 margin-left: -18px;
Sebagai pemberi jarak atau batas (bagian luar) pada tag html.
}
Memberikan style/efek pada html yang menggunakan class .sp-selector-
2, .button-label-2.

3. .sp-selector-4, .button-label-4 {
 margin-left: 18px;
Sebagai pemberi jarak atau batas (bagian luar) pada tag html.
}
Memberikan style/efek pada html yang menggunakan class .sp-selector-
4, .button-label-4.

4. .sp-selector-5, .button-label-5 {
 margin-left: 36px;
Sebagai pemberi jarak atau batas (bagian luar) pada tag html.
}
Memberikan style/efek pada html yang menggunakan class .sp-selector-
5, .button-label-5.