Belajar CSS dasar part 1

-

 Belajar CSS dasar (Pengenalan, sintax dasar, membuat background, Dan lain sebagainya. 





Ditulis oleh Mangandaralam Sakti, 14 september 2022

Hallo semua!!! 

Pada blog kali ini saya akan membahas materi tentang Dasar dasar CSS

1. Pengertian CSS

CSS( Cascade style sheet) adalah sebuah bahasa untuk mengatur tampilan web agar lebih menarik dilihat

Di css kita bisa mengatur background, warna pada text layout dll. Tanpa css web akan terlihat kurang bagus dan tidak menarik. 

• Ini contoh web tidak menggunakan CSS:




Terlihat tidak menarik bukan? Komponen yang ada di web tersebut sangat tidak tersusun rapi. 

• Ini contoh web menggunakan CSS


Website yang menggunakan CSS terlihat lebih rapi dan terstruktur, berbeda dengan yang tidak menggunakan CSS. 

2. Tutorial mendesain web dengan CSS, langkah awal mendesain web dengan CSS

Pada CSS ada 3 struktur yaitu:
1. Selektor
2. Deklarasi
3. Properti dan nilainya

Begini penulisan strukturnya:

selector {
   properti: value; 
}

Keterangan :
• Selector :

Selektor  adalah  kata kunci untuk memilih element HTML 

•Deklarasi

Deklarasi adalah tempat untuk menulis atribut berdasarkan selektor yang dipilih 
Deklarasi ditandai dengan {}

•Properti dan nilainya

Properti adalah sekumpulan nilai atau aturan yang diberikan pada element yang dipilih 
 Contoh:
padding: 10px;

3. Cara menambahkan Background, mewarnai text dan mengatur posisi text di CSS









4. Margin dan Padding

Margin
 
Margin adalah sisi luar dari sebuah element, 
Untuk mengatur jarak bagian luar.

Padding

Padding adalah sisi dalam dari sebuah element, 
Untuk mengatur jarak bagian dalam. 









5. Memodifikasi tabel dengan CSS

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 70%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}
</style>
</head>
<body>

<h1>Memodifikasi Tabel dengan CSS</h1>

<table id="customers">
  <tr>
    <th>Nama</th>
    <th>Kelas</th>
    <th>Sekolah</th>
  </tr>
  <tr>
    <td>Ahmad</td>
    <td>2</td>
    <td>Smp 1</td>
  </tr>
  <tr>
    <td>Rusdi</td>
    <td>10</td>
    <td>Smk nusa bangsa</td>
  </tr>
  <tr>
    <td>Bambang</td>
    <td>9</td>
    <td>Smp kesatuan</td>
  </tr>
  <tr>
    <td>Burhan</td>
    <td>12</td>
    <td>sma 34</td>
  </tr>
  <tr>
    <td>Bulan</td>
    <td>4</td>
    <td>Sd 05</td>
  </tr>
  <tr>
    <td>Nurdin</td>
    <td>8</td>
    <td>Smpn 13</td>
  </tr>
  <tr>
    <td>Nandar</td>
    <td>7</td>
    <td>Smpn 57</td>
  </tr>
  <tr>
    <td>andi</td>
    <td>7</td>
    <td>Smpn 57</td>
  </tr>
  <tr>
    <td>budi</td>
    <td>7</td>
    <td>Smpn 57</td>
  </tr>
  <tr>
    <td>vito</td>
    <td>7</td>
    <td>Smpn 57</td>
  </tr>
</table>

</body>
</html>




Hasil :














6. Menambahkan background pada tulisan

index.html
<h1>Hello world</h1>

style.css

h1 {
    background-color: red;
}


Hasil :



7. Font pada css 

Untuk memperindah web yang kita punya, kita bisa menambahkan beberapa font.
berikut adalah beberapa font pada css :

index.html
<h1>Hello world</h1>
<h2>Hello World</h2>
<h3>Hello world</h3>
<h4>Hello world</h4>
<h5>Hello world</h5>
<h6>Hello world</h6>

style.css
h1 {
    font-family: 'Times New Roman', Times, serif;
}
h2 {
    font-family: fantasy;
}
h3 {
    font-family: georgia;
}
h4 {
    font-family: Brush Script MT;
}
h5 {
    font-family: Verdana;
}
h6 {
    font-family: Lucida Console;
}

Hasil :





Baiklah sampai sini dulu blog kali ini sampai jumpa pada blog berikutnya....... 

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas Latihan membuat Layout website dengan pengambilan konten di Website online

-
Gambar
Layout website steam Assalamualaikum warahmatullahi wabarakatuh  disini saya akan latihan membuat tampilan website dengan menggunakan software visual studio 2017 Saya memilih website steam untuk mencontoh membuat tampilan sebuah website.  Perlu diingat bahwa saya membuat ini untuk latihan, bukan untuk meniru.  1. Buka visual studio kalian dan buat folder baru, lalu isi dengan file html dan css   2. Lalu ketikkan source code berikut; See the Pen Untitled by Mangandaralam Sakti ( @Mangandaralam-sakti ) on CodePen . 3. Jika sudah simpan file nya lalu jalankan. Hasilnya akan seperti ini: Sekian dari saya semoga bermanfaat terima kasih Baca tutorial membuat layout lainnya di : Membuat linktree dengan HTML dan CSS Membuat Layout sederhana dengan HTML dan CSS
Baca selengkapnya

Cara Membuat Linktree dengan HTML dan CSS

-
Gambar
Membuat Linktree dengan HTML dan CSS Hallo semua!!   Pada kesempatan kali ini saya akan membahas cara membuat linktree dengan HTML dan css.  Linktree pada sebuah web biasanya adalah tempat untuk kita menaruh sosial media atau kontak yang kita punya.  Baiklah tanpa berlama lama, langsung saja ke tutorialnya.  Pertama siapkan code editor, bebas code editor apa saja.  Lalu buat folder baru dan isi file tersebut dengan file index.html dan style.css, lalu ketikan source code berikut :   See the Pen Untitled by Mangandaralam Sakti ( @Mangandaralam-sakti ) on CodePen . Jika sudah simpan dan jalankan di browser tampilannya akan seperti ini : Baiklah sekian tutorial kali ini, semoga bermanfaat.... Lihat tutorial membuat layout lainnya : Membuat layout dengan pengambilan konten pada website online
Baca selengkapnya

Belajar HTML dasar part 2 (mengenal tag, element, atribut, membuat form, menampilkan gambar, class dan id.

-
Gambar
Mengenal Tag, Element, Atribut, membuat form, menampilkan gambar, class dan id pada HTML  Ditulis oleh Mangandaralam Sakti, 13 september 2022 Hallo semua!!   Pada blog kali ini saya akan melanjutkan materi dasar dasar HTML kemarin, yaitu Pengertian HTML serta kegunaannya.  Nah sekarang saya akan membahas tentang tag, element, dan atribut dan juga saya akan memberikan beberapa tutorial HTML dasar yaitu membuat form, menampilkan gambar, dan tentang class dan id pada HTML 1. Tag Tag adalah sebuah penanda awalan dan akhiran dari sebuah element di HTML. Tag dibuat dengan kurung siku " ('<....>)". lalu didalamnya berisi nama Tag dan terkadang juga ditambahkan dengan atribut.  Contoh penulisan tag:  <tag>Hello world</tag> Tag ditulis berpasangan, ada tag awalan <tag> dan tag penutup </tag> . Ada beberapa tag yang tidak memiliki pasangan penutup.  Keterangan: •<h1>=tag pembuka •Contoh=isi tag •</h1>=tag penutup...
Baca selengkapnya