Web Development & Design Resources

Posts

Showing posts from October, 2012

How to remove the space between cells in tables | CSS tutorial

By Purushothaman Raju - October 23, 2012

Cell’s margin and padding property will have a default value, so by setting the margin and padding to 0 wont remove the gap between cells, to remove these gaps we have use the border-collapse property and set the value to collapse. An example use of border-collapse property:

How to add Border to a table | CSS Tutorial

By Purushothaman Raju - October 23, 2012

Adding border to tables is fairly simple here is an Example HTML <table width="200" border="0"> <tr> <th scope="col">Name</th> <th scope="col">Year</th> <th scope="col">Country</th> </tr> <tr> <td>purush</td> <td>1988</td> <td>India</td> </tr> <tr> <td>Dave</td> <td>1988</td> <td>United States</td> </tr> <tr> <td>Jane</td> <td>1989</td> <td>Canada</td> </tr> <tr> <td>Matthew</td> <td>1999...

How to create a Navigational menu using a list | CSS tutorial

By Purushothaman Raju - October 23, 2012

Transforming a list into a Navigational menu is one of the most popular technique used these days, by just using CSS we can easily transform a list in to visually attractive navigation menu. Here is an Example: HTML Code:

How to rotate images on web pages | Using CSS

By Purushothaman Raju - October 09, 2012

To rotate images using CSS provides something called CSS Transforms which can be used to rotate images gently. result after gently rotating the image using CSS transforms

How to create rounded corners to an Element | How to create border-radius using CSS

By Purushothaman Raju - October 09, 2012

To create rounded corners to an element like an image for example or a <div> we have to use the border-radius property. Here is an example: Result after adding border radius

How to add Drop shadow to Elements | Using CSS

By Purushothaman Raju - October 09, 2012

CSS provides the box-shadow property which allows us to add drop shadows effects to any elements ,

How to add shadow to text | Using CSS

By Purushothaman Raju - October 09, 2012

We can use the text-shadow property to add drop shadow to text,Aadditionally CSS also provides the box-shadow property which can de used set drop shadows to any element. Text Shadow using CSS

How to make an element transparent so that the background shows through | Using CSS

By Purushothaman Raju - October 09, 2012

To make elements transparent we need use the Opacity property and give it value less than 1, why less than 1 because one is the default value and the elements will appear as they are without any transparency, giving the elements a value less than 1 will make it transparent. without opacity

How to add a Background Image that scales with the Browser Window |Using CSS

By Purushothaman Raju - October 09, 2012

To make the background image scale with the browser window we need to use the Background size property with value of cover like so, CSS Code: <style>

Gradient background | Using CSS

By Purushothaman Raju - October 09, 2012

To create a gradient background we have to use the background-image property and set the gradient in CSS like this: Gradient background using CSS

How to Fix a background Image while the page is being Scrolled | Using CSS

By Purushothaman Raju - October 09, 2012

To make a background image static while the content scrolls over it, we have to use the background-attachment property like so, CSS Code: <style> img { background-image: url(background.png);background-attachment:fixed;} </style>

How to add borders to Images | Using CSS

By Purushothaman Raju - October 09, 2012

Often adding borders to images makes it look pretty and professional, but it is a time consuming process to open and edit images in photo editors. CSS makes it easier to add borders, Here is an example: HTML Code: <body> <img src="mypic.jpeg" id="myImageWithoutBorder"/> <img src="mypic.jpeg" id="myImageWithBorder"/> </body> CSS Code: #myImageWithBorder { border-width: 2px; border-style: solid; border-color: #000000; } You can also write compact version of CSS like this img{border:2px solid #000000;}

How to highlight text on the page | Using CSS

By Purushothaman Raju - October 03, 2012

To highlight important text on the page just wrap that important text with the a <span> class and add CSS rules to that span class .

How to remove the default gap between H1 and other HTML elements | Using CSS

By Purushothaman Raju - October 03, 2012

Often it is required to remove the default gap between h1 and other HTML elements for this we have to set the values of margin and padding properties to 0. Here is an Example: <html> <h1>My heading</h1> </html> CSS code to remove the gap h1{ margin:0; padding:0;}

Adding Background color to Headings | using CSS

By Purushothaman Raju - October 03, 2012

To add a background color to any element including heading use the background-color property. <html> <h1>My heading</h1> </html> CSS will look like this <style> h1{ background-color:blue;} </style>

How to remove or change the bullets from Lists by CSS

By Purushothaman Raju - October 03, 2012

To achieve this we have to use the list-style-type property like so: <ul> <li>red </li> <li>blue </li> <li>green</li> </ul> CSS to remove the bullets <style> li{ list-style-type:none; } </style> CSS to change the different bullets <style> li{ list-style-type:circle; } </style> There are different types of bullets you can use here is the list use according to your needs. decimal,disc,aremian,Georgian,hiragana and more.

How to style only the first item in a list

By Purushothaman Raju - October 03, 2012

To achieve this we have to deploy the child selector like so. <ul> <li>red </li> <li>blue </li> <li>green</li> </ul> CSS: <style> li:first-child{color: red;} </style>

How to create link that changes color when hovering mouse over it

By Purushothaman Raju - October 03, 2012

This is quite simple all we need to do is to use the pseudo classes to achieve this effect. Here is how you can achieve this effect <html> <a href=”somepage.html”>My Page LInk</a> </html> CSS to change color of link when hovering over it: <style> a:hover{color:#FC0;} </style>

How to Remove Underlines from Links

By Purushothaman Raju - October 02, 2012

Links are underlined my default to indicate that the text on the web page links to another page. To remove this default behavior we have to use the text-decoration property and set the value to none like so <html> <a href=”somepage.html”>My Page LInk</a> </html> CSS to remove underline: <style> a {text-decoration: none;} </style>

How to define Inline Styles in CSS

By Purushothaman Raju - October 01, 2012

The simplest method of adding CSS styles to your web pages is to use inline styles. An inline style is applied to an HTML element via its style attribute, like this: <p style="font-family: "Times New Roman", Times, serif; color: #3366cc; " >Good morning Everyone </p> Note: Using Inline styles has one major disadvantage the code can't be reused, For example,if we wanted to apply the style above to another p element, we’d have to type it out again in that element’s style attribute

How to define Styles with CSS

By Purushothaman Raju - October 01, 2012

CSS Styles are declared between the opening and closing <style> tags like this usually before the closing </head> tag ,other ways of declaring CSS styles are discussed below. <style> h1{ color:#fff; padding:0px 0px 5px 5px;} p{ color:#fc0; margin-left :auto;} </style> Defining styles in CSS · Inline Styles Inline style is applied to an HTML element via its style attribute, like this: <p style=”font-family: Calibri; color:#f6f6f6; padding:5px; ”>Sample Paragraph</p> · Embedded Styles As we seen in our first example, you can declare any number of CSS styles by placing them between the ope...