Learn CSS Guys

halo guys.... setelah beberapa waktu belajar html sampe mata mau soak (alias diganti) hehhe... sekarang saya ingi memberikan sedikit tutorial sederhana mengenai CSS....pasti bagi mastah n mastahwati tau apa itu CSS tapi bagi yang belum tahu ya mari kita belajar bersama...
oke guys simak aja yang di bawah ini ....

CSS (CASCADING STYLE SHEET)

Mengapa Gunakan CSS?

CSS digunakan untuk menentukan gaya untuk halaman web Anda, termasuk desain, tata letak dan variasi tampilan untuk perangkat yang berbeda dan ukuran layar.
CSS Soal Big Masalah

HTML tidak pernah dimaksudkan untuk berisi tag untuk memformat halaman web!

HTML diciptakan untuk menggambarkan isi dari halaman web, seperti:

<H1> Ini adalah heading </ h1>

<P> Ini adalah sebuah paragraf. </ P>

Ketika tag seperti <font>, dan atribut warna ditambahkan ke spesifikasi HTML 3.2, mulai mimpi buruk bagi pengembang web. Pengembangan website besar, di mana font dan warna informasi yang ditambahkan ke setiap halaman, menjadi proses yang panjang dan mahal.

Untuk mengatasi masalah ini, World Wide Web Consortium (W3C) dibuat CSS.

CSS dihapus gaya format dari halaman HTML!
CSS Menyimpan Banyak Kerja!

Definisi gaya biasanya disimpan dalam file css eksternal.

Dengan file stylesheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah hanya satu file!

OKE SEKARANG saya mulai dengan CSS Syntax

silahkan lihat di bawah ini

Pemilih poin ke elemen HTML Anda ingin bergaya.
Blok deklarasi berisi satu atau lebih deklarasi dipisahkan oleh titik koma.
Setiap deklarasi termasuk CSS nama properti dan nilai, yang dipisahkan oleh titik dua.
Sebuah deklarasi CSS selalu berakhir dengan titik koma, dan blok deklarasi dikelilingi oleh kurung kurawal.
Pada contoh berikut semua <p> elemen akan pusat-blok, dengan warna teks merah:

Kelas Selector

Pemilih kelas memilih elemen dengan atribut kelas khusus.

Untuk memilih elemen dengan kelas tertentu, menulis titik (.) Karakter, diikuti dengan nama kelas.

Pada contoh di bawah, semua elemen HTML dengan class = "center" akan merah dan pusat-blok:

CSS Comment

Komentar digunakan untuk menjelaskan kode, dan dapat membantu ketika Anda mengedit kode sumber di kemudian hari.
Komentar diabaikan oleh browser.
Sebuah komentar CSS dimulai dengan / * dan diakhiri dengan * /. Komentar juga dapat span beberapa baris: menyelaraskan:

 

Ketika browser membaca style sheet, itu akan memformat dokumen HTML menurut informasi di style sheet.

Tiga Cara Sisipkan CSS

Ada tiga cara untuk memasukkan style sheet:

     style sheet eksternal
     internal style sheet
     gaya inline

Gaya inline

Gaya inline dapat digunakan untuk menerapkan gaya yang unik untuk elemen tunggal.

Untuk menggunakan gaya inline, menambahkan atribut style untuk elemen yang relevan. Atribut style dapat berisi properti CSS.

Contoh di bawah ini menunjukkan bagaimana untuk mengubah warna dan margin kiri dari <h1> elemen:

coba perhatikan contoh di bawah ini:

 

hasilnya

CSS Colours

Warna yang ditampilkan menggabungkan RED, GREEN, dan cahaya biru

tetapi kita bisa mengkobinasikan warna warna sesuai dengan keingin kita sendiri

Gambar latar belakang

nah sekarang gambar latar belakang ...
sangat unik kok cara buatnya pun juga simple hhaaa...
Properti background-image menentukan gambar untuk digunakan sebagai latar belakang suatu elemen.
Secara default, gambar diulang sehingga mencakup seluruh elemen.

