Css Dasar

Warna

Cara penulisan warna

header {
    color: teal;
}

header {
    color: #0011ff ;
}

h2 {
    color: rgb(88, 255, 21);
}

Untuk lebih jelas soal kode warna,bisa dilihat di sini

Background

Background Warna

contoh:

<html>
  <head>
    <title>Contoh Background Warna</title>
    <meta content="">
    <style>
      header {
        background-color: violet;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Belajar Background di CSS</h1>
    </header>
  </body>
</html>

Background Image

<html>
  <head>
    <title>Contoh Background Warna</title>
    <meta content="">
    <style>

      body {
        background-image: url('background.jpg');
      }

      header {
        background: rgba(255,255,225, 0.5);
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Belajar Background di CSS</h1>
    </header>
  </body>
</html>

Beberapa Properti Warna

- background-repeat

contoh:

body {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
}

- background-size

body {
  background-image: url('background.jpg');
   background-repeat: no-repeat;
  background-size: cover;
}

- backdrop-filter

<html>
  <head>
    <title>Contoh Background Blur</title>
    <meta content="">
    <style>

      body {
        background-image: url('background.jpg');
        background-repeat: no-repeat;
        background-size: cover;
      }

      header {
        background: rgba(255,255,225, 0.5);
      }

      article {
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10px);
        padding: 1rem;
      }
    </style>
  </head>
  <body>
  <header>
      <h1>Belajar Background di CSS</h1>
    </header>
    <article>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit iusto quidem magnam distinctio accusamus obcaecati quis assumenda architecto nesciunt facere, ducimus et quo animi itaque voluptas ipsum. Esse, debitis earum.
    </article>
  </body>
</html>