CSS

Macan macam CSS

1.       Background Image

Menambahkan gambar background

body
{
background-image:url('gradient2.png');
}

2.       Link Background  Color

Menambahkan  warna background

a:link {background-color:#B2FF99;}

3.       Link Style

Menggunakan underline pada link

a:hover {text-decoration:underline;}

4.       Table border

Mengatur border tabel

table, th, td
{
border: 1px solid black;
}

5.       Table Width and Height

Mengatur width and height pada tabel

table
{
width:100%;
}
th
{
height:50px;
}

6.       Table padding

Mengatur table padding

td
{
padding:15px;
}

7.       Table Color

Memberikan warna pada table

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

8.       Font Family

Mengatur  jenis  font

p{

font-family: "Arial Black", Gadget, sans-serif;

}

dan

p{

font-family: serif;

}

9.       Font Style

Mengatur style font

p{
font-style:italic; 
}

10.   Collapse Borders

table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

11.   Border  Width

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

12.Grouping Selector

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

13.Border – Individual sides

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

14.Navigation Bar

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

15.Attribute Selector

[title]
{
color:blue;
}

16.Fixed positioning

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

17.Absolute positioning

h2
{
position:absolute;
left:100px;
top:150px;
}

18.          Overlapping Elements

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

19.Floating elements next to each other

.thumbnail 
{
float:left;
width:110px;
height:90px;
margin:5px;
}

20.Turning off Floating

.text_line
{
clear:both;
}