Belajar CSS3 # Variabel dan Function

Daftar Isi : [Tampil]

1. Variable

CSS3 sudah mendukung variable, dengan variable membuat kita mudah untuk menuliskan syntax. Penulisan variable di css adalah dengan menggunakan selector :root, seperti contoh :

  :root {
  	--namavariable: value;
  }
  

Dengan ditulis dipaling atas/paling pertama dalam penulisan kode. Dan cara memanggil variable tersebut adalah dengan :

  body{
    nama-variable: var(variableyangdibuat);
  }
  

Dibawah ini saya akan menuliskan secara lengkap penggunaan variable :

  :root {
    --myfont: arial, verdana, sans-serif;
    --myfontsize: 14px;
  }
  h1 {
    font-family: var(--myfont);
  }
  

Kira-kira seperti itu cara penulisan dan cara pemanggilan di CSS.

2. Calc()

CSS3 memberikan function yang dapat digunakan untuk menghitung yaitu dengan "calc()".Value yang dapat dihitung menggunakan "calc()" adalah "length", "frequency", "angle", "time", "percentage", "number", "integer". Penulisannya adalah sebagai berikut :

  h1 {
    font-size: calc(1.5rem + 3vw);
  }
  

Sekian Dan Terimakasih . . .

Read More

Belajar CSS Dasar # Pseudo Class dan Inheritance

Daftar Isi : [Tampil]

1. Pseudo Class

Digunakan untuk mendefinisikan keadaan khusus dari suatu elemen, value-nya adalah

• :link
• :hover
• :active
• :visited

a. :link

Digunakan untuk mengubah style link, default link berwarna biru dan garis bawah. Seperti Contoh :

  a:link {
    color: red;
    text-decoration: none;
  }
  

b. :hover

Digunakan untuk mengubah style ketika kursor berada diatas link. Seperti Contoh :

  a:hover {
    color: black;
    text-decoration: underline;
    text-transform: uppercase;
  }
  

b. :active

Digunakan untuk mengubah style link ketika diklik. Seperti Contoh :

  a:active {
    color: black;
    text-decoration: underline;
  }
  

b. :visited

Digunakan untuk mengubah style link ketika sudah pernah diklik. Seperti Contoh :

  a:visited {
    color: black;
    text-decoration: underline;
  }
  

Contoh Klik Disini!

2. Inheritance

Inheritance berfungsi untuk menentukan bahwa properti harus mewarisi nilainya dari elemen parent-nya. Seperti Contoh :

  body {
    font-family: arial, sans-serif;
    color: grey;
  }
  a {
    color: inherit;
  }
  

Seperti contoh diatas maka warna link tersebut akan mengikuti warna body, jika warna body diganti maka warna link tersebut pun juga akan mengikuti.

Property CSS Yang Dapat Diwariskan
color	letter-spacing	font-variant	list-style	white-spaces
text-align	font	font-weight	list-style-type	cursor
text-indent	font-family	line-height	list-style-position	direction
text-transform	font-size	border-collapse	list-style-image	caption-side
word-spacing	font-style	border-spacing	visibility	volume

Read More

Belajar CSS Dasar # Background

Daftar Isi : [Tampil]

1. Background

Yang Termasuk Properti Background Adalah

• background-color
• background-image
• background-repeat
• background-position
• background-attachment
• background-size

a. background-color

Digunakan untuk memberi warna pada background, value-nya adalah

• Nama Warna
• Hexadecimal
• RGBA (Red, Green, Blue, Alpha [opasitas 1-0] )

Seperti Contoh :

    body {
    	background-color : red/green/blue/etc;
        background-color : #ff0000/#008000/#0000ff/etc;
        background-color : rgba(255,0,0,1)/etc;
        background-color : rgba(255,0,0,0)/etc;
    }
    

b. background-image

Digunakan untuk memasukan gambar sebagai background. Bisa memasukan lebih dari satu gambar, value-nya adalah

• url()

Seperti Contoh :

  body {
  	background-image: url(anime.jpg);
    background-image: url(css/anime.jpg);
    background-image: url(../css/anime.jpg);
  }
  

c. background-repeat

Digunakan untuk mengatur background diulang atau tidak, background diulang secara vertikal atu horizontal. Jika ukuran gambar kecil maka akan otomatis diulang samapai memenuhi layar, value-nya adalah

• no-repeat
• repeat-x (horizontal)
• repeat-y (vertikal)

  body {
  	background-repeat: no-repeat;
    background-repeat: repeat-x;
    background-repeat: repeat-y;
  }
  

d. background-position

Digunakan untuk mengatur posisi gambar. jika gambar berukuran kecil secara default posisi gambar berada di pojok kiri atas elemen, value-nya adalah

• horizontal (left, center, right) dan vertical (top, center, buttom)

  body {
  	background-position: left top;
    background-position: left center;
    background-position: left bottom;
    background-position: right top;
    background-position: right center;
    background-position: right bottom;
    background-position: center top;
    background-position: center center;
    background-position: center bottom;
  }
  

e. background-attachment

Digunakan untuk mengatur apakah gambar background gulungan dengan sisa halaman, atau tetap.

• fixed (tetap)
• scroll (gulir)

  body {
  	background-attachment: fixed;
    background-attachment: scroll;
  }
  

f. background-size

Digunakan untuk menentukan ukuran gambar background, value-nya adalah

• auto (default value)
• px (mengatur panjang dan tinggi menggunakan pixel)
• % (mengatur panjang dan tinggi menggunakan percen)
• cover (mengubah ukuran gambar background menutupi seluruh elemen)
• contain (mengubah ukuran gambar background untuk memastikan gambar terlihat sepenuhnya)

  body {
  	background-size: auto;
    background-size: 200px;
    background-size: 10px 150px;
    background-size: 100%;
    background-size: 10% 15%;
    background-size: cover;
    background-size: contain;
  }
  

