Apparel Software

CSS Programming for Wordpress Website Part1

CSS Programming for Wordpress Website Part1
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:


CSS Introduction

For a square box / Rectangular box we need to remember 
  • Wide
  • Height
  • Background Colour and 
  • Float
Class and ID is very important terms of CSS. Here . class and #id is indicated.

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 





Share :

Facebook Twitter Google+
0 Komentar untuk "CSS Programming for Wordpress Website Part1"

Back To Top