Tutorial Membuat Font Pada HTML dan CSS Terlengkap

By Posted on
Contents show

Aturan Penggunaan CSS

Secara umum disusun oleh tiga bagian yaitu, selector (elemen yang akan didefinisikan), properti (atribut yang akan diubah) dan nilai sebagaimana berikut

Selector {property: value}

Antara property dan nilai disahkan dengan titik-dua (colon) seperti contoh di bawah ini

Body (color: black}

Jika nilai berupa beberapa kata, gunakan tanda petik ganda

P {font-family: “sans serif” }

Jika lebih dari satu property pisahkan dengan titik-koma (semi colon)

P {text-align: center; color: red}

Jika ingin lebih mudah dibaca sebagaimana berikut

p
{
text-align: center;
color: black;
font-family: arial }

Jika selector dikelompokkan

HI, H2, H3, H4, H5, H6
{
color: green;
}

Jika menggunakan atribut class (dalam definisi CSS).

P.Kanan {text-align: right}
P.Kiri {text-align: center}

Berikut ini sintaks yang ditulis dalam dokumen html menggunakan definisi di atas.

<P class=”kanan”> This Paragraph will be right aligned </p>
<P class=”kiri”> This Paragraph will be center aligned </p>

Jika menggunakan ID atribut

#Kanan {text-align: right}

Berikut ini sintaks yang ditulis dalam dokumen html menggunakan definisi ID atribut di atas.

<P id=”kanan”> This Paragraph will be right aligned </p>
<H3 id=”kanan”> This Header will be right aligned too</H3>

Style Sheet External

Berikut ini contoh menggunakan style sheet yang didefinisikan secara external, di mana exi.css digunakan oleh coba_cssexi.html. Ingat dalam pendefinisian external tidak diperlukan tag html. Dan extension filenya harus disimpan dalam “*.css”.

body {background-color: yellow}
hi {font-size: 36pt}
h2 {color: blue}
p {margin-left:50px}

Lihat hasil contoh gambar menggunakan style sheet external pada CSS dibawah ini:

5

Lihat Source Code

<!–coba_cssexl.html–>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”exl.css” >
</head>
<body>
<h1>This Header is 36 pt</h1>
<h2>This Header is Blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>

Berikut ini contoh menggunakan style sheet yang didefinisikan secara external, di mana ex2.css digunakan oleh coba_cssex2.html.

Body {background-color: tan}
HI {color: maroon; font-size: 20pt}
HR {color: navy}
P {font-size: llpt; margin-left: 15px}
A:Link {color: green}
A:Visited {color: yellow}
A:Active {color: blue}
A:Hover {color: black}

Lihat hasil contoh gambar menggunakan style sheet external pada CSS dibawah ini:

6

Lihat Source Code

<!–coba_cssexl.html–>
<html>
<head>
<link rel = “stylesheet11 type=”text/css” href =”ex2 . css”>
</head>
<body>
<h1>This Header 1</h1>
<h2>This Header is Blue</h2>
<p>This paragraph has a left margin of 15 pixels andfont size 11 pt</p>
<p><a href=”https://www.pro.co.id” target=”_blank”>This is a Link</a></p>
</body>
</html>

Style Sheet Internal

Berikut ini contoh menggunakan style sheet yang didefinisikan secara internal. Hal ini biasanya dilakukan karena web page tertentn bersifat sangat unik sehingga membutuhkan definisi terpisah dibandingkan dengan web page lainnya.

Lihat hasil contoh gambar menggunakan style sheet internal pada CSS dibawah ini:

7

Lihat Source Code

<!–coba_cssn1.html–>
<html>
<head>
<style type=”text/css”>
Body {background-image: url(“../../pictures/teaching1.jpg”)}
HR {color: sienna}
P {font-size: llpt; margin-left: 15px}
</style>
</head>
<body>
<p>This paragraph has a left margin of 15 pixels and font size 11 pt</p>
<hr>
</body>
</html>

Style Sheet Inline

Suatu style inline hanya bisa digunakan pada lokasi yang sangat spesifik, sebenarnya penggunaan dengan cara seperti ini walaupun bisa dilakukan tetapi tidak dianjurkan. Hal ini disebabkan dokumen menjadi lebih besar karena style didefinisikan satu persatu sebagaimana berikut ini. Lihat hasil contoh gambar menggunakan style sheet inline pada CSS dibawah ini:

8

Lihat Source Code

<!–coba_cssinlinel.html–>
<html>
<head>
</head>
<body>
<p style=”color: sienna; margin-left: 20px”> This paragraph has inline style</p>
</body>
</html>

Multi Style Sheet

Jika digunakan lebih dari satu definisi dari style sheet maka nilai yang tidak didefinisikan akan diinherit (diturunkan) dari style sheet yang lebih general. Misalnya di bawah ini kita mempunyai definisi ex3.css.

H3
{
color: red; text-align: left; font-size: 8pt }

Lihat hasil contoh gambar menggunakan multy style sheet pada CSS dibawah ini:

9

Lihat Source Code

<!–coba_cssmulti.html–> <html>
<head>
<link rel=”stylesheet” type=”text/css” href=”ex3.css”>
<style type=”text/css”>
H3
{
text-align: right; font-size: 20pt }
</style>
</head>
<body>
<h3>This Header Inherit Font Color From ex3.css</h3> </body>
</html>

READ MORE:

Pages: 1 2