CSS Tutorial
CSS Basic
What You Should Already Know
Before
you continue you should have a basic understanding of the following:
- HTML / XHTML
If you
want to study these subjects first, find the tutorials on our Home page.
What is CSS?
- CSS stands for Cascading Style Sheets
- Styles define how to display HTML elements
- Styles were added to HTML 4.0 to solve a problem
- External Style Sheets can save a lot of work
- External Style Sheets are stored in CSS files
CSS Demo
An HTML
document can be displayed with different styles: See how it
works
Styles Solved a Big Problem
HTML was
never intended to contain tags for formatting a document.
HTML was
intended to define the content of a document, like:
<h1>This
is a heading</h1>
<p>This
is a paragraph.</p>
When tags
like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of large
web sites, where fonts and color information were added to every single page,
became a long and expensive process.
To solve
this problem, the World Wide Web Consortium (W3C) created CSS.
In HTML
4.0, all formatting could be removed from the HTML document, and stored in a
separate CSS file.
All
browsers support CSS today.
CSS Saves a Lot of Work!
CSS
defines HOW HTML elements are to be displayed.
Styles
are normally saved in external .css files. External style sheets enable you to
change the appearance and layout of all the pages in a Web site, just by
editing one single file!
CSS Syntax
A CSS
rule has two main parts: a selector, and one or more declarations:
The
selector is normally the HTML element you want to style.
Each
declaration consists of a property and a value.
The
property is the style attribute you want to change. Each property has a value.
CSS Example
A CSS
declaration always ends with a semicolon, and declaration groups are surrounded
by curly brackets:
p {color:red;text-align:center;}
To make
the CSS more readable, you can put one declaration on each line, like this:
CSS Comments
Comments
are used to explain your code, and may help you when you edit the source code
at a later date. Comments are ignored by browsers.
A CSS
comment begins with "/*", and ends with "*/", like this:
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
The id and class Selectors
In
addition to setting a style for a HTML element, CSS allows you to specify your
own selectors called "id" and "class".
The id Selector
The id
selector is used to specify a style for a single, unique element.
The id
selector uses the id attribute of the HTML element, and is defined with a
"#".
The style
rule below will be applied to the element with id="para1":
Do NOT start an ID name
with a number! It will not work in Mozilla/Firefox.The class Selector
The class
selector is used to specify a style for a group of elements. Unlike the id
selector, the class selector is most often used on several elements.
This
allows you to set a particular style for many HTML elements with the same
class.
The class
selector uses the HTML class attribute, and is defined with a "."
In the
example below, all HTML elements with class="center" will be
center-aligned:
You can
also specify that only specific HTML elements should be affected by a class.
In the
example below, all p elements with class="center" will be
center-aligned:
Do NOT start a class name
with a number! This is only supported in Internet Explorer.
When a browser reads a style
sheet, it will format the document according to it.
Three Ways to Insert CSS
There are
three ways of inserting a style sheet:
- External style sheet
- Internal style sheet
- Inline style
External Style Sheet
An
external style sheet is ideal when the style is applied to many pages. With an
external style sheet, you can change the look of an entire Web site by changing
one file. Each page must link to the style sheet using the <link> tag.
The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
An
external style sheet can be written in any text editor. The file should not
contain any html tags. Your style sheet should be saved with a .css extension.
An example of a style sheet file is shown below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Do not add a space between the
property value and the unit (such as margin-left:20 px). The correct way is:
margin-left:20pxInternal Style Sheet
An
internal style sheet should be used when a single document has a unique style.
You define internal styles in the head section of an HTML page, by using the
<style> tag, like this:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Styles
An inline
style loses many of the advantages of style sheets by mixing content with
presentation. Use this method sparingly!
To use
inline styles you use the style attribute in the relevant tag. The style
attribute can contain any CSS property. The example shows how to change the
color and the left margin of a paragraph:
<p
style="color:sienna;margin-left:20px">This is a
paragraph.</p>
Multiple Style Sheets
If some
properties have been set for the same selector in different style sheets, the
values will be inherited from the more specific style sheet.
For
example, an external style sheet has these properties for the h3 selector:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
{
color:red;
text-align:left;
font-size:8pt;
}
And an
internal style sheet has these properties for the h3 selector:
h3
{
text-align:right;
font-size:20pt;
}
{
text-align:right;
font-size:20pt;
}
If the
page with the internal style sheet also links to the external style sheet the
properties for h3 will be:
color:red;
text-align:right;
font-size:20pt;
text-align:right;
font-size:20pt;
The color
is inherited from the external style sheet and the text-alignment and the
font-size is replaced by the internal style sheet.
Multiple Styles Will Cascade into One
Styles
can be specified:
- inside an HTML element
- inside the head section of an HTML page
- in an external CSS file
Tip: Even multiple external style sheets can be
referenced inside a single HTML document.
Cascading order
What
style will be used when there is more than one style specified for an HTML
element?
Generally
speaking we can say that all the styles will "cascade" into a new
"virtual" style sheet by the following rules, where number four has
the highest priority:
1.
Browser default
2.
External style sheet
3.
Internal style sheet (in the head section)
4.
Inline style (inside an HTML element)
So, an
inline style (inside an HTML element) has the highest priority, which means
that it will override a style defined inside the <head> tag, or in an
external style sheet, or in a browser (a default value).
Note: If the link to the
external style sheet is placed after the internal style sheet in HTML
<head>, the external style sheet will override the internal style sheet!CSS Styling
CSS background properties are used to define the background
effects of an element.
CSS properties used for background effects:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Background Color
The
background-color property specifies the background color of an element.
The
background color of a page is defined in the body selector:
With CSS,
a color is most often specified by:
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
- a color name - like "red"
Look at CSS Color Values
for a complete list of possible color values.
In the
example below, the h1, p, and div elements have different background colors:
Example
h1
{background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Background Image
The
background-image property specifies an image to use as the background of an
element.
By
default, the image is repeated so it covers the entire element.
The
background image for a page can be set like this:
Below is
an example of a bad combination of text and background image. The text is
almost not readable:
Background Image - Repeat Horizontally or Vertically
By
default, the background-image property repeats an image both horizontally and
vertically.
Some
images should be repeated only horizontally or vertically, or they will look
strange, like this:
If the
image is repeated only horizontally (repeat-x), the background will look
better:
Example
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
Background Image - Set position and no-repeat
When using a background image, use
an image that does not disturb the text.
Showing
the image only once is specified by the background-repeat property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
In the
example above, the background image is shown in the same place as the text. We
want to change the position of the image, so that it does not disturb the text
too much.
The
position of the image is specified by the background-position property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
Background - Shorthand property
As you
can see from the examples above, there are many properties to consider when
dealing with backgrounds.
To
shorten the code, it is also possible to specify all the properties in one
single property. This is called a shorthand property.
The
shorthand property for background is simply "background":
When
using the shorthand property the order of the property values is:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
It does
not matter if one of the property values is missing, as long as the ones that
are present are in this order.
This
example uses more advanced CSS. Take a look: Advanced example
More Examples
How to set a fixed background image
This example demonstrates how to set a fixed background image. The image will not scroll with the rest of the page.
This example demonstrates how to set a fixed background image. The image will not scroll with the rest of the page.
All CSS Background Properties
|
Property
|
Description
|
|
Sets all the background properties in one declaration
|
|
|
Sets whether a background image is fixed or scrolls with the
rest of the page
|
|
|
Sets the background color of an element
|
|
|
Sets the background image for an element
|
|
|
Sets the starting position of a background image
|
|
|
Sets how a background image will be repeated
|
text formatting
This text is styled
with some of the text formatting properties. The heading uses the text-align,
text-transform, and color properties. The paragraph is indented, aligned, and
the space between characters is specified. The underline is removed from the "Try it yourself" link.
Text Color
The color
property is used to set the color of the text.
With CSS,
a color is most often specified by:
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
- a color name - like "red"
Look at CSS Color Values
for a complete list of possible color values.
The
default color for a page is defined in the body selector.
For W3C compliant CSS: If you
define the color property, you must also define the background-color property. Text Alignment
The
text-align property is used to set the horizontal alignment of a text.
Text can
be centered, or aligned to the left or right, or justified.
When
text-align is set to "justify", each line is stretched so that every
line has equal width, and the left and right margins are straight (like in
magazines and newspapers).
Example
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
p.date {text-align:right;}
p.main {text-align:justify;}
Text Decoration
The
text-decoration property is used to set or remove decorations from text.
The
text-decoration property is mostly used to remove underlines from links for
design purposes:
It can
also be used to decorate text:
Example
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
It is not recommended to underline
text that is not a link, as this often confuses users.Text Transformation
The
text-transform property is used to specify uppercase and lowercase letters in a
text.
It can be
used to turn everything into uppercase or lowercase letters, or capitalize the
first letter of each word.
Example
p.uppercase
{text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Text Indentation
The
text-indentation property is used to specify the indentation of the first line
of a text.
More Examples
Specify the space between characters
This example demonstrates how to increase or decrease the space between characters.
This example demonstrates how to increase or decrease the space between characters.
Specify the space between lines
This example demonstrates how to specify the space between the lines in a paragraph.
This example demonstrates how to specify the space between the lines in a paragraph.
Set the text direction of an element
This example demonstrates how to change the text direction of an element.
This example demonstrates how to change the text direction of an element.
Increase the white space between words
This example demonstrates how to increase the white space between words in a paragraph.
This example demonstrates how to increase the white space between words in a paragraph.
Disable text wrapping inside an element
This example demonstrates how to disable text wrapping inside an element.
This example demonstrates how to disable text wrapping inside an element.
Vertical alignment of an image
This example demonstrates how to set the vertical align of an image in a text.
This example demonstrates how to set the vertical align of an image in a text.
All CSS Text Properties
|
Property
|
Description
|
|
Sets the color of text
|
|
|
Specifies the text direction/writing direction
|
|
|
Increases or decreases the space between characters in a text
|
|
|
Sets the line height
|
|
|
Specifies the horizontal alignment of text
|
|
|
Specifies the decoration added to text
|
|
|
Specifies the indentation of the first line in a text-block
|
|
|
text-shadow
|
Specifies the shadow effect added to text
|
|
Controls the capitalization of text
|
|
|
unicode-bidi
|
|
|
Sets the vertical alignment of an element
|
|
|
Specifies how white-space inside an element is handled
|
|
|
Increases or decreases the space between words in a text
|
CSS font properties define the
font family, boldness, size, and the style of a text.
Difference Between Serif and Sans-serif Fonts
On computer screens, sans-serif
fonts are considered easier to read than serif fonts.CSS Font Families
In CSS,
there are two types of font family names:
- generic family - a group of font families with a similar look (like "Serif" or "Monospace")
- font family - a specific font family (like "Times New Roman" or "Arial")
|
Generic family
|
Font family
|
Description
|
|
Serif
|
Times New Roman
Georgia |
Serif fonts have small lines at the ends on some characters
|
|
Sans-serif
|
Arial
Verdana |
"Sans" means without - these fonts do not have the
lines at the ends of characters
|
|
Monospace
|
Courier New
Lucida Console |
All monospace characters have the same width
|
Font Family
The font
family of a text is set with the font-family property.
The
font-family property should hold several font names as a "fallback"
system. If the browser does not support the first font, it tries the next font.
Start
with the font you want, and end with a generic family, to let the browser pick
a similar font in the generic family, if no other fonts are available.
Note: If the name of a font family is more than
one word, it must be in quotation marks, like font-family: "Times New
Roman".
More than
one font family is specified in a comma-separated list:
For more
commonly used font combinations, look at our Web Safe Font
Combinations.
Font Style
The
font-style property is mostly used to specify italic text.
This
property has three values:
- normal - The text is shown normally
- italic - The text is shown in italics
- oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Example
p.normal
{font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Font Size
The
font-size property sets the size of the text.
Being
able to manage the text size is important in web design. However, you should
not use font size adjustments to make paragraphs look like headings, or
headings look like paragraphs.
Always
use the proper HTML tags, like <h1> - <h6> for headings and
<p> for paragraphs.
The
font-size value can be an absolute, or relative size.
Absolute
size:
- Sets the text to a specified size
- Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
- Absolute size is useful when the physical size of the output is known
Relative
size:
- Sets the size relative to surrounding elements
- Allows a user to change the text size in browsers
If you do not specify a font size,
the default size for normal text, like paragraphs, is 16px (16px=1em).Set Font Size With Pixels
Setting
the text size with pixels gives you full control over the text size:
The
example above allows Internet Explorer 9, Firefox, Chrome, Opera, and Safari to
resize the text.
Note: The example above does not work in IE,
prior version 9.
The text
can be resized in all browsers using the zoom tool (however, this resizes the
entire page, not just the text).
Set Font Size With Em
To avoid
the resizing problem with older versions of Internet Explorer, many developers
use em instead of pixels.
The em
size unit is recommended by the W3C.
1em is
equal to the current font size. The default text size in browsers is 16px. So,
the default size of 1em is 16px.
The size
can be calculated from pixels to em using this formula: 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 */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
In the
example above, the text size in em is the same as the previous example in
pixels. However, with the em size, it is possible to adjust the text size in
all browsers.
Unfortunately,
there is still a problem with older versions of IE. The text becomes larger
than it should when made larger, and smaller than it should when made smaller.
Use a Combination of Percent and Em
The
solution that works in all browsers, is to set a default font-size in percent
for the <body> element:
Example
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
Our code
now works great! It shows the same text size in all browsers, and allows all
browsers to zoom or resize the text!
More Examples
Set the boldness of the font
This example demonstrates how to set the boldness of a font.
This example demonstrates how to set the boldness of a font.
Set the variant of the font
This example demonstrates how to set the variant of a font.
This example demonstrates how to set the variant of a font.
All the font properties in one declaration
This example demonstrates how to use the shorthand property for setting all of the font properties in one declaration.
This example demonstrates how to use the shorthand property for setting all of the font properties in one declaration.
All CSS Font Properties
|
Property
|
Description
|
|
Sets all the font properties in one declaration
|
|
|
Specifies the font family for text
|
|
|
Specifies the font size of text
|
|
|
Specifies the font style for text
|
|
|
Specifies whether or not a text should be displayed in a
small-caps font
|
|
|
Specifies the weight of a font
|
Links can be styled in different
ways.
Styling Links
Links can
be styled with any CSS property (e.g. color, font-family, background, etc.).
Special
for links are that they can be styled differently depending on what state they
are in.
The four
links states are:
- a:link - a normal, unvisited link
- a:visited - a link the user has visited
- a:hover - a link when the user mouses over it
- a:active - a link the moment it is clicked
Example
a:link
{color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
When
setting the style for several link states, there are some order rules:
- a:hover MUST come after a:link and a:visited
- a:active MUST come after a:hover
Common Link Styles
In the
example above the link changes color depending on what state it is in.
Lets go
through some of the other common ways to style links:
Text Decoration
The
text-decoration property is mostly used to remove underlines from links:
Example
a:link
{text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
Background Color
The
background-color property specifies the background color for links:
Example
a:link
{background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
More Examples
Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.
This example demonstrates how to add other styles to hyperlinks.
Advanced - Create link boxes
This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes.
This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes.
The CSS list properties allow you
to:
·
Set different list item markers for ordered lists
·
Set different list item markers for unordered lists
·
Set an image as the list item marker
List
In HTML,
there are two types of lists:
- unordered lists - the list items are marked with bullets
- ordered lists - the list items are marked with numbers or letters
With CSS,
lists can be styled further, and images can be used as the list item marker.
Different List Item Markers
The type
of list item marker is specified with the list-style-type property:
Example
ul.a {list-style-type:
circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
Some of
the values are for unordered lists, and some for ordered lists.
An Image as The List Item Marker
To
specify an image as the list item marker, use the list-style-image property:
The
example above does not display equally in all browsers. IE and Opera will
display the image-marker a little bit higher than Firefox, Chrome, and Safari.
If you
want the image-marker to be placed equally in all browsers, a crossbrowser
solution is explained below.
Crossbrowser Solution
The
following example displays the image-marker equally in all browsers:
Example
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
Example
explained:
- For ul:
- Set the list-style-type to none to remove the list item marker
- Set both padding and margin to 0px (for cross-browser compatibility)
- For all li in ul:
- Set the URL of the image, and show it only once (no-repeat)
- Position the image where you want it (left 0px and down 5px)
- Position the text in the list with padding-left
List - Shorthand property
It is
also possible to specify all the list properties in one, single property. This
is called a shorthand property.
The
shorthand property used for lists, is the list-style property:
When
using the shorthand property, the order of the values are:
- list-style-type
- list-style-position (for a description, see the CSS properties table below)
- list-style-image
It does
not matter if one of the values above are missing, as long as the rest are in
the specified order.
More Examples
All the different list-item markers for lists
This example demonstrates all the different list-item markers in CSS.
This example demonstrates all the different list-item markers in CSS.
All CSS List Properties
|
Property
|
Description
|
|
Sets all the properties for a list in one declaration
|
|
|
Specifies an image as the list-item marker
|
|
|
Specifies if the list-item markers should appear inside or
outside the content flow
|
|
|
Specifies the type of list-item marker
|
The look of an HTML table can be
greatly improved with CSS:
|
Company
|
Contact
|
Country
|
|
Alfreds Futterkiste
|
Maria Anders
|
Germany
|
|
Berglunds snabbköp
|
Christina Berglund
|
Sweden
|
|
Centro comercial Moctezuma
|
Francisco Chang
|
Mexico
|
|
Ernst Handel
|
Roland Mendel
|
Austria
|
|
Island Trading
|
Helen Bennett
|
UK
|
|
Königlich Essen
|
Philip Cramer
|
Germany
|
|
Laughing Bacchus Winecellars
|
Yoshi Tannamuri
|
Canada
|
|
Magazzini Alimentari Riuniti
|
Giovanni Rovelli
|
Italy
|
|
North/South
|
Simon Crowther
|
UK
|
|
Paris spécialités
|
Marie Bertrand
|
France
|
|
The Big Cheese
|
Liz Nixon
|
USA
|
|
Vaffeljernet
|
Palle Ibsen
|
Denmark
|
Table Borders
To
specify table borders in CSS, use the border property.
The
example below specifies a black border for table, th, and td elements:
Notice
that the table in the example above has double borders. This is because both
the table and the th/td elements have separate borders.
To
display a single border for the table, use the border-collapse property.
Collapse Borders
The
border-collapse property sets whether the table borders are collapsed into a
single border or separated:
Example
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
Table Width and Height
Width and
height of a table is defined by the width and height properties.
The
example below sets the width of the table to 100%, and the height of the th
elements to 50px:
Table Text Alignment
The text
in a table is aligned with the text-align and vertical-align properties.
The
text-align property sets the horizontal alignment, like left, right, or center:
The
vertical-align property sets the vertical alignment, like top, bottom, or
middle:
Table Padding
To
control the space between the border and content in a table, use the padding
property on td and th elements:
Table Color
The
example below specifies the color of the borders, and the text and background
color of th elements:
Example
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
More Examples
Make a fancy table
This example demonstrates how to create a fancy table.
This example demonstrates how to create a fancy table.
Set the position of the table caption
This example demonstrates how to position the table caption.
This example demonstrates how to position the table caption.
CSS Box Model
CSS
colors are defined using a hexadecimal (hex) notation for the combination of
Red, Green, and Blue color values (RGB). The lowest value that can be given to
one of the light sources is 0 (hex 00). The highest value is 255 (hex FF).
Hex
values are written as 3 double digit numbers, starting with a # sign.
Color Examples
|
Color
|
Color HEX
|
Color RGB
|
|
|
#000000
|
rgb(0,0,0)
|
|
|
#FF0000
|
rgb(255,0,0)
|
|
|
#00FF00
|
rgb(0,255,0)
|
|
|
#0000FF
|
rgb(0,0,255)
|
|
|
#FFFF00
|
rgb(255,255,0)
|
|
|
#00FFFF
|
rgb(0,255,255)
|
|
|
#FF00FF
|
rgb(255,0,255)
|
|
|
#C0C0C0
|
rgb(192,192,192)
|
|
|
#FFFFFF
|
rgb(255,255,255)
|
16 Million Different Colors
The
combination of Red, Green and Blue values from 0 to 255 gives a total of more
than 16 million different colors to play with (256 x 256 x 256).
Most
modern monitors are capable of displaying at least 16384 different colors.
If you
look at the color table below, you will see the result of varying the red light
from 0 to 255, while keeping the green and blue light at zero.
To see a
full list of color mixes when the red light varies from 0 to 255, click on one
of the hex or rgb values below.
|
Red Light
|
HEX
|
RGB
|
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
Shades of Gray
Gray
colors are displayed using an equal amount of power to all of the light
sources. To make it easier for you to select the right gray color we have
compiled a table of gray shades for you:
|
Gray Shades
|
HEX
|
RGB
|
|
|
#000000
|
rgb(0,0,0)
|
|
|
#080808
|
rgb(8,8,8)
|
|
|
#101010
|
rgb(16,16,16)
|
|
|
#181818
|
rgb(24,24,24)
|
|
|
#202020
|
rgb(32,32,32)
|
|
|
#282828
|
rgb(40,40,40)
|
|
|
#303030
|
rgb(48,48,48)
|
|
|
#383838
|
rgb(56,56,56)
|
|
|
#404040
|
rgb(64,64,64)
|
|
|
#484848
|
rgb(72,72,72)
|
|
|
#505050
|
rgb(80,80,80)
|
|
|
#585858
|
rgb(88,88,88)
|
|
|
#606060
|
rgb(96,96,96)
|
|
|
#686868
|
rgb(104,104,104)
|
|
|
#707070
|
rgb(112,112,112)
|
|
|
#787878
|
rgb(120,120,120)
|
|
|
#808080
|
rgb(128,128,128)
|
|
|
#888888
|
rgb(136,136,136)
|
|
|
#909090
|
rgb(144,144,144)
|
|
|
#989898
|
rgb(152,152,152)
|
|
|
#A0A0A0
|
rgb(160,160,160)
|
|
|
#A8A8A8
|
rgb(168,168,168)
|
|
|
#B0B0B0
|
rgb(176,176,176)
|
|
|
#B8B8B8
|
rgb(184,184,184)
|
|
|
#C0C0C0
|
rgb(192,192,192)
|
|
|
#C8C8C8
|
rgb(200,200,200)
|
|
|
#D0D0D0
|
rgb(208,208,208)
|
|
|
#D8D8D8
|
rgb(216,216,216)
|
|
|
#E0E0E0
|
rgb(224,224,224)
|
|
|
#E8E8E8
|
rgb(232,232,232)
|
|
|
#F0F0F0
|
rgb(240,240,240)
|
|
|
#F8F8F8
|
rgb(248,248,248)
|
|
|
#FFFFFF
|
rgb(255,255,255)
|
Web Safe Colors?
Some
years ago, when computers supported max 256 different colors, a list of 216
"Web Safe Colors" was suggested as a Web standard, reserving 40 fixed
system colors.
This is
not important now, since most computers can display millions of different
colors, but the choice is left to you.
The 216
cross-browser color palette was created to ensure that all computers would
display the colors correctly when running a 256 color palette:
|
000000
|
000033
|
000066
|
000099
|
0000CC
|
0000FF
|
|
003300
|
003333
|
003366
|
003399
|
0033CC
|
0033FF
|
|
006600
|
006633
|
006666
|
006699
|
0066CC
|
0066FF
|
|
009900
|
009933
|
009966
|
009999
|
0099CC
|
0099FF
|
|
00CC00
|
00CC33
|
00CC66
|
00CC99
|
00CCCC
|
00CCFF
|
|
00FF00
|
00FF33
|
00FF66
|
00FF99
|
00FFCC
|
00FFFF
|
|
330000
|
330033
|
330066
|
330099
|
3300CC
|
3300FF
|
|
333300
|
333333
|
333366
|
333399
|
3333CC
|
3333FF
|
|
336600
|
336633
|
336666
|
336699
|
3366CC
|
3366FF
|
|
339900
|
339933
|
339966
|
339999
|
3399CC
|
3399FF
|
|
33CC00
|
33CC33
|
33CC66
|
33CC99
|
33CCCC
|
33CCFF
|
|
33FF00
|
33FF33
|
33FF66
|
33FF99
|
33FFCC
|
33FFFF
|
|
660000
|
660033
|
660066
|
660099
|
6600CC
|
6600FF
|
|
663300
|
663333
|
663366
|
663399
|
6633CC
|
6633FF
|
|
666600
|
666633
|
666666
|
666699
|
6666CC
|
6666FF
|
|
669900
|
669933
|
669966
|
669999
|
6699CC
|
6699FF
|
|
66CC00
|
66CC33
|
66CC66
|
66CC99
|
66CCCC
|
66CCFF
|
|
66FF00
|
66FF33
|
66FF66
|
66FF99
|
66FFCC
|
66FFFF
|
|
990000
|
990033
|
990066
|
990099
|
9900CC
|
9900FF
|
|
993300
|
993333
|
993366
|
993399
|
9933CC
|
9933FF
|
|
996600
|
996633
|
996666
|
996699
|
9966CC
|
9966FF
|
|
999900
|
999933
|
999966
|
999999
|
9999CC
|
9999FF
|
|
99CC00
|
99CC33
|
99CC66
|
99CC99
|
99CCCC
|
99CCFF
|
|
99FF00
|
99FF33
|
99FF66
|
99FF99
|
99FFCC
|
99FFFF
|
|
CC0000
|
CC0033
|
CC0066
|
CC0099
|
CC00CC
|
CC00FF
|
|
CC3300
|
CC3333
|
CC3366
|
CC3399
|
CC33CC
|
CC33FF
|
|
CC6600
|
CC6633
|
CC6666
|
CC6699
|
CC66CC
|
CC66FF
|
|
CC9900
|
CC9933
|
CC9966
|
CC9999
|
CC99CC
|
CC99FF
|
|
CCCC00
|
CCCC33
|
CCCC66
|
CCCC99
|
CCCCCC
|
CCCCFF
|
|
CCFF00
|
CCFF33
|
CCFF66
|
CCFF99
|
CCFFCC
|
CCFFFF
|
|
FF0000
|
FF0033
|
FF0066
|
FF0099
|
FF00CC
|
FF00FF
|
|
FF3300
|
FF3333
|
FF3366
|
FF3399
|
FF33CC
|
FF33FF
|
|
FF6600
|
FF6633
|
FF6666
|
FF6699
|
FF66CC
|
FF66FF
|
|
FF9900
|
FF9933
|
FF9966
|
FF9999
|
FF99CC
|
FF99FF
|
|
FFCC00
|
FFCC33
|
FFCC66
|
FFCC99
|
FFCCCC
|
FFCCFF
|
|
FFFF00
|
FFFF33
|
FFFF66
|
FFFF99
|
FFFFCC
|
FFFFFF
|
CSS Colors
Colors in
CSS can be specified by the following methods:
- Hexadecimal colors
- RGB colors
- RGBA colors
- HSL colors
- HSLA colors
- Predefined/Cross-browser color names
Hexadecimal Colors
Hexadecimal
color values are supported in all major browsers.
A
hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green)
and BB (blue) hexadecimal integers specify the components of the color. All
values must be between 0 and FF.
For
example, the #0000ff value is rendered as blue, because the blue component is
set to its highest value (ff) and the others are set to 0.
RGB Colors
RGB color
values are supported in all major browsers.
An RGB
color value is specified with: rgb(red, green, blue). Each parameter (red,
green, and blue) defines the intensity of the color and can be an integer
between 0 and 255 or a percentage value (from 0% to 100%).
For
example, the rgb(0,0,255) value is rendered as blue, because the blue parameter
is set to its highest value (255) and the others are set to 0.
Also, the
following values define the same color: rgb(0,0,255) and rgb(0%,0%,100%).
RGBA Colors
RGBA
color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera
10+.
RGBA
color values are an extension of RGB color values with an alpha channel - which
specifies the opacity of the object.
An RGBA
color value is specified with: rgba(red, green, blue, alpha). The alpha
parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
HSL Colors
HSL color
values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+.
HSL
stands for hue, saturation, and lightness - and represents a
cylindrical-coordinate representation of colors.
An HSL
color value is specified with: hsl(hue, saturation, lightness).
Hue is a
degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green,
240 is blue. Saturation is a percentage value; 0% means a shade of gray and
100% is the full color. Lightness is also a percentage; 0% is black, 100% is
white.
HSLA Colors
HSLA
color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera
10+.
HSLA
color values are an extension of HSL color values with an alpha channel - which
specifies the opacity of the object.
An HSLA
color value is specified with: hsla(hue, saturation, lightness, alpha), where
the alpha parameter defines the opacity. The alpha parameter is a number
between 0.0 (fully transparent) and 1.0 (fully opaque).
Predefined/Cross-browser Color Names
147 color
names are predefined in the HTML and CSS color specification. Look at our table
of predefined
color names.
Color Names Supported by All Browsers
147 color
names are defined in the HTML and CSS color specification (17 standard colors
plus 130 more). The table below lists them all, along with their hexadecimal
values.
Tip: The 17 standard colors
are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, and yellow.
Click on
a color name (or a hex value) to view the color as the background-color along
with different text colors:
Sorted by Color Name
|
Color Name
|
HEX
|
Color
|
Shades
|
Mix
|
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
Sorted by HEX Value
|
Color Name
|
HEX
|
Color
|
Shades
|
Mix
|
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
thank you.
ReplyDeletecss list