Max Gadget

Max Gadget, GPG Dragon Latest Version, Install Android, Sony Xperia, Xiaomi Mi Robot Vacuum, Verizon, Android Marshmallow, Network, stock firmware

» Unlabelled » Have Fun Learning CSS
Minggu, 06 Maret 2011

Have Fun Learning CSS

By di
Have Fun Learning CSS - this blog we have built a few years ago and already very many blog visitors Max Gadget who are satisfied with the information we convey and we say thanks for that, we will then improve the quality of information we convey to you, well according to what you are looking for we will now discuss first about Have Fun Learning CSS this information we framework from various trusted sources, please see:

Articles : Have Fun Learning CSS
full Link : Have Fun Learning CSS

You can also see our article on:


Have Fun Learning CSS

Cascading Style Sheets (CSS) is a style sheet language designed for the look and formatting of web pages written in HTML.

Sample design





Cool right?

I’ve been busy learning several introductory topics and technologies from Asp.net, CSS, Ajax, Microsoft AJAX and Javascript for three weeks now. I already had some background for the languages designed for engineering purposes but for website design – none.

I’m going to share some of my experiences along the way.

Open your Notepad or you can use the free Visual Web Developer Express Edition and try learning CSS…


Default HTML Code

<html>
<head>

</head>
<body>

</body>
</html>

You can insert the CSS code between the <head> … </head> and <body> … </body> section

<html>
<head>

<style type="text/css">
div.im
{
margin: 3px;
border: 1px solid #000fff;
float: left;
}
div.im a:hover im {border: 3px solid #96cf23;}
</style>

</head>
<body>

</body>
</html>

The CSS code for adding border, margin and floating the images left

div.im
{
margin: 3px;
border: 1px solid #000fff;
float: left;
}

Adding a hover effect once the mouse is located on top of the image

div.im a:hover im {border: 3px solid #96cf23;}

In the <body> … </body> section, lets try using the CSS code using an image.

Default syntax for Image with specified ID, Height and Width

<img src="star.jpg" id="1" height = "90" width = "100"/>

Finalized code

<html>
<head>

<style type="text/css">
div.im
{
margin: 3px;
border: 1px solid #000fff;
float: left;
}
div.im a:hover img {border: 3px solid #96cf23;}
</style>

</head>
<body>

<div class="im"><a href="#"><img id="1" src="http://windowsforus.com/y3/star.jpg" width="110" height="90" /></a> </div>

<div class="im"><a href="#"><img id="2" src="http://windowsforus.com/y3/star.jpg" width="110" height="90" /></a> </div>

<div class="im"><a href="#"><img id="3" src="http://windowsforus.com/y3/star.jpg" width="110" height="90" /></a> </div>

<br clear="all" />

</body>
</html>

Thanks for reading the article!



so much information Have Fun Learning CSS

hopefully the information Have Fun Learning CSS that we convey can make you satisfied because it can be useful to determine the gadget according to your needs.

you just read the article titled Have Fun Learning CSS if you feel this information is useful and want to bookmark or share please use the link http://maxyaquos.blogspot.com/2011/03/have-fun-learning-css.html do not forget to go back to this blog to get more information about gadgets.

Tag :
Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Have Fun Learning CSS

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)