Styles HTML dan CSS

Styling HTML dengan CSS

CSS singkatan Cascading Style Sheets.

CSS menjelaskan bagaimana elemen HTML yang akan ditampilkan pada layar, kertas, atau media lainnya .

CSS menghemat banyak pekerjaan . Hal ini dapat mengontrol tata letak halaman web beberapa halaman sekaligus.

CSS dapat ditambahkan ke elemen HTML dalam 3 cara:

Inline - dengan menggunakan atribut style dalam elemen HTML
Internal - dengan menggunakan elemen <style> dalam <head>
Eksternal - dengan menggunakan file CSS eksternal

Di sini kita akan menggunakan inline dan styling internal, karena ini lebih mudah untuk ditunjukkan dan lebih mudah bagi Anda untuk mencoba sendiri.

inline CSS

Sebuah CSS inline digunakan untuk menerapkan gaya unik untuk elemen HTML.

Sebuah CSS inline menggunakan atribut Style di elemen HTML.

Contoh ini menetapkan warna teks biru di elemen <h1>

Contoh :

<h1 style="color:blue;">This is a Blue Heading</h1>

CSS internal

Sebuah CSS internal digunakan untuk menentukan gaya halaman HTML.

Sebuah CSS internal didefinisikan dalam elemen <head> dan dalam elemen <style>.

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS eksternal

Style sheet eksternal digunakan untuk menentukan style banyak halaman HTML.

Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web, dengan mengubah satu file!

Untuk menggunakan style sheet eksternal tambahkan link ke dalam <head> dari halaman HTML.

Contoh :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Style sheet eksternal dapat ditulis dalam editor teks. file tidak harus berisi kode HTML dan harus disimpan dengan ekstensi .css.

Berikut adalah bagaimana "styles.css" terlihat:

body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}

CSS Font

Properti CSS colour mendefinisikan warna teks yang akan digunakan.

Properti CSS font-family mendefinisikan font yang akan digunakan.

Properti CSS font-size mendefinisikan ukuran teks yang akan digunakan.

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS Border

Properti CSS Border mendefinisikan perbatasan sekitar elemen HTML.

Contoh :

p {
border: 1px solid powderblue;
}

CSS Padding

Properti CSS Padding mendefinisikan padding (spasi) antara teks dan border.

Contoh :

p {
border: 1px solid powderblue;
padding: 30px;
}

CSS Margin

Properti CSS Margin mendefinisikan margin (ruang) di luar Border.

Contoh :

p {
border: 1px solid powderblue;
margin: 50px;
}

Id Atribut

Untuk menentukan gaya tertentu dalam satu elemen khusus tambah atribut id ke elemen:

<p id="p01">I am different</p>

kemudian menentukan gaya untuk elemen dengan id tertentu.

Contoh :

#p01 {
color: blue;
}

Kelas Atribut

Untuk menentukan Style khusus dari elemen, tambah atribut kelas ke elemen:

<p class="error">I am different</p>

kemudian tentukan gaya untuk elemen, dengan kelas khusus:

Contoh :

p.error {
color: red;
}

Referensi eksternal

style sheet eksternal dapat ditujukan dengan URL lengkap atau dengan path relatif ke halaman web.

Contoh ini menggunakan URL lengkap untuk link ke sebuah style sheet.

Contoh :

Contoh ini link ke style sheet yang terletak di folder html di situs web.

Contoh :

Contoh ini link ke style sheet yang terletak di folder yang sama dengan halaman.

Contoh :

Bab Ringkasan

Gunakan atribut Style untuk styling inline
Gunakan elemen <style> untuk menentukan CSS internal yang
Gunakan elemen <link> untuk merujuk ke file CSS eksternal
Gunakan elemen <head> untuk menyimpan <style> dan <link> elemen
Gunakan CSS warna properti untuk warna teks
Gunakan CSS font-family properti untuk font teks
Gunakan CSS font-size properti untuk ukuran teks
Gunakan CSS perbatasan properti untuk perbatasan
Gunakan CSS bantalan properti untuk ruang di dalam perbatasan
Gunakan CSS marjin properti untuk ruang luar perbatasan

HTML Style Tags

Tag	Description
<style>	Defines style information for an HTML document
<link>	Defines a link between a document and an external resource

Author : Unknown

Share this

Styles HTML dan CSS

Author : Unknown

Share this

Related Posts