Resources > CSS Reference List
If you ever tried to memorize the different element, attributes and values of CSS (Cascading StyleSheet) coding, it's a bit difficult since it keeps changing and often times, you simply forget about a certain attribute or do not remember what types of values to use. This page is filled with reference tables that list the many different attributes and values used in CSS along with a short description. They are separated into groups for easier navigation. Of course this reference table will change from time to time as CSS coding evolves and I cannot guarantee that all of these will work well for every browser. Please check back often since I will be adding and removing attributes and values to this page. Last Updated Aug/15/2008.
Basic CSS Tutorial Series:
Part 1 |
Part 2 |
Part 3 |
Part 4
Coding Format:
For a quick recap of Basic CSS, the standard format to follow is:
element { attribute: value; }
- if you want to add more than one attribute:
element { attribute1: value1; attribute2: value2; }
- if you want to use more than one element:
element1, element2, element3 { attribute: value; }
- if you want to add more than one value to an attribute (uncommon):
element { attribute: value1 value2 value3; }
Do not forget to use the proper punctuation when coding your CSS.
Elements:
All elements to be used are defined by the HTML tags. To create custom classes and use them as elements, place a period . before the custom name, for styling certain ID tags, place a number symbol # instead of a period.
Examples:
CSS: .myelement1 { attribute: value; } HTML: <p class="myelement1"></p>
CSS: #myelement2 { attribute: value; } HTML: <div id="myelement2"></div>
Values: Colour
Colours can be referred to in several different ways when coding CSS. Here's a quick reference to help you understand the rest of the lists. *Name and Hex Values are commonly used.
| Type | Example of Values |
| Name |
black, white, blue, red, yellow, green, pink ...etc. |
| Hex Value |
#000000, #FFFFFF, #99FFFF, #FFCC99, #CC3300 |
| RGB Value |
rgb(0,0,255) |
| RGB Percentage |
rgb(0%, 0%, 100%) |
Attributes:
Background Attributes
^ top
| Attribute | Value | Description |
| background-color |
colour name, hex value, RGB value, RGB percentage |
sets background colour for an element. usually colour name (blue, green...) and hex value (#FFFFFF) are used. |
| background or background-image |
url('bg.jpg'), none |
you can replace bg.jpg with the URL to your background image, make sure they are surrounded by single quotes ' '. Use none to prevent a background image to load. |
| background-repeat |
repeat, no-repeat, repeat-x, repeat-y |
if you want an image to repeat, repeat-x(repeat sideways only), repeat-y(repeat up & down only) or no-repeat, use this attribute. |
| background-attachment |
fixed |
set to fixed if you want your background image to not repeat when scrolling. (content will scroll, but background image is 'fixed') |
Font Attributes
^ top
| Attribute | Value | Description |
| font-family |
Font Names:
Arial, Tahoma, Verdana...etc |
the font(s) you want to set for an element. You can specify more than one using commas, however the first font will be the main font and if the browser cannot read that font, it will move onto the next one and so on. |
| font-size |
#px, #pt |
sets the size of text for an element. usually 10-12px (depending on the font-family), or points works as well. |
| font-style |
normal, bold, italic |
This attribute allows you to specify the style of a font - whether you want it normal, bold or italic. default font-style is normal. |
| font-weight |
bold, none |
Again, you can use this if you want the font to appear bold. |
| color |
colour name, hex value, RGB value, RGB percentage |
defines text colour of an element. by default, the colour of text on a page is black. |
Text Attributes
^ top
| Attribute | Value | Description |
| line-height |
normal, #px |
defines the spacing between lines of text. you can specify normal or you can use pixels (like 12px or 15px) to specify big/little gaps between your lines of text. |
| text-align |
justify, left, center, right |
determines horizontal alignment of text in an element. justify makes text align both left and right. by default, text align is left. |
| text-decoration |
blink, line-through, overline, underline |
adds extra graphic to text. overline does not work in some browsers, and I advise you not to use blink for the overall text, but maybe for links. |
| text-indent |
#px, #% |
this sets the size of the indent of the first line of a block of text. you can also use a negative number of pixels or percentage to outdent a line. |
| text-transform |
capitalize, uppercase, lowercase |
controls capitalization of text. *capitalize transforms the 1st letter of every word to a capital letter (this attribute might be better for headers and titles)* |
Box Property Attributes
^ top
These attributes can also apply to other elements such as text and links.
| Attribute | Value | Description |
| border |
#px and/or colour name, hex value, RGB value, RGB percentage |
sets the width and colour for all edges of the border. for one edge, use border-top, border-bottom, border-right or border-left as your attribute. to set both width and color, follow example -
border: 1px #000000; |
| border-style |
double, groove, inset, none, outset, ridge, solid, dashed, dotted |
sets the design/style of the border. |
| margin or margin-width |
#px, # |
sets the thickness of the box's margin usually defined by the number of pixels or by a stand-alone number. margin is the invisible space that extends beyond the viewable area. |
| padding |
#px |
sets thickness of padding around an element, adding space inside its border usually in pixels. you can use padding-top, padding-bottom, padding-right or padding-left as attributes. |
Positioning Attributes
^ top
These attributes are used most often when coding Div Layers.
| Attribute | Value | Description |
| position |
relative, absolute |
defines how a layer is to be positioned. relative meaning the position related to where the styled tag is originally located on the page. absolute meaning the exact position no matter where the layer is originally located on the page. |
| top |
#px, #%, auto |
the distance from the top edge of a layer to the top side of the browser’s screen. auto is the default position. |
| bottom |
#px, #% auto |
the distance from the bottom edge of a layer to the bottom side of the borwser's screen. auto is the default position. |
| left |
#px, #% auto |
the distance from the left edge of a layer to the left side of the borwser's screen. auto is the default position. |
| right |
#px, #% auto |
the distance from the right edge of a layer to the right side of the borwser's screen. auto is the default position. |
| width |
#px, #%, auto |
set how wide you want the layer/box/block..etc to be. auto will fill up as much space as the browser allows. |
| height |
#px, #%, auto |
set how high you want the layer/box/block..etc to be. auto will fill up as much space as the browser allows. |
| overflow |
visible, hidden |
set to visible if you want to see the content of layer that is longer than the width and height specified. set to hidden if you do not want to see the the extra content that is unable to fit in the size of the layer specified. |
| z-index |
numerical values like: ...-1, 0, 1... |
the stacking order of layers. examples: set to 2 if you want layer to be on top of an existing layer. set to -4 if you want layer to be below other existing layers. by default, layers are set to z-index of 0. |
Scrollbar Attributes ^ top
These attributes are used to style scrollbars, however you will only see the changes on certain browsers such as Internet Explorer.
| Attribute | Value | Description |
| scrollbar-face-color |
colour name, hex value, RGB value, RGB percentage |
set the color of the top, bottom, and middle boxes of the scrollbar. |
| scrollbar-highlight-color |
colour name, hex value, RGB value, RGB percentage |
setting the highlight-color will change the top and right inner edges of the scrollbar faces. |
| scrollbar-3dlight-color |
colour name, hex value, RGB value, RGB percentage |
setting the 3dlight-color will change the top and right outer edges of the scrollbar faces. |
| scrollbar-shadow-color |
colour name, hex value, RGB value, RGB percentage |
setting the shadow-color will change the bottom and left inner edges of the scrollbar faces. |
| scrollbar-darkshadow-color |
colour name, hex value, RGB value, RGB percentage |
setting the darkshadow-color will change the bottom and left outer edges of the scrollbar faces. |
| scrollbar-arrow-color |
colour name, hex value, RGB value, RGB percentage |
changes the color of the arrows found on the top and bottom square faces of the scrollbar. |
| scrollbar-track-color |
colour name, hex value, RGB value, RGB percentage |
changes the colour of the background "track" the middle box the scrollbar slides over. |
Miscellaneous Attributes
^ top
| Attribute | Value | Description |
| cursor |
default, auto, help, pointer, move, crosshair, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait
|
set your desired cursor for an element. very effected with link hovers. auto means the browser will set a cursor for you. use url to define a custom cursor, this is not recommended since some browsers will not read this value. |
| display |
none, block, hidden |
used to define how a certain element is to be displayed, such as a block or completely hidden. |
| list-style |
square, disc, circle |
used with the unordered list tag <ul> </ul> (element ul) to define the style of the bullets. |
|
|