Archive for the ‘CSS’ Category

jQuery .hover change div background-position example

Wednesday, November 16th, 2011

example for reference:

$(“#formButtonSubmit“).hover(function(){
$(this).css({
backgroundPosition: ’0px 0px’
});
}, function(){
$(this).css({
backgroundPosition: ’0px 30px’
});
});

CSS !important override

Tuesday, February 1st, 2011

A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.

example:

p { color: #ff0000 !important; }

CSS text-transform

Tuesday, February 1st, 2011

{text-transform:uppercase}
{text-transform:capitalize}
{text-transform:lowercase}

also consider:
{font-variant:small-caps}

CSS pseudo elements & pseudo classes

Tuesday, February 1st, 2011

CSS Pseudo Elements

:after
Adds content after an element

:before
Adds content before an element

:first-letter
Adds a style to the first character of a text

:first-line
Adds a style to the first line of a text

example:
h1:after
{
content:url(smiley.gif);
}

Posted on 5 Oct 2009, 17:00 – Category: CSS
CommentsEditDelete

Pseudo Classes

:active
Adds a style to an element that is activated

:first-child
Adds a style to an element that is the first child of another element

:focus
Adds a style to an element that has keyboard input focus

:hover
Adds a style to an element when you mouse over it

:lang
Adds a style to an element with a specific lang attribute

:link
Adds a style to an unvisited link

:visited
Adds a style to a visited link

CSS em

Tuesday, February 1st, 2011

pixels/16=em
example:
h1 {font-size:2.5em} /* 40px/16=2.5em */
h2 {font-size:1.875em} /* 30px/16=1.875em */
p {font-size:0.875em} /* 14px/16=0.875em */