Senin, 11 April 2016

CSS TUTORIAL

1. Syntax, CSS syntax adalah Sebuah aturan CSS memiliki dua bagian utama: Selector dan Deklarasi (style).
h1/selector : elemen HTML anda yang ingin dibuat style kan (membuat gaya pada CSS)
Declaration : element yang terdiri dari properti-properti dan nilai-nilai.
Property : atribut style yang ingin anda ubah .contoh : (color di ubah menjadi background-color )
Value : nilai-nilai ataupun kode-kode yang menetukan besar ,warna,lebar,panjang dan lain-lain pada propety
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green;
text-align: center;
}
</style>
</head>
<body>

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>

</body>

<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_syntax1 by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:32:38 GMT -->
</html>

Hasil :


2. Selectors, CSS selector memungkinkan Anda untuk memilih dan memanipulasi elemen HTML.
CSS digunakan untuk "menemukan" (atau pilih) elemen HTML berdasarkan mereka id, kelas, jenis, atribut, dan banyak lagi.
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: left;
color: pink;
}
</style>
</head>
<body>

<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>

<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:23:01 GMT -->
</html>

Hasil :


 









3. How To, Ketika browser membaca style sheet, itu akan memformat dokumen sesuai dengan informasi dalam style sheet.
Contoh :

<!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>

<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_howto_internal by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:32:39 GMT -->
</html>

Hasil :

 












4. Backgrounds, digunakan untuk menentukan efek latar belakang suatu elemen.
properti CSS digunakan untuk efek latar belakang:
warna latar belakang, gambar latar belakang, background-repeat, background-attachment, background-position
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #b0c4de;
}
</style>
</head>
<body>

<h1>My CSS web page!</h1>
<p>Hello world! This is a W3Schools.com example.</p>

</body>

<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_background-color_body by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:23:02 GMT -->
</html>

Hasil :

5. Text, teks nya ditata dengan beberapa properti format teks. judul menggunakan text-align, text-transform, dan sifat warna. paragraf menjorok, selaras, dan ruang antara karakter ditentukan. menggarisbawahi akan dihapus dari "Cobalah sendiri" link.
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
}

h1 {
color: #00ff00;
}

p.ex {
color: rgb(0,0,255);
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>

</body>

<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_color by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:23:05 GMT -->
</html>

Hasil :

6. Font, properti font CSS mendefinisikan font keluarga, keberanian, ukuran, dan gaya teks.
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}
</style>
</head>
<body>

<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>

</body>

<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_font-style by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:23:09 GMT -->
</html>

Hasil :

7. Links, Link dapat ditata dengan cara yang berbeda.
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */
a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}
</style>
</head>
<body>

<p><b><a href="default.html" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>

<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_link by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:23:10 GMT -->
</html>

Hasil :

8. Lists, Sifat CSS List memungkinkan Anda untuk:
Set yang berbeda spidol item daftar untuk daftar memerintahkan. Set yang berbeda spidol item daftar untuk daftar unordered, Mengatur foto sebagai item daftar penanda
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>

<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>

<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type_ex by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:32:42 GMT -->
</html>

Hasil :

9. Tables, Untuk menentukan batas tabel dalam CSS, menggunakan properti perbatasan.
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>

</body>

<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_table_border by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:23:13 GMT -->
</html>

Hasil :
H

10. Boxmodel, Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah "model kotak" digunakan ketika berbicara tentang desain dan tata letak.
Kotak CSS Model pada dasarnya adalah sebuah kotak yang membungkus di sekitar elemen HTML, dan terdiri dari: margin, perbatasan, padding, dan konten yang sebenarnya.
Model kotak memungkinkan kita untuk menambahkan perbatasan sekitar elemen, dan untuk menentukan ruang antara unsur-unsur.
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
</style>
</head>
<body>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>

<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:32:42 GMT -->
</html>

Hasil :
























11. Border, memungkinkan Anda untuk menentukan gaya, ukuran, dan warna perbatasan elemen ini.
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: purple;
}

p.two {
border-style: solid;
border-color: #98bf21;
}
</style>
</head>
<body>

<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>

<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_border-color1 by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:32:42 GMT -->
</html>

Hasil :

12. Outline, Garis adalah garis yang ditarik sekitar elemen (luar perbatasan) untuk membuat elemen "menonjol". Sifat garis menentukan gaya, warna, dan lebar garis.
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid red;
outline-style: dotted;
outline-color: #00ff00;
}
</style>
</head>
<body>

<p><b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.</p>

</body>

<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_outline-color by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:23:23 GMT -->
</html>

Hasil :

13. Margin, Sifat CSS margin yang mendefinisikan ruang di sekitar elemen.
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
}

p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
</style>
</head>
<body>

<p>This is a paragraph with no specified margins.</p>
<p class="ex">This is a paragraph with specified margins.</p>

</body>

<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_margin_sides by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:23:23 GMT -->
</html>

Hasil :

14. Padding, Sifat CSS Padding mendefinisikan ruang antara perbatasan elemen dan isi elemen.
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}

p.padding {
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}
</style>
</head>
<body>

<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>

</body>

<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_padding_sides by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:32:43 GMT -->
</html>

Hasil :

Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)