CSS

CSS adalah singkatan dari Cascading Style Sheets. CSS adalah bahasa yang digunakan untuk mendesain tampilan halaman web, termasuk warna, layout, dan font. CSS memungkinkan pengembang web untuk mengontrol bagaimana halaman web akan ditampilkan oleh browser.

CSS adalah bahasa yang digunakan untuk mendesain tampilan halaman web, termasuk warna, layout, dan font. CSS memungkinkan pengembang web untuk mengontrol bagaimana halaman web akan ditampilkan oleh browser.

Metode penggunaan CSS

Inline CSS

Inline CSS adalah metode CSS yang diterapkan langsung pada elemen HTML. Inline CSS ditulis pada atribut style pada elemen HTML. Inline CSS hanya berlaku untuk satu elemen HTML saja.

<p style="color: red;">Ini adalah paragraf dengan warna merah</p>

Internal CSS

Internal CSS adalah metode CSS yang diterapkan pada satu halaman HTML. Internal CSS ditulis pada tag <style> pada bagian <head> pada halaman HTML. Internal CSS berlaku untuk semua elemen HTML pada satu halaman HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar Internal CSS</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Ini adalah paragraf dengan warna merah</p>
  </body>
</html>

External CSS

External CSS adalah metode CSS yang diterapkan pada beberapa halaman HTML. External CSS ditulis pada file CSS terpisah dari file HTML. External CSS berlaku untuk semua elemen HTML pada beberapa halaman HTML.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar External CSS</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>Ini adalah paragraf dengan warna merah</p>
  </body>
</html>

style.css

p {
  color: red;
}

Tips:

Gunakan metode External CSS untuk menghindari duplikasi kode CSS.

Gunakan metode Internal CSS untuk menghindari duplikasi kode CSS pada satu halaman HTML.

Gunakan metode Inline CSS untuk menghindari duplikasi kode CSS pada satu elemen HTML.

CSS Selector

CSS Selector adalah cara untuk memilih elemen HTML yang akan diberi style. CSS Selector dapat memilih elemen HTML berdasarkan nama tag, class, id, dan atribut.

Selector berdasarkan nama tag

Selector berdasarkan nama tag adalah cara untuk memilih elemen HTML berdasarkan nama tag. Selector berdasarkan nama tag ditulis dengan menuliskan nama tag pada CSS.

p {
  color: red;
}

Selector berdasarkan class

Selector berdasarkan class adalah cara untuk memilih elemen HTML berdasarkan class. Selector berdasarkan class ditulis dengan menuliskan nama class pada CSS dengan diawali tanda titik.

.paragraf-merah {
  color: red;
}

<p class="paragraf-merah">Ini adalah paragraf dengan warna merah</p>

Selector berdasarkan id

Selector berdasarkan id adalah cara untuk memilih elemen HTML berdasarkan id. Selector berdasarkan id ditulis dengan menuliskan nama id pada CSS dengan diawali tanda pagar.

#paragraf-merah {
  color: red;
}

<p id="paragraf-merah">Ini adalah paragraf dengan warna merah</p>

Selector berdasarkan atribut

Selector berdasarkan atribut adalah cara untuk memilih elemen HTML berdasarkan atribut. Selector berdasarkan atribut ditulis dengan menuliskan nama atribut pada CSS dengan diawali tanda kurung siku.

[type="text"] {
  color: red;
}

<input type="text" />

CSS Property

CSS Property adalah properti yang digunakan untuk mendesain tampilan halaman web. CSS Property dapat digunakan untuk mengatur warna, layout, dan font.

Background

Background adalah properti yang digunakan untuk mengatur background dari elemen HTML. Background dapat digunakan untuk mengatur warna, gambar, dan posisi background.

body {
  background-color: red;
  background-image: url("background.jpg");
  background-position: center;
}

Color

Color adalah properti yang digunakan untuk mengatur warna dari elemen HTML. Color dapat digunakan untuk mengatur warna teks dan background.

body {
  color: red;
}

Font

Font adalah properti yang digunakan untuk mengatur font dari elemen HTML. Font dapat digunakan untuk mengatur jenis font, ukuran font, dan warna font.

body {
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  color: red;
}

Margin

