CSS Programming for Wordpress Website Part1

Thursday, February 23, 2017

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>

<title>Untitled Document</title>

</head>

<body>

<div class="box1">CIW-WEB DESIGN</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

Lectra Wilcom