langsung saja saya mengganti warna latar belakang ini
Gambar latar belakang untuk halaman dapat diatur seperti ini:

 

di bawah ini adalah gambar yang saya sukai

saaat ini saya akan memberikan cara untuk membuat color background
lihat saja

 

CSS Properti Perbatasan
Sifat perbatasan CSS memungkinkan Anda untuk menentukan gaya, lebar, dan warna perbatasan elemen ini.
Elemen ini memiliki perbatasan alur yang lebar 15px dan hijau.

dan memungkinkan anda mencoba untuk menentukan isi dari border tersebut 

coba lihat ini

kalau boarder witdh akan ada tambahan coding ini...

Margin CSS

Sifat CSS marjin mengatur ukuran ruang putih LUAR perbatasan.
Catatan Catatan: Margin benar-benar transparan - dan tidak bisa memiliki warna latar belakang!

Dengan CSS, Anda memiliki kontrol penuh atas margin. Ada properti CSS untuk pengaturan margin untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).
Margin - Individual Sides

CSS memiliki sifat untuk menentukan margin untuk setiap sisi elemen:

     margin-top
     margin-right
     margin-bottom
     margin-left

Semua sifat marjin dapat memiliki nilai berikut:

     auto - browser menghitung margin
     panjang - menentukan margin di px, pt, cm, dll
     % - Menentukan margin dalam% dari lebar elemen yang mengandung
     mewarisi - menetapkan bahwa margin harus diwarisi dari elemen induk

Catatan Catatan: Hal ini juga memungkinkan untuk menggunakan nilai negatif untuk margin; tumpang tindih konten.

CSS Padding

Sifat CSS Padding menentukan ruang putih antara isi elemen dan perbatasan elemen.

padding membersihkan area di sekitar konten (dalam perbatasan) dari elemen.
Catatan Catatan: Padding dipengaruhi oleh warna latar belakang dari elemen!

Dengan CSS, Anda memiliki kontrol penuh atas padding. Ada properti CSS untuk pengaturan padding untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).
Padding - Individual Sides

CSS memiliki sifat untuk menentukan padding untuk setiap sisi elemen:

     padding-top
     padding-right
     padding-bottom
     padding-left

Semua padding dapat memiliki nilai berikut:

     panjang - menetapkan padding di px, pt, cm, dll
     % - Menentukan bantalan di% dari lebar elemen yang mengandung
     mewarisi - menetapkan bahwa padding harus diwarisi dari elemen induk

perhatikan contoh dibawah ini :

CSS Tinggi dan Lebar Dimensi

Properti CSS Dimensi

Sifat dimensi CSS memungkinkan Anda untuk mengontrol tinggi dan lebar elemen.

Elemen ini memiliki lebar 100%.
Mengatur tinggi dan lebar

Tinggi dan lebar sifat yang digunakan untuk mengatur tinggi dan lebar elemen.

Tinggi dan lebar dapat diatur untuk auto (ini adalah default. Berarti browser menghitung tinggi dan lebar), atau akan ditentukan dalam nilai-nilai panjang, seperti px, cm, dll, atau dalam persen (%) dari blok yang mengandung .
Ini <div> elemen memiliki tinggi 100 piksel dan lebar 500 piksel.

Catatan: tinggi dan sifat lebar tidak termasuk padding, perbatasan, atau margin; mereka mengatur tinggi / lebar area di dalam padding, border, dan margin elemen!

langsung saja lihat contohnya :

Format Teks

Teks ini ditata dengan beberapa properti format teks. judul menggunakan text-align, text-transform, dan sifat warna. paragraf menjorok, selaras, dan ruang antara karakter ditentukan.

