Cara penulisan Css dalam HTML

freeload Desember 13, 2020


  Cara Penulisan Css pada HTML

FreeLoad —Hallo sobat semua pada kali ini saya akan memposting Cara penulisan Css pada HTML. Dalam menulis kode CSS terdapat 3 cara yaitu, Internal Style, Inline Style, dan external style.

1. Internal style

Cara penulisan css dengan internal style yaitu dengan menyisipkan kode css dengan cara menggunakan Tag <style> yang ada pada HTML untuk menulis tag style tersebut anda bisa menulis baik sesudah tag head(Antara body dan head), atau didalam tag <Body> 
Berikut Contohnya:

Penulisan didalam <tag Body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
     initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        h1{
            color: lightblue;
            font-size: 3em;
        }
    </style>
    <h1>Hello World</h1>
</body>
</html>


Penulisan Sesudah tag <head>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h1{
        color: lightblue;
        font-size: 3em;
    }
</style>

<body>
    <h1>Hello World</h1>
</body>
</html>

2. Inline Style

Inline style mempunyai kemiripan dengan Internal stylesheet dan anda tidak perlu menuliskan selector untuk membuat css tersebut anda akan lansung membuat declaration, karena cara ini menyisipkan kode css lansung didalan tag
contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 style="color: lightblue;">Hello World</h1>
</body>
</html>
pada tag <h1> anda bisa menuliskan lansung style dan lansung membuat declaration dan value css.


3. External Style

Dalam membuat External style anda akan membuat css pada file yang berbeda dengan file html, anda harus membuat file baru dengan ekstensi css contoh style.css.Setelah itu anda bisa membuat style css.  
    Untuk menyisipkan file Css tersebut kedalam File HTML anda harus menggunakan href contohnya
 
<link rel="stylesheet" href="style.css">


File HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>
File CSS
h1{
    color: lightblue;
}

Pada file css anda bisa lansung membuat  selector,declaration, dan value untuk memberi style pada Css. 

Tags

Posting Komentar

1 Komentar