Created by potrace 1.14, written by Peter Selinger 2001-2017 YAN's Site

Belajar CSS Dari Pemula hingga Ahli

 
  • 13 Feb, 2024

g

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendefinisikan tampilan dan styling dari sebuah website. CSS menghitung nilai default dari beberapa property, yang disebut inheritance. CSS juga memiliki prioritas yang diterapkan pada sebuah rule, yang disebut cascading.

Bab I: Pengenalan CSS

CSS dapat digunakan dalam beberapa bentuk, yaitu inline, embedded, atau external. Inline CSS digunakan ketika hanya ingin mengubah style pada suatu elemen spesifik. Embedded CSS digunakan ketika ingin mengatur style pada suatu halaman tertentu. Sedangkan external CSS digunakan ketika ingin mengatur style pada beberapa halaman atau website.

Contoh penggunaan CSS inline, embedded, dan external:

Inline CSS

<p style="color: red; font-size: 14px;">Halo dunia!</p>

Embedded CSS

<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>Halo dunia!</p>
</body>

External CSS

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>Halo dunia!</p>
</body>

Bab II: Selectors dan Properties

Selectors adalah cara untuk memilih elemen HTML yang akan diberi style. Beberapa selector yang umum digunakan adalah ID, Class, Element, Attribute, dan Pseudo-class.

Properties adalah cara untuk mengatur style pada elemen yang telah dipilih. Beberapa properties umum yang digunakan adalah Color, Font, Background, Border, Margin, dan Padding.

Contoh penggunaan selectors dan properties:

ID Selector

#header {
  background-color: lightblue;
  padding: 20px;
}

Class Selector

.highlight {
  color: red;
  font-weight: bold;
}

Element Selector

p {
  margin-bottom: 10px;
}

Attribute Selector

input[type="checkbox"] {
  margin-right: 10px;
}

Pseudo-class Selector

a:hover {
  text-decoration: underline;
}

Bab III: Box Model

Box Model adalah cara untuk mengatur posisi, ukuran, dan margins dari sebuah elemen HTML. Box Model terdiri dari beberapa bagian, yaitu Content, Padding, Border, dan Margin.

Contoh penggunaan box model:

Box Model Default

div {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  padding: 20px;
  margin: 10px;
}

Box Model Tanpa Padding dan Margin

div {
  box-sizing: border-box;
  width: 300px;
  height: 200px;
  border: 1px solid black;
  padding: 0;
  margin: 0;
}

Bab IV: Posisi dan Layout

Posisi dan Layout adalah cara untuk mengatur posisi dan susunan dari sebuah elemen HTML. Beberapa posisi dan layout yang umum digunakan adalah Static, Relative, Absolute, Fixed, Float, dan Grid.

Contoh penggunaan posisi dan layout:

Position Static

p {
  position: static;
  top: 0;
  left: 0;
}

Position Relative

div {
  position: relative;
  top: 20px;
  left: 30px;
}

Position Absolute

header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

Position Fixed

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

Float Left

img {
  float: left;
  margin-right: 10px;
}

Display Grid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Bab V: Transisi, Animation, dan Flexbox

Transisi, Animation, dan Flexbox adalah fitur-fitur canggih dari CSS yang digunakan untuk membuat animasi dan responsive design.

Contoh penggunaan transisi, animation, dan flexbox:

Transisi

button {
  transition: all 0.3s ease;
}

button:hover {
  background-color: lightblue;
}

Animation

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

div {
  animation: fadeIn 1s linear both;
}

Flexbox

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.flex-item {
  flex: 1 1 auto;
  margin: 10px;
}

Bab VI: Media Queries dan Responsive Design

Media Queries dan Responsive Design adalah cara untuk mengatur tampilan dan styling dari sebuah website sesuai dengan ukuran layar perangkat.

Contoh penggunaan media queries dan responsive design:

Media Query

@media screen and (max-width: 600px) {
  div {
    width: 100%;
  }
}

Responsive Design

.container {
  max-width: 1200px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
}

Bab VII: Preprocessors dan Frameworks CSS

Preprocessors dan Frameworks CSS adalah tools yang digunakan untuk mempermudah dan mempercepat pengembangan CSS. Beberapa preprocessor dan framework yang umum digunakan adalah Sass, Less, Stylus, Bootstrap, dan Foundation.

Contoh penggunaan preprocessor dan framework CSS:

Sass

$primary-color: #333;

.header {
  background-color: $primary-color;
}

Bootstrap

<link rel="stylesheet" href="bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      Kolom Satu
    </div>
    <div class="col-lg-6">
      Kolom Dua
    </div>
  </div>
</div>

Bab VIII: Optimisasi dan Best Practices CSS

Optimisasi dan Best Practices CSS adalah cara untuk mempercepat loading dan rendering dari sebuah website. Beberapa optimisasi dan best practices yang umum digunakan adalah Minify CSS, Use CDN, Avoid !important, dan Use Shorthand Property.

Contoh penggunaan optimisasi dan best practices CSS:

Minify CSS

/* Before */
body {
  background-color: white;
  color: black;
}

/* After */
body{background-color:white;color:black;}

Use CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-..." crossorigin="anonymous">

Avoid !important

/* Before */
.header {
  background-color: lightblue !important;
}

/* After */
.header--special {
  background-color: lightblue;
}

Use Shorthand Property

/* Before */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* After */
margin: 10px 20px;
Mencari