CSS property
advertisement
css properties
In HTML, the tags (i.e. <b>, <body>, <a>, etc) are the meat and potatoes of the HTML language. In
CSS, there are many properties (i.e. Font, Text, Box, and Color) that you have probably seen if you've
read through this tutorial.
Advertise on Tizag.com
CSS has grouped all the CSS properties into logical groups to give the massive amount of properties
some order, unlike HTML. This lesson will review these areas and give a brief description of what they are
for. For a quick reference, check out our CSS Properties Reference.
css font properties
The CSS font properties control all aspects of your text graphical representation. From the thickness
of your font (font-weight) to font type (font-family) of your choice. Here are all the font properties at your
disposal:
font
font-family
font-size
font-style
font-weight
font-variant
css text properties
The CSS text properties control the spacing, alignment, decoration, and other miscellaneous aspects
of the text. Here is a list of all the CSS text properties. Remember to check out our CSS Properties
Reference for a description and example of all of the properties mentioned in this lesson.
letter-spacing
word-spacing
text-decoration
vertical-align
text-transform
text-align
text-indent
line-height
css box properties
The CSS box properties are used to define the spacing in and around HTML elements, their borders,
and other positioning aspects. Border, Margin, and Padding all have four properties each: top, right,
bottom, and left.
Margin
Padding
Border
Border-width
Border-color
Border-style
Width
Height
Float
Clear
css color properties
The CSS color property defines what color the text inside the specified HTML element will have. Use
classes or identifiers to have multiple colors for one type of HTML element.
Color
css background properties
The CSS background properties control things like if the background is a single color or maybe an
image. If it's an image you can set the position of the image and tell it whether or not you want the image
to repeat left-to-right and/or top-to-bottom.
Background
Background Color
Background Image
Background Repeat
Background Attachment
Background Position
css classification properties
We think of the classification properties as having the list element and all the leftover elements that
would not fit into any other category. Check out our CSS Properties Reference for a an example of all the
properties mentioned here.
Display
Whitespace
List Style
List Style Type
List Style Image
List Style Position
= Index DOT Css by Brian Wilson =
Main Index | Property Index | CSS Support History | Browser History
All | Fonts | Text | Colors/Backgrounds | Scrollbars | Outlines | Lists | Tables
Classification | Dimensions | Positioning | Margins | Padding | Borders
Dynamic Content | Generated
Content | International | Printing | Aural | Extensions
A/B
C
D/E
F
H/I
L
accelerator
azimuth
background
backgroundattachment
background-color
background-image
background-position
background-position-x
background-position-y
background-repeat
behavior
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-rightwidth
border-spacing
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
bottom
caption-side
clear
clip
color
content
counter-increment
counter-reset
cue
cue-after
cue-before
cursor
direction
display
elevation
empty-cells
filter
float
font
font-family
font-size
font-size-adjust
height
ime-mode
include-source
layer-background-color
layer-backgroundimage
layout-flow
layout-grid
layout-grid-char
layout-grid-char-
layout-grid-line
layout-grid-mode
layout-grid-type
left
letter-spacing
font-stretch
font-style
font-variant
font-weight
line-break
line-height
list-style
list-style-image
list-style-position
list-style-type
spacing
M
O
P
Q/R
S
T
margin
margin-bottom
margin-left
margin-right
margin-top
marker-offset
marks
max-height
max-width
min-height
min-width
-moz-binding
-moz-border-radius
-moz-border-radiustopleft
-moz-border-radiustopright
-moz-border-radiusbottomright
-moz-border-radiusbottomleft
-moz-border-top-colors
-moz-border-rightcolors
-moz-border-bottomcolors
-moz-border-left-colors
-moz-opacity
-moz-outline
-moz-outlinecolor
-moz-outlinestyle
-moz-outlinewidth
-moz-user-focus
-moz-user-input
-moz-user-modify
-moz-user-select
orphans
outline
outline-color
outline-style
outline-width
overflow
overflow-X
overflow-Y
padding
padding-bottom
padding-left
padding-right
padding-top
page
page-break-after
page-break-before
page-break-inside
pause
pause-after
pause-before
pitch
pitch-range
play-during
position
quotes
-replace
richness
right
ruby-align
ruby-overhang
ruby-position
-set-link-source
size
speak
speak-header
speak-numeral
speak-punctuation
speech-rate
stress
scrollbar-arrow-color
scrollbar-base-color
scrollbar-dark-shadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-3d-light-color
scrollbar-track-color
table-layout
text-align
text-align-last
text-decoration
text-indent
text-justify
text-overflow
text-shadow
text-transform
text-autospace
text-kashidaspace
text-underlineposition
top
U/V
W/Z
unicode-bidi
-use-link-source
vertical-align
visibility
voice-family
volume
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom
Boring Copyright Stuff....
Classification Properties
Display
Whitespace
List Style Type
List Style Image
List Style Position
List Style
Display
Syntax:
display: <value>
Possible Values: block | inline | list-item | none
Initial Value:
block
Applies to:
All elements
Inherited:
No
The display property is used to define an element with one of
four values:
block (a line break before and after the element)
inline (no line break before and after the element)
list-item (same as block except a list-item marker is
added)
none (no display)
Each element typically is given a default display value by
the browser, based on suggested rendering in the HTML
specification.
The display property can be dangerous because of its
ability to display elements in what would otherwise be an
improper format. The use of the value none will turn off
display of the element to which it is assigned, including
any children elements!
Whitespace
Syntax:
white-space: <value>
Possible Values: normal | pre | nowrap
Initial Value:
normal
Applies to:
All elements
Inherited:
Yes
The white-space property will determine how spaces
within the element are treated. This property takes one of
three values:
normal (collapses multiple spaces into one)
pre (does not collapse multiple spaces)
nowrap (does not allow line wrapping without
a <BR> tag)
List Style Type
Syntax:
list-style-type: <value>
Possible
Values:
disc | circle | square | decimal | lower-roman | upper-roman |
lower-alpha | upper-alpha | none
Initial Value:
disc
Applies to:
Elements with display value list-item
Inherited:
Yes
The list-style-type property specifies the type of
list-item marker, and is used if list-styleimage is none or if image loading is turned off.
Examples:
LI.square { list-style-type:
UL.plain { list-style-type:
OL
{ list-style-type:
B C D E etc. */
OL OL
{ list-style-type:
2 3 4 5 etc. */
OL OL OL { list-style-type:
ii iii iv v etc. */
square }
none }
upper-alpha }
/* A
decimal }
/* 1
lower-roman }
/* i
List Style Image
Syntax:
list-style-image: <value>
Possible Values: <url> | none
Initial Value:
none
Applies to:
Elements with display value list-item
Inherited:
Yes
The list-style-image property specifies the image
that will be used as list-item marker when image
loading is turned on, replacing the marker specified
in the list-style-type property.
Examples:
UL.check { list-style-image: url(/LImarkers/checkmark.gif) }
UL LI.x { list-style-image: url(x.png) }
List Style Position
Syntax:
list-style-position: <value>
Possible Values: inside | outside
Initial Value:
outside
Applies to:
Elements with display value list-item
Inherited:
Yes
The list-style-position property takes the
value inside or outside, with outside being the
default. This property determines where the marker
is placed in regard to the list item. If the
value inside is used, the lines will wrap under the
marker instead of being indented. An example
rendering is:
Outside rendering:
* List item 1
second line of list item
Inside rendering:
* List item 1
second line of list item
List Style
Syntax:
list-style: <value>
Possible Values: <list-style-type> || <list-style-position> || <url>
Initial Value:
Not defined
Applies to:
Elements with display value list-item
Inherited:
Yes
The list-style property is a shorthand for the liststyle-type, list-style-position, and list-styleimage properties.
Examples:
LI.square { list-style: square inside }
UL.plain { list-style: none }
UL.check { list-style: url(/LImarkers/checkmark.gif) circle }
OL
{ list-style: upper-alpha }
OL OL
{ list-style: lower-roman inside }
CSS Index ~ CSS Structure ~ CSS Properties
Home, Forums, Reference, Tools, FAQs, Articles, D
esign, Links
Copyright © 1996 - 2006.
All rights
(CSS property)
display
Learn
Play
SPEC
Inherited Initial
Version
INLINE CSS1, 2, 2.1
NO
BROWSER SUPPORT (MORE…)
IE8+
FF1+
SA1.3+
OP9.2+
CH2+
FULL
PARTIAL
BUGGY
FULL
BUGGY
Syntax
display: { block | inline | inline-block | inline-table | list-item |runin | table | table-caption | table-cell | table-column | table-columngroup | table-footer-group | table-header-group | table-row |table-rowgroup | none | inherit } ;
Description
This property controls the type of box an element generates.
The computed value may differ from the specified value for the root element
and for floated or absolutely positioned elements; see The Relationship
Between display, position, and float for details about the relationship
between the display, float, and position properties.
Note that a user agent style sheet may override the initial value
ofinline for some elements.
Example
The following rule will cause a elements that are descendants of
the.menu element to render as block elements instead of inline elements:
.menu a {
display: block;
}
Value
block
block makes the element generate a block box.
inline
inline makes the element generate one or more inline boxes.
inline-block
inline-block makes the element generate a block box that’s laid out as if it
were an inline box.
inline-table
inline-table makes the element behave like a table that’s laid out as if it
were an inline box.
list-item
list-item makes the element generate a principal block box and a list-item
inline box for the list marker.
run-in
A value of run-in makes the element generate either a block box or an inline
box, depending on the context. If the run-in box doesn’t contain a block box,
and is followed by a sibling block box (except a table caption) in the normal
flow that isn’t, and doesn’t contain, a run-in box, the run-in box becomes the
first inline box of the sibling block box. Otherwise, the run-in box becomes a
block box.
table
table makes the element behave like a table.
table-caption
table-caption makes the element behave like a table caption.
table-cell
table-cell makes the element behave like a table cell.
table-column
table-column makes the element behave like a table column.
table-column-group
table-column-group makes the element behave like a table column group.
table-footer-group
table-footer-group makes the element behave like a table footer row group.
table-headergroup
table-header-group makes the element behave like a table header row
group.
table-row
table-row makes the element behave like a table row.
tablerowgroup
table-row-group makes the element behave like a table body row group.
no
ne
A value of none makes the element generate no box at all. Descendant boxes
cannot generate boxes either, even if theirdisplay property is set to
something other than none.
Compatibility
Introduction
2.Values
3.Background properties
o
o
3.1.Layering multiple background images
3.2.The ‘background-color’ property
3.3.The ‘background-image’ property
3.4.The ‘background-repeat’ property
3.5.The ‘background-attachment’ property
3.6.The ‘background-position’ property
3.7.The ‘background-clip’ property
3.8.The ‘background-origin’ property
3.9.The ‘background-size’ property
3.10.The ‘background’ shorthand property
3.11.The backgrounds of special elements
4.Border properties
o
o
4.1.The ‘border-color’ properties
4.2.The ‘border-style’ properties
4.3.The ‘border-width’ properties
4.4.The border shorthand properties
5.Rounded Corners
o
o
5.1.The ‘border-radius’ properties
5.2.Corner Shaping
5.3.Corner Clipping
5.4.Color and Style Transitions
5.5.Overlapping Curves
5.6.Effect on Tables
6.Border Images
o
6.1.The ‘border-image-source’ property
6.2.The ‘border-image-slice’ property
6.3.The ‘border-image-width’ property
6.4.The ‘border-image-outset’ property
6.5.The ‘border-image-repeat’ property
6.6.Border-image drawing process
6.7.The ‘border-image’ shorthand
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
o
Border Width
The border-width property is used to set the width of the border.
The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.
Note: The "border-width" property does not work if it is used alone. Use the "border-style" property
to set the borders first.
Example
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
Try it yourself »
Border Color
The border-color property is used to set the color of the border. The color can be set by:
name - specify a color name, like "red"
RGB - specify a RGB value, like "rgb(255,0,0)"
Hex - specify a hex value, like "#ff0000"
You can also set the border color to "transparent".
Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to
set the borders first.
Example
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
Try it yourself »
Border - Individual sides
In CSS it is possible to specify different borders for different sides:
Example
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Try it yourself »
The example above can also be set with a single property:
Example
border-style:dotted solid;
Try it yourself »
The border-style property can have from one to four values.
border-style:dotted solid double dashed;
o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed
border-style:dotted solid double;
o top border is dotted
o right and left borders are solid
o bottom border is double
border-style:dotted solid;
o top and bottom borders are dotted
o right and left borders are solid
border-style:dotted;
o all four borders are dotted
The border-style property is used in the example above. However, it also works with border-width and
border-color.
Border - Shorthand property
As you can see from the examples above, there are many properties to consider when dealing with
borders.
To shorten the code, it is also possible to specify all the border properties in one property. This is
called a shorthand property.
The shorthand property for the border properties is "border":
Example
border:5px solid red;
Try it yourself »
When using the border property, the order of the values are:
border-width
border-style
border-color
It does not matter if one of the values above are missing (although, border-style is required), as long
as the rest are in the specified order.
More Examples
All the top border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the top border in
one declaration.
Set the style of the bottom border
This example demonstrates how to set the style of the bottom border.
Set the width of the left border
This example demonstrates how to set the width of the left border.
Set the color of the four borders
This example demonstrates how to set the color of the four borders. It can have from one to four
colors.
Set the color of the right border
This example demonstrates how to set the color of the right border.
All CSS Border Properties
Property
Description
border
Sets all the border properties in one declaration
border-bottom
Sets all the bottom border properties in one declaration
border-bottom-color
Sets the color of the bottom border
border-bottom-style
Sets the style of the bottom border
border-bottom-width
Sets the width of the bottom border
border-color
Sets the color of the four borders
border-left
Sets all the left border properties in one declaration
border-left-color
Sets the color of the left border
border-left-style
Sets the style of the left border
border-left-width
Sets the width of the left border
border-right
Sets all the right border properties in one declaration
border-right-color
Sets the color of the right border
border-right-style
Sets the style of the right border
border-right-width
Sets the width of the right border
border-style
Sets the style of the four borders
border-top
Sets all the top border properties in one declaration
border-top-color
Sets the color of the top border
border-top-style
Sets the style of the top border
border-top-width
Sets the width of the top border
border-width
Sets the width of the four borders
CSS Basics.com
Chapter 13: CSS Borders
Inherit ed: N o
Border
You can set the color, style and width of the borders around an element in one
declaration by using theborder property.
border: 1px solid #333333;
Values:
color
style
width
Or you can set each property individually
Border Co lor
You can set the color of a border independently with the border-color property.
border-color: value;
Values:
color name
hexadecimal number
RGB color code
transparent
Border Style
You can set the style of a border independently with the border-style property.
border-style: value;
Values:
dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid
Border Widt h
You can set the width of a border independently with the border-width property.
border-width: value;
Values:
Length
Thin
Medium
Thick
Or you can set the elements for each borders side individually
Border Bottom
You can set the color, style and width of the bottom border around an element in one
declaration with theborder-bottom property.
border-bottom: 1px solid #333333;
Values:
color
style
width
Or you can set each valu
