CSS Code (04/02/2017):
@charset "utf-8";
/* CSS Document */
body
{background-color:#030;
}
.box1{ width:200px; background-color:#E96349; float:left;
height:200px; border:5px dotted #FFF; color:#09F; font-weight:bolder; font-size:24px;}
.box1:hover
{ background-color: #FFF;}
.box2{ width:200px; background-color: #CF0;
margin:200px 0px 0px 0px; float:left; height:200px;}
.box3{ width:200px; background-color:#4C18B4;
float:left; height:200px; margin-top:400px;}
HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box1">CIW-WEB DESIGN</div>
<div class="box2"> </div>
<div class="box3"> </div>
</body>
</html>
Result of the above code:
Margin: Margin works outside of box or cell
Padding: Margin works insight of box or cell
Padding + Margin + Border this three thing is added with total width.
Border: Border have three activities
Result of the above code:
CSS Introduction
For a square box / Rectangular box we need to remember
- Wide
- Height
- Background Colour and
- Float
Margin: Margin works outside of box or cell
Padding: Margin works insight of box or cell
Padding + Margin + Border this three thing is added with total width.
Border: Border have three activities
- Border Width
- Border Colour
- Border Style
The basic of CSS is .Selector {Property: Value}
CSS Example: .p {text-align:center;}
Internal CSS : Internal CSS is set in head link and it is called in body. Example of internal CSS link <head> style type= "text/css">
p{margin-left: 2px;}
body{background-iage; url("image/background.gif");}
</style>
</head>
Inline CSS : Inline CSS is work without Head.
External CSS: Example of external CSS link - <head> link rel="stylesheet" type = "text/css" href = "mystyle.css" </head>
Div: Generally div works with large place in large element
Span: Generally spanworks with small place in small element
In a box /rectangular, top and bottom is height and left and right is width.
Eg. margin: 0px 5px;
Here 0px means both top and bottom and 5px means left and right
Div: Generally div works with large place in large element
Span: Generally spanworks with small place in small element
In a box /rectangular, top and bottom is height and left and right is width.
Eg. margin: 0px 5px;
Here 0px means both top and bottom and 5px means left and right
0 Komentar untuk "CSS Programming for Wordpress Website Part1"