Langsung ke konten utama

Styling Dasar Dengan CSS

Ditulis oleh : Yoelddev

 Tutorial Styling Dengan CSS

1. Apa Itu CSS?

CSS merupakan singkatan dari cascading style sheet. CSS digunakan untuk membuat sebuah website menjadi lebih menarik. Website tanpa CSS seperti nasi tanpa lauk alias tidak enak. 
Ya, CSS memberi warna baru dalam sebuah website, website dengan HTML saja biasanya hanya berupa teks datar dan membosankan, tetapi dengan CSS kita bisa mengubah semua itu.

2. Bagaimana Memulai Coding Dengan CSS?

Kita sudah membuat HTML sebelumnya, jadi sekarang kita bisa melanjutkan disana. 
Sebelum itu kita bisa menginstall extensions di VSCode untuk membuat proses coding lebih mudah

EXTENSIONS

    1. Color Highlight
    2. Color Picker
    3. CSS Formatter
    4. CSS Navigation
    5. CSS Peek

Sebelumnya kalian sudah mencoba tag <h1> bukan? Mari kita styling teks tersebut. Tetapi sebelum mulai styling mari kita buat file css terlebih dahulu. Pertama buat file dengan nama style.css (melalui VSCode), kemudian kita harus menghubungkan style,css dengan html dengan cara memasukan tag <link> di dalam tag <head>

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



Kemudian kita bisa membuka file style.css untuk memulai styling.
h1 {
    color: aqua;
    background-color: orange;
    text-align: center;
}

h1:hover {
    background-color: red;
    border-radius: 50px;
}

p {
    margin: 30px;
    font-size: larger;
    font-family: Arial, Helvetica, sans-serif;
}

marquee {
    font-size: 25px;
    background-color: darkblue;
    color: white;
}

Penjelasan : 
Color = warna teks
Background-color = warna latar belakang
text-align = penempatan teks
hover = perubahan jika di klik
border-radius = radius lingkaran
margin = pembatas/tepi 
font-size = ukuran teks
font-family = jenis font



Kurang lebih seperti ini hasilnya.



Untuk Pembelajaran lebih lanjut bisa cek website W3schools
Labels:

Komentar

Posting Komentar

Postingan populer dari blog ini

Apa itu Next JS?

Ditulis oleh : Yoelddev
 Next.js || Framework Modern untuk Pengembangan Web Cepat dan Efisien Next.js adalah framework JavaScript berbasis React yang populer untuk membangun aplikasi web modern. Dikembangkan oleh Vercel, Next.js menawarkan fitur-fitur canggih seperti rendering server-side dan statis, yang membuatnya ideal untuk menciptakan website cepat, SEO-friendly, dan interaktif.   1. Keunggulan Next.js - Rendering Fleksibel: Next.js mendukung server-side rendering (SSR) dan static site generation (SSG), memungkinkan pengembang untuk memilih metode rendering yang paling efisien. SSR membantu meningkatkan SEO dengan konten yang langsung terindeks oleh mesin pencari, sementara SSG membuat halaman statis yang ringan dan cepat dimuat.   - Routing Otomatis: Routing di Next.js sangat mudah karena setiap file dalam folder `pages/` otomatis menjadi rute. Tidak perlu konfigurasi tambahan seperti di framework lain.   - Pengoptimalan Gambar dan Kinerja:  Dengan komponen bawaa...
Posting Komentar
Lihat Selengkapnya »

Git Dan GIthub, Kedua Esensi Penting Dunia Program

Ditulis oleh : Yoelddev
Git dan GitHub: Esensi Penting untuk Pengembangan Program Dalam dunia pengembangan perangkat lunak (OS), ada dua nama yang sering terdengar adalah Git dan GitHub. Meskipun sering digunakan bersamaan, keduanya memiliki fungsi yang berbeda namun saling melengkapi. Mari kita cari tau apa itu Git dan GitHub, serta mengapa keduanya sangat penting bagi pengembang saat ini. Apa Itu Git? Git adalah sistem kontrol versi yang dirancang untuk membantu pengembang melacak perubahan dalam kode sumber. Dengan Git, Anda dapat: 1. Melacak Perubahan Git mencatat setiap perubahan yang dilakukan pada kode, memungkinkan Anda untuk kembali ke versi sebelumnya jika diperlukan. Ini sangat berguna ketika Anda perlu memperbaiki bug atau mengembalikan fitur yang tidak berhasil. 2. Bekerja Secara Kolaboratif Git memudahkan tim untuk bekerja sama dalam proyek yang sama. Beberapa pengembang dapat mengerjakan bagian yang berbeda dari proyek tanpa mengganggu satu sama lain. Ini membuat kolaborasi menjadi lebih efisie...
Posting Komentar
Lihat Selengkapnya »

Linux VS Windows, Mana Yang Lebih Bagus?

Ditulis oleh : Yoelddev
Windows dan Linux, Mana yang lebih baik? Di dunia teknologi informasi, dua sistem operasi/OS yang sering dibandingkan adalah Windows dan Linux. Keduanya memiliki kelebihan masing-masing, dan pilihan antara keduanya sering kali tergantung pada kebutuhan pengguna. Mari kita telusuri keunggulan dari masing-masing sistem operasi ini dengan gaya yang modern dan mudah dipahami. Keunggulan Windows 1. UI/Tampilan Pengguna yang Ramah Windows dikenal dengan antarmuka pengguna (UI) yang intuitif dan ramah bagi pemula. Desainnya yang familiar membuat pengguna baru tidak merasa kesulitan saat mengoperasikan sistem ini. Dengan menu Start yang mudah diakses, pengguna dapat menemukan aplikasi dan pengaturan dengan cepat. 2. Dukungan Aplikasi yang Luas Salah satu daya tarik utama Windows adalah dukungan untuk berbagai aplikasi dan perangkat lunak. Dari aplikasi perkantoran seperti Microsoft Office hingga software desain grafis seperti Adobe Creative Suite, Windows memiliki ekosistem yang kaya. Ini sang...
Posting Komentar
Lihat Selengkapnya »