Pewarnaan
style2.css
/*
nama, hexa, rgba
rgba = maks
rgb = 255
a = 0 sampai 1
*/
p{
color:red;
}
li{
color:rgb(0,0,255);
}
===========================================================================
2.html
<!DOCTYPE
html>
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<html>
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<head><title></title>
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<link
href="style2.css" rel="stylesheet">
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</head>
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<body>
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<li>list
kedua</li>
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<li>list
ketiga</li>
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</body>
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</html>
==========================================================================
output 
Text css
h1{
text-align:center;
}
#satu{
text-align:right;
text-decoration:underline;
text-transform:uppercase;
letter-spacing:3px;
word-spacing:5px;
}
#dua{
text-transform:lowercase;
/*y x jumlahblur warna*/
text-shadow:2px 2px 2px blue;
}
#tiga{text-transform:capitalize}
#panjang{
text-align:justify;
text-decoration:line-through;
text-indent:30px;
}
a{
text-decoration:none;
}
=========================================================================
Font
h1{
text-align:center;
font-family: arial, serif
}
#satu{
font-size:40px;
font-style:italic;
}
#dua{
/*font-weight utk ketebalan
100 sampai 900
400= normal, 700 = bold
*/
font-weight:700;
font-variant:small-caps;
}
#tiga{text-transform:capitalize}
#panjang{
text-align:justify;
text-decoration:line-through;
text-indent:30px;
}
a{
text-decoration:none;
}
=========================================================================
|
=========================================================================
Menghias Link pseudoclass pada css
/*kondisi berbeda ketika sudah diklik jadi
merah*/
a:visited{
color:red;
}
/*mengubah mouse ketika berada di link
tertentu*/
a:hover{
background-color:yellow;
}
/*ketika link tersebut di klik*/
a:active{
background-color:aqua;
}
a:link{
color:black;
}
<!DOCTYPE
html>
|
|
<html>
|
|
<head><title></title>
|
|
<link
href="style5.css"
rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<h1>Belajar
Style Link</h1>
|
|
<a
href="http://google.com"> Google </a>
|
|
<a
href="http://facebook.com"> facebook
</a>
|
|
<a
href="http://wikipedia.com"> wikipedia
</a>
|
|
</body>
|
|
</html>
=========================================================================
OUPUT
 |
=========================================================================
DISPLAY
/*
display:block !=inline
*/
a{
display:block;
background-color:yellow;
}
p{
display:inline;
}
/*
visibility: menyembunyikan
none: menghilangkan
visibility:hidden;
display:none;
*/
h1{
visibility:hidden;
}
=========================================================================
<!DOCTYPE
html>
|
|
<html>
|
|
<head><title></title>
|
|
<link
href="style6.css"
rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<h1>Belajar
Style Link</h1>
|
|
<a
href="">Google</a>
|
|
<a
href="">facebook</a>
|
|
<a
href="">wikipedia</a>
|
|
<p>paragraf
satu</p>
|
|
<p>paragraf
dua</p>
|
|
</body>
|
|
</html>
|
=========================================================================
Output
=========================================================================
DIMENSI
=========================================================================
/*
dimensi
*/
#satu{
background-color:aqua;
width:100px;
height:100px;
}
#dua{
/*comment;*/
background-color:aqua;
width:50%;
height:100px;
max-width:140px;
min-width:
}
=========================================================================
<!DOCTYPE
html>
|
|
<html>
|
|
<link
href="style7.css"
rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<h1>Belajar
Dimensi </h1>
|
|
<p
id="satu">paragraf satu</p>
|
|
<p
id="dua">paragraf dua</p>
|
|
</body>
|
|
</html>
=========================================================================
OUTPUT
 |
0 Response to "belajar css 1"
Posting Komentar