CSS Customized Underlines apply a border to the bottom of the link, which gives you control over the color of the underline (whereas text-decoration will only apply an underline in the same color as the text of the link itself) and also the pattern of the border:

a {
	text-decoration: none;
	border-bottom: 2px dotted #0c0;
}

Another way to apply more interesting underlines to links is to use small background images aligned to the bottom of the link that repeat horizontally: Read more…

• No Related Post

You Can Make Images Transparent Too

Set the opacity on the image itself and it will fade into the background. This is really useful for background images.

<img src=”http:///csshook.com/images/one.png” alt=”Shasta” style=”opacity:0.5;filter: alpha(opacity=50) ;” />

And if you add in an anchor tag you can create hover effects just by changing the opacity of the image.

#imghover a:hover img { filter: alpha(opacity=50);filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity: .5;opacity:0.5; }

Affects this HTML:

<div id=”imghover”>
<a href=”#”><img src=”http:///csshook.com/images/one.png” alt=”next” style=”width:24px;height:24px;border:none;” /></a>
</div>

• No Related Post

What is it?

CSS3 offers a huge variety of new ways to create an impact with your designs, with quite a few important changes. This first tutorial will give you a very basic introduction to the new possibilities created by the standard.

Modules

The development of CSS3 is going to be split up into ‘modules’. The old specification was simply too large and complex to be updated as one, so it has been broken down into smaller pieces - with new ones also added. Some of these modules include:

• The Box Model
• Lists Module
• Hyperlink Presentation
• Speech Module
• Backgrounds and Borders
• Text Effects
• Multi-Column Layout

Read more…

• Which CSS Propertise using in Email Templates
• 150 CSS Examples
• How to design css sitemap Tree
• How to create Rounded Corners Using CSS without Images
• Explaining CSS Positioning
• Variables in CSS?
• CSS Filter Property
• CSS ! important Declaration
• CSS Universal (*) Selector
• Imports an external style sheet

Grouping Your Styles

Group your styles into categories (ex. layout, typography, forms, so on) and visually seperate them in your css file. A title and table of contents doesn’t hurt either:

/*
	csshook.com Screen Styles

	Table of Contents:
		layout
		typography
		forms
*/

/* layout
----------------------------------------------- */

/* typography
----------------------------------------------- */

/* forms
----------------------------------------------- */

Choosing Your Categories

Even though I do have some common practices, I don’t have a ‘template’ for how to breakdown styles into categories.

For starters, I almost always have layout and typography categories. Withtypography defining the sitewide look and feel. Depending on the complexity, I may break out the table and form styles into their own categories.

Next, I address the physical sections of the page with their own categories:header, sidebar, content, and footer for example. Lastly, I collect the page and content section specific styles and place them in their own category (and sometimes subcategories).

Importing Stylesheets

Another method is to categorize the styles and place them in seperate CSS files which are all imported by one main CSS file. I find this method good in theory but it can lead to overlapping styles, specification issues, and general confusion if you’re not very careful:

@import url("layout.css");
@import url("typography.css");
@import url("forms.css");

Linebreaks and Indenting Read more…

• CSS Text Properties
• CSS Tips
• Organizing Your CSS Files
• 100 CSS Examples and Tutorials
• 150 CSS Examples
• Top CSS Tips
• Introduction to CSS3
• Margins and Absolute Positioning
• Top reasons sites break in IE 7
• How to design css sitemap Tree

 

The Basics of Rounded Corners

Rounded corners rely on the fact that computer monitors and our eyes are not that good at viewing what are effectively tiny squares (the pixels). So if you set up a series of pixels along the edges of your elements, you can line them up in such a way that they make the box they are edging appear to have rounded edges. For example, this page demonstrates how you can set up rounded corners on various div elements.

To create the rounded corners, you need an inline element that acts as the actual pixel for your corner. This could be any inline element, but I prefer either the span element or the b element. Span because it’s probably the most “correct” element to use, and b because it’s shorter to type and you should be using strong for your bolded text.

The XHTML Required for Rounded Corners

<div class=”container”>
<b class=”rtop”><b class=”r1?></b> <b class=”r2?></b> <b class=”r3?></b> <b class=”r4?></b></b>
CONTENTS GOES HERE
<b class=”rbottom”><b class=”r4?></b> <b class=”r3?></b> <b class=”r2?></b> <b class=”r1?></b></b>
</div>

In order for your corners to show up, you need to have your container div be a different color than the background color of the page. So, the first thing your style sheet should have is a style indicating what color your rounded elements will be:

.container {
background:#ccc;
color:#fff;
margin:0 15px;
}

As you can see, I also set the left and right margins a little off the edges so that they would be easier to see the rounded corners. Read more…

• 150 CSS Examples
• Introduction to CSS3
• How to design css sitemap Tree
• Explaining CSS Positioning
• Which CSS Propertise using in Email Templates
• Variables in CSS?
• CSS Filter Property
• CSS ! important Declaration
• CSS Universal (*) Selector
• Imports an external style sheet

Cascading Style Sheets or CSS were developed a few years ago to define the look and feel of markup languages. Extensible Style Sheet Language for Transformations or XSLT were created to transform documents. They are both style sheets, but they serve vastly different purposes.

What CSS Can Do

• Modify the font size, color, family, and style of text in markup
• Define the location and size of an element
• Change the background image and color of elements
• Create a new look and feel for markup pages to display on the Web

What CSS Cannot Do

• Change the order of elements in a document
• Make computations based on the content of the document
• Add content to the document
• Combine multiple documents into one

XSLT is a powerful language for transforming documents. It was created to allow developers the ability to create data and then transform it to various different formats. It is meant to keep the distinction between content and design separate. Read more…

• CSS ID Selector
• Use shorthand CSS notation
• Organize your CSS-code
• HTML Basics
• CSS Framework
• 150 CSS Examples
• CSS background-size
• Using Logo with CSS
• Introduction to CSS3
• How to design css sitemap Tree

When you’re going to use CSS positioning, the first thing you need to do is use the CSS property position to tell the browser if you’re going to use absolute or relative positioning.

What most people don’t realize when they’re using CSS to lay out Web pages is that there are actually four states to the position property:

• static
• absolute
• relative
• fixed