Posts

Showing posts from October, 2012

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

Image
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

Image
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</td>     <td>Japan</td>   </tr>   <tr>     <td>Jane</td>     <td>1989</td>     <td>Canada</td>   </tr> </table>
CSS Code:
<style> table{ border:2px #0CF solid;  margin:10% auto 10% auto; } </style>

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

Image
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

Image
To rotate images using CSS provides something called CSS Transforms which can be used to rotate images gently.

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

Image
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:

How to add Drop shadow to Elements | Using CSS

Image
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

Image
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.

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

Image
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.

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

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

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

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

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

Image
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

Image
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

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

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

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

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

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

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

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

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 opening and closing <style> tags, as follows: <style> * CSS Styles will be declared here * </style> ·External Stylesheets external stylesheet is a file (usually given a .css file extension) that contains CSS styles.  Like this: <link rel=”stylesheet” type=”text/css” href=”yourstyleshhet.css” />