Table Borders Css

When a table is defined by a tag with no styles specified, a borderless table as wide and as tall as its enclosed data is displayed. From this simple beginning you can structure and style a table to take on virtually any display characteristics you can imagine. table border property is used to set a stylish border for the table in a webpage.

Any border styles that were introduced earlier can be applied to the external border of a table This will results in.
e.g:
<style type="text/css">
table { border: solid 5px #0000FF}
td {border:outset 2px}
</style>

<table width="241">
  <tr>
    <td width="114">Cell 1.1</td>
    <td width="107">Cell 1.2</td>
  </tr>
  <tr>
    <td>Cell 1.3</td>
    <td>Cell 1.4</td>
  </tr>
</table>

 This will results in

Cell 1.1	Cell 1.2
Cell 1.3	Cell 1.4

The border style is described in below for each table. The stylesheet uses the standard format {border: size or style} for all border crossings stylings.

Dashed

Dotted

Double

Opacity in CSS

Today we learn of opacity in CSS! I made an example here

Information opacity in CSS:
property has a value of opacity of the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent - anything below the item shows through. 1.0 is 100% opaque - nothing below element will show through.
So, to set an element of transparency of 50%, you may write: opacity: 0.5;

Neither IE 6 or 7 supports CSS 3 opacity property. But you're out of luck. Instead, IE supports a Microsoft-only property "alpha filter". Alpha filters in IE accept values from 0 (fully transparent) to 100 (fully opaque). So, for your transparency in IE, you must multiply your opacity by 100 and add an alpha filter to your style:

Alpha filter for IE: filter: alpha(opacity=50);
Alpha filter for Mozilla: -moz-opacity:0.5;

Example:
Open notepad type below code
<html>
<title>Opacity in CSS</title>
<head>
<style type="text/css">
body
{
background-image: url("http://travelvacationguides.co.cc/opacity_in_css.jpg");
background-repeat: no-repeat;
font-size: 18px;
}
div
{
width: 200px;
opacity: 0.70;
height: 500px;
margin-left: 5em;
background-color: black;

}
p { padding-top: 20px;
text-align:center;
color:#FFFFFF;
}
</style>
</head>
<body>
<div><p>Learn how to make <a href="http://w3schoolss.blogspot.com/" style="color:#FFFFFF;">opacity in css</a>. this example shows opacity in css in html.</p>
</div>
</body>
</html>


In this example, I create an html page with CSS easy. I put a background image and a div with the background color black. So I make the div opacity to 70%!

This results in:

Create Rollover Image in CSS

I made two buttons for this tutorial, save it if you want to work with them.



Open Notepad and type the next code:
 1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Create Rollover Image in CSS</title>
<style type="text/css">
a.w3school {
display: block;
background-image: url(http://travelvacationguides.co.cc/w3school.jpg);
background-repeat: no-repeat;
width: 400px;
height: 400px;
}
a.w3school:hover {
background-image: url(http://travelvacationguides.co.cc/w3school-hover.jpg);
}
</style>
</head>

<body>
<p style="text-align:center"><a class="w3school" href="http://w3schoolss.blogspot.com">Create Rollover Image in CSS</a> </p>
</body>
</html>

2.Click on File > Save as and save like HTML

This results in

Create Rollover Image in CSS

CSS Images

The pictures are a very important part of any web page. Although it is not appropriate to include lots of photos, but it is important to use good images, where it is needed.

CSS played a good role to control the display of images. You can set the following attributes image using CSS.

• border property is used to set the width of the border.
• height property is used to adjust the height of an image.
• Width property used to set the image width.

e.g:
<img src="http://www.blogger.com/img/logo40.png" style="border:1px double #000000; height:10%" />
<br />
<img  src="http://www.blogger.com/img/logo40.png" style="border:2px double #000000; height:20%" alt="" />

This results in:

CSS Outlines

Outlines are very similar to the borders but there are are some important differences in borders & outlines:

• An outline does not take up space.
• Outlines do not have to be rectangular.
• Outline is always the same on all sides; you cannot specify different values for different sides of the element.

We can use following properties:

• outline-width property is used to set the width of the outline.
• outline-style property is used to set the line style for the outline.
• outline-color property is used to set the color of the outline.

outline-width property
Its value should be a length or one of the values thin, medium, or thick.

example:
<p style="outline-width:thin; outline-style:dotted;outline-color:#00FF00">
This text is having thin outline.
</p>

<p style="outline-width:thick; outline-style:solid; outline-color:#FF0000">
This text is having thick outline.
</p>

<p style="outline-width:5px; outline-style:dashed; outline-color:#0000FF">
This text is having 5x outline.
</p>

This Result in

This text is having thin outline.

This text is having thick outline.

This text is having 5x outline.

onMouseOver Effects

make the link color or background color change when mouse is moved over by using CSS.

using onMouseOver Effects in CSS very simple. to do this, just follow steps.

Step 1:
In head portion add style that you want the text to change, as follows
<head>
<style>
/*This is how the text will look before mouse over*/
.onmouseover{
font-family:"Times New Roman", Times, serif;
font-size:12px;
color: #000000;
text-decoration:none;
}

/*This is how the text will look on mouse over. Note "hover" is the most important change here*/
.onmouseover:hover
{
font-family:"Times New Roman", Times, serif;
font-size:12px;
text-decoration:underline;
color:#FF0000;
}
</style>
</head>


Step 2:
Sets the text style you want the mouse over effects occurring
e.g:
This is the Mouse Over Text 

Note: Here we set the style with the tag "class". The style name is "onmouseover" that was created in header portion

For the background color to change, simply add "background-color" property in style tags, as explained above.
e.g :
<head>
<style>
/*This is how the text will look before mouse over*/
.onmouseoverb{
font-family:"Times New Roman", Times, serif;
font-size:12px;
color: #000000;
text-decoration:none;

}

/*This is how the text will look on mouse over. Note "hover" is the most important change here*/
.onmouseoverb:hover
{
font-family:"Times New Roman", Times, serif;
font-size:12px;
text-decoration:underline;
color:#FF0000;
background-color:#009966;
}
</style>
</head>



This results in:
This is the Mouse Over Text

CSS Line Spacing

line-height property is used to specify the amount of vertical space between lines of text. line-height indicated in the units, percentage or a multiplier.

following example shows how to set line-height.
1.<div style="background-color:#0099FF; line-height: 1cm;">
Line height - This is line 1 <br>
Line height - This is line 2 <br>
</div>

This result in:

Line height - This is line 1

Line height - This is line 2

2.
<div style="background-color:#0099FF; line-height: 30px;">
Line height - This is line 1 <br>
Line height - This is line 2 <br>
</div>

This results in:

Line height - This is line 1

Line height - This is line 2

Custom Cursors

When the user mouse over an element on the page, the mouse cursor changes to indicate what the user can (or cannot) do with that element.

The syntax for specifying a cursor property is shown below:
Syntax

selector { cursor: value; }

The cursor for any element can be set by using the css property "cursor".

Example Tag:
<div style="cursor: move;"> this is a move type cursor </div>

This result in:

this is a move type cursor

The table below shows the most common values used for the cursor property.

Value	Result
text	text symbol
pointer	a hand symbol
wait	loading symbol
help	question symbol
move	move symbol
crosshair	+ symbol
ne-resize	move north-east cursor
w-resize	move west cursor
n-resize	move north cursor
nw-resize	move north-west cursor
sw-resize	move south-west cursor
se-resize	move south-east cursor
e-resize	move east cursor
s-resize	move south cursor
url	user defined image as cursor
default	default cursor

CSS Scrollbars

You can use inline CSS to create your own scrollers through the creation of a smaller box than its contents are defined overflow: scroll This is the equivalent effect of inline frames.

Example
<html>
<head>
<style type="text/css">
.scrollbox {
    display:block;
    width:300px;
    border-width: 2px;
    border-style: solid;
    padding:10px;
    border-color:#000000;
    margin-top:5px;
    height:50px;
    overflow:scroll;
    }
</style>
</head>
<body>
<div class="scrollbox">
Property effluent tells the browser what to do if the contents of the box is larger than the box itself. You can also set to hide hidden content that does not fit in the box and visible to automatically extend the box to fit the contents</div>
</body>
</html>

This result in

Property effluent tells the browser what to do if the contents of the box is larger than the box itself. You can also set to hide hidden content that does not fit in the box and visible to automatically extend the box to fit the contents

CSS Hyperlinks

You can use CSS to change the appearance and behavior of hyperlinks.Links can be styled in different ways.

Links can be style with any CSS property 

To do this, you can use the following selectors

• a
• a:link
• a:visited
• a:hover
• a:active

above selectors represent the 'anchor' element.

 Examples
a {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px}
a:link {color:red;}
a:visited {color: #660066;}
a:hover {text-decoration: none; color: #ff9900; font-weight:bold;}
a:active {color: #ff0000;text-decoration: none}

For result copy below code & try it on your browser
<head>
<style type="text/css">
a {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px}
a:link {color:red;}
a:visited {color: #660066;}
a:hover {text-decoration: none; color: #ff9900; font-weight:bold;}
a:active {color: #ff0000;text-decoration: none}
</style>
</head>
<body>
<p><a href="http://www.w3schoolss.blogspot.com/">Hyperlinks</a></p>
</body>
 

 

CSS Float

CSS float property lets you decide where to place an element relative to other elements on the page. When using the float property, other elements simply wrap around the item you have applied to float.

Example code:
<div style="width:250px;">
<h1 style="float:left;margin-right:20px;">Text float</h1>
<p>If your browser supports CSS float property, this text will flow around the position. If this does not seem to work, could be a browser compatibility thing ...</p>
</div>

This results in:

Text float

If your browser supports CSS float property, this text will flow around the position. If this does not seem to work, could be a browser compatibility thing ...

CSS Height and Width

CSS includes properties height and width to help you specify the size of your items.

'height' & 'width' Properties
Applies to all HTML elements except non-replaced inline, table columns and column groups.
Example
<div style="background-color:#FF0000;height:130px;width:100px;">
This div has height and width applied.
</div>

This results in:

This div has height and width applied.

CSS Lists

CSS includes a number of list properties to help you style your HTML lists.

List Style Type
If you want something different from the default numbering of ordered lists, discs, or bullets, then all you have to do is choose a different style to their lists.
CSS allows you to select from a wide variety of different list item shapes.

• Unordered list styles: square, circle, disc, and none
• Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), and none

 Example:
 1.
<ul style="list-style-type:circle;">
<li>This list is 1</li>
<li>This list is 2</li>
</ul>

This results in:

• This list is 1
• This list is 2

 2.
<ul style="list-style-type:upper-roman;">
<li>This list is 1</li>
<li>This list is 2</li>
</ul>

This results in:

• This list is 1
• This list is 2

3.
As we said before, lists of CSS allow you to insert an image instead of normal bullets. A good choice for a ball, an image that is less than the height of your text and graphics is a relatively simple / plain.
<ul style="list-style-image:url(name.gif);">

CSS Text

In addition to the different properties of CSS sources, there are other properties that may help in the style of text. e.g: you can change the color of the text, align text, add the internal features and more.

CSS Text can be styled using the properties listed below.

CSS Text Color
<p style="color:#FF0000;">This CSS text color is red</p>

This results in:

This CSS text color is red

CSS Text Align
<p style="text-align:center;">This CSS text is aligned center</p>


This results in:

This CSS text is aligned center

CSS Letter Spacing
<p style="letter-spacing:10px;">This text has letter spacing applied</p>


This results in:

This text has letter spacing applied

CSS Word Spacing
<p style="word-spacing:20px;">This text has word spacing applied</p>


This results in:

This text has word spacing applied

CSS Text Transform
<p style="text-transform:capitalize;">this text has been capitalized.</p>
<p style="text-transform:lowercase;">THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE</p>
<p style="text-transform:uppercase;">This text has been transformed to uppercase</p>

This results in:

this text has been capitalized.

THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE

This text has been transformed to uppercase

CSS Text Decoration
<p style="text-decoration:blink;">This text is blinking</p>
<p style="text-decoration:underline;">This text has a line underneath</p>
<p style="text-decoration:overline;">This text has a line over the top</p>
<p style="text-decoration:line-through;">This text has a line through the middle</p>

This results in:

This text is blinking

This text has a line underneath

This text has a line over the top

This text has a line through the middle

CSS Padding

Padding defines the space between the element's border and its content. CSS padding is specified just like margins - they can be set individually for each side, or all sides at once.

Padding on all Sides
This example uses the padding property to set padding on all sides of an element.
<p style="border:2px solid red;padding:10px;">
This text has padding of 10 pixels on all four sides.
</p>


This results in:

This text has padding of 10 pixels on all four sides.

You can also declare all the padding of an element in a single property as follows:
padding: 10px 10px 10px 10px;
If you declare all 4 values as I have above, the order is as follows:

1. top
2. right
3. bottom
4. left

Example:
<p style="border:1px solid red;padding-left:30px;">This text has left padding of 30 pixels.</p>

This result in

This text has left padding of 30 pixels.

CSS Margin

Margins define the space around the element. CSS margins are specified in a similar way to borders - they can be set individually for each side, or all sides at once.The margin property can be set for the top, left, right and bottom of an element. (see example below)

  margin-top: length percentage or auto;
  margin-left: length percentage or auto;
  margin-right: length percentage or auto;
  margin-bottom: length percentage or auto;

Possible Values

Value	Description
auto	The browser sets the margin. The result of this is dependant of the browser
length	Defines a fixed margin (in pixels, pt, em, etc.)
%	Defines a margin in % of the containing element

You can also declare all the margins of an element in a single property as follows:
  margin: 10px 10px 10px 10px;

If you declare all 4 values as I have above, the order is as follows:

1. top
2. right
3. bottom
4. left

If only one value is declared, it sets the margin on all sides. (see below)
margin: 10px;

If only 2 values are declared (see below)
margin:10px 20px;  

• Top and bottom have a margin of 10 pixels.
•  Right and left have a margin of 20 pixels.



If only 3 values are declared (see below)
 margin:10px 20px 30px;

•  Top is 10px
• Left and right are 20px
• Bottom is 30px

 If only 4 values are declared (see below)
margin:10px 20px 30px 40px;

• Top is 10px
• Right is 20px
• Bottom is 30px
• Left is 40px

CSS Border

CSS allows you to set styles for the border of any HTML element. It also provides you with a way of setting border styles for one or more sides of an element.

The border-style property specifies what kind of border to display. You can set the color, style and width of the borders around an element in one declaration by using the border property.

border-style values:
border: 1px solid #000000;

Values:

• color
• style
• width

Or you can set each property individually.

Border Color
The border-color property is used to set the color of the border. The color can be set by:

• color name
• hexadecimal number
• RGB color code
• transparent

Border Style
Borders can have the following styles.

<p style="border:2px solid blue;">This text has a border style of 'solid'.</p>
<p style="border:2px dotted blue;">This text has a border style of 'dotted'.</p>
<p style="border:2px dashed blue;">This text has a border style of 'dashed'.</p>
<p style="border:2px double blue;">This text has a border style of 'double'.</p>
<p style="border:2px groove blue;">This text has a border style of 'groove'.</p>
<p style="border:2px ridge blue;">This text has a border style of 'ridge'.</p>
<p style="border:2px inset blue;">This text has a border style of 'inset'.</p>
<p style="border:2px outset blue;">This text has a border style of 'outset'.</p>
<p style="border:2px hidden blue;">This text has a border style of 'hidden'.</p>

This results in:

This text has a border style of 'solid'.

This text has a border style of 'dotted'.

This text has a border style of 'dashed'.

This text has a border style of 'double'.

This text has a border style of 'groove'.

This text has a border style of 'ridge'.

This text has a border style of 'inset'.

This text has a border style of 'outset'.

This text has a border style of 'hidden'.

Border Width
You can set the width of a border independently with the border-width property.
border-width: value;

Values:

• Length
• Thin
• Medium
• Thick

Or you can set the elements for each borders side individually

CSS - Backgrounds

This tutorial will teach you how to set backgrounds of various HTML elements. You can set following background properties of an element:

Background-color : property is used to set the background color of an element.
Background-image: property is used to set the background image of an element.
Background-repeat: property is used to control the repetition of an image in the background.
Background-position :property is used to control the position of an image in the background.
Background-attachment: property is used to control the scrolling of an image in the background.

The following is an example that shows how to set the background color of an element.
<p style="background-color:#0000FF;">
This text has a blue background color.
</p>

This will produce following result:

This text has a blue background color.

The following is an example that shows how to set the background image of an element.
<p style="background-image:url(http://www.blogger.com/img/logo40.png);">
This text has a background image set.
</p>

This will produce following result

This text has a background image set.

Repeat the background image:
The following is an example that shows how to set the repeat background image of an element.
<div style="background-image: url(http://www.blogger.com/img/logo40.png); background-repeat: repeat;">
This text has a repeat background image set.</div>

This will produce following result

This text has a repeat background image set.

ID STYLES

IDs allow you to assign a unique identifier to an HTML element. This allows you to define a style that can only be used by the element you assign the ID to.

CSS ID Syntax
syntax of declaring id is same as class except that instead of using a dot, you use a hash (#).

#id-name { property:value; }

You should use IDs if only one element on the page should have the style applied, and/or you need a unique identifier for that element. For example, you might assign an ID to a div tag which contains your right menu. The styles for this ID could contain the position, font-color, float properties, font-size, height,background-color,width, etc. You probably wouldn't want any other element on the page to use this particular style.

CSS ID Example
<head>
<style type="text/css">
#section{
font-family:"Courier New", Courier, monospace;
font-size:12px;
color:#000000;
}

#css-section{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#FF0000;
}
</style>
</head>
<body>
<p id="section">This is Paragraph</p>
<p id="css-section">This is Paragraph2</p>
</body>

CSS Class

In CSS, classes allow you to apply a style to a given class of an element. To do this, you link the element to the style by declaring a style for the class, then assigning that class to the element.

CSS Class Syntax
You declare a CSS class by using a dot (.) followed by the class name. You make up the class name yourself. After the class name you simply enter the properties/values that you want to assign to your class.
.class-name { property:value; }

If you want to use the same class name for several elements, but each with its own style, you can prefix the dot with names of HTML elements.
html-element-name.class-name { property:value; }
CSS Class Example:
<head>
<style type="text/css">
.section{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}

.css-section{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#FF0000;
}
</style>
</head>
<body>
<h1 class="section">This is Heading</h1>
<p class="css-section">This is Paragraph</p>
</body>
</html>
This results in:

This is Heading

This is Paragraph