CSS Style Properties

Back to css.

*cssparam (2008-12-16)

CSS Style Properties

Hi,

Here are the most common CSS Style Properties (Parameters), very useful. A small example to display hints in forms :

<input type="text" name="username" size="15" value="Your username" style="color: #AAAAAA; font-style: italic;" onfocus="if (this.value == 'Your username') {this.value=''; this.style.color='#000000'; this.style.fontStyle='normal';}">

Text properties

text-transform : Sets the case of the text (capitalize, uppercase, lowercase, none)

vertical-align : Aligns the element vertically to the baseline (baseline, sub, super, top, text-top, middle, bottom, text-bottom)

text-align : Aligns the element horizontally across the page or within division (left, right, center, justify)

text-indent : Sets the amount of indent for the first line of a text block (XX units)

line-height : Specifies the distance between baselines of consecutive lines of text (normal, XX units)

word-spacing : Allows to control the space between words (normal, XX units)

letter-spacing : Allows to control the space between letters (normal, XX units)

text-decoration : See parameters (underline, overline, line-through, blink, none)

Font properties

font-family : Specifies the font family, or typeface, to use for the element (futura, helvetica, arial, sans-serif...)

font-style : Specifies the style of type to use for the element (normal, italic, oblique)

font-variant : Allows to select the small caps style of the typeface (normal, small-caps)

font-weight : Allows to select the weight or boldness of the font (lighter, normal, bold, bolder)

font-size : Allows to select the size of the type in the font (XX units)

Color and Background Properties

color: Sets the color of the element (color name or HEX)

background-color : Sets the color for the background of the element (color name or HEX)

background-image : Specifies an image to use for the background of an element (url(URL))

background-repeat : Specifies how and if a background image is repeated (repeat, repeat-x, repeat-y, no-repeat)

background-attachment : Allows to attach the background image so that it doesn't scroll (scroll, fixed)

background-position : Sets the initial position of the background image (top, center, bottom, left, center, right)

Placement Properties

margin-top : Places the top margin of the element (XX units, auto)

margin-bottom : Places the bottom margin of the element (XX units, auto)

margin-left : Places the left margin of the element (XX units, auto)

margin-right : Places the right margin of the element (XX units, auto)

padding-top : Inserts padding at the top of the element (XX units, auto)

padding-bottom : Inserts padding at the bottom of the element (XX units, auto)

padding-left : Inserts padding along the left side of the element (XX units, auto)

padding-right : Inserts padding along the right side of the element (XX units, auto)

Table Properties

border-width : Sets the width of the element's border (thin, medium, thick, none)

border-style : Sets the style of the element's border (none, dotted, dashed, solid, double, groove, ridge, inset, outset)

border-color : Sets the color of the element's border (color name or HEX)

border, border-top, border-bottom, border-left, border-right : Sets the width, color, and style of the border simultaneously (width value, style value, color value)

height : Sets the height of the element (XX units)

width : Sets the width of the element (XX units)

float : Places the element to the left or right and flows text around it (right, left, none)

clear : Prevents text from flowing around an element (right, left, none)

Classification Properties

display : Specifies the category of object an element belongs to (none, block, inline, list-item)

white-space : Describes how white space should be handled within the block elements (normal, pre, nowrap)

list-style-type : Sets the type of symbol that appears in front of a list item (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper, alpha)

list-style-image : Selects a specific image to serve as a bullet in front of list items (url(URL))

list-style-position : Describes how the bullet marker and text in a list line up with each other (inside, outside)

*kanigi (2010-06-05 19:17:32)
CSS Style Properties

Thanks for this list, that is helpful.

See also

ficgs
More websites

You must register to see these links, as this is a collaborative page, then you may change the order of the links by clicking the icons before the titles.

admin
Other websites

The following links might be less relevant, please change their ranks if you find them useful.

jessett.com > css > *
jessett > web sites

div {height: 100px} The division will have a
div {width: 100px} The division will have a

Complete Flex 3 * List | building blocks
joelhooks > 2008/06/15/complete flex 3

SuperPanelPlus: Resizable Flex Panel Component with Accessible...
Integrating Adobe AIR, Cairngorm, PureMVC, LiveCycle Data Services...

CSS Style Property: list-style-position
webdesign.about > od/styleproperties/p/blspliststylepo.htm

outside The bullet appears outside the content flow, this is the more...
inherit The element should have the same list-style-position setting...

Properties : CSS 2.1 Reference : Cultured Code
culturedcode

but automatically introduces line breaks to avoid loosing content...
If 2 values are present, the first one determines horizontal and the...

Cascading Style Sheets - Wikipedia, the free encyclopedia
en.wikipedia > wiki/Cascading Style Sheets

Articles containing potentially dated statements from August...
Articles that may contain original research from March...

Designing with CSS – Part 2: Defining * and working with floats | Adobe Developer Connection
adobe > devnet/dreamweaver/articles

Resolve province from Canadian postal code (PHP...
Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part...

CSS Properties List
pageresource > dhtml

none inline block list-item run-in...
aqua black blue fuchsia gray green...
In CSS 2, the only valid shape is a rectangle, using the...

learn web standards :: css guide - text *
westciv > style master/academy

will not necessarily be the same as the default text...

Using CSS to Style the Milonic Menu
support.milonic > beginners

CSS - Style sheets
en.kioskea > contents

numeric value (100, 200, 300, 400, 500, 600, 700, 800,...
Basic Excel Formulas Below are some basic formulas for Microsoft...

WCSS Tutorial: Learn WAP CSS border-style, border-width, border-color Properties through Examples
developershome > wap/w

Matching WCSS Cascading Style Sheets to Different User...
Cascading Rules for Handling Multiple Groups of WCSS Styles Applied...
WCSS border properties allow mobile Internet application developers...

[SOLVED] javascript how to retrieve css style property [Archive] - Ubuntu Forums
ubuntuforums > archive/index.php/t 499951

CSS Tutorials: Centering with CSS, Links, Style Switching, Switchers, CSS Shorthand Properties - CSS Tutorials Tips - CSS Resources, Web Site Resource...
websitetips

Solutions to CSS-Related Browser Bugs, CSS Bug Fixes, Cross-Browser,...
Part 3 of this series explains pseudo-classes and pseudo-elements,...

[#TRINIDAD-1453] need a public API to get the * on the server in our renderers. - ASF JIRA
issues.apache > jira/browse/TRINIDAD 1453

Free CSS | Free CSS Tutorials | (X)HTML CSS Style Tag Properties
free css > free

CSS shorthand properties - an introduction
home.no > junjun/html/shorthand

Style Changes with the W3C DOM
aglasshalffull

DreamWeaver tutorial - How to create a CSS Style for your site with Dreamweaver
siteground > tutorials/dreamweaver

tap selector is a particular combination of tags (for example,...
selector type you can create styles that will be applied to a...

'div' CSS Attributes and JavaScript * : div « HTML Tag Reference « HTML CSS Reference
java2s > Code/HTML

Mobile style - CSS Mobile Profile 2.0 - Opera Developer Community
dev.opera > articles/view/mobile style

TopXML : The outline-style property (CSS Reference)
topxml

Css property text - css style for the text
css.flepstudio > en

those white spaces are being considered (as written in the html they...
), all the words from lower case to upper case (value...

There's no trackback at the moment.

[Games online] [Last topics] [Glossary] [Help] [Membership] [About]
[Social network] [Hot news] [Discussions] [Seo forums] [Meet people] [Directory]