How to set Mutiple Background Images to DIV using CSS?

You must have seen multiple background images for the single block on many web sites. In this case many web designers make mistake of creating multiple DIV elements and setting single background image to each DIV and and then position each of them.
Now, there is more simple way using CSS we can set more than one background images to the DIV.
See the following code:


<style type="text/css">
<!--

#test {background:
url(topleft.gif) 0 0 no-repeat,
url(topright.gif) 100% 0 no-repeat,
url(botleft.gif) 0 100% no-repeat,
url(botright.gif) 100% 100% no-repeat;
padding: 25px;
background-color: #008000; color: #FFF;
font: bold small Arial, sans-serif;}
-->
</style>



And apply the above style to the DIV as follows:


<div id="test">
Let's add four images to a single background! I mean, why not?

</div>

How to create Numbered Table of Content (TOC) or Index List using CSS

You can create table of contents kind of layout using CSS. Please look at following sample code to create table of content or index page for your web site.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Figure 12-31</title>
<style type="text/css">
ol {counter-reset: ordered;}
ol li {display: block; margin-left: .5em;}
ol li:before {counter-increment: ordered;
content: counters(ordered,".") ": ";}
</style>
</head>

<body>
<ol>
<li>Lists
<ol>
<li>Types of Lists</li>
<li>List Item Images</li>
<li>List Marker Positions</li>
<li>List Styles in Shorthand</li>
<li>List Layout</li>
</ol></li>
<li>Generated Content
<ol>
<li>Inserting Generated Content
<ol>
<li>Generated Content and Run-In Content</li>
</ol></li>
<li>Specifying Content
<ol>
<li>Inserting Attribute Values</li>
<li>Generated Quotes</li>
</ol></li>
<li>Counters
<ol>
<li>Resetting and Incrementing</li>
<li>Using Counters</li>
<li>Counters and Scope</li>
</ol></li>
</ol></li>
<li>Conclusion</li>
</ol>
</body>
</html>


The above code will create table of content as follows, you can change it by customizing style sheet as per your requirements:


  1. Lists

    1. Types of Lists
    2. List Item Images
    3. List Marker Positions
    4. List Styles in Shorthand
    5. List Layout
  2. Generated Content

    1. Inserting Generated Content

      1. Generated Content and Run-In Content
    2. Specifying Content

      1. Inserting Attribute Values
      2. Generated Quotes
    3. Counters

      1. Resetting and Incrementing
      2. Using Counters
      3. Counters and Scope
  3. Conclusion

CSS Based Anchor <a>, Body, Header <h1>, Paragraph <p> - Color & Font Settings

If you see different web pages the web designer sets different colors for Links, Text, Paragraphs etc. Here are few examples of various ways of changing colors and font using CSS


