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> </body> |
You can insert the CSS code between the <head> … </head> and <body> … </body> section
| <html> <style type="text/css"> </head> </body> |
The CSS code for adding border, margin and floating the images left
| div.im |
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> <style type="text/css"> </head> <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> |
Thanks for reading the article!
Post a Comment