Home » Uncategories » belajar css 2
Edit

belajar css 2


BOXMODEL
=========================================================================
/*

BoxModel

*/
#satu{
       
        background-color:aqua;
        width:100px;
        height:100px;
        padding:40px;
        border: 4px solid black;
        margin:50px;
}
=========================================================================
<!DOCTYPE html>
<html>
<head><title></title>
<link href="style8.css" rel="stylesheet">
</head>
<body>
<h1>Box Model </h1>
<p id="satu">Box Model</p>
<p id="dua">paragraf dua</p>
</body>
</html>
=========================================================================
Output







=========================================================================
boxmodelMargin
/*

BoxModel

Margin

*/
#satu{
        /*margin: atas kanan bawah kiri*/
margin-top: 100px;
margin-left:20px;
       
}

#dua{
        /*margin: atas kanan bawah kiri*/
        margin:50px 100px;
}


#tiga{
        /*
       
        kalo penulisan spti
        margin:50px ;
        brrti :
        margin atas 50px;
        margin-left: 50 px jg
       
       
        */
        margin:50px ;
}
=========================================================================



<!DOCTYPE html>
<html>
<head><title></title>
<link href="style9.css" rel="stylesheet">
</head>
<body>
<h1>Box Model 1 </h1>
<p id="satu">Box Model</p>
<p id="dua">Box Model2</p>
<p id="tiga">Box Model3</p>
</body>
</html>
=========================================================================
OUTPUT


=========================================================================

=========================================================================

BOXMODEL BORDER
=========================================================================


/*

BoxModel

Margin

*/
#satu{
       
        border-style:dotted;
        border-width:10px;
        border-top-style:dashed;
       
}

#dua{
        /*margin: atas kanan bawah kiri*/
        border-style:dashed;
}
#tiga{
        /* ketebalan ato widht, dorder-style, bolder-color*/
        border : 10px dashed red;
}
=========================================================================
<!DOCTYPE html>
<html>
<head><title></title>
<link href="style10.css" rel="stylesheet">
</head>
<body>
<h1>Box Model 1 </h1>
<p id="satu">Box Model</p>
<p id="dua">Box Model2</p>
<p id="tiga">Box Model3</p>
</body>
</html>
=========================================================================
Output


=========================================================================
BOXMODEL  padding


/*

BoxModel

Margin

*/
#satu{
       
        border : 4px solid black;
        padding-top: 10px;
        padding-left: 50px;
       
       
       
}

#dua{
        background-color:yellow;
        border : 4px solid black;
        padding;20px 20px;
}

#tiga{
}

=========================================================================

<!DOCTYPE html>
<html>
<head><title></title>
<link href="style11.css" rel="stylesheet">
</head>
<body>
<h1>Box Model 1 </h1>
<p id="satu">Box Model</p>
<p id="dua">Box Model2</p>
<p id="tiga">Box Model3</p>
</body>
</html>

=========================================================================
Output

=========================================================================
=========================================================================
POSITION RELATIVE
=========================================================================
/* belajar CSS 101 */
/* POSITION: fixed, absolute, relative, static*/

p{
        font-size:20px;
        padding:10px;
}

#satu{
        background-color:red;
        position:relative;
        top :10px;
        left:20px;
}
#dua{
        background-color:green;
}
#tiga{
        background-color:yellow;
}
#empat{
        background-color:blue;
}
=========================================================================
<!DOCTYPE html>
<html>
<head><title></title>
<link href="style12.css" rel="stylesheet">
</head>
<body>
<h1>Belajar CSS</h1>
<p id="satu">Box 1</p>
<p id="dua">Box 2</p>
<p id="tiga">Box 3</p>
<p id="empat">Box 4</p>
</body>
</html>
=========================================================================
OUTPUT
=========================================================================

=========================================================================

POSITION FIXED
/* belajar CSS 101 */
/* POSITION: fixed, absolute, relative, static*/

p{
        font-size:40px;
        padding:10px;
        width:100%;
}
/*
fixed: tergantung pada browser;
anti scroll;
posisi awal dianggap hilang;

*/
#satu{
        background-color:red;
        position:fixed;
        top:100px;
        left:20px;
       
}
#dua{
        background-color:green;
}
#tiga{
        background-color:yellow;
}
#empat{
        background-color:blue;
}

=========================================================================
<!DOCTYPE html>
<html>
<head><title></title>
<link href="style13.css" rel="stylesheet">
</head>
<body>
<h1>Belajar CSS</h1>
<p id="satu">Box 1</p>
<p id="dua">Box 2</p>
<p id="tiga">Box 3</p>
<p id="empat">Box 4</p>
</body>
</html>
=========================================================================
Output


0 Response to "belajar css 2"

Posting Komentar

Langganan: Posting Komentar (Atom)