Belajar CSS 2

BELAJAR LENGKAP CSS 



Contoh CSS
Contoh CSS code sederhana lainnya adalah sebagai berikut:

Untuk warna background website merah muda

body 

{

  background-color: pink;

} 

Untuk mengubah jenis font di semua paragraf 1 menjadi Verdana dan berukuran 20px

h1 

{

  font-family: verdana;

  font-size: 20px;

}

Contoh Properti CSS
Pada umumnya, jika kamu menuliskan suatu property CSS, maka kamu juga akan menuliskan valuenya. Lalu, apa itu CSS properti dan fungsinya? Properti ini berfungsi untuk memberi efek khusus pada elemen HTML dan nantinya ditampilkan pada website. 

Untuk lebih jelasnya, kamu bisa mengetahui apa saja properti CSS seperti daftar di bawah ini! 

1. Border
Border adalah properti CSS yang digunakan untuk mengatur dan membuat garis tepi pada HTML dengan banyak variasi. Untuk garis tepi bagian kanan kamu bisa menggunakan border-right, dan border-left untuk sebelah kiri. 

Contoh border properti:

Border-left-width :mengatur lebar garis kiri
Border-color :mengatur warna dari garis
Border-style : mengatur style dari garis
Border-top : membuat garis atas
Border-right : membuat garis kanan

2. Background
Border properti ini digunakan untuk mengatur background tampilan website.

Contoh :

Background-color : memberi warna pada latar belakang
Background-image : memberi gambar pada latar belakang dari suatu element
Background-position : mengatur posisi gambar pada latar belakang


3. Color
Jika kamu ingin mengubah warna text, background, dan lain sebagainya, kamu bisa menggunakan properti color ini. 

4. Float
Properti float digunakan untuk mengatur text agar dapat melipat di sekitar elemen gambar, namun juga bisa digunakan untuk layout dan style lainnya. 

Contoh : 

float: right;

Untuk menentukan elemen harus mengapung di sebelah kanan elemen yang menampungnya.

5. Font
Properti kelima dari CSS adalah font. Properti ini bisa kamu gunakan untuk menentukan ukuran font, gaya teks, dan jenis font yang akan ditampilkan di website nantinya. 

Contoh :

Font-weight : mengatur ketebalan dari text
Font-size : mengatur ukuran font sesuai yang diinginkan
Font-family : mengatur jenis font yang ingin dipakai
Font-style : mengatur style font yang akan digunakan pada text
Font-variant : mengatur font apakah menjadi huruf kecil atau tidak

6. Height
Properti selanjutnya dari CSS adalah height. Ini adalah properti yang bisa kamu gunakan untuk mengatur tinggi dari suatu elemen secara otomatis dalam nilai seperti pixel, cm, em, persen, dan sebagainya. 

7. Padding
Untuk menghasilkan ruang kosong di sekitar konten, entah di dalam atau di luar kamu bisa mengatur paddingnya.

Contoh :

Padding-top : mengatur ruang elemen dengan konten bagian atas
Padding-right : mengatur ruang elemen dengan konten bagian kanan
Padding-bottom : mengatur ruang pada elemen dengan konten bagian bawah
Padding-left : mengatur ruang pada elemen dengan konten bagian kiri

8. Margin
Beda dengan padding, margin digunakan untuk membuat ruang kosong di sekitar elemen bagian luar. Kamu bisa mengaturnya pada sisi bawah, atas, kiri, dan kanan secara terpisah.

Contoh :

Margin-top : mengatur jarak antar elemen bagian atas
Margin-right : mengatur jarak elemen bagian kanan
Margin-bottom : mengatur jarak elemen bagian bawah
Margin-left : atur jarak antar elemen bagian kiri

9. Weight
Terakhir, properti dari CSS ini digunakan untuk mengatur ketebalan dari text.


Komentar

Posting Komentar

Postingan populer dari blog ini

contoh operator logika part 2

Gambar
  Rumus untuk menentukan hasil dari operator logika adalah sebagai berikut: Operator  &&  hanya akan menghasilkan true jika kedua operand bernilai true, selain itu hasilnya false. Operator  ||  hanya akan menghasilkan false jika kedua operand bernilai false, selain itu hasilnya true . Operator  !  Akan membalikkan logika, !false menjadi true, !true menjadi false. Kita juga bisa menggabungkan lebih dari satu operasi seperti contoh berikut: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class BelajarJava {    public static void main(String args[]){                 boolean hasil;              hasil = ( false && true ) || ( true || false );      System.out.println( "Hasil: " + hasil );               hasil = ! false && ( false || true ...
Baca selengkapnya

Variabel PHP

Gambar
VARIABEL PHP Variabel dalam PHP Variable adalah suatu pengenal di dalam program yang merepresentasikan nilai atau data tertentu. Nilai variabel dapat diubah sesuai dengan kebutuhan program. Dalam Bahasa PHP, variable didefinisikan dengan cara membubuhkan tanda  $  (dollar) di depannya. Contoh :         $nama = 'SmartDevTala' Pada contoh di atas, kita dapat membuat variable  $nama  dan mengisi nilai ke dalamnya. Dalam penggunaan variable, PHP sedikit berbeda dengan Bahasa program lain, karena pada bahasa program yang lain pada umumnya perlu mendeklarasikan tipe data pada variabel sebelum menampung nilai di dalamnya, sebagai contoh :        $x = "SmartDevTala";       $x = 8;       $x = 10.3;       $x = true;       $x = ["SmartDevTala",8,10.3,true]; Pada contoh di atas, variable  $x  dapat menampung nilai dari beberapa tipe data, yaitu : string, integer, floati...
Baca selengkapnya

Tipe Data Phyton

Gambar
  Tipe Data Python Tipe data adalah suatu media atau memori pada komputer yang digunakan untuk menampung informasi. Python sendiri mempunyai tipe data yang cukup unik bila kita bandingkan dengan bahasa pemrograman yang lain. Berikut adalah tipe data dari bahasa pemrograman Python : Tipe Data Contoh Penjelasan Boolean True  atau  False Menyatakan benar  True  yang bernilai  1 , atau salah  False  yang bernilai  0 String "Ayo belajar Python" Menyatakan karakter/kalimat bisa berupa huruf angka, dll (diapit tanda  "  atau  ' ) Integer 25  atau  1209 Menyatakan bilangan bulat Float 3.14  atau  0.99 Menyatakan bilangan yang mempunyai koma Hexadecimal 9a  atau  1d3 Menyatakan bilangan dalam format heksa (bilangan berbasis 16) Complex 1 + 5j Menyatakan pasangan angka real dan imajiner List ['xyz', 786, 2.23] Data untaian yang menyimpan berbagai tipe data dan isinya bisa diubah-ubah Tuple ('xyz', 768, 2.23)...
Baca selengkapnya