CSS

CSS ID Selector

Category: CSS | 545 views | Add a Comment |

Description

An ID selector matches an element that has a specific id attribute value. Since idattributes must have unique values, an ID selector can never match more than one element in a document.

In its simplest form, an ID selector looks like this:

#navigation {
  ? declarations
}

This selector matches any element whose id attribute value is equal to"navigation". In this selector, which is equivalent to *#navigation, the universal selector is implied. The universal selector is often omitted in cases like this. Read more…

Use shorthand CSS notation

Category: CSS Tips | 764 views | Add a Comment |

Shorten hexadecimal colour notation. “In CSS, when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit: #000 is the same as #000000, #369 is the same as #336699
Define pseudo classes for links in the LoVe/HAte-order: Link, Visited, Hover, Active. “To ensure that you see your various link styles, you’re best off putting your styles in the order “link-visited-hover-active”, or “LVHA” for short. If you’re concerned about focus styles, they may go at the end– but wait until you’ve read this explanation before you decide.”
view plaincopy to clipboardprint?
1. a:link { color: blue; }
2. a:visited { color: purple; }
3. a:hover { color: purple; }
4. a:active { color: red
  ; } Read more…
  
  CSS ID Selector
  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
  How to create Rounded Corners Using CSS without Images

Organize your CSS-code

Category: CSS | 881 views | Add a Comment |

Organize your CSS-styles, using master style sheets. “Organizing your CSS helps with future maintainability of the site. Start with a master style sheet. Within this style sheet import your reset.css, global.css, flash.css (if needed) andstructure.css and on occasion a typography style sheet. Here is an example of a “master” style sheet and how it is embedded in the document:”
view plain copy to clipboard print ?
1. h2 { }
2. #snapshot_box h2 {
3. padding: 0 0 6px 0;
4. font: bold 14px/14px “Verdana”, sans-serif; }
5. #main_side h2 {
6. color: #444;
7. font: bold 14px/14px “Verdana”, sans-serif; }
8. .sidetagselection h2 {
9. color: #fff;
10. font: bold 14px/14px “Verdana”, sans-serif; }
Organize your CSS-styles, using flags. “Divide your stylesheet into specific sections: i.e. Global Styles – (body, paragraphs, lists, etc), Header, Page Structure, Headings, Text Styles, Navigation, Forms, Comments, Extras. [5 Tips for Organizing Your CSS]
view plain copy to clipboard print ?
1. /* ———————————–*/
2. /* ———->>> GLOBAL <<<———–*/
3. /* ———————————–*/
Organize your CSS-styles, making a table of contents. At the top of your CSS document, write out a table of contents. For example, you could outline the different areas that your CSS document is styling (header, main, footer etc). Then, use a large, obvious section break to separate the areas. [5 Steps to CSS Heaven] Read more…

HTML Basics

Category: CSS 2 Tutorial | 445 views | Add a Comment |

The DOCTYPE

When I first started researching HTML5 a few months ago, one of the main things I struggled to find was the doctype. A simple thing, you’d think it would be everywhere, but after much frustration, I finally found it buried within w3.org and here it is:

<!DOCTYPE html>

I was also curious why they chose to “html” rather than “html5?, it seemed like the logical way to tell a browser that the current document was written in HTML5, and offered a good template for the future. But I found that <!DOCTYPE html5> triggers Quirks Mode in IE6, and when taking backwards compatibility into consideration <!DOCTYPE html> is a pretty good choice (in my opinion).

Overall, I really like the new DOCTYPE; it’s small, meaningful, and maybe we’ll actually be able to remember this one by heart and not have to paste it from site to site.

New Elements you should know

At first glance, with HTML5, the new elements immediately jump out and command attention. The W3C really listened to the community and planned for the future when architecting the abundance of new elements available. We have everything from basic structural elements like <header> and <footer>to others like <canvas> and <audio> that tap into, what seems to be, a very powerful API which allows us the freedom to create more user-friendly applications while further distancing ourselves from reliance on Flash for saving data and intense animation.

The new structural elements

<header>
The header element contains introductory information to a section or page. This can involve anything from our normal documents headers (branding information) to an entire table of contents.
<nav>
The nav element is reserved for a section of a document that contains links to other pages or links to sections of the same page. Not all link groups need to be contained within the <nav> element, just primary navigation.
<section>
The section element represents a generic document or application section. It acts much the same way a <div> does by separating off a portion of the document.
<article>
The article element represents a portion of a page which can stand alone such as: a blog post, a forum entry, user submitted comments or any independent item of content.
<aside>
Aside, represents content related to the main area of the document. This is usually expressed in sidebars that contain elements like related posts, tag clouds, etc. They can also be used for pull quotes.
<footer>
The footer element is for marking up the footer of, not only the current page, but each section contained in the page. So, it’s very likely that you’ll be using the <footer> element multiple times within one page.

When you take a look at these new elements, it looks like they’re just replacing our common DIV IDs; and in a way, it’s true. But, the diagram below shows that elements like <header> and <footer> can be used more than once on a single page where they behave more like classes and normal HTML elements that you can use over and over again to retain a semantic structure.

Elements like <header> and <footer> are not just meant to represent the top and bottom of the current document, but they also represent the <header> and <footer> of each document section, much the way we use <thead> and <tfoot> in data tables.

The benefits of using these structural elements is mainly due to the fact that they are extremely well defined and provide a great way to semantically structure your document. However, these elements do need to be used with some careful thought because they can, very easily be overused.

CSS Framework

Category: CSS | 526 views | Add a Comment |

Who is this for?

If you’ve been creating sites with CSS for a while you may be getting frustrated with having to recreate and retest basic layouts on a regular basis. In this article I’m trying to illustrate a simple way of skipping the tedious startup on your average project, letting you get to the interesting stuff as quickly and efficiently as possible. I’ve not attempted to explain the layouts included here so it may not be suitable if you’re a CSS beginner. Sorry about that… Feel free to dissect them yourself if you’re interested; I’ve kept them as simple as possible.

How many layouts are there?

Well, loads but the majority of them fall into rough groups. Any framework must account for the most common layouts, otherwise it’ll never get used.

Vertical navigation with one content column
Vertical navigation with two columns of content
Horizontal navigation with one content column
Horizontal navigation with 2 columns of content
Horizontal navigation with local navigation and one column of content
Horizontal navigation with local navigation and 2 columns of content

These 6 cover most of the blogs out there and most of the corporate sites as well. How can we structure a document so that it’ll be useful in all 6 of these scenarios? Read more…

150 CSS Examples

Category: CSS, CSS Expert Ideas | 2,689 views | 3 Comments |

CSS Pagination

Pagination is a mechanism which provides users with additional navigation options for browsing through single parts of the given article. Can be referred to by numbers, hints, arrows as well as “previous” and “next”-buttons.

CSS Pagination Links- Inspired by the pagination interface you see at the footer of Digg.com.
Pagination 101- Pagination 101, that will give you some clues as to what makes good pagination.
Some styles for your pagination- Styles for WP-Digg style pagination plugin, Digg Style pagination Class, the modular version, and the original programed bye strangerstudios.

Block Hover Effect Links

How to Create a Block Hover Effect for a List of Links- Learn how to create hover effect when you mouse over the list items to see the block hover effect in the demo here.
How To Make Clickable Areas Bigger - One basic principle of interaction design is that the larger the link you’re trying to click on, the easier it is to click it. With this in mind, if you are using text-based links (for example in a navigation bar), the actual ‘clickable’ area should be as large as possible.
Anchor tags for block elements- You can see a demo here.
CSS Examples and demos

CSS background-size

Category: CSS, CSS Tutorials | 2,361 views | Add a Comment |

background-size Description:

This is a CSS 3 property from the CSS 3 Working Draft. Until the draft has been finalized, there may be additional changes. For most up-to-date information, go to the W3C.

The background-size property allows you to change the size of the background image to better fit your page. It is often thought of as the background stretch property.

background-size in CSS Versions:

background-size Syntax:

background-size: [ [ <length> | <percentage> | auto ]{1,2} || round ]

length - A specific size
percentage - A size relative to the container element.
round - tells the user agent to get it close to that width or height

If you specify one value, the image stretches the same amount for width and height. Two values equal the width then the height to stretch. Read more…

Using Logo with CSS

Category: CSS | 549 views | 1 Comment |

Let’s start with with HTML code. It needs to be as simple as possible, showing only the name of your site/logo enclosed within header tags and a link:

1	<h1><a href="http://CSSHOOK.COM">CSS HOOK</a></h1>

Now once you have the HTML code in place, it’s simply a case of styling it with some straight forward CSS.

h1 {
	text-decoration:none;
	border:0;
	width : 162px;
	height : 113px;
	margin : 0;
	padding : 0;
	background : url(/images/logo.gif) no-repeat 0 0;
}
 
h1 a {
	display : block;
	height : 113px;
	text-indent : -9999px;
}

Introduction to CSS3

Category: CSS, CSS Tips, CSS3 Tutorial | 687 views | Add a Comment |

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

How to design css sitemap Tree

Category: CSS, CSS3 Tutorial | 4,535 views | Add a Comment |

I will present a technique to display a multi-level unordered list in the form of a tree with lines connecting nodes.

Our intention is to avoid cluttering the HTML code with unnecessary tags. Ideally, the code would be as simple as this:

<ul class=”tree”> <li>Animals <ul> <li>Birds</li> <li>Mammals <ul> <li>Elephant</li> <li>Mouse</li> </ul> </li> . . . </ul>

So it’s just a regular multi-level unordered list, with no additional elements. The only thing that indicates it’s a tree is the tree class added to the first-level <ul> element. Without styling, the above code produces a familiar result:

Animals
- Birds
- Mammals
  - Elephant
  - Mouse
- Reptiles
Plants
- Flowers
  - Rose
  - Tulip
- Trees

Bullets Be Gone

The first thing that we need to do is get rid of the ugly bullets. We accomplish this by setting the list-style-type property to none. Read more…

Categories

Popular Tags

Comments

Friends

Sponsored Links

Latest CSS Examples

Links

CSS Experiments

Free Resources