BELAJAR
CSS
CSS
Tutorial
1.
CSS Home
Examples in Each Chapter
·
Penjelasan:
Di
gunakan untuk memberi warna background, warna text, mengubah jenis text, dan
ukuran font.
·
Script:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
</style>
</head>
<body>
<h1>My
First CSS Example</h1>
<p>This
is a paragraph.</p>
</body>
</html>
·
Output:
2.
CSS Syntax
CSS Example
·
Penjelasan:
Di
gunakan untuk mengatur style warna text, dan posisi text.
·
Script:
<!DOCTYPE
html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>^_^Hello
World!^_^</p>
<p>This
paragraph is styled with CSS.</p>
</body>
</html>
·
Output:
CSS Comments
·
Penjelasan:
Di
gunakan untuk menerangkan code, dan membantu ketika mengedit source code.
·
Script:
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a
multi-line
comment */
</style>
</head>
<body>
<p>Hello
World!</p>
<p>This
paragraph is styled with CSS.</p>
<p>CSS
comments are not shown in the output.</p>
·
Output:
3.
CSS Selectors
The Element Selector
·
Penjelasan:
Di gunakan untuk mengatur style dan menulis
paragraph.
·
Script:
<!DOCTYPE
html>
<html>
<head>
<style>
p
{
text-align: center;
color: green;
}
</style>
</head>
<body>
<p>Every
paragraph will be affected by the style.</p>
<p
id="para1">XD^^</p>
<p>:D:P</p>
</body>
</html>
·
Output:
The id Selector
·
Penjelasan:
Di
gunakan untuk membuat paragraph – paragraph.
·
Script:
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p
id="para1">^_^:P</p>
<p>This
paragraph is not affected by the style.</p>
·
Output:
The class Selector
·
Penjelasan:
Di
gunakan untuk mengatur style warna text, posisi heading dan paragraph.
·
Script:
.center {
text-align: center;
color: green;
}
</style>
</head>
<body>
<h1
class="center">green and center-aligned heading</h1>
<p
class="center">green and center-aligned paragraph.</p>
·
Output:
Grouping Selectors
·
Penjelasan:
Di
gunakan untuk menyamakan style heading.
·
Script:
h1, h2, p {
text-align: center;
color: green;
}
</style>
</head>
<body>
<h1>Hello
World!</h1>
<h2>Semangat!!^_^</h2>
<p>This
is a paragraph.</p>
·
Output:
4.
CSS How To
Internal Style Sheet
·
Penjelasan:
Di
gunakan untuk mebuat style yang unik, dengan menambah background color.
·
Script:
<!DOCTYPE
html>
<html>
<head>
<style>
body {
background-color: pink;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This
is a heading</h1>
<p>This
is a paragraph.</p>
</body>
</html>
·
Output:
Inline Styles
·
Penjelasan:
Di
gunakan untuk memberi style warna pada heading.
·
Script:
<h1
style="color:blue;margin-left:30px;">This is a heading.</h1>
<p>This
is a paragraph.</p>
·
Output:
Multiple Style Sheets
·
Penjelasan:
Di
gunakan untuk mengombinasikan external stylesheet dan internal style.
·
Script:
<link
rel="stylesheet" type="text/css"
href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>This
is a heading</h1>
<p>The
style of this document is a combination of an external stylesheet, and internal
style</p>
·
Output:
Cascading Order
·
Penjelasan:
Di
gunakan untuk external style sheet, internal style sheet, inline style.
·
Script:
<link
rel="stylesheet" type="text/css"
href="mystyle.css">
<style>
body
{background-color: linen;}
</style>
</head>
<body
style="background-color: lightcyan">
<h1>Multiple
Styles Will Cascade into One</h1>
<p>In
this example, the background color is set inline, in an internal stylesheet,
and in an external stylesheet.</p>
<p>Try
experimenting by removing styles to see how the cascading stylesheets work.
(try removing the inline first, then the internal, then the external)</p>
·
Output:
5.
CSS Background
Background Color
·
Penjelasan:
Di
gunakan untuk memberi warna pada background.
·
Script:
<!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>
</html>
·
Output:
Color Values
·
Penjelasan:
Di
gunakan untuk memberikan warna yang berbeda – beda tiap baris.
·
Script:
h1 {
background-color: #6495ed;
}
p {
background-color: #e0ffff;
}
div {
background-color: #b0c4de;
}
</style>
</head>
<body>
<h1>CSS
background-color example!</h1>
<div>
This is a
text inside a div element.
<p>This
paragraph has its own background color.</p>
We are
still in the div element.
</div>
·
Output:
Background Image
·
Penjelasan:
Di
gunakan untuk menyisipkan gambar, menjadi background.
·
Script:
body {
background-image: url("g.jpg");
}
</style>
</head>
<body>
<h1>Fuji
yama, Japan,.</h1>
·
Output:
Background Image2
·
Penjelasan:
Di
gunakan untuk mengombinasikan text dengan background image.
·
Script:
body {
background-image: url("g.jpg");
}
</style>
</head>
<body>
<h1>Hello
World!</h1>
<p>This
text is not easy to read on this background image.</p>
·
Output:
Set Position and no –
repeat
·
Penjelasan:
Di gunakan untuk menunjukkan gambar dari background repeat property.
·
Script:
body {
background-image: url("g.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Hello
World!</h1>
<p>W3Schools
background image example.</p>
<p>The
background image is only showing once, but it is disturbing the
reader!</p>
·
Output:
Set Position and no –
repeat2
·
Penjelasan:
Di
gunakan untuk mengubah posisi background.
·
Script:
body {
background-image: url("g.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>fuji
yama,Japan</h1>
<p>W3Schools
background no-repeat, set position example.</p>
<p>Now
the background image is only shown once, and positioned away from the
text.</p>
<p>In
this example we have also added a margin on the right side, so the background
image will never disturb the text.</p>
·
Output:
6.
CSS Text
Text Color
·
Penjelasan:
Di
gunakan untuk memberi warna pada text.
·
Script:
<!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>
</html>
·
Output:
Text Alignment
·
Penjelasan:
Di
gunakan untuk mengatur posisi text.
·
Script:
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
</style>
</head>
<body>
<h1>CSS
text-align Example</h1>
<p
class="date">April, 2016</p>
<p
class="main">In my younger and more vulnerable years my father
gave me some advice that I've been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me,
'just
remember that all the people in this world haven't had the advantages that
you've had.'</p>
·
Output:
Text Decoration
·
Penjelasan:
Berfungsi
untuk mendekorasi text, dengan menambah link.
·
Script:
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>Link
to: <a
href="../index.html">rakanurwahyudi.blogspot.com</a></p>
·
Output:
Text Decoration2
·
Penjelasan:
Di
gunakan untuk mendekorasi text berupa overline, line – through, underline.
·
Script:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>This
is heading 1</h1>
<h2>This
is heading 2</h2>
<h3>This
is heading 3</h3>
·
Output:
Text
Transformation
·
Penjelasan:
Di
gunakan untuk mentransformasi bentuk huruf.
·
Script:
p.uppercase
{
text-transform: uppercase;
}
p.lowercase
{
text-transform: lowercase;
}
p.capitalize
{
text-transform: capitalize;
}
</style>
</head>
<body>
<p
class="uppercase">This is some text.</p>
<p
class="lowercase">This is some text.</p>
<p
class="capitalize">This is some text.</p>
·
Output:
Text Indentation
·
Penjelasan:
Berfungsi
memberikan indentation diawal paragraph.
·
Script:
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>In
my younger and more vulnerable years my father gave me some advice that I've
been turning over in my mind ever since. 'Whenever you feel like criticizing
anyone,' he told me, 'just remember that all the people in this world haven't
had the advantages that you've had.'</p>
·
Output:
0 comments:
Post a Comment