Belajar css dasar untuk layout website

Oleh: adminpartheon - 06-05-2021   -   16:35

Bagikan :

belajar css dasar untuk layout website

Setelah kita belajar bahasa pemprograman server PHP dengan framework codeigniter yang ada pada link Belajar membuat website MVC codeigniter dan halaman pertamamu. Maka pada kesempatan kali ini, admin akan membahas tentang pembuatan layout website dengan CSS (Cascading Style Sheet).

Apa itu CSS?, CSS merupakan aturan untuk mengatur beberapa komponen (object) yang ada didalam halaman website sehingga akan lebih terstuktur dan mudah untuk diatur.

CSS lahir pada tahun 1996 yang diciptakan oleh Hakon Wium Lie seorang CTO dari perusahaan pencipta browser Opera. Sampai saat ini terdapat 3 versi CSS, yaitu CSS 1,CSS 2, dan CSS 3.

Perbedaan berbagai versi CSS

1. CSS 1 diciptakan dengan berpusat pada pengembangan pemformatan dokumen HTML.

2. CSS 2 merupakan pengembangan dari CSS 1 dengan penambahan fitur yang mendukung peningkatan desain media, layout, dan animasi.

3. CSS 3, lahir pada tahun 2012 sebagai peningkatan dari css 2 terutama pada segi presentasi yang memungkinkan halaman html dapat diprint pada berbagai media (ukuran size dokumen).

Syntax dasar CSS

Penulisan syntax dasar CSS dimulai dengan pengenalan akan 3 stuktur penting, yaitu: Selector, deklarasi, property beserta nilainya (value).

Berikut ini adalah penjelasan tentang selector, deklarasi, dan property.

Selector

Selector merupakan object target (biasanya tag html) yang ingin diatur tampilannya. 

selector css

pada contoh diatas, selector berupa tag html paragrah, dimana semua tag <P> pada halaman html akan memiliki ukuran font 16px dan berwarna merah. Selector ini dapat berupa class ataupun id yang mengarah pada object tag html.

a. Selector dengan class

/* TAG HTML */
<p class="p_class"> hallo, belajar css</p>

/* CSS */
.p_class
{
   font-size:16px; color:green;
}

Pada contoh diatas selector berupa class, ditandai dengan tanda titik (.p_class). Perintah css diatas menyebabkan semua object tag html dengan class p_class akan memiliki tampilan font ukuran 16px dan berwarna hijau.

b. Selector dengan id element

/* TAG HTML */
<p id="p_id"> hallo, belajar css</p>

/* CSS */
#p_id
{
   font-size:16px; color:green;
}

Selector dengan id element, ditandai dengan awalan # seperti pada contoh diatas (#p_id). Hal ini menyebabkan element dengan id="p_id" akan memiliki tampilan dengan ukuran 16px dan berwarna hijau.

Deklarasi

Blok deklarasi adalah tempat anda menulis property beserta nilai yang menentukan tampilan element selector. Tanda deklarasi dimulai dengan "{" and ditutup dengan "}".

#p_class
{/* blok deklarasi pembuka */


}/* blok deklarasi penutup */

Properti dan nilainya

Bagian terakhir adalah property dan nilainya. Property yang tersedia untuk merubah tampilan layout selector sangatlah banyak sehingga kita akan membahas secara sedikit demi sedikit. Kembali ke point pembahasan, berikut adalah contoh dari penulisan property beserta nilai menurut CSS.

#p_class
{
   /* properti dan nilainya */
   font-size:16px;
   /* propertinya font-size, nilainya 16px
   color: green;
   text-transform:uppercase;  
}

Disini kita bisa melihat property merupakan representasi dari tampilan layout selector sesuai dengan nilai yang dimasukkan.

Lalu, setelah itu kita pasti akan bertanya? bagaimana cara penulisan css dihalaman web kita?. Ada 3 cara penulisan css didalam halaman html web anda:

1. Internal CSS.

Internal CSS adalah penulisan syntax css didalam tag <style> pada halaman html yang sama. Internal CSS juga biasa disebut embeded CSS. Berikut adalah contoh penulisan css dengan teknik internal.

<!DOCTYPE html>
<html>
<head>
  <title>Internal CSS contoh</title>

  <style type="text/css">
    p{
      font-family: Arial;
      line-height: 1em;
      font-size: 12px;
    }
  
  </style>
</head>

<body>
  <!-- Alternative css didalam tag body -->
  <style type="text/css">
    h1 { 
      font-family: Arial;
      color: Red;
    }
  </style>
  <h1>Contoh internal css</h1>
  <p>Test saja</p>
</body>
</html>

2. Eksternal CSS.

Eksternal CSS adalah penerapan css pada halaman html dengan cara mengimport file dengan ekstensi .css. Penerapan eksternal CSS dapat dilihat melalui contoh dibawah ini:

/* buat file dengan nama eksternal.css */
p
{
   font-size:12px;
   color:red;
}
h1
{
   color:black;
}

Lalu panggil file external.css tadi dengan mengimport dihalaman html utama seperti contoh dibawah ini:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Eksternal CSS</title>
  <link rel="stylesheet" type="text/css" href="eksternal.css">
   /* atau bisa menggunakan import */
   <style type="text/css">
      @import "eksternal.css";
   </style>
</head>
<body>
   <h1>Ini contoh eksternal CSS</h1>
   <p> coba saja </p>
</body>
</html>

3. Inline CSS.

Inline CSS adalah penerapan css langsung pada attribute object element HTML. Cara penulisan CSS ini biasa dilakukan oleh programmer kalau sedang dipepet deadline (hehehe). Cara inline ini sebenarnya tidak dianjurkan karena kurang rapi dan mempersulit kerja team.  Berikut adalah contoh penulisan inline css pada halaman html:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh penerapan inline css</title>
</head>
<body>
  <!--
       inline CSS ditulis langsung pada attribute tag html pada style= 
  -->  
  <p style="color:red; font-size:20px;">Ini adalah contoh penerapan inline CSS</p>
</body>
</html>

Demikian pengenalan dasar CSS sebelum pembahasan lebih dalam lagi. Yuks, tetap ikuti dan jangan lelah untuk belajar hal yang baru. 

 

Bagi anda pemilik usaha yang ingin menerapkan sistem komputer untuk kontrol stok, rekap laporan otomatis, laba-rugi otomatis, sistem kasir,dan barcode qrcode. Dapat mencoba aplikasi partheon stok.. GRATIS 100%. Installnya mudah cukup KLIK/TAP link gambar dibawah ini:

playstore_install 

Artikel terkait

belajar mysql pemula pengenalan dan operasi sederhana
belajar mysql pemula pengenalan dan operasi sederhana
Belajar membuat website setting install xampp webserver
Belajar membuat website setting install xampp webserver
Tips mengamankan akun Instagram anda.
Tips mengamankan akun Instagram anda.
Belajar elektro mengukur tegangan AC dengan multimeter digital
Belajar elektro mengukur tegangan AC dengan multimeter digital
belajar javascript membuat fungsi untuk merubah angka menjadi kalimat terbilang
belajar javascript membuat fungsi untuk merubah angka menjadi kalimat terbilang
Belajar membuat website HTML dasar-TABLE
Belajar membuat website HTML dasar-TABLE
Artikel lainnya
cara membuat function mysql database
selain query kita dapat membuat sebuah fungsi untuk mempermudah operasi database, bagaimana caranya ? yuks kita baca artikel berikut ini.
cek kabel putus dengan multimeter atau avometer digital visero a830L
Seringkali peralatan elektronik kita tidak berfungsi karena adanya ganggunan dalam komponennya, salah satunya adalah kabel putus. Artikel kali ini akan membahas cara cek kabel putus dengan multimeter digital.
5 youtuber cerita menarik tuk menemani harimu
Sambil kerja dikomputer mendengarkan cerita-cerita menarik dapat kamu coba untuk mengusir kebosanan dan meningkatkan produktifitasmu, yuk coba dengarkan 5 youtuber Indonesia yang pandai bercerita ini.
Khasiat tanaman pecut kuda
Jarang orang mengetahui tanaman pecut kuda, padahal khasiat dan kegunaannya sangat banyak. berikut adalah kegunaan pecut kuda
belajar javascript membuat fungsi untuk merubah angka menjadi kalimat terbilang
Sesi belajar javascript kali ini akan membahas pembuatan fungsi untuk merubah sebuah angka menjadi kalimat terbilang.
4 youtuber bule yang cerita tentang indonesia mulai dari wisata, budaya sampai makanan
pesona indonesia mampu memikat hati orang asing, 4 youtuber ini membuat vlog tentang beberapa wisata didaerah Indonesia. Siapakah 4 youtuber tersebut, yuks kita simak youtuber yang sering ditonton admin..
4 film barat dengan jagoan yang tak terkalahkan
Anda senang dengan film barat? suka dengan aksi perkelahian yang memacu adrenalin? berakhir happy ending? yuk simak artikel berikut ini buat menambah list film yang akan kamu tonton
5 lagu barat klasik romantis
Kangen sama pasangan? cobain lagu-lagu klasik ini supaya makin kangen dengan pasanganmu. Lagu klasik barat yang memorable dan romantis habis
Tutorial php cara membuat thousand separator nominal uang
Artikel berikut akan membahas cara merubah nominal uang menjadi lebih enak dibaca dengan menambah separator ribuan, ratusan ribu, dll didalam pemprograman PHP.
5 youtuber review film untuk menambah list film yang akan kamu tonton
ga ada waktu buat nonton film atau bingung film yang bagus yang mana, yuk cek 5 youtuber spesialist membahas film-film yang menarik lewat artikel ini.
input date html tutorial dan cara pakainya
Dalam membuat website pasti ada saatnya kita menggunakan isian tanggal, dalam artikel berikut kita akan mengupas cara dan petunjuk pengunaan input date untuk mempermudah operasi tanggal.
fungsi resistor beserta cara ukur lewat kode warna resistor dan multimeter
Kali ini kita akan bahas pengertian komponen elektro yaitu resistor beserta cara ukurnya berdasarkan kode warna dan multimeter digital
Raline Shah profil
Raline shah dikenal sebagai artis Indonesia yang pergaulannya luas, dari mohammad hadid sampai artis asia internasional lainnya masuk lingkaran pertemanannya. Berikut adalah biodata raline shah artis yang bukan kaleng-kaleng
wisata situbondo, utama raya beach dan resto
kalau kamu berdomisili di jawa dan sedang pergi ke bali lewat darat pastilah tahu ada pom bensin dan rest area yang bagus dan keren yang bernama utama raya.
Belajar membuat website, MVC codeigniter dan halaman pertamamu
Pada sesi belajar membuat website kali ini, akan dibahas tentang arsitektur MVC pada codeigniter dan cara untuk membuat halaman web pertama kita.