1.1 Background Shorthand

Digunakan untuk menyingkat penulisan css background. Seperti contoh :

Read More

Belajar Css Dasar # Font & Text Styling

Daftar Isi : [Tampil]

1. Font Styling

Yang termasuk properti Font Styling adalah sebagai berikut.

• font-family
• font-size
• font-weight
• font-variant
• font-style
• line-height

a. font-family

Digunakan untuk mengubah jenis font, value-nya adalah

• family-name (nama font), generic-family (keluarga font)

Seperti contoh :

    body {
  		font-family: arial, verdana, sans-serif;
    }
    

generic-family : sans-serif (huruf berkaki), serif (huruf tanpa kaki) untuk lebih jelasnya googling sendiri.

b. font-size

Digunakan untuk mengubah ukuran font, value-nya adalah

• px
• %
• em

Seperti Contoh :

    h1 {
    	font-size: 32px;
        font-size: 200%;
        font-size: 2em;
    }
    

c. font-weight

Digunakan untuk mengatur ketebalan font, value-nya adalah

• lighter
• normal
• 1-900
• bold
• bolder

Seperti Contoh :

    body {
    	font-weight: lighter;
        font-weight: normal;
        font-weight: 500;
        font-weight: bold;
        font-weight: bolder;
    }
    

d. font-variant

Digunakan untuk mengubah font menjadi normal atau kapital, value-nya adalah

• normal
• small-caps (huruf kecil menjadi huruf kapital)

Seperti Contoh :

    h1 {
    	font-variant: normal;
        font-variant: small-caps;
    }
    

e. font-style

Digunakan untuk mengubah font, value-nya adalah

• normal
• italic
• oblique

italic dan oblique sama-sama miring dan perbedaannya adalah klik disini. Seperti contoh :

    body {
    	font-style: normal;
        font-style: italic;
        font-style: oblique;
    }
    

f. line-height

Digunakan untuk mengatur tinggi spasi, value-nya adalah normal, px, em.

• normal
• px
• em

    body {
    	line-height: normal;
        line-height: 15px;
        line-height: 1.1em;
    }
    

1.1 Font Shorthand

Digunakan untuk menyingkat penulisan css font. Seperti contoh :

2. Text styling

Yang termasuk properti Text Styling adalah sebagai berikut.

• color
• text-allign
• text-indent
• text-decoration
• text-transform
• letter-spacing
• word-spacing

a. color

Digunakan untuk memberi warna pada teks, value-nya adalah

• Nama Warna
• Hexadecimal
• RGBA (Red, Green, Blue, Alpha [opasitas 1-0] )

Seperti Contoh :

    body {
    	color : red/green/blue/etc;
        color : #ff0000/#008000/#0000ff/etc;
        color : rgba(255,0,0,1)/etc;
        color : rgba(255,0,0,0)/etc;
    }
    

b. text-align

Digunakan untuk mengatur rata teks/paragraf, value-nya adalah

• left (rata kiri)
• center (rata tengah)
• right (rata kanan)
• justify (rata kiri-kanan)

Seperti Contoh :

    body {
    	text-align : left;
        text-align : center;
        text-align : right;
        text-align : justify;
    }
    

c. text-indent

Digunakan untuk memberi indentasi pada teks/paragraf, value-nya adalah

• px
• %
• in

Seperti contoh :

    p {
        text-indent: 50px;
        text-indent: 10%;
        text-indent: 1.5in;
    }
    

d. text-decoration

Digunakan untuk mengatur dekorasi pada teks/paragraf, value-nya adalah

• none
• underline (garis bawah)
• overline (garis atas)
• line-through (garis tengah/tercoret)

Seperti contoh :

    a {
        text-deciration: none;
        text-deciration: underline;
        text-deciration: overline;
        text-deciration: line-through;
    }
    

e. text-transform

Digunakan untuk mengubah jenis huruf kecil atau besar, value-nya adalah

• none
• lowercase (huruf kecil)
• uppercase (huruf besar)
• capitalize (huruf kapital)

Seperti contoh :

    h1 {
        text-transform: none;
        text-transform: lowercase;
        text-transform: uppercase;
        text-transform: capitalize;
    }
    

f. letter-spacing

Digunakan untuk mengatur spasi antar huruf, value-nya adalah

• normal
• px

Seperti contoh :

    p {
        letter-spacing: normal;
        letter-spacing: 5px;
    }
    

g. word-spacing

Digunakan untuk mengatur spasi antar kata, value-nya adalah

• normal
• px

Seperti contoh :

    p {
        word-spacing: normal;
        word-spacing: 5px;
    }
    

Read More

Belajar CSS Dasar # Komentar

Daftar Isi : [Tampil]

Seperti pada bahasa pemrograman lain, CSS juga memiliki komentar. Komentar tidak akan dibaca oleh mesin, komentar berguna untuk penjelasan dari syntax yang kita tulis. Penulisan komentar pada CSS adalah dengan diawali tanda "/*" dan diakhiri tanda "*/". Syntax yang ditulis di tengah tanda tersebut tidak akan dibaca oleh mesin dan dianggap komentar. seperti contoh dibawah ini.

    body{
       font: normal 14px arial, sans-serif;
    }
    /*
    h1 {
      font-size: 200%;
    }
    */
  

Seperti contoh diatas syntax h1 akan dianggap sebuah komentar, sekian.

Read More