body {background: #DDDDFF; color: purple; font-family: serif;}
h1 {font: italic 250% sans-serif;}
h3 {color: #551155;}
p {margin-left: 0.5em; text-indent: 2.5em;}
ol, ul {margin-left: 3em;}
code {color: magenta; font-family: sans-serif;}

a:link {color: #CC66CC; font-weight: bold;}
a:visited {color: #993399;}
a:hover {color: #DDDDFF; background: #CC66CC;}

p.footer {font-size: 75%; text-align: right;}


In the above code the line body {background: #DDDDFF; color: purple; font-family: serif;} changes background color of page to #DDDDFF, text color of page to purple and font-familyof page to serif;

Similarly other lines changes various color, font and margin styles of h1, h3, p, ol, ul and a

Following lines changes anchor properties for link , visited links and when mouse over occurs for the anchor links on the page
a:link {color: #CC66CC; font-weight: bold;}
a:visited {color: #993399;}
a:hover {color: #DDDDFF; background: #CC66CC;}

Absolute positioning within a container using CSS

One of the best things about CSS is that you can position an object absolutely anywhere you want in the document. This is also possible (and often desirable) to position objects within a container at absolute location. This thing is very simple to do too using CSS. Simply assign the following CSS rule to the container:


#container
{
position: relative
}


Now any element within this container will be positioned relative to it. Say you had this HTML structure:

<div id="container"><div id="placement">...</div></div>

To position the navigation exactly 15px from the left and 2px from the top of the container box, you could use these CSS commands:


#placement
{
position: absolute;
left: 15px;

top: 2px
}


Perfect! In this particular example, you could of course also use margin: 15px 0 0 20px, but there are some cases where it is preferable to use positioning.

Vertically aligning with CSS

Vertically aligning with tables was a doddle. To make cell content line up in the middle of a cell you would use vertical-align: middle. This doesn't really work with a CSS layout. Say you have a navigation menu item whose height is assigned 2em and you insert this vertical align command into the CSS rule. It basically won't make a difference and the text will be pushed to the top of the box.


Hmmm... not the desired effect. The solution? Specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box - perfect!

Centre aligning a block element using CSS

If you want to have a fixed width layout website, and the content floated in the middle of the screen. You can use the following CSS code:


#content
{
width: 700px;
margin: 0 auto
}


You would then enclose <div id="content"> around every item in the body of the HTML document and it'll be given an automatic margin on both its left and right, ensuring that it's always placed in the center of the screen. Simple... well not quite - we have still got the pre-IE 6 versions on PC to worry about, as these browsers won't center align the element with this CSS command. You'll have to change the CSS rules:


body
{
text-align: center
}

#content

{
text-align: left;
width: 700px;
margin: 0 auto
}



<p>This will then centre align the main content, but it'll also centre align the text! To offset the second, probably undesired, effect we inserted <code>text-align: leftcode> into the content div.p>

CSS Image replacement technique

It is always advisable to use regular HTML markup to display text, rather than using an image. Doing so allows user a faster download speed and has accessibility benefits. However, if you are using a certain font and your site visitors are unlikely to have that font on their computers, then really you have got no choice but to use an image.

Say for example, you wanted the top heading of each page to be ‘Buy Now’, as you are a seller and you would like to be found for this phrase in the search engines. You are pretty set on it being an obscure font so you need to use an image:

<h1><img src="widget-image.gif" alt="Buy Now" /></h1>

This seems OK but there is strong evidence to suggest that search engines do not assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be:

<h1 id="buyImg">Buy Now</h1>

Now, this obviously won't use your obscure font. To fix this problem place these code in your CSS document:


#buyImg
{
background: url(widget-image.gif) no-repeat;
height: image height;
text-indent: -2000px;
}


Be sure to change "image height" to whatever the height of the image is (e.g. 85px)! The image, with your fancy font, will now display and the regular text will be safely out of the way, positioned 2000px to the left of the screen thanks to our CSS rule.
Warning: this can cause accessibility issues as any user who has turned off images , won't be able to see the text.

How to create CSS document for printing web page? - CSS for Print Media

You must have seen lots of web pages have a link to a print-friendly version where unnecessary stuff are removed. What many of them don't realize is that there is no need to create such pages because you can set up a second CSS document to be called up when a user prints the page as shown in the following example.

In this case, your page header should contain links to two CSS documents, one for the screen, and one for printing as follows:


<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />

<link type="text/css" rel="stylesheet" href="print.css" media="print" />


The first line of code calls up the CSS for the screen (notice the inclusion of media="screen") and the second line calls up the CSS for the printable version (using media="print").

Now, what commands should you put in this second CSS document? To work it out, open a blank document and save it as printstyle.css. Next, point the screen CSS command to this document so that the command reads: <link type="text/css" rel="stylesheet" href="print.css" media="screen" />.

Now just keep entering CSS commands until the display on the screen matches how you want the printed version to look. You'll certainly want to make use of the display: none command for navigation, decorative images and non-essential items.

If you do not want to have separate CSS documents and your are writing CSS withing HTML document itself then write screen and print media stylesheet as follows:

<STYLE type="text/css">
@media print {
   BODY {font-size: 10pt; line-height: 120%; background: white;}
}
@media screen {
   BODY {font-size: medium; line-height: 1em; background: silver;}
}
</STYLE>

For more advice on this, read Print Different, which also mentions the other media for which you can specify CSS files.

CSS border default value

When writing a border rule we'll usually specify the colour, width and style (in any order). For example, border: 3px solid #000 will give you a black solid border, 3px thick. However the only required value here is the border style.

If you were to write just border: solid then the defaults for that border will be used. But what are defaults? Well, the default width for a border is medium (equivalent to about 3 to 4px) and the default colour is that of the text colour within that border. If either of these are what you want for the border then you can leave them out of the CSS rule!

How to use two CSS classes togather for single paragraph or div

Usually attributes are assigned just one value, but this doesn't mean that that's all you're allowed for the class attribute. In reality, you can assign as many classes as you like! For example:

<p class="class1 class2 class3">...</p>

<div class="class1 class2 class3">...</div>

Using these three classes together (separated by a space, not with a comma) means that the paragraph or div calls up the rules assigned to class1 class2 and class3. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.

CSS font configuration shorthand rule

When creating CSS classes with fonts configuration within CSS you may be doing this:




font-weight: bold;

font-style: italic;

font-variant: small-caps;

font-size: 1em;

line-height: 1.2em;

font-family: arial,verdana,sans-serif


You can achieve the same thing by using CSS shorthand property for font as follows:


font: bold italic small-caps 1em/1.2em arial,verdana,sans-serif


Much better! Remember: This CSS shorthand version will only work if you're specifying both the font-size and the font-family. The font-family command must always be at the very end of this shorthand command, and font-size must come directly before this. Also, if you don't specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal, so do bear this in mind too.

How to create rounded box using CSS without image? - CSS Twicks to create rounded div without using image

If your browser supports CSS3 or webkit then it is very easy to create rounded boxes using div using following code.
<style type='text/css'>
.rounded {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   border-radius: 5x;
}
</style>

<div class="rounded">
  This is sample rounded box
</div>


Above code works fine with Firefox, chrome and any other webkit or CSS3 enabled browsers. But does not work on IE which is most commonly used browser, which does not come with CSS3 or webkit support. Many web developer uses image based solution for creation rounded boxes in the webpage, but this approach does not look scalable and reusable. I have simple solution using CSS and multiple div which is easy to scale and reuse it for creating multiple rounded boxes.

<style type='text/css'>

.rounded {
 background: #f1f1f1;
 width:100px;
}

.content {
 height:100px;
}

.top,.bottom {
 display: block;
 background: #FFFFFF;
}

.top *,.bottom * {
 display: block;
 height: 1px;
 overflow: hidden;
 background: #f1f1f1;
}

.t1 {
 margin: 0 5px
}

.t2 {
 margin: 0 3px
}

.t3 {
 margin: 0 2px
}

.t4 {
 margin: 0 1px;
 height: 3px;
}

.b1 {
 margin: 0 1px;
 height: 3px;
}

.b2 {
 margin: 0 2px
}

.b3 {
 margin: 0 3px
}

.b4 {
 margin: 0 5px;
}
</style>

<div class="rounded">
  <span class="top">
  <span class="t1"> </span>
  <span class="t2"> </span>
  <span class="t3"> </span>
  <span class="t4"></span>
  </span>
<div class="content"">This is rounded box</div>
  <span class="bottom">
  <span class="b1"> </span>
  <span class="b2"> </span>
  <span class="b3"> </span>
  <span class="b4"> </span>
  </span>
 </div>

As you see in the above code change the width and height attributes as per your requirements in the style-sheet code, you can also change color as per your requirements (To change the color replace #FFFFFF with your background color of your web page and replace #f1f1f1 with desired color of rounded box)
You can write your own content within rounded box by replacing following lines in the above code
<div class="content"">This is rounded box</div>