CSS | DASAR CSS


 Image result for css

Assalamualaikum wr.wb
A.PENDAHULUAN

  Assalamualaikum wr.wb, apa kabar semua? semoga selalu dalam keadaan yang baik. Bertemu lagi dengan saya, kali ini saya akan memahami tentang dasar-dasar CSS.

B.LATAR BELAKANG

Karena saya kurang paham dan belum mengerti tentang dasar-dasar CSS.

C.MAKSUD DAN TUJUAN

-agar paham dan mengerti apa itu CSS.
-dapat menggunakan elemen CSS.
-dapat menggabungkan dengan HTML 

D.HASIL YANG DIHARAPKAN

Supaya saya bisa menggabungkan antara HTML dan CSS dalam pembuatan sebuah tampilan website.

E.PEMBAHASAN
  
 CSS adalah kependekan dari Cascading Style Sheet.
CSS merupakan salah satu kode pemrograman yang mempunyai fungsi untuk menghias dan mengatur gaya tampilan/layout suatu halaman web agar terlihat lebih elegan dan menarik.

Dalam membuat sebuah website, kita akan sangat memerlukan penggunaan CSS (Cascading style sheet). Ini berfungsi untuk membuat sebuah antarmuka atau tampilan website yang bisa menarik. Tanpa menggunakan css kemungkinan hasil websitemu akan terlihat kurang maksimal.

Menggunakan CSS juga bisa mengantikan beberapa fungsi penggunaan gambar yang akan membuat loading websitemu lebih cepat. Ketika kamu sudah menguasai penggunaan (X)HTML maka untuk memperkuat kemampuanmu dibidang web desain, kamu perlu mempelajari penggunaan CSS lebih dalam lagi. Penggunaan CSS file juga dapat memungkinkan kamu memisahkan konten situs web (X)HTML dari style. Seperti biasanya, kamu menggunakan file (X)HTML untuk mengatur konten, tapi semua presentasi (seperti font, warna, background, border, format teks, efek link & seterusnya) dibuat dalam file CSS. Tentu ini akan sangat mempermudah dalam mendesain sebuah website.

Mengenal dasar-dasar css

Dalam hal ini kita memiliki beberapa pilihan tentang bagaimana menggunakan CSS, baik secara internal maupun eksternal.            


mengenal_dasar_dasar_CSS       


Internal Stylesheet
Pertama kita akan coba mengeksplorasi metode internal. Dengan cara ini kamu hanya menempatkan kode CSS dalam tag pada setiap (X)HTML file yang ingin kamu berikan style dengan CSS. Mari kita lihat kode dibawah ini :
?
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title><title>
<style type="text/css">
CSS Content Goes Here
</style>
</head>
<body>
</body>
</html>
Dengan metode ini setiap (X) HTML file harus berisi kode CSS yang diperlukan untuk style halaman. Ini artinya setiap perubahan yang ingin kamu buat pada satu halaman, perubahan tersebut juga harus dilakukan untuk semua halaman. Metode ini akan sangat baik digunakan jika kamu hanya perlu merbubah tampilan (style) pada satu halaman saja atau baik digunakan jika kamu ingin membuat tampilan setiap halaman menjadi berbeda-beda. Tapi metode ini akan sangat merepotkan jika kamu mempunyai halaman website yang sangat banyak.

External Stylesheet.

Pada tahap berikutnya kita akan mengeksplorasi metode eksternal. Sebuah file CSS eksternal dapat dibuat dengan teks atau HTML editor apapun seperti Notepad ++, Sublime Text, Dreamweaver. Maksudnya kita akan membuat sebuah file CSS tidak berisi kode (X) HTML, hanya file CSS. Kamu cuma perlu menyimpannya dengan ekstensi file.css. Kemudian kamu dapat memasukan link file css kebagian head setiap (X) HTML file yang ingin kamu berikan style atau antarmuka yang sesuai. Berikut contoh kode yang bisa kamu gunakan saat menempatkan file CSS ke file HTML :

?
1
<link rel="stylesheet" type="text/css" href="File path/stylesheet.css" />
Atau kamu juga bisa menggunakan metode @import seperti contoh berikut :
?
1
<style type="text/css">@import url(File path/stylesheet.css);</style>
Kode diatas bisa kamu tempatkan didalam tag head seperti contoh berikut ini :
?
1
2
3
4
5
6
7
8
<html>
<head>
<title><title>
<link rel="stylesheet" type="text/css" href="File path/stylesheet.css" />
</head>
<body>
</body>
</html>
Atau
?
1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title><title>
<style type="text/css">@import url(File path/stylesheet.css);</style>
</head>
<body>
</body>
</html>

Dengan menggunakan eksternal style sheet, semua file (X) HTML yang kamu punya hanya perlu di-link-an ke satu file CSS untuk style sebuah halaman. Ini berarti, ketika kamu ingin mengubah desain dari semua halaman, kamu hanya perlu mengedit satu file CSS untuk membuat perubahan global keseluruh situs web kamu. Berikut adalah beberapa alasan kenapa metode ini lebih baik.
  • Maintenace (Pemeliharaan) lebih mudah
  • Mengurangi Ukuran File
  • Mengurangi penggunaan bandwitch
  • Peningkatan fleksibilitas / Lebih fleksibel
F.PERMASALAHAN

susah memahami konsepnya.

G.KESIMPULAN
   Kesimpulannya yaitu,css adalah sebuah bahasa yang berfungsi untuk mempercantik tampilan dan apabila css digabungkan dengan html maka akan berkesinambungan.

H.REFERENSI

  https://www.w3schools.com/css/default.asp

I.PENUTUP
   Sekian dari saya semoga bermanfaat untuk kalian semua, sampai jumpa dipost selanjutnya..

Wassalamualaikum Wr.Wb

0 Response to "CSS | DASAR CSS"

Post a Comment