Fundamental CSS

Nov 17, 2024

Apa itu CSS?

Cascading Style Sheets (CSS) is a stylesheet language digunakan menjelaskan penyajian dokumen yang di tulis dalam HTML atau XML (including XML dialects such as SVG, MathML or XHTML) CSS menjelaskan bagaimana element harus ditampilkan di layar dan di media lainnya.

Bagaimana menerapkan CSS ?

Ada 3 cara untuk menerapkan CSS ke HTML

// app/routes/_index.tsx
import { json, LoaderFunctionArgs } from '@remix-run/node';

export const loader: LoaderFunctionArgs = async () => {
  let data = await fetchDataFromAPI();
  return json(data);
};

export default function Index() {
  let data = useLoaderData<typeof loader>(); // Automatically gets the data returned by the loader
  return <div>{data}</div>;
}

hello

function demo() {
  console.log('this line is marked as deleted')
  // This line and the next one are marked as inserted
  console.log('this is the second inserted line')

  return 'this line uses the neutral default marker type'
}

Inline CSS

Menulis langsung CSS didalam element HTML menggunakan attribute style

<p style="color: red; font-size: 20px;">This is an inline-styled paragraph.</p>

Internal CSS

Menulis css dengan tag <style></style> didalam tag <head> .

<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This text should blue.</p>
</body>

External CSS

Seperti Internal CSS tetapi kode CSS ditulis di dalam file kemudian menggunakan attribute href untuk memuatnya.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Selectors

CSS selector digunakan untuk memilih element html yang akan di styling.

<html>
  <head>
    <style>
      /* Universal Selector */
      * {
        margin: 0;
        padding: 0;
      }

      /* Element Selector */
      p {
        color: red;
      }

      /* Class Selector */
      .content {
        background-color: blue;
      }

      /* ID Selector */
      #main-heading {
        color: white;
      }
    </style>
  </head>
  <body>
    <article class="content">
      <h1 id="main-heading">White Color</h1>
      <p>this background-color should be blue</p>
      <p>this text should be red</p>
    </article>
  </body>
</html>

Menggunakan External Fonts

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My page title</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
    <style>
      body {
          font-family: "Inter", sans-serif;
          font-optical-sizing: auto;
          font-weight: 400;
          font-style: normal;
        }
    </style>
  </head>

  <body>
    <!-- The main header used across all the pages of our website -->

    <header>
      <h1>Header</h1>
    </header>

    <main>
      <!-- An article -->
      <article>
        <h2>Article heading</h2>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
          lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam
          viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent
          et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt
          congue enim, ut porta lorem lacinia consectetur.
        </p>

      </article>

      <!-- the aside content can also be nested within the main content -->
      <aside>
        <h2>Related</h2>

      </aside>
    </main>

    <footer>
      <p>©Copyright 2050 by nobody. All rights reversed.</p>
    </footer>
  </body>
</html>

Referensi

Cascading Style Sheets (CSS)

Tags:

learn