WELCOME ~ SELAMAT DATANG DI MYBLOG INDRA DARI SMK WIKRAMA 1 JEPARA

Jumat, 04 Agustus 2017

CSS how to/CSS cara

Assalamualaikum Wr.wb

Hari ini saya akan memposting cara pengunaan  css

A.Pengertian:

CSS adalah bahasa yang menggambarkan gaya dari sebuah dokumen HTML.
CSS menjelaskan bagaimana elemen HTML harus ditampilkan.

B.Alat dan bahan:
1.pc
2.xampp
3.sublime

C.Langkah tahapan ada 3  cara yaitu:
1.Eksternal Style Sheet
Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah hanya satu file!
Setiap halaman harus menyertakan referensi ke file style sheet eksternal dalam <link> elemen. The <link> elemen berjalan di dalam <head> bagian:

#membuat folder css
#tulis script seperti dibawah ini menggunakan sublime text dengan nama index.html lalu simpan

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

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

</body>
</html>

#lalu buka di web browser localhost/css/index.html



2.Style Sheet internal
Style sheet internal dapat digunakan jika satu halaman tunggal memiliki gaya yang unik.
Gaya internal didefinisikan dalam <style> elemen, dalam <head> bagian dari halaman HTML:

#tulis script seperti di bawah ini menggunakan sublime dengan nama index2.html

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>
<body>

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

</body>
</html>

#lalu buka di web browser localhost/css/index2.html


3.Gaya inline
Gaya inline dapat digunakan untuk menerapkan gaya yang unik untuk elemen tunggal.
Untuk menggunakan gaya inline, menambahkan atribut style untuk elemen yang relevan. Atribut style dapat berisi properti CSS.
Contoh di bawah ini menunjukkan bagaimana untuk mengubah warna dan margin kiri dari <h1> elemen:

#Tulis script seperti dibawah ini dengan nama index3.html

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

#Buka web browser localhost/css/index3.html


D.Latar belakang:

Kewajiban siswa blc setelah mempelajari sesuatu wajib di posting guna menjadi laporan pada waktu pulang dan agar terbiasa bila melalukukan atau mengerjakan sesuatu membagikan ke publik.

E.Maksud tujuan:
Pembaca bisa mengetahui tentang css dan penggunaan cara.

F.Referensi:
w3school.com.

Sekian terimakasih semoga bermanfaat.



Wassalamu’alaikum Warahmatullahi Wabarakaatuh.

0 komentar:

Posting Komentar

luvne.com ayeey.com cicicookies.com mbepp.com kumpulanrumusnya.comnya.com tipscantiknya.com