Skip to content

CSS

Jump to bottom
Dyandra Paramitha edited this page Sep 2, 2021 · 7 revisions

Dasar-dasar CSS

CSS adalah kepanjangan dari Cascading Style Sheet yang berfungsi untuk mengatur tampilan elemen yang tertulis dalam bahasa markup. Fungsi lain dari CSS yakni untuk memisahkan konten dari tampilan visual dalam sebuah website.

CSS biasa digunakan untuk:

  • Mempermudah dan mempercepat proses desain
  • Mempercepat memuat halaman
  • Memudahkan pemeliharaan
  • Standar pengembangan web

Cara Menggunakan CSS

Ada 3 cara untuk menggunakan CSS saat membuat sebuah website:

1. External CSS

External CSS yaitu saat kita menggunakan file khusus untuk CSS di luar kode HTML kita. Yang harus dilakukan yaitu menambahkan elemen link dalam section head di file HTML kita dan menginputkan referensi file css kita.

<head>
<link rel="stylesheet" href="style.css">
</head>

Contoh isi file CSS:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

2. Internal CSS

Internal CSS adalah style yang digabungkan di dalam file HTML, internal CSS diletakan di antara tag

dan dengan menggunakan tag <style> dan </style>. 
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>

3. Inline CSS

Inline CSS yaitu pemakaian CSS yang diberikan di tag HTML tertentu dengan menambahkan atribut style di tag HTML yang mau diberikan CSS. Biasanya digunakan untuk pemformatan khusus pada tag HTML tidak untuk keseluruh elemen dalam dokumen web.
Inline CSS juga tidak efisien dikarenakan bisa membuat file HTML kita penuh dengan atribut-atribut style di setiap tag HTML.

<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>

Syntax CSS

\

CSS Properties

Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai untuk seluruh selector.

Property umum yang digunakan dalam CSS dapat dilihat di: Link 1 Link 2

CSS Comments

Untuk melakukan comment pada CSS, syntax yang digunakan adalah /* ini comment */. Jika menggunakan Visual Studio Code, dapat menggunakan shortcut ctrl + /.

Contoh :

/* Ini comment */
body {
    background-color: red;
}

/* Ini comment juga */
/* body {
    background-color: red;
} */

CSS Selectors

Selektor adalah kata kunci dan simbol yang digunakan pada CSS untuk menyeleksi atau memilih elemen HTML.

Ada 5 macam selector penting yaitu:

  • Selector Universal Selector universal biasa disimbolkan dengan *. Biasa digunakan untuk melakukan reset padding dan margin, dan akan terimplementasikan ke semua elemen pada HTML.
* {
    border: 1px solid grey;
}
  • Selektor Tag Selektor tag biasa digunakan untuk memilih elemen berdasarkan nama tag.
p {
    color: blue;
}

Artinya semua elemen dengan tag <p> pada file HTML, warnanya akan berubah menjadi biru.

  • Selektor Class Selektor class adalah selektor yang memilih elemen berdasarkan nama class yang diberikan pada HTML. Selektor class dibuat dengan tanda titik di depannya.

Misal pada file HTML tertulis

<p>Saya sedang belajar <b class="pink">LBE</b></p>

dan di CSS tertulis:

.pink {
  color: white;
  background: pink;
  padding: 5px;
}

Maka kata LBE yang terdapat pada class "pink" akan berubah sesuai dengan CSS yang telah diberikan.

  • Selektor ID Selector universal biasa disimbolkan dengan #. Selektor ID hampir sama dengan class. Bedanya, ID bersifat unik. Hanya boleh digunakan oleh satu elemen saja.

Misal pada file HTML tertulis

<header id="header">
    <h1>Selamat Datang di Website Saya</h1>
</header>

dan di CSS tertulis:

#header {
    color: pink;
}

Maka tag yang berisikan "Selamat Datang di Website Saya" yang terdapat pada id "header" akan berubah sesuai dengan CSS yang telah diberikan.

  • Selektor Atribut Selektor atribut adalah selektor yang memilik elemen berdasarkan atribut. Selektor ini hampir sama seperti selektor Tag.

Misal pada file HTML tertulis

<input type="text" placeholder="ketik sesuatu..." />

dan di CSS tertulis:

input[type=text] {
    background: none;
    color: cyan;
    padding: 10px;
    border: 1px solid cyan;
}

Maka semua elemen <input> yang memiliki atribut type='text' akan berganti sesuai CSS yang telah diberikan.

Untuk selector-selector yang lain bisa dilihat di CSS Selectors

CSS Units

CSS mempunyai beberapa satuan ukuran panjang. Banyak CSS properties yang menggunakan satuan panjang, seperti width, margin, padding, font-size, dll. Satuan panjang ditulis diikuti dengan unit panjang, seperti 10px, 2em, dll.

Absolute lengths

Panjang unit absolut bernilai tetap dan akan tampil sama seperti panjang nilai absolut tersebut. Satuan absolute tidak direkomendasikan digunakan, karena ukuran layar yang berbeda-beda. Namun, mereka dapat digunakan jika medium output diketahui

Unit Description
cm centimeters
mm milimeters
in inches (1in = 96px = 2.54cm)
px pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt) 
h1 {
    font-size: 1.5cm;
}
h2 {
    font-size: 1in;
}
p {
    font-size: 50pt;
    line-height: 20px;
}

Relative lengths

panjang unit relatif menggunakan panjang yang relatif terhadap panjang properti yang lain. Panjang unit relatif ter-"scales" lebih baik ketika dirender di berbagai platform

Unit Description
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
% Relative to the parent element

Tip :

  • rem dan em unit sangat direkomendasikan untuk membuat layout yang "scalable"
  • Viewport = ukuran browser window. Jika viewport 50cm, 1vw = 0.5cm.
h1 {
  font-size: 15vmin;
}

html {
  font-size:16px;
}

div {
  font-size: 3rem;
  border: 1px solid black;
}

#top-div {
  font-size: 2em;
  border: 1px solid red;
}

CSS Padding & Margin

Apakah yang membedakan margin dan padding? Margin adalah jarak luar dari objek, jadi jarak 1 obyek dengan objek lainnya itu diatur pada margin, margin di hitung dari border ke sisi luar. Padding adalah jarak dalam dari objek, jadi didalam obyek pasti memiliki content, nah jarak dari border obyek dan content itu diatur pada padding.

Ada beberapa cara untuk mengimplementasikan padding/margin pada CSS.
1. Jika properti padding memiliki empat nilai

div {
  padding: 25px 50px 75px 100px;
}

Yang berarti: padding atas adalah 25px padding kanan adalah 50px padding bawah adalah 75px padding kiri adalah 100px

Cara menghafal yang lebih mudah yaitu sesuai arah jarum jam.

2. Jika properti padding memiliki tiga nilai

div {
  padding: 25px 50px 75px;
}

Yang berarti: padding atas adalah 25px padding kanan dan kiri adalah 50px padding bawah adalah 75px

3. Jika properti padding memiliki dua nilai

div {
  padding: 25px 50px;
}

Yang berarti: padding atas dan bawah adalah 25px padding kanan dan kiri adalah 50px

4. Jika properti padding memiliki satu nilai

div {
  padding: 25px;
}

Yang berarti keempat sesisi memiliki padding 25px.

Lab Algoritma Pemrograman - 2021

Modul Pelatihan

Home

  1. HTML & Ekstensi VS Code
  2. CSS & VCS
  3. JS & Chrome Dev Tools
Clone this wiki locally