Desain Web, introduction about casacading style sheet

Manajemen Informatika
CSS
(Cascading Style Sheets)

Pengenalan CSS
• CSS adalah mekanisme sederhana style sheet yang
mengijinkan desiner dan user untuk menempatkan
style, misalnya huruf, warna dan spasi ke dalam
dokumen HTML.
• CSS terdiri dari 3 bagian : selector, property dan value.
• Deklarator : perintah CSS untuk menentukan format
tampilan, misalnya font-size dengan nilai tertentu.
• Selector : nama-nama yang diberikan untuk style-style
yang berbeda baik itu style internal maupun eksternal.
selector { property: value; }

• Ada beberapa cara untuk memasukkan CSS ke dalam
dokumen HTML:
1. Menyisipkan CSS langsung ke dalam tag HTML (Inline
Styles).
contoh:
<h2
style=“color:red;background:black;”>
This is a red heading with a black
background</h2>

2. Dengan menaruhnya di dalam header dokumen html (Internal
Style).
<head>
<style>

</style>
</head>
<body>
<p>Saat ini saya sedang belajar CSS</p>
<p>dan</p>memiliki format yang sama</p>
</body>

3. Membuat file CSS tersendiri yang terpisah dari
dokumen HTML (External Style)
<link rel=“stylesheet”
type=“text/css” href=“mystyles.css”>

Jenis Selector
1. Selector ID
• Selector ini ditandai dengan tanda # (pagar).
<style type="text/css">
#Tulisan
{ color : red;
font-family : Arial;
font-size : 18pt }
</style>
• Cara pemanggilan ID diatas:
<body>
<p id=“Tulisan”>Just Tes</p>
</body>

2. Selector class
• Selector class ditandai dengan tanda .(dot)
.center
{
font-weight:bold;
background-position : Center;
}
• Cara pemanggilan ID diatas:
<body class=“center”>
</body>

Inline Styles
<body>
<p>Thanks for visiting my web site. I
hope you enjoy it.
</p>
<p style="font-size:16pt">This site will
be moving soon. Please check periodically
for updates. </p>
<p style="font-size:20pt; color:#0000ff">
This text has the <em>font-size</em> and
making it 20pt and blue.</p>
</body>

Linking Eksternal Styles
eksternal.css
h1 {color : red }
div { background-color:#ffccff;
font-size: 14pt;
color : blue}
body {background-color:#33FF66}
h3 { font-size: 12pt;
color: #FF0000}

eksternal_style.html
<link rel="stylesheet" type="text/css"
href="eksternal.css"/>
<body>
<h1>Shopping list</h1>
<ul>
<li>Milk</li>
<li>Bread
</li>
</ul>
<p><div> Terimakasih atas perhatiannya
</p></div>
</body>

Elemen: Dimensi
div { background-color:#ffccff;
}
</style>
<body>
<div style = "width:80%; text-align:center">
Selamat datang di website baru saya. Saya
baru belajar membuat web.</div>
<div style = "width:20%; height:10%;"> Saya
baru belajar membuat web. Mohon dikoreksi
jika ada yang salah.</div>
</body>

User Style Sheet
.note { font-size : 14pt;
color : red }
body { font-size : 20pt;
background-color : silver }
</style>
<body>
<p>Thanks for visiting my web site.</p>
<p class="note">Please Note : This site will
be moving soon. Please check periodically
for updates.</p>
</body>

Desain Web, introduction about casacading style sheet

More Related Content

Similar to Desain Web, introduction about casacading style sheet

Recently uploaded

Desain Web, introduction about casacading style sheet