Devsaurus

    Search by
       /belajar-coding/build-app

    Terakhir diperbaharui: Apr 10, 2021

    CSS

    Daftar Isi

    Syntax Menambahkan CSS ke HTML 7 Konsep Dasar CSS     - 1.Background     - 2.Typography     - 3.Box Model     - 4.Position     - 5.Overflow     - 6.Flexbox     - 7.Pseudo-class     - Lainnya CSS Framework dan Extension Rekap

    CSS = Cascading Style Sheets

    CSS dalam sebuah website berfungsi untuk mengatur dan memodifikasi tampilan visual dari element HTML.

    Jika diibaratkan sebuah rumah, HTML adalah pondasi dan rangka dari rumah tersebut sedangkan CSS adalah semua bagian dari rumah yang membuat rumah itu terlihat indah.

    Syntax

    syntax

    selector = element HTML yang akan dirubah tampilannya sesuai nilai properties, bisa berupa tag, id atau class.

    properties = nilai yang mempengaruhi/mengubah tampilan element HTML.

    Karena banyaknya CSS property, maka hanya CSS property yang umum ditemui yang akan dibahas

    Menambahkan CSS ke HTML

    Ada 3 cara menambahkan CSS ke HTML:

    1. Inline

    Sebagai attribute dari element HTML.

    1<h1 style="color:blue;text-align:center;">Hello Brachio</h1>

    2. Internal

    Ditambahkan di antara <style> tag pada satu file yang sama.

    1<!DOCTYPE html>
    2<html>
    3  <head>
    4    <style>
    5      h1 {
    6        color: blue;
    7        text-align: center;
    8      }
    9    </style>
    10  </head>
    11  <body>
    12    <h1>Hello Brachio</h1>
    13  </body>
    14</html>

    3. External

    Ditambahkan di antara <style> tag pada file yang berbeda.

    filename: style.css

    1h1 {
    2  color: blue;
    3  text-align: center;
    4}

    filename: index.html

    1<!DOCTYPE html>
    2<html>
    3  <head>
    4    <link rel="stylesheet" type="text/css" href="index.css" />
    5  </head>
    6  <body>
    7    <h1>Hello Brachio</h1>
    8  </body>
    9</html>

    Pada metode external kita perlu menambahkan baris code berikut diantara <head> tag.

    1<link rel="stylesheet" type="text/css" href="{nama file css}" />

    8 konsep Dasar CSS

    Kita akan bahas 8 konsep dasar CSS yang akan sering digunakan dalam sebuah website.

    1.Background

    Kita bisa menggunakan beberapa CSS properties berikut untuk mengatur background pada sebuah web.

    Background Color

    1body {
    2  background-color: yellow;
    3}

    Background Image

    1body {
    2  background-image: url('image.jpg');
    3}

    Background Repeat

    1body {
    2  background-image: url('image.jpg');
    3  background-repeat: no-repeat;
    4}

    Background Attachment

    Mengatur posisi background image di dalam viewport(bagian web yang terlihat) apakat tetap atau scrollable.

    1body {
    2  background-image: url('image.jpg');
    3  background-repeat: no-repeat;
    4  background-attachment: fixed;
    5}

    Background Position

    Mengatur posisi background image.

    1body {
    2  background-image: url('image.jpg');
    3  background-repeat: no-repeat;
    4  background-attachment: fixed;
    5  background-position: bottom;
    6}

    beberapa value untuk background-position yang umum digunakan:

    1background-position: top;
    2background-position: bottom;
    3background-position: right;
    4background-position: left;
    5background-position: center;

    Contoh jika background-position dikombinasi:

    1background-position: center top;
    2background-position: bottom right;

    2.Typography

    Mengatur tampilan teks pada element HTML.

    font-family

    Digunakan untuk menentukan jenis huruf (font) yang dipakai dengan skala prioritas.

    1font-family: 'Source Sans Pro', 'Arial', sans-serif;

    Pada contoh di atas browser akan menggunakan jenis font Source Sans Pro jika tersedia, jika tidak maka browser akan menggunakan jenis font Arial dan begitu seterusnya.

    font-size

    Menentukan ukuran font.

    1font-size: 20px;

    font-style

    1font-style: italic;

    font-weight

    Menentukan tebal dari ukuran font.

    1font-weight: 500;

    letter-spacing

    Menentukan jarak spasi antar huruf.

    1letter-spacing: 10px;

    line-height

    Menentukan tinggi dari satu baris text.

    1line-height: 30px;

    text-align

    Menentukan tata letak text.

    1text-align: center;

    word-spacing

    Menentukan jarak spasi antar kata.

    1word-spacing: 10px;

    Klik button RUN untuk melihat demo dari semua CSS properties yang sudah disebutkan di atas.

    3.Box Model

    Setiap element HTML dapat dimodelkan sebagai sebuah kotak(box).

    Sehingga memiliki tinggi(height), lebar(width), batas(border) yang dapat diubah.

    box model

    width = lebar element
    height = tinggi element
    border = garis batas element
    padding = area antara content dengan border
    margin = area antara border dengan element yang lain

    1div {
    2  background-color: yellow;
    3  width: 200px;
    4  height: 100px;
    5  border: solid 1px;
    6  padding: 32px;
    7  margin: 32px;
    8}

    Measurement Unit

    Pada umumnya ketika kita mengukur tinggi atau lebar sebuah benda maka kita akan menggunakan satuan ukuran seperti centimeter(cm), meter(m) dll.

    Pada css kita dapat menggunakan beberapa satuan ukuran, yang paling sering digunakan diantaranya:

    • Absolute

    Nilai ukuran tetap tidak terpengaruh element lain.

    UnitDetail
    pxpixels
    ptpoints
    • Relative

    Nilai ukuran bergantung pada ukuran element lain.

    UnitDetail
    emrelatif terhadap ukuran font dari element
    remrelatif terhadap ukuran font dari root element
    vwrelatif terhadap 1% ukuran width dari viewport
    vhrelatif terhadap 1% ukuran height dari viewport

    contoh:

    1 em sama dengan 16px jika ukuran font dalam satu element adalah 16px.

    1 rem sama dengan 16px jika ukuran font dalam root html adalah 16px.

    Jika bagian browser yang terlihat(viewport) memiliki width 600px, maka 1vw sama dengan 6px.

    Jika bagian browser yang terlihat(viewport) memiliki height 600px, maka 1vh sama dengan 6px.

    4.Position

    Top, Right, Left, Bottom

    Untuk mengatur letak sebuah element HTML terhadap element lain kita bisa menggunakan properties top, right, left, bottom.

    css position

    Position

    Selain top, right, left, bottom kita juga bisa menggunakan properties position dengan pilihan value sebagai berikut:

    static

    posisi default setiap element, tidak terpengaruh oleh nilai dari properties top, right, left, bottom.

    1div {
    2  position: static;
    3  left: 20px;
    4  border: solid 2px yellow;
    5}

    relative

    posisi dapat terpengaruh oleh nilai dari properties top, right, left, bottom.

    1div {
    2  position: relative;
    3  border: solid 2px yellow;
    4  left: 10px; //terpengaruh nilai left
    5}

    fixed

    posisi relatif terhadap viewport(bagian dari browser yang terlihat), dapat terpengaruh oleh nilai dari properties top, right, left, bottom.

    Posisi element tidak akan berubah meskipun halaman di scroll.

    1div {
    2  position: fixed;
    3  border: solid 2px yellow;
    4  bottom: 20px;
    5}

    absolute

    posisi relatif terhadap ancestor terdekat.

    ancestor = element yang memiliki element lain di dalamnya.

    1.relative {
    2  position: relative;
    3  width: 300px;
    4  height: 100px;
    5  border: solid 2px yellow;
    6}
    7
    8.absolute {
    9  position: absolute;
    10  top: 50px;
    11  width: 100px;
    12  height: 25px;
    13  border: solid 2px yellow;
    14}

    5.Overflow

    Bagaimana mengatur tampilan sebuah content yang ukurannya melebihi ukuran yang sudah ditentukan.

    visible

    content tetap ditampilkan meskipun melebihi ukuran yang ditentukan.

    overflow visible 

    1div {
    2  width: 700px;
    3  height: 100px;
    4  border: solid 2px yellow;
    5  overflow: visible;
    6}

    hidden

    sebagian content disembunyikan ketika melebihi ukuran yang ditentukan.

    overflow hidden 

    1div {
    2  width: 700px;
    3  height: 100px;
    4  border: solid 2px yellow;
    5  overflow: hidden;
    6}

    scroll

    membuat content menjadi scrollable.

    overflow scroll 

    1div {
    2  width: 700px;
    3  height: 100px;
    4  border: solid 2px yellow;
    5  overflow: scroll;
    6}

    auto

    pengaturan content kita serahkan pada CSS.

    overflow auto 

    1div {
    2  width: 700px;
    3  height: 100px;
    4  border: solid 2px yellow;
    5  overflow: auto;
    6}

    overflow-x

    scroll ditampilkan secara horizontal.

    overflow x 

    1div {
    2  width: 50px;
    3  border: solid 2px yellow;
    4  overflow-x: auto;
    5}

    overflow-y

    scroll ditampilkan secara vertical.

    overflow y 

    1div {
    2  width: 50px;
    3  border: solid 2px yellow;
    4  overflow-y: auto;
    5}

    6. Flexbox

    Konsep flexbox sama dengan box model namun lebih fleksibel, kita tidak harus mengatur posisi setiap element secara manual.

    Untuk menjadikan element menjadi flexible hal yang harus dilakukan pertama kali adalah membuat flex container.

    flex-container

    1div {
    2  display: flex;
    3}

    Di dalam flex container kita bisa menggunakan properties flex yang lain.

    flex-basis

    Menentukan nilai awal dari flex item.

    flex basis

    flex-direction

    Bagaimana flex item ditampilkan dalam sebuah flex container.

    flex direction

    flex-warp

    Mengatur flex item menjadi single-line atau multiline.

    flex warp

    flex-flow

    Shorthand / gabungan dari flex-direction dan flex-warp.

    1div {
    2  flex-flow: row warp;
    3}

    flex

    Shorthand / gabungan dari flex grow, flex shrink dan flex basis.

    1div {
    2  flex: 1 1 40px;
    3}

    code di atas sama dengan

    1div {
    2  flex-grow: 1;
    3  flex-shrink: 1;
    4  flex-basis: 40px;
    5}

    flex-grow

    Mengatur bagaimana suatu flex item mengisi area yang kosong dalam flex container.

    flex grow

    flex-shrink

    Mengatur bagaimana suatu flex item shrink / menyusut jika tidak ada area lagi dalam flex container.

    flex shrink

    align-items

    Mengatur letak dari flexbox item terhadap garis lurus vertikal (cross axis) dalam flexbox container.

    align item 2

    align item 1

    align-content

    Sama dengan align-items namun hanya berlaku untuk flexbox flex-wrap: wrap.

    align-self

    Sama dengan align-items namun hanya berlaku untuk satu flexbox item.

    justify-content

    Mengatur letak dari flexbox item terhadap garis lurus horizontal (main axis) dalam flexbox container.

    justify content 1

    justify content 2

    order

    Mengatur urutan flex item dalam flexbox container.

    flex order

    7.Pseudo-class

    Jika kita mengakses sebuah website terkadang kita mendapati button atau link pada website tersebut berubah warna ketika di klik.

    Untuk bisa membuat yang seperti itu kita menggunakan Pseudo-class.

    Pseudo-class digunakan untuk mengatur tampilan dari suatu element HTML pada kondisi(state) tertentu.

    Syntax

    1selector:pseudo-class {
    2  property: value;
    3}

    pseudoclass

    contoh

    1a:link {
    2  color: green;
    3}
    4
    5a:hover {
    6  color: red;
    7}

    Pada contoh di atas warna dari link akan berubah-ubah sesuai state.

    • sebelum link di klik warna link adalah hijau
    • saat kondisi hover (mouse tepat di atas link) maka link akan berwarna merah

    Daftar lengkap pseudo-class bisa dilihat disini.

    Konsep Dasar lainnya

    Konsep dasar CSS tidak terbatas hanya 7 konsep, masih ada beberapa konsep dasar CSS yang belum dibahas disini, salah satunya adalah CSS grid.

    Tetapi karena materi CSS grid ini lumayan panjang, kamu bisa melihat penjelasannya di website learncssgrid.com

    CSS Framework dan Extension

    Meskipun kita sudah menguasai konsep dasar dari CSS atau bahkan semua konsep CSS, mengatur tampilan sebuah web bisa menjadi pekerjaan yang cukup rumit.

    Karena banyaknya element yang harus diatur dan banyaknya pilihan CSS properties yang bisa digunakan.

    Oleh karena itu banyak bermunculan CSS framework untuk mempermudah developer menggunakan CSS, diantaranya:

    1. Bootstrap
    2. Foundation
    3. Bulma
    4. Tailwind
    5. PureCSS

    SASS vs SCSS vs LESS

    Selain CSS framework, terdapat CSS extension yang pada dasarnya memiliki tujuan yang sama, yaitu mempermudah developer menggunakan CSS.

    Salah satu letak perbedaannya adalah pada syntax.

    Contoh CSS Extension: SASS, SCSS, dan LESS.

    SASS

    1$font-stack:    Helvetica, sans-serif
    2$primary-color: #333
    3
    4body
    5  font: 100% $font-stack
    6  color: $primary-color

    SCSS

    1$font-stack: Helvetica, sans-serif;
    2$primary-color: #333;
    3
    4body {
    5  font: 100% $font-stack;
    6  color: $primary-color;
    7}

    SCSS merupakan pengembangan dari SASS

    LESS

    1// Variables
    2@link-color: #428bca; // sea blue
    3@link-color-hover: darken(@link-color, 10%);
    4
    5// Usage
    6a,
    7.link {
    8  color: @link-color;
    9}
    10a:hover {
    11  color: @link-color-hover;
    12}
    13.widget {
    14  color: #fff;
    15  background: @link-color;
    16}

    Lalu pilih yang mana?

    Kita bebas memilih antara menggunakan CSS framework atau CSS extension karena keduanya memiliki tujuan yang sama.

    Namun untuk seseorang yang baru belajar coding disarankan untuk memahami dasar CSS kemudian memilih menggunakan salah satu CSS framework.

    Karena penggunaan CSS extension adalah untuk mereka yang sudah menguasai CSS dengan baik dan tidak ingin bergantung pada CSS framework.

    Rekap

    • CSS digunakan untuk mengubah tampilan element HTML
    • Konsep dasar CSS yang perlu untuk dipahami:
      1. Backgrounds
      2. Typography
      3. Box model
      4. Positioning
      5. Overflow
      6. Flexbox
      7. Pseudo-class