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>
.png)
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
.png)
Untuk Pembelajaran lebih lanjut bisa cek website W3schools
Komentar
Posting Komentar