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!

Thanks for reading my news about Have Fun Learning CSS at my blog Tic Droid if you want too share this article, please put the resource, and if you think this article is very usefully dont forget to bookmark this site with CTRL + D on your keyboard to web browser.

New and Hot Article's :

  • Custom Rom Mokee Lollipop for Lenovo A7000
  • [Custom ROM] [MTK6753] MIUI 8.2 v7.1.5 Marshmallow For Lenovo K4 Note A7010a48
  • How to Charge iPhone 7 and any other iPhone device wirelessly
  • How to ROOT Almost ALL Android Phones
  • Cara Root dan Pasang TWRP di Xiaomi Redmi 3s | Prime
  • Galaxy S7 and S7 Edge Android 7.1.1 Nougat update rolling out on January of 2017
  • Make your Internet Browsing Speed more faster than ever before with the recommended apps
  • Spesifikasi Andromax B (A26C4H) 4G LTE Dengan Fitur VOWIFI
  • [ROM] MIUI V7 For Cherry Mobile Flare S3 Octa
  • How to Increase Wi-Fi Connection Time
  • More Articles :