Learn CSS

24 May 2019 No Comments pemrograman2 Site Default

CSS adalah bahasa yang menggambarkan gaya dokumen HTML.
CSS menjelaskan bagaimana elemen HTML harus ditampilkan.
Tutorial ini akan mengajarkan Anda CSS dari dasar hingga lanjutan.

CSS Memecahkan Masalah Besar
HTML TIDAK PERNAH dimaksudkan untuk berisi tag untuk memformat halaman web!

HTML dibuat untuk menggambarkan konten halaman web, seperti:

<h1> Ini tajuk </h1>

<p> Ini adalah paragraf. </p>

Ketika tag seperti < font >, dan atribut warna ditambahkan ke spesifikasi HTML 3.2, itu memulai mimpi buruk bagi pengembang web. Pengembangan situs web besar, di mana font dan informasi warna ditambahkan ke setiap halaman, menjadi proses yang panjang dan mahal.

Untuk mengatasi masalah ini, Konsorsium World Wide Web (W3C) membuat CSS.

CSS menghapus pemformatan gaya dari halaman HTML!

Contoh
Tutorial CSS ini berisi ratusan contoh CSS. Cobakan CSS berikut pada editor saudara!

Buatlah sebuah file css dengan nama coba1.css

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

Pada CSS diatas kita membuat CSS dengan backround halaman warna lihtblue

body {
  background-color: lightblue;
}

dan setiap Header (h1) diberi warna putih dan posisi text di tengah(centre)

h1 {
  color: white;
  text-align: center;
}

kemudian penjelasan selanjutnya setiap paragraph menggunakan font verdana dan fint size 20

p {
  font-family: verdana;
  font-size: 20px;
}

untuk memanggil css diatas kita dapat lakukan langkah sebagai berukut!

buat sebuah view dengan nama apa saja dan masukkan link css kita tadi, karena css kita namanya coba1.css maka kita harus panggil coba1.css

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="asset/css/coba1,css"> /sesuaikan lokasi
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

Perintah perintah lain pada CSS

Background

background-color  // untuk memberi warna background
background-image  // untuk memberi warna background
background-repeat  // untuk  menampilkan sebuah gambar secara berulang
background-attachment  // untuk mengatur kontrol scrolling
background-position  // // untuk menentukan posisi

2. Border Style

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

Contoh penggunaan

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

3. Margin

Properti margin CSS digunakan untuk membuat ruang di sekitar elemen, di luar batas yang ditentukan.

Dengan CSS, Anda memiliki kendali penuh atas margin. Ada properti untuk mengatur margin untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).

margin-top
margin-right
margin-bottom
margin-left

contoh penggunaan

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

contoh 2

p {
  margin: 25px 50px 75px;
}

Keterangan

margin: 25px 50px 75px;

top margin is 25px
right and left margins are 50px
bottom margin is 75px

4. Padding

Properti padding CSS digunakan untuk menghasilkan ruang di sekitar konten elemen, di dalam batas yang ditentukan.

Dengan CSS, Anda memiliki kontrol penuh atas padding. Ada properti untuk mengatur padding untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).

padding-top
padding-right
padding-bottom
padding-left

Contoh penggunaan

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

5. height and width

Properti height dan width digunakan untuk mengatur tinggi dan lebar elemen.

Height dan width dapat diatur ke otomatis (ini adalah default. Berarti browser menghitung tinggi dan lebar), atau ditentukan dalam nilai panjang, seperti px, cm, dll., Atau dalam persen (%) dari blok yang mengandung.

Contoh penggunaan

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Properti max-width digunakan untuk mengatur lebar maksimum suatu elemen.

Lebar maks dapat ditentukan dalam nilai panjang, seperti px, cm, dll., Atau dalam persen (%) dari blok yang berisi, atau diatur ke tidak ada (ini adalah default. Berarti tidak ada lebar maksimum).

Masalah dengan di atas terjadi ketika jendela browser lebih kecil dari lebar elemen (500px). Browser kemudian menambahkan scrollbar horizontal ke halaman.

Sebaliknya, menggunakan max-width, akan meningkatkan penanganan jendela kecil peramban.

Contoh penggunaan

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Previous Post Next

About The Author

Site Default