Dasar-dasar CSS

Apa itu CSS ?

CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk merubah tampilan dan format dalam website. Dengan CSS anda bisa mengatur warna font, jenis font, ukuran font, dan warna latar belakang.

Ada 3 cara menulis CSS di HTML :

1. Internal CSS -> ditulis dalam tag <style>;
2. Inline CSS-> ditulis di atribut HTML;
3. External CSS-> ditulis di file CSS terpisah dengan HTML;

1. Internal CSS

Internal CSS adalah CSS yang ditulis dalam tag <style> pada HTML. Tag <style> di tulis didalam tag <head>.

Contoh :

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
                background-color: black;
                color: white;
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <p>Nama Saya Fajri Ahmad Sadan</p>
    </body>
</html>


2. Inline CSS

Inline CSS adalah CSS yang ditulis langsung didalam atribut 'style' pada elemen HTML.

Contoh :

<h2 style="color:white; background-color:black; font-weight: 40px;">Nama saya Fajri Ahmad Sadan</h2>


3. Eksternal CSS

Eksternal CSS adalah CSS yang ditulis dengan file terpisah dengan HTML.

Cara Menyambungkan file CSS dengan HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--- Tempat untuk eksternal css --->
    <link rel="stylesheet" href="style.css">
    <!--- Dan Masukkan nama file css yang telah kamu
    buat dan jangan lupa untuk menaruh di folder yang sama-->
</head>
<body>
   
</body>
</html>