Warna teks
Properti warna yang digunakan untuk mengatur warna teks.
Dengan CSS, warna yang paling sering ditentukan oleh: nama warna - seperti "merah" nilai HEX - seperti "# ff0000" nilai RGB - seperti "rgb (255,0,0)"
Lihatlah CSS Nilai Warna untuk daftar lengkap dari kemungkinan nilai warna.
Warna teks default untuk halaman didefinisikan dalam pemilih tubuh.

coba saja lihat ini;

teks Keselarasan

Properti text-align digunakan untuk mengatur alignment horizontal teks.

Sebuah teks dapat kiri atau kanan sejajar, berpusat, atau dibenarkan.

Contoh berikut menunjukkan pusat sejajar, dan kiri dan kanan teks selaras (perataan kiri adalah default jika arah teks kiri-ke-kanan, dan keselarasan yang tepat adalah default jika arah teks kanan-ke-kiri):

perhatikan dibawah ini:

Keluarga CSS FontDalam CSS, ada dua jenis nama keluarga font:

    keluarga generik - kelompok font keluarga dengan ekspresi yang sama (seperti "Serif" atau "Monospace")
    Kumpulan font - keluarga font tertentu (seperti "Times New Roman" atau "Arial")keluarga generik keluarga Font DeskripsiSerif Times New Romanfont Georgia Serif memiliki garis kecil di ujung atas beberapa karakterSans-serif ArialVerdana "Sans" berarti tanpa - font ini tidak memiliki garis-garis pada ujung karakterMonospace Courier NewLucida Console Semua karakter monospace memiliki lebar yang samaCatatan Catatan: Pada layar komputer, font sans-serif dianggap lebih mudah untuk dibaca daripada font serif.Keluarga FontKeluarga font teks diatur dengan properti font-family.Properti font-keluarga harus terus beberapa nama font sebagai sistem "fallback". Jika browser tidak mendukung font pertama, ia mencoba font berikutnya, dan seterusnya.Mulailah dengan font yang Anda inginkan, dan diakhiri dengan sebuah keluarga generik, agar browser memilih font yang sama dalam keluarga generik, jika tidak ada font lain yang tersedia.Catatan: Jika nama keluarga font yang lebih dari satu kata, itu harus dalam tanda kutip, seperti: "Times New Roman".

  

Lebih dari satu keluarga font yang ditentukan dalam daftar dipisahkan koma:

    saat ini saya akan mempelajari tentang link

Selain itu, link bisa ditata secara berbeda tergantung pada apa yang negara mereka berada di.
Keempat Link negara adalah: a: link - normal, belum dikunjungi link: mengunjungi - link pengguna telah mengunjungi: hover - link ketika pengguna Gunaka mouse itu: aktif - link saat itu diklik

 

langsung saja perhatikan contoh ini:

 

ini adalah hasilnyaa

 

Daftar HTML dan Daftar CSS Properti

Dalam HTML, ada dua jenis utama dari daftar:

     daftar unordered (<ul>) - daftar item ditandai dengan peluru
     daftar memerintahkan (<ol>) - daftar item ditandai dengan angka atau huruf

Sifat daftar CSS memungkinkan Anda untuk:

     Set yang berbeda spidol item daftar untuk daftar memerintahkan
     Set yang berbeda spidol item daftar untuk daftar unordered
     Mengatur foto sebagai item daftar penanda
     Menambahkan warna latar belakang untuk daftar dan daftar item

Daftar Barang Penanda yang berbeda

Daftar-style-type menentukan jenis item daftar penanda.

contoh ini perhatikan:

 Tabel

Tampilan tabel HTML dapat sangat ditingkatkan dengan CSS:
Korespondensi Perusahaan Negara
Alfreds Futterkiste Maria Anders Jerman
Berglunds snabbköp Christina Berglund Swedia
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Pulau Perdagangan Helen Bennett UK
Königlich Essen Philip Cramer Jerman
Tertawa Bacchus Wine Cellars Yoshi Tannamurra Kanada
Magazzini Alimentari Riuniti Giovanni Rovelli Italia
tabel Borders
Untuk menentukan batas tabel dalam CSS, menggunakan properti perbatasan.

