Belajar Cara Menggunakan Dasar Css Untuk Web Desain
Mengenal Apa Itu CSS ?
CSS adalah kependekan dari Cascading Style Sheet yang artinya sebuah kode atau tag yang digunakan untuk mengatur gaya atau tampilan pada sebuah website. Css sendiri memiliki tiga metode penulisan kodenya yakni Css Inline, Css Internal, Dan Css External . Untuk membuat kode css kita harus membuat kode html terlebih dahulu sebagai dasar atau bahan yang ingin diberi efek menggunakan css
Maka dari itu alangkah baiknya sebelum kalian belajar css maka kalian harus belajar html terlebih dahulu di sini Macam - macam Tag HTML Beserta Fungsi Dan Contohnya dengan begitu kita dapat belajar html dan css dengan mudah
<h1 style="background-color:red; color:blue;">Beranda</h1>
<p style="color:green;">Ini adalah halaman beranda</p>
<img src="C:\Users\Public\Pictures\Sample Pictures/Desert.jpg" alt="HTML tutorial" width="32px" height="32px">
Cara menggunakan metode CSS Inline
1. Buatlah sebuah tag html dan diberi tag tambahan css seperti ini didalam notepad kalian, kalian juga bisa menyalin kode dibawah ini
3. Kemudian buka file tersebut menggunakan browser yang ada di komputer kalian seperti chrome, mozilla, dan lainnya
dan ini adalah hasil dari kode tersebut
<html>
<head>
<style>
a {
text-decoration: none;
padding: 5px 10px;
}
.wrapper {
background-color: #fafafb;
margin:10px;
padding:10px;
}
.paragraf {
font-size:18px;
color: white;
}
</style>
</head>
<body>
isi web kalian
</body>
</html>
Cara menggunakan metode CSS Internal
1. Buatlah kode html dan tambahkan tag Css menggunakan kode selector seperti contoh di atas, supaya lebih mudah coba salin kode dibawah ini
3. kemudian buka file tersebut menggunakan browser seperti chrome, mozilla, dan lainnya
dan ini adalah hasil dari kode tersebut
<html>
<head>
<link rel="stylesheet" href="C:\Users\Admin\Desktop\font-awesome/css/font-awesome.min.css"/>
</head>
<body>
isi web kalian
</body>
</html>
Cara menggunakan metode CSS External
1. Buatlah kode html sendiri menggunakan notepad dan simpanlah menggunakan format .html
salin kode dibawah ini untuk mencoba
2. Setelah membuat kode html kini kita ke langkah selanjutnya yaitu membuat kode css seperti ini dan menyimpannya di notepad menggunakan format .css
salin kode dibawah ini untuk mencoba
Setelah semua sudah selesai maka kalian sudah bisa membuka file tersebut dan melihat hasilnya
baiklah itu tadi adalah macam macam metode penulisan tag css yang bisa kalian coba, semua tergantung pada kalian mau pilih cara yang mana untuk mempermudah kalian dalam urusan koding. Semoga artikel ini bermanfaat dan bisa berguna untuk kita semua, jangan lupa untuk share juga ya.
CSS adalah kependekan dari Cascading Style Sheet yang artinya sebuah kode atau tag yang digunakan untuk mengatur gaya atau tampilan pada sebuah website. Css sendiri memiliki tiga metode penulisan kodenya yakni Css Inline, Css Internal, Dan Css External . Untuk membuat kode css kita harus membuat kode html terlebih dahulu sebagai dasar atau bahan yang ingin diberi efek menggunakan css
Maka dari itu alangkah baiknya sebelum kalian belajar css maka kalian harus belajar html terlebih dahulu di sini Macam - macam Tag HTML Beserta Fungsi Dan Contohnya dengan begitu kita dapat belajar html dan css dengan mudah
1. CSS Inline
Sebuah penulisan style yang langsung tertuju pada tag yang diberi atribut CSS tanpa harus menambahkan sebuah tag selector, untuk penulisannya bisa kalian lihat seperti ini<h1 style="background-color:red; color:blue;">Beranda</h1>
<p style="color:green;">Ini adalah halaman beranda</p>
<img src="C:\Users\Public\Pictures\Sample Pictures/Desert.jpg" alt="HTML tutorial" width="32px" height="32px">
Cara menggunakan metode CSS Inline
1. Buatlah sebuah tag html dan diberi tag tambahan css seperti ini didalam notepad kalian, kalian juga bisa menyalin kode dibawah ini
Catatan: Copy Dan Paste kode ini
3. Kemudian buka file tersebut menggunakan browser yang ada di komputer kalian seperti chrome, mozilla, dan lainnya
dan ini adalah hasil dari kode tersebut
2. CSS Internal
Sebuah penulisan atirbut style yang berada didalam tag <head>...</head> sehingga untuk menggunakan atribut yang satu ini kalian harus teliti dalam setiap penulisan tag yang ada didalamnya, karena jika salah memilih tag yang dipilih (tag selector) maka bisa berakibat fatal. Dan untuk menulis atribut tersebut berikut ini adalah caranya<html>
<head>
<style>
a {
text-decoration: none;
padding: 5px 10px;
}
.wrapper {
background-color: #fafafb;
margin:10px;
padding:10px;
}
.paragraf {
font-size:18px;
color: white;
}
</style>
</head>
<body>
isi web kalian
</body>
</html>
Cara menggunakan metode CSS Internal
1. Buatlah kode html dan tambahkan tag Css menggunakan kode selector seperti contoh di atas, supaya lebih mudah coba salin kode dibawah ini
Catatan: Copy Dan Paste kode ini
3. kemudian buka file tersebut menggunakan browser seperti chrome, mozilla, dan lainnya
dan ini adalah hasil dari kode tersebut
3. CSS External
Metode penulisan css yang satu ini menggunakan sebuah data atau file yang terpisah dari file utama, sehingga untuk menggunakan css tersebut harus menambahkan tag khusus yang diletakkan di tag head untuk memanggil atribut css yang telah disimpan dengan format menjadi file css seperti ini fileku.css dan ini adalah contoh penulisannya<html>
<head>
<link rel="stylesheet" href="C:\Users\Admin\Desktop\font-awesome/css/font-awesome.min.css"/>
</head>
<body>
isi web kalian
</body>
</html>
Cara menggunakan metode CSS External
1. Buatlah kode html sendiri menggunakan notepad dan simpanlah menggunakan format .html
salin kode dibawah ini untuk mencoba
Catatan: Copy Dan Paste kode ini
2. Setelah membuat kode html kini kita ke langkah selanjutnya yaitu membuat kode css seperti ini dan menyimpannya di notepad menggunakan format .css
salin kode dibawah ini untuk mencoba
Catatan: Copy Dan Paste kode ini
Setelah semua sudah selesai maka kalian sudah bisa membuka file tersebut dan melihat hasilnya
Jika kalian merasa kesulitan saat mencoba tutorial tersebut maka kalian bisa mencoba kode yang sudah saya siapkan untuk kalian download dan kalian pelajari sendiri berikut ini, klik link ini Download Belajar Tutorial Dasar Css Dan Html dan jika kalian masih mengalami kesulitan maka kalian bisa bertanya kepada saya melalui kolom komentar dibawah ini
baiklah itu tadi adalah macam macam metode penulisan tag css yang bisa kalian coba, semua tergantung pada kalian mau pilih cara yang mana untuk mempermudah kalian dalam urusan koding. Semoga artikel ini bermanfaat dan bisa berguna untuk kita semua, jangan lupa untuk share juga ya.
Promo Menarik
Comments
Post a Comment