css

sumber :wikipedia.org

apa itu CSS
A.fungsi
B.konsep layout halaman web
C.jenis-jenis layout halaman WEB
3.static
D.Contoh penulisan script code CSS
1. 2.inline CSS
2. 3.External CSS

apa itu CSS

CSS adalah singkatan dari cascading style sheets yaitu bahasa yang digunakan untuk menentukan tampilan dan format halama.webiste.Dengan CSS bisa mengatur jenis font,warna,tulisa,dan latar belakang halaman

Css di gunakan bersama dengan bahasa markup,seperti HTML dan XML untuk membangun sebuah website yang menarik.

A.fungsi

1.Mempercepat loading halamn web

2.Memudahkan Pengeloaan kode

3.Menawarkan lebih banyak variasi tampilan

4.Membuat website tampil rapi di semua ukuran layar

B.konsep layout halaman web

layout,bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar.Sama seperti tipografi,terdapat sangat banyak elemen-elemen pada layoud

Sebuah dokumen web umumnya memiliki elemen-elemen sebagai berikut:

sumber : bertzzie.com

C.jenis-jenis layout halaman WEB

1.fluid

layout jenis satu ini memiliki kemanpuan untuk bisa mebuat lebar layout sesuai dengan resulosi browser yang digunakan oleh pengguna.kerena lebar layout fluid menggunakan satuan persen,sehingga bisa mengikuti resolusi browser.

2.responsive

ayout ini memiliki kemampuan untuk berganti layout pada resulosi tertentu,yang mana kemampuan tersebut berkat kehadiran sintax media queries di css3

3.static

layout ini bisa diterapkan pada sebuah website biasanya akan memiliki ukuran yang tetap di semua resulosi browser.yang mana layout ini memiliki jenis satuannya pixel (PX)

4.responsive fluid

jenis satu ini merupakan layout gabungan dari respnsive dengan fluid sehingga layar website akan mampu menyusaikan resulosi dan bisa berganti layout pada resulosi tertentu

5.paralax scrolling

layout satu ini menggunakan beberapa layar,dimana setiap layar tersebut memiliki kecepatan perpindahan yang berbeda ketika di scroll

6.horizontal scrolling

layout ini merupakan layout yang memiliki tampilan content web yang di tata ke samping sehingga,pengunjung web yang ingin mencari informasi bisa melihat konten dengan menggunakan scroll horizontal

D.Contoh penulisan script code CSS

contoh penulisan script code css

E.metode stylesheet

Ada tga menulis CSS di HTMl

1.internal CSS –> ditulis di dalam tag ' <style>'

2.Inline CSS –> ditulis di atribut elemen HTML

3.External CSS –> ditulis di file CSS terpisah dengan HTMl

1.Internal CSS

Internal CSS adalah code CSS yang ditulis di dalam tag '<style>'Internal CSS juga dikenal dengan sebutan Embeded CSS

Contoh :

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Internal CSS</title>
  <!-- penulisan internal css dalam tag head -->
  <style type="text/css">
    p{
      font-family: serif;
      line-height: 1.75em;
      font-size: 18px;
    }
    i { 
      font-family: sans;
      color: orange;
    }
  </style>
</head>

<body>
  <!-- penulisan internal css dalam tag body -->
  <style type="text/css">
    h2 { 
      font-family: sans;
      color: #333;
    }
  </style>
  <h2>Ini judul artikel</h2>
  <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

2.inline CSS

Inline CSS adalah code CSS ditulis langsung pada atribut 'style'di elemen HTML

kode CSS langsung tanpa menggunakan kurung kurwal'{......}'kemudian properti tetap di pisah dengan titik koma

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Inline CSS</title>
</head>

<body>

  <h2 style="color:red;font-family:sans">Ini judul artikel</h2>
  <p style="color:maroon">Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

3.External CSS

External CSS adalah kode CSS yang ditulis terpisah dengan kode HTML.external CSS ditulis didalam file khusus yang berekstensi '.css'

contoh :

p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}

untuk menggunakan CSS ini.kita harus menghubungkan CSS dengan HTML

ada dua cara yang bisa kita lakukan :

1.menggunakan tag '<link>'

2.menggunakan '@import'

Contoh :

cara 1 : menggunakan tag '<link>'

cara 2 : menggunaka '@import'

<style type="text/css">
@import "style-ku.css";
</style>

jika kita menggunakan cara 1 maka kode lengkap HTMLnya akan menjadi seperti ini :

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Eksternal CSS</title>
    <link rel="stylesheet" type="text/css" href="style-ku.css">
</head>

<body>
    <h2>Ini judul artikel</h2>
    <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

F.Macam-Macam property CSS

h1 {
    font-weight: 400;
    text-transform: uppercase;
    font-family: poppins;
    text-decoration: underline;
    color: grey;
}
img {
    background-image: url('https://i.postimg.cc/YS2nRBLX/BIG-BLUR-DAY-3.png');
    width: 500px;
    border-radius: 15px;
    border: 5px solid;
}
/*Contoh Properti Pada tag h1 dan img*/

css

css