perhatikan contoh ini :

 

CSS Box Model

Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah "model kotak" digunakan ketika berbicara tentang desain dan tata letak.

Kotak CSS Model pada dasarnya adalah sebuah kotak yang membungkus di sekitar setiap elemen HTML. Ini terdiri dari: margin, perbatasan, padding, dan konten yang sebenarnya.

Gambar di bawah mengilustrasikan model kotak:

 CSS Outline

Garis adalah garis yang ditarik sekitar elemen (luar perbatasan) untuk membuat elemen "menonjol".

Namun, properti outline berbeda dari properti perbatasan - outline adalah TIDAK bagian dari dimensi elemen ini; Total lebar elemen dan tinggi tidak terpengaruh oleh lebar garis besar.

perhatikan gambar dibawah ini

Tampilan Properti
Properti tampilan menentukan dari / bagaimana elemen ditampilkan.
Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemen itu. Tampilan nilai default untuk kebanyakan unsur adalah blok atau inline.

 CSS Layout

Menggunakan lebar, max-lebar dan margin: auto;

Seperti disebutkan dalam bab sebelumnya; elemen blok-tingkat selalu mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh itu bisa).

Mengatur lebar elemen blok-tingkat akan mencegah dari peregangan keluar ke tepi wadah. Kemudian, Anda dapat mengatur margin untuk auto, untuk horizontal pusat elemen dalam wadah. elemen akan mengambil lebar tertentu, dan ruang yang tersisa akan dibagi sama antara kedua margin:

Ini <div> elemen memiliki lebar 500px, dan marjin set ke auto.

Catatan: Masalah dengan <div> di atas terjadi ketika jendela browser lebih kecil dari lebar dari elemen. Browser kemudian menambahkan scrollbar horisontal ke halaman.

Menggunakan max-width sebaliknya, dalam situasi ini, akan meningkatkan penanganan browser dari jendela kecil. Hal ini penting ketika membuat sebuah situs yang dapat digunakan pada perangkat kecil:

<Div> elemen ini memiliki max-lebar 500px, dan marjin set ke auto.

langsung saja lihat:

Properti posisi menentukan jenis metode penentuan posisi yang digunakan untuk elemen (statis, relatif, tetap atau absolut).
Posisi Properti

Properti posisi menentukan jenis metode penentuan posisi yang digunakan untuk elemen.

Ada empat nilai posisi yang berbeda:

     statis
     relatif
     tetap
     mutlak

Elemen kemudian diposisikan menggunakan bagian atas, bawah, kiri, dan properti yang tepat. Namun, sifat ini tidak akan bekerja kecuali milik posisi diatur pertama. Mereka juga bekerja secara berbeda tergantung pada nilai posisi.
Posisi: statis;

elemen HTML diposisikan statis secara default.

elemen diposisikan statis tidak terpengaruh oleh bagian atas, bawah, kiri, dan properti yang tepat.

Sebuah elemen dengan posisi: statis; tidak diposisikan dalam cara yang khusus; itu selalu diposisikan sesuai dengan aliran normal halaman:

Ini <div> elemen memiliki posisi: statis;

position: relative;

Sebuah elemen dengan posisi: relatif; diposisikan relatif terhadap posisi normal.

Mengatur atas, kanan, bawah, dan sifat kiri dari elemen yang relatif strategis akan menyebabkan ia disesuaikan jauh dari posisi normal. konten lainnya tidak akan disesuaikan untuk masuk ke setiap celah yang ditinggalkan oleh elemen.

Ini <div> elemen memiliki position: relative;

Sebuah elemen dengan posisi: statis; tidak diposisikan dalam cara yang khusus; itu selalu diposisikan sesuai dengan aliran normal halaman:

Ini <div> elemen memiliki posisi: statis;

  contoh bibawah ini perhatikan saja:

Fload and Clear

Dalam penggunaannya sederhana, properti mengambang dapat digunakan untuk membungkus teks di sekitar gambar.

