Dasar CSS - Memulai dengan CSS
CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mendesain tampilan website. Mari kita mulai dengan dasar-dasar CSS.
Apa itu CSS?
CSS adalah bahasa yang digunakan untuk mendeskripsikan presentasi dari dokumen HTML. CSS mengontrol bagaimana elemen HTML ditampilkan di browser.
Keunggulan CSS
- Separation of Concerns: Memisahkan struktur (HTML) dari presentasi (CSS)
- Reusability: Style dapat digunakan kembali
- Maintainability: Mudah untuk maintenance dan update
- Responsive Design: Membuat website yang responsif
- Performance: Optimasi loading time
Cara Menambahkan CSS
1. Inline CSS
1
|
<h1 style="color: blue; font-size: 24px;">Hello World</h1>
|
2. Internal CSS
1
2
3
4
5
6
7
8
|
<head>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>
|
3. External CSS (Recommended)
1
2
3
|
<head>
<link rel="stylesheet" href="styles.css">
</head>
|
CSS Selectors
1. Element Selector
1
2
3
4
5
6
7
8
9
|
h1 {
color: blue;
font-size: 24px;
}
p {
color: #333;
line-height: 1.6;
}
|
2. Class Selector
1
2
3
4
5
6
7
8
9
10
11
12
|
.highlight {
background-color: yellow;
padding: 10px;
}
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
|
3. ID Selector
1
2
3
4
5
6
7
8
9
10
11
|
#header {
background-color: #333;
color: white;
padding: 20px;
}
#footer {
background-color: #f8f9fa;
padding: 20px;
text-align: center;
}
|
4. Descendant Selector
1
2
3
4
5
6
7
8
|
.container p {
margin-bottom: 10px;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
|
5. Pseudo-class Selector
1
2
3
4
5
6
7
8
9
10
11
12
13
|
a:hover {
color: red;
text-decoration: underline;
}
button:active {
transform: scale(0.95);
}
input:focus {
border-color: blue;
outline: none;
}
|
CSS Properties
1. Text Properties
1
2
3
4
5
6
7
8
9
|
h1 {
color: #333;
font-size: 32px;
font-weight: bold;
font-family: Arial, sans-serif;
text-align: center;
text-decoration: underline;
line-height: 1.5;
}
|
2. Background Properties
1
2
3
4
5
6
7
|
.header {
background-color: #f8f9fa;
background-image: url('header-bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
|
3. Border Properties
1
2
3
4
5
6
|
.box {
border: 2px solid #333;
border-radius: 10px;
border-top: 1px solid #ccc;
border-bottom: 3px solid #666;
}
|
4. Box Model Properties
1
2
3
4
5
6
7
|
.container {
width: 300px;
height: 200px;
margin: 20px;
padding: 15px;
border: 1px solid #ccc;
}
|
CSS Box Model
Setiap elemen HTML memiliki box model yang terdiri dari:
1
2
3
4
5
6
7
8
9
10
11
12
|
┌─────────────────────────────────────┐
│ Margin │
│ ┌─────────────────────────────┐ │
│ │ Border │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ Padding │ │ │
│ │ │ ┌─────────────┐ │ │ │
│ │ │ │ Content │ │ │ │
│ │ │ └─────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
|
Box Model Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.box {
/* Content */
width: 200px;
height: 100px;
/* Padding */
padding: 20px;
/* Border */
border: 2px solid #333;
/* Margin */
margin: 10px;
}
|
CSS Layout
1. Display Property
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
/* Block elements */
div {
display: block;
}
/* Inline elements */
span {
display: inline;
}
/* Inline-block */
.button {
display: inline-block;
width: 100px;
height: 40px;
}
/* Hidden elements */
.hidden {
display: none;
}
|
2. Flexbox
1
2
3
4
5
6
7
8
9
10
11
|
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
.item {
flex: 1;
margin: 10px;
}
|
3. CSS Grid
1
2
3
4
5
6
7
8
9
10
|
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
.grid-item {
padding: 20px;
background-color: #f0f0f0;
}
|
Responsive Design
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
/* Mobile first approach */
.container {
width: 100%;
padding: 10px;
}
/* Tablet */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
width: 1000px;
}
}
|
2. Responsive Images
1
2
3
4
|
img {
max-width: 100%;
height: auto;
}
|
CSS Best Practices
1. Naming Conventions
1
2
3
4
|
/* Use kebab-case for class names */
.user-profile { }
.nav-menu { }
.button-primary { }
|
2. Organization
1
2
3
4
5
6
7
8
9
10
11
12
|
/* Group related styles */
/* Header styles */
.header { }
.nav { }
.logo { }
/* Main content styles */
.content { }
.sidebar { }
/* Footer styles */
.footer { }
|
1
2
3
4
5
6
7
8
9
10
11
12
|
/* Header Section */
.header {
background-color: #333;
color: white;
padding: 20px;
}
/* Navigation */
.nav {
display: flex;
justify-content: space-between;
}
|
Next Steps
Di modul selanjutnya, kita akan mempelajari:
- CSS Flexbox dan Grid
- CSS Animations dan Transitions
- CSS Variables (Custom Properties)
- CSS Preprocessors (SASS/SCSS)
- CSS Frameworks (Bootstrap, Tailwind)
Mari lanjutkan ke modul berikutnya!