CSS Measurement Units: CSS Colors - Hex Codes
CSS Measurement Units: CSS Colors - Hex Codes
Unit
%
cm
em
ex
in
mm
pc
pt
px
Description
Defines a measurement as a percentage
relative to another value, typically an
enclosing element.
Defines a measurement in centimeters.
A relative measurement for the height of a
font in em spaces. Because an em unit is
equivalent to the size of a given font, if you
assign a font to 12pt, each "em" unit would
be 12pt; thus, 2em would be 24pt.
This value defines a measurement relative
to a font's x-height. The x-height is
determined by the height of the font's
lowercase letter x.
Defines a measurement in inches.
Defines a measurement in millimeters.
Defines a measurement in picas. A pica is
equivalent to 12 points; thus, there are 6
picas per inch.
Defines a measurement in points. A point is
defined as 1/72nd of an inch.
Defines a measurement in screen pixels.
Example
p {font-size: 16pt; line-height: 125%;}
p {word-spacing: .15in;}
p {word-spacing: 15mm;}
p {font-size: 20pc;}
body {font-size: 18pt;}
p {padding: 25px;}
CSS Colors
Format
Hex Code
Short Hex Code
RGB %
RGB Absolute
keyword
Syntax
#RRGGBB
#RGB
rgb(rrr%,ggg%,bbb%)
rgb(rrr,ggg,bbb)
aqua, black, etc.
Example
p{color:#FF0000;}
p{color:#6A7;}
p{color:rgb(50%,50%,50%);}
p{color:rgb(0,0,255);}
p{color:teal;}
This tutorial will teach you how to set backgrounds of various HTML elements. You can set following
background properties of an element:
The background-repeat property is used to control the repetition of an image in the background.
The background-position property is used to control the position of an image in the background.
Example:
<p style="background-color:yellow;">
This text has a yellow background color.
</p>
<table style="background-image:url(/images/pattern1.gif);
background-repeat: repeat;">
<tr><td>
This table has background image which repeats multiple times.
</td></tr>
</table>
<table style="background-image:url(/images/pattern1.gif);
background-repeat: repeat-y;">
<tr><td>
This table has background image set which will repeat vertically.
</td></tr>
</table>
<table style="background-image:url(/images/pattern1.gif);
background-repeat: repeat-x;">
<tr><td>
This table has background image set which will repeat horizontally.
</td></tr>
</table>
<p style="background-image:url(/images/pattern1.gif);
background-attachment:fixed;">
This parapgraph has fixed background image.
</p>
<p style="background-image:url(/images/pattern1.gif);
background-attachment:scroll;">
This parapgraph has scrolling background image.
</p>
Shorthand property :
You can use the background property to set all the background properties at once.
For example:
<p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the default
serif font depending on which font you have at your system.
</p>
<p style="font-style:italic;">
This text will be rendered in italic style
</p>
<p style="font-variant:small-caps;">
This text will be rendered as small
caps
</p>
<p style="font-weight:bold;">
This font is bold.
</p>
<p style="font-weight:bolder;">
This font is bolder.
</p>
<p style="font-weight:900;">
This font is 900 weight.
</p>
<p style="font-size:20px;">
This font size is 20 pixels
</p>
<p style="font-size:small;">
This font size is small
</p>
<p style="font-size:large;">
This font size is large
</p>
<p style="font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
<p style="font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that
your computer doesn't have a condensed or expanded
version of the font being used.
</p>
Shorthand property :
<p style="font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>
<p style="color:red;">
This text will be written in red.
</p>
<p style="direction:rtl;">
This text will be renedered from right to left
</p>
<p style="letter-spacing:5px;">
This text is having space between letters.
</p>
<p style="word-spacing:5px;">
This text is having space between words.
</p>
<p style="text-indent:1cm;">
This text will have first line indented by 1cm
and this line will remain at its actual position
this is done by CSS text-indent property.
</p>
<p style="text-align:right;">
This will be right aligned.
</p>
<p style="text-align:center;">
This will be center aligned.
</p>
<p style="text-align:left;">
This will be left aligned.
</p>
<p style="text-decoration:underline;">
This will be underlined
</p>
<p style="text-decoration:line-through;">
This will be striked through.
</p>
<p style="text-decoration:overline;">
This will have a over line.
</p>
<p style="text-decoration:blink;">
This text will have blinking effect
</p>
<p style="text-transform:capitalize;">
This will be capitalized
</p>
<p style="text-transform:uppercase;">
This will be in uppercase
</p>
<p style="text-transform:lowercase;">
This will be in lowercase
</p>
CSS Images
Images are very important part of any Web Page. Though it is not recommended to include lot of images but
it is still important to use good images wherever it is required.
CSS plays a good role to control image display. You can set following image properties using CSS.
The
The
The
The