CS188 Creations Computing Central

CSS Reference List

An Explanation of CSS

What exactly is CSS, and how does it supplant HTML? CSS stands for Cascading Style Sheets, and often goes hand-in-hand with HTML to create visually attractive site layouts.

CSS does not actually construct webpages; HTML is used to do the dirty work. CSS is merely "dressing up" the HTML and enhancing the look of a webpage by making layout enhancements that aren't normally available in standard HTML.

If after reading this reference sheet you still would like more info on CSS, head on over to the47.com for a great article on optimizing CSS code, and the W3 Schools site for all you would ever want to know about CSS.

The Style Attribute

To use an element of CSS in HTML, the style attribute is required in the tag:

Within that style="" attribute, all CSS attributes are placed.

Backgrounds

background-color:#FFFFFF;

- Changes the background color of the selected element. Edit the hexadecimal code to change the color.
Color Code Reference Chart: Click Here

background-image-url:(http://www.website.com/image.jpg);

- Changes the background image of the selected element. Replace the sample URL in this code with the URL of your own image.

background-repeat:repeat-y;

- Enables/disables background repetition vertically or horizontally across a page.
- Possible values for this attribute include repeat-x, repeat-y and no-repeat.

background-attachment:fixed;

- Changes the background attachment of the selected element.
- Possible values for this attribute include fixed and scroll.

Borders

border-style:solid;

- Changes the border style (what type of border) of the selected element.
- Possible values for this attribute include solid, dashed, dotted, inset, outset and double.

border-width:2px;

- Changes the border thickness of the selected element. Insert a higher px value for a thicker border.

border-color:#000000;

- Changes the border color of the selected element. Edit the hexadecimal code to change the color.
- Color Code Reference Chart: Click Here

Padding

padding:10px;

- Changes the amount of extra space between inline HTML elements. Insert a higher px value for a larger spacing.

padding-left:10px;

- Changes the amount of extra space between inline HTML elements on a specific side of the element.
- Possible values for this attribute include left, right, bottom, and top.

Margins

margin:10px;

- Changes the amount of extra space between HTML elements. Insert a higher px value for a larger spacing.

margin-left:10px;

- Changes the amount of extra space between HTML elements on a specific side of the element.
- Possible values for this attribute include left, right, bottom, and top.

Text Modifications

text-align:center;

- Changes the alignment of text within the element.
- Possible values for this attribute include left, right, center, and justify.

text-decoration:underline;

- Changes the "decoration" of text within the element.
- Possible values for this attribute include underline, overline, line-through, blink, and none.

"CS188 Creations Computing Central: The one and only source for your computing needs."