4 CSS important property- CSS image, link , div & CSS comments property

CSS Comments:

CSS comments are used to describe our css code and the next time if we wanted to edit or change the main code, it can help us. Comments are not visible to the users or browser. CSS comment starts with by the symbol of /* and ends with */.

Sometimes you or your partner comments mentioned in the source document may be quite useful. Though comments are not displayed in the browser even, in cases of any big web site creation where and why for which purpose a property has been used, If the topics is mentioned as a comments with each property then it is quite simple to correction or addition for web developers in the next time. CSS has own comment syntax (Rules).

CSS Comments Rules : /* comment goes here */

When are read the style sheets in the middle of writing / * and * / are discarded. That means you can write comment anywhere on a style sheets, even in the middle of a rule.

CSS div:

Div element is the foundation of CSS. Because of the length and width can be set easily. Even in the prescribed text, color, style, and determine the location of web pages can be animated.

Create Division:

Example:

<html>
<head>
<style type="text/css"></style>
</head>
<body>
<img src="computer.jpg" width="124" height="124">
</body>

</html>

Display in Browser:

div

Adding a second div: The first div of the same class name, using the same format can now add a second div. For example, consider the following:

Example:

<!doctype html>
<html>
<head>
<title>CSS div</title>
</head>
<style>
body{font-family:verdana;}
.txt_block{border: 1px solid red; width: 300px; height: 100px; left:10px; top:50px;}
</style>
<body>
<h2>CSS Example-Create Div</h2>
<div class="txt_block">
<p>A paragraph of text for this example</p>
</div>
<div class="txt_block">
<p>A second paragraph of text for this example</p>
</div>


</div>
</body>
</html>

Display in Browser:

div2

Positioning of the div: We have two div to each other as well as the US will use the CSS float style. As a result of using this style, the two can be seen floating div on the left side of the web page. The first and second div div on the left side of the page will be the first side. For example:

Example:

<!doctype html>
<html>
<head>
<title>Css position, Size and space</title>
</head>
<style>
body{font-family:verdana;}
.txt_block{border: 1px solid red; width: 280px; height: 80px; padding-left:10px; float:left;}
</style>
<body>
<h2>CSS position the divs example</h2>
<div class="txt_block">
<p>A paragraph of text for this example</p>
</div>
<div class="txt_block">
<p>A second paragraph of text for this example</p>
</div>


</div>
</body>
</html>

 

 

Display in Browser:

css div position

DIV spacing values: To add some space between div as shown in the following example, we’ll add div of the right hand margin of 0 pixels.

Example:

<!doctype html>
<html>
<head>
<title>Css position, Size and space</title>
</head>
<style>
body{font-family:verdana;}
.txt_block{border: 1px solid red; width: 260px; height: 90px; padding-left:10px; float:left; margin-right:20px;}
</style>
<body>
<h2>CSS position the divs example</h2>
<div class="txt_block">
<p>A paragraph of text for this example</p>
</div>
<div class="txt_block">
<p>A second paragraph of text for this example</p>
</div>


</div>
</body>
</html>

Display in Browser:

css position space

 

CSS image property:

To set the image border:

Using CSS properties can be added to the image of the four sides of the border.

Example:

<html>
<head>
<style type="text/css"></style>
</head>
<body>
<img src="computer.jpg" width="124" height="124">
</body>

</html>
Display in Browser:
css image

An alternative method of image size change:

Weight and height of the image using the property only of the size or length or both can be changed. This property is used with values ​​PX,%, and auto.

Example:

<html>
<head>
<style type="text/css">
#example1{width:200px; height:200px;}
#example2{width:200px; height:300px;}
#example3{width:200px; height:350px;}
#example4{width:200px; height:250px;}


</style>
</head>
<body>
<p><img src="flower.jpg" id="example1"> (W:200; H:200;)</p>
<p><img src="flower.jpg" id="example2"> (W:200; H:300;)</p>
<p><img src="flower.jpg" id="example3"> (W:200; H:350;)</p>
<p><img src="flower.jpg" id="example4"> (W:200; H:250;)</p>

</body>

</html>

An alternative method to determine the zoom level of the image:

Zoom property can be set using the zoom level of the image. The property values ​​are used with number, %, normal.

Image vertical-align property:

Example:

<html>
<head>
<style type="text/css">
#example1{vertical-align: baseline;}
#example2{vertical-align: top;}
#example3{vertical-align: tex-top;}



</style>
</head>
<body>
<p><img src="flower.jpg" id="example1"> (W:200; H:200;)</p>
<p><img src="flower.jpg" id="example2"> (W:200; H:200;)</p>
<p><img src="flower.jpg" id="example3"> (W:200; H:200;)</p>
<p><img src="flower.jpg" id="example4"> (W:200; H:200;)</p>

</body>

</html>
Display in Browser:
image vertical

An alternative method of image set margin:

Using the properties, margin-bottom on the left and right images can be set. This property is used with values ​​PX, %, auto etc.

Syntax:

Example:

<html>
<head>
<style type="text/css">
#example{width:100%;}
#example img{float:left; margin:20px 40px;}

</style>
</head>
<body>
<div id="example">
<img src="computer.jpg" width="124" height="124">
<p> My name is Ganesh karmakar.<br>My name is Ganesh karmakar.<br>My name is Ganesh karmakar.<br>My name is Ganesh karmakar.<br>My name is Ganesh karmakar.<br>My name is Ganesh karmakar.<br>My name is Ganesh karmakar.<br>My name is Ganesh karmakar.<br>My name is Ganesh karmakar.<br>My name is Ganesh karmakar.<br>My name is Ganesh karmakar.<br>My name is Ganesh karmakar.<br>My name is Ganesh karmakar.<br>My name is Ganesh karmakar.<br>My name is Ganesh karmakar.<br>
...........</p>
</div>
</body>

</html>

CSS link property:

<a> Using HTML web page link can be made, but a number of links to the state. The State values: link, visited, focus, and active use of the pseudo class are applied. Most browsers for unvisited links blue and purple color for visited links are used as the default color. Custom colors can be used, but the State of the difference must be visible to each other. Œ a link to the State in the form of lower –

: Link – it still has not visited is used to define the style of hyperlinks.
: Visited- visited is used to set the style of hyperlinks.
: Hover – decorate hyperlink away when the mouse is placed on.
: Active – Hyperlink style set by each user to click or select.
: Focus – Hyperlink style to determine when the mouse pointer is to focus on the element.

Example: horizontal navigation

<!DOCTYPE html>
<html>
<head>
<style>
  body{font-family:Verdana;}
a:link {color:red;}    /* for unvisited link */
a:visited {color:blue;} /* for visited link */
a:hover {color:green;}   /* on hovering over the link  */
a:active {color:yellow;}  /* when hyperlink clicked */
a:focus{color:black;} /* when focused on link*/
</style>
</head>
<body>
<p><b><a href="index.php" target="_blank">Click the Hyperlink</a></b></p>
<small><b>Note:</b> The order of CSS definition must be
<b>:link > visted > hover > active > focus </b> .</small>
</body>
</html>

Display in Browser:

css link

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *