CSS – Apa Itu CSS.?

css, pengertian css, apa itu css, membuat website dengan css

Berhubung untuk selanjutnya kita akan mencoba membahas dan mempelajari tentang CSS, maka ada baiknya kita mengenal apa itu CSS.

CSS Adalah ..


Cascading Style Sheet (CSS) adalah salah satu bahasa pemrograman yang digunakan untuk mengatur tampilan komponen web sehingga tampilan website lebih menarik, terstruktur dan seragam.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word, CSS dapat mengatur ukuran font, gambar, backgroud web, tabel, footer, dan banyak komponen lainnya.

Sistem Penulisan Sintax


Berikut contoh pendeklarasian CSS secara umum.

h1 {
color: #0789de;
}

h1 = selector,

Didalam “{ }” = deklarasi,

color = Property,

#0789de = Value.

Terdapat 3 sistem penulisan CSS yaitu :

  1. Inline Style Sheet
    CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style=”…” dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain.
    Contoh :
    <p style="font-family: sans-serif; color: #3366CC;">

    Inline Style Sheet

    </p>


  2. Embedded Style Sheet
    CSS didefinisikan terlebih dahulu dalam tag <style> … </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.
    Contoh :
    <style type="text/css">

    h1 {

    font-family: sans-serif;

    color: #3366CC;

    }

    </style>

    </head>

    <body>

    <h1>First Title</h1>

    <p>A paragraph of interesting content.</p>

    </body>



  3. External Style Sheet
    Metode ini hampir sama dengan metode Embedded Style Sheet, saja sintax CSS ditulis pada file berbeda yang kemudian di panggil pada file HTML yang memerlukan sintax tersebut.
    Contoh :File Style.css
    h1 {

    font-family: sans-serif;

    color: #3366CC;

    }

    File HTML
    <head>

    <title>External Style Sheet</title>

    <link rel="stylesheet" type="text/css" href="style.css" />

    </head>


0 komentar:

Posting Komentar