Margin adalah properti yang digunakan untuk mengatur jarak antara elemen HTML dengan elemen HTML lainnya. Margin dapat digunakan untuk mengatur jarak atas, kanan, bawah, dan kiri.

.selector {
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

Padding

Padding adalah properti yang digunakan untuk mengatur jarak antara elemen HTML dengan konten di dalamnya. Padding dapat digunakan untuk mengatur jarak atas, kanan, bawah, dan kiri.

.selector {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

Text

Text adalah properti yang digunakan untuk mengatur tampilan teks dari elemen HTML. Text dapat digunakan untuk mengatur jarak antar huruf, jarak antar kata, dan jarak antar baris.

.selector {
  letter-spacing: 1px;
  word-spacing: 1px;
  line-height: 1.5;
}

Width

Width adalah properti yang digunakan untuk mengatur lebar dari elemen HTML. Width dapat digunakan untuk mengatur lebar elemen HTML.

.selector {
  width: 100px;
}

Height

Height adalah properti yang digunakan untuk mengatur tinggi dari elemen HTML. Height dapat digunakan untuk mengatur tinggi elemen HTML.

.selector {
  height: 100px;
}

Border

Border adalah properti yang digunakan untuk mengatur border dari elemen HTML. Border dapat digunakan untuk mengatur warna, lebar, dan jenis border.

.selector {
  border-color: red;
  border-width: 1px;
  border-style: solid;
}

Display

Display adalah properti yang digunakan untuk mengatur tampilan dari elemen HTML. Display dapat digunakan untuk mengatur tampilan elemen HTML menjadi block, inline, dan inline-block.

.selector {
  display: block;
}

Position

Position adalah properti yang digunakan untuk mengatur posisi dari elemen HTML. Position dapat digunakan untuk mengatur posisi elemen HTML menjadi static, relative, absolute, dan fixed.

.selector {
  position: relative;
}

Flex and Grid

Flex dan Grid adalah properti yang digunakan untuk mengatur layout dari elemen HTML. Flex dan Grid dapat digunakan untuk mengatur layout elemen HTML menjadi flex dan grid.

Flex

Flex adalah properti yang digunakan untuk mengatur layout elemen HTML menjadi flex. Flex dapat digunakan untuk mengatur layout elemen HTML menjadi flex.

.container {
  display: flex;
  flex-direction: row; // row, row-reverse, column, column-reverse
  justify-content: flex-start;  - Main Axis/Horizontal
  align-items: center; - Cross Axis/Vertical
}

Grid

Grid adalah properti yang digunakan untuk mengatur layout elemen HTML menjadi grid. Grid dapat digunakan untuk mengatur layout elemen HTML menjadi grid.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Pseudo Class

Pseudo Class adalah properti yang digunakan untuk mengatur tampilan elemen HTML berdasarkan state elemen HTML. Pseudo Class dapat digunakan untuk mengatur tampilan elemen HTML berdasarkan state elemen HTML.

Hover

Hover adalah state dimana elemen HTML sedang diarahkan oleh kursor. Hover dapat digunakan untuk mengatur tampilan elemen HTML ketika diarahkan oleh kursor.

.selector:hover {
  color: red;
}

Active

Active adalah state dimana elemen HTML sedang diklik. Active dapat digunakan untuk mengatur tampilan elemen HTML ketika diklik.

.selector:active {
  color: red;
}

Focus

Focus adalah state dimana elemen HTML sedang fokus. Focus dapat digunakan untuk mengatur tampilan elemen HTML ketika fokus.

.selector:focus {
  color: red;
}

Responsive Web Design

Responsive Web Design adalah teknik yang digunakan untuk membuat tampilan halaman web yang responsif. Responsive Web Design dapat digunakan untuk membuat tampilan halaman web yang responsif.

Media Query

Media Query adalah properti yang digunakan untuk membuat tampilan halaman web yang responsif. Media Query dapat digunakan untuk membuat tampilan halaman web yang responsif.

@media screen and (max-width: 600px) {
  .selector {
    color: red;
  }
}
 
@media screen and (min-width: 601px) and (max-width: 900px) {
  .selector {
    color: blue;
  }
}
 
@media screen and (min-width: 901px) {
  .selector {
    color: green;
  }
}

HTML Node.js