Contoh berikut menetapkan bahwa gambar harus mengapung ke kanan dalam teks:

Inline-block Nilai

Ini telah dimungkinkan untuk waktu yang lama untuk membuat kotak kotak yang mengisi lebar peramban dan membungkus baik (ketika browser diubah ukurannya), dengan menggunakan properti float.

Namun, nilai inline-blok properti display membuat ini lebih mudah.

elemen inline-block seperti elemen inline tetapi mereka dapat memiliki lebar dan tinggi a.
contoh

Cara lama - menggunakan pelampung (perhatikan bahwa kita juga perlu menentukan properti yang jelas untuk elemen setelah kotak mengambang):

Pusat Rata - marjin Menggunakan

Mengatur lebar elemen blok-tingkat akan mencegah dari peregangan keluar ke tepi wadah. Gunakan margin: auto;, ke horizontal pusat elemen dalam wadah.

Unsur kemudian akan mengambil lebar tertentu, dan ruang yang tersisa akan dibagi sama antara kedua margin:

CSS combinators
Catatan combinator adalah sesuatu yang menjelaskan hubungan antara pemilih.

Sebuah selector CSS dapat berisi lebih dari satu pemilih yang sederhana. Antara pemilih yang sederhana, kita dapat mencakup combinator a.

Ada empat combinators berbeda dalam CSS3:

     pemilih keturunan (spasi)
     pemilih anak (>)
     berdekatan saudara pemilih (+)
     pemilih saudara umum (~)

Pemilih keturunan

Pemilih keturunan cocok dengan semua elemen yang adalah keturunan dari elemen tertentu.

Contoh berikut memilih semua elemen <p> dalam <div> elemen:

Apa Pseudo-kelas?

Sebuah pseudo-class digunakan untuk menentukan keadaan khusus dari suatu unsur.

Sebagai contoh, dapat digunakan untuk:

     Gaya elemen ketika pengguna mouse di atasnya
     Gaya dikunjungi dan belum dikunjungi link berbeda
     Gaya elemen ketika mendapat fokus

Apa Pseudo-Elements?

Sebuah CSS pseudo-element digunakan untuk gaya tertentu bagian dari elemen.

Sebagai contoh, dapat digunakan untuk:

     Gaya huruf pertama, atau jalur, dari unsur
     Sisipkan konten sebelum, atau setelah, isi elemen

Bar navigasi

Memiliki navigasi yang mudah digunakan adalah penting untuk setiap situs web.

Dengan CSS Anda dapat mengubah menu HTML membosankan menjadi bar navigasi tampan.
Navigasi Bar = Daftar Links

Sebuah bar navigasi perlu HTML standar sebagai basis.

Dalam contoh kita, kita akan membangun navigasi dari daftar HTML standar.

Sebuah bar navigasi pada dasarnya adalah daftar link, sehingga menggunakan <ul> dan <li> elemen masuk akal:

 contohnya ada disini

Dasar Drop Down
Membuat kotak dropdown yang muncul saat pengguna bergerak mouse di atas elemen.

 try this :

Tooltip dasar

Buat tooltip yang muncul saat pengguna bergerak mouse elemen:

 contohnya:

 Dijelaskan
HTML) Gunakan elemen kontainer (seperti <div>) dan menambahkan "tooltip" kelas untuk itu. Ketika mouse pengguna lebih dari ini <div>, ia akan menampilkan teks tooltip.
Teks tooltip ditempatkan di dalam sebuah elemen inline (seperti <span>) dengan class = "tooltip teks".
CSS) The tooltip kelas penggunaan posisi: relatif, yang diperlukan untuk posisi teks tooltip (position: absolute). Catatan: Lihat contoh di bawah ini tentang bagaimana posisi tooltip.
Kelas tooltip teks memegang teks tooltip yang sebenarnya. Tersembunyi secara default, dan akan terlihat di hover (lihat di bawah). Kami juga telah menambahkan beberapa gaya dasar untuk itu: lebar 120px, warna latar belakang hitam, warna text putih, teks berpusat, dan 5px atas dan padding bawah.
CSS3 properti border-radius digunakan untuk menambah sudut dibulatkan ke teks tooltip.

: Hover pemilih digunakan untuk menampilkan teks tooltip ketika pengguna menggerakkan mouse di atas <div> dengan class = "tooltip"

Galeri gambar

Galeri gambar berikut ini dibuat dengan CSS:

contoh:

Membuat Gambar Transparan

Properti CSS3 untuk transparansi adalah opacity.

Pertama kita akan menunjukkan cara untuk membuat gambar transparan dengan CSS.
contoh

Sprite gambar

Sebuah sprite gambar koleksi gambar dimasukkan ke dalam satu gambar.

Sebuah halaman web dengan banyak gambar dapat mengambil waktu yang lama untuk memuat dan menghasilkan permintaan beberapa server yang.

Menggunakan sprite gambar akan mengurangi jumlah permintaan server dan menghemat bandwidth.

contoh

Elemen gaya HTML Dengan Atribut Tertentu

Hal ini dimungkinkan untuk gaya elemen HTML yang memiliki atribut tertentu atau nilai atribut.
CSS [atribut] Selector

The [atribut] selector digunakan untuk memilih elemen dengan atribut tertentu.

Contoh berikut akan memilih semua elemen <a> dengan atribut target:

Styling Bidang Masukan

Gunakan properti lebar untuk menentukan lebar kolom input:

contohnya

ini lebih lengkapnya:

Menggunakan Counters CSS

counter CSS seperti "variabel". Nilai-nilai variabel dapat bertambah dengan aturan CSS (yang akan melacak berapa kali mereka digunakan).

Untuk bekerja dengan counter CSS kita akan menggunakan properti berikut:

     kontra-ulang - Menciptakan atau reset counter
     kontra-increment - increment nilai kontra
     konten - Sisipan konten yang dihasilkan
     counter () atau counter () fungsi - Menambahkan nilai counter untuk elemen

Untuk menggunakan counter CSS, terlebih dahulu harus dibuat dengan kontra-ulang.

Contoh berikut membuat sebuah counter untuk halaman (pemilih tubuh), kemudian menambahkan nilai counter untuk setiap <h2> elemen dan menambahkan "Bagian <nilai counter>:" untuk setiap awal <h2> elemen:

Penghitung nesting

Contoh berikut membuat satu meja untuk halaman (bagian) dan satu meja untuk setiap <h1> elemen (ayat). The "bagian" kontra akan dihitung untuk setiap <h1> elemen dengan "Bagian <nilai bagian kontra>.", Dan "ayat" kontra akan dihitung untuk setiap <h2> elemen dengan "<nilai bagian kontra > <nilai counter ayat> ".:

CONTOH :

 

INILAH TUTORIAL CSS YANG MENURUT SAYA SANGAT SULIT DAN RIBET SIHH ...
OLEH KARENA ITU MOHON MAAF JIKA ADA KELASALHAN DALAM MENGETIK SKRIP-SKRIP INI.....
JIKA ADA KOMENTAR SILAHKAN ISI DIBAWAH YAA....
SAMPAI KETEMU DI PERTEMUAN SELANJUTNYA

saya menggunakan windows 7 lite untuk kebutuhan sehari2 hahhaa
ini link untuk download windows 7 lite update march https://dailyuploads.net/wy64zgm0q5fk versi 32bit dan untuk versi 64bit ini linknya https://dailyuploads.net/u5r5uo3rxprg
klo ini windows biasa tapi terupdate.. didalamnya ada versi 32bit dan 64bit https://dailyuploads.net/o3u20js7j2ht silahkan
ada lagii nihh updatenya
update windows
server google

silahkan seruput gan..wkwkwkwkwk

 

thanks to www.kuhyaa-android19.com