Browsed by
Category: css tags

CSS3 new attribute selectors

CSS3 new attribute selectors

CSS3 introduce 3 new selectors for the sub-string or matching attributes. they are [att^=val], [att$=val] and [att*=val]. these selectors coming under Sub-string Matching Attribute Selectors section. [att^=val] This is the “begins with” selector. This selector allows for the selection of elements where a specified attribute begins with a specified string. example: <pre>a[alt~=”Kerala”] { color:#00aa00; font-size:14px; border:1px solid #00aa00; padding:3px 10px; font-family:Arial, Helvetica, sans-serif;  text-decoration:none; margin:2px; background:#afa }</pre> <code>a[alt~=”Karnataka”] { color:#0000aa; font-size:14px; border:1px solid #0000aa; padding:3px 10px; font-family:Arial, Helvetica, sans-serif; text-decoration:none;…

Read More Read More

CSS Positioning

CSS Positioning

Position:Static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.Normally you wouldn’t specify this unless you needed to override a positioning that had been previously set. #div-1 { position:static; }   Position:Relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let’s move div-1 down…

Read More Read More

Efficient CSS with shorthand properties

Efficient CSS with shorthand properties

Efficient CSS with shorthand properties I get a lot of questions about CSS from people who aren’t crazy enough to have spent the thousands of hours working with CSS that I have. Sometimes I’m asked to take a look at something they’re working on to see if I can figure out why it doesn’t work as expected. When I look at their CSS I often find that it’s both bloated and unorganised. One of the reasons for using CSS to…

Read More Read More

Selector syntax

Selector syntax

A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match. A selector is a chain of one or more simple selectors separated by combinators. Combinators are: whitespace, “>”, and “+”. Whitespace may appear between a combinator and the simple selectors around it. The elements of the document tree that match a selector are called…

Read More Read More

The Complete CSS Tags

The Complete CSS Tags

Text and Fonts font font-family font-size font-weight font-style font-variant line-height letter-spacing word-spacing text-align text-decoration text-indent text-transform vertical-align white-space Colours and Backgrounds color background-color background background-image background-repeat background-position background-attachment The Box Model – dimensions, padding, margin and borders padding, padding-top, padding-right, padding-bottom, padding-left border, border-top, border-right, border-bottom, border-left border-style, border-top-style, border-right-style, border-bottom-style, border-left-style border-color, border-top-color, border-right-color, border-bottom-color, border-left-color border-width, border-top-width, border-right-width, border-bottom-width, border-left-width outline outline-style outline-color outline-width margin, margin-top, margin-right, margin-bottom, margin-left width height min-width max-width min-height max-height Positioning and Display…

Read More Read More

Rounded Corners

Rounded Corners

When New WordPress started using this i though you know Internet Explorer is definitely out now when i’m doing some css work that needs rounded corners I’m mostly using only this technique because buyers are ok with it although it’s just for FireFox and Safari. And since most of people still don’t know about this i figured it’s good thing to share. Of course i’m talking about Border-radius property for FireFox and Safari 3 (only). And here are some nice…

Read More Read More

100% height model css?

100% height model css?

I had been looking around for a way to accomplish fixed header and footer on a website when scrolling, and somehow i haven’t got it right with background attachment: fixed, neither i got it with absolute position… I have a main Div called wrapper, inside there are three main Divs: header, content and footer, and each one of them has sub Divs inside for the content of each one. So the structure goes something like this in general terms: body[…

Read More Read More

CSS font shorthand rule

CSS font shorthand rule

When styling fonts with CSS you may be doing this:font-size: 1em;line-height: 1.5em;font-weight: bold;font-style: italic;font-variant: small-caps;font-family: verdana,serif; There’s no need though as you can use this CSS shorthand property:font: 1em/1.5em bold italic small-caps verdana,serif Much better! Just a couple of words of warning: This CSS shorthand version will only work if you’re specifying both the font-size and the font-family. Also, if you don’t specify the font-weight, font-style, or font-varient then these values will automatically default to a value of normal, so…

Read More Read More

Why tables for layout is stupid:

Why tables for layout is stupid:

Tables existed in HTML for one reason: To display tabular data. But then border=”0″ made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web. Find out where the problems stem from, and learn solutions to create transitional or completely table-less layout. The problem with…

Read More Read More