Tutorials
CSS Quick Fix
To make slight changes such as modifications to background images or text colors to HtmlToGo templates you have to understand how a .css file is organized. This is meant to be a quick reference to make slight changes. You don't have to learn this entire page to use any of the templates.
CSS definitions take the following format: selector{property:value;}
- selector
- is the name of the tag to be modified (it can be a tag like p, or h1, etc.). It can be a class, or an id. Tags appear just like they do in the html, class is denoted by .classname and id is denoted by #idname.
- property
- is the attribute to be modified by css.
- value
- is the amount that is allowed for the property being modified. It is usually pixels (px) or percentages (%), color number values (#FF0000), etc.
In the Value sections of the tables below:
- words in bold
- are a value allowed for that css property, just type it as written. Example: td{height:auto;}
- words in italics
- are descriptions of allowed values, some of the descriptions are further described below.
- length
- refers to a value measured in px, cm, mm, em, etc.
- percentage
- is a percentage of the containing or parent block.
- color
- refers to any of the named web colors (red) or a color number in hexadecimal format (#FF0000) or an red/green/blue value rgb(255, 0, 0).
- multiplier
- refers to a number used to multiply the set value by. Example: p{line-height:2;}
Common Style Properties to Modify
- dimension
- Change the width, height and distance between lines of text of different objects.
- font
- Change the font family, size, weight and of the text.
- text
- Change the color, direction, alignment, decoration, and spacing between the letters of the text.
- background
- Set background color, or images and their position.
- border
- Give page elements a border, define the width, color, and style
- position
- Tell the browser exactly where you want an element on the page. Even have sections overlap.
- margin
- Set the white space outside the border. Give your eyes some breathing room.
- padding
- Set the white space inside the border.
Common CSS Problems
Sometimes older browsers display css incorrectly, namely Internet Explorer 6 and lower. CSS works using something called the box model. This model is how the browser is supposed to display elements on the html page according to the css specification. At the center of the box is the content, just outside of that is the padding, then the border, then the margin. In other words, the padding defines the amount of whitespace between the content and the border; and the margin defines the amount of whitespace between the border of the element and another element. Some older browsers calculate the box width and height by adding the padding, content and border widths together, while the web standards define box width to include the parts inside but not including the border which obviously causes rendering problems. There are workarounds to make the browser display things as you intend, but I like to make a separate css file just for Internet Explorer 6 and lower to keep my original css file free of hacks. Also, different css properties such as min-height/min-width aren't supported for some browsers. That makes it important to check your pages after you modify your files.
HtmlToGo templates usually have 2 css files, so if you modify the values in one file, make sure to update the other as well. Most importantly, check the site in Firefox or other standards compliant browser and Internet Explorer 6, you don't want to alienate your audience because they use a different browser.
Dimension
| Property | Values | Description |
| height | auto length percentage | Sets the height of an object |
| width | auto length percentage | Sets the width of an object |
| min-height | length percentage | Sets the minimum height of an object |
| max-height | none length percentage | Sets the maximum height of an object |
| min-width | length percentage | Sets the minimum width of an object |
| max-width | none length percentage | Sets the maximum height of an object |
| line-height | normal length multiplier percentage | Sets the amount of space between lines of text |
Font
| Property | Values | Description |
| font | font-size font-family font-style font-weight font-variant | shorthand property that contains all the font values |
| font-size | xx-small x-small small medium large x-large xx-large smaller larger length percentage | Sets the size of the font |
| font-family | family-name | Sets the name of the font to be used, example: "Arial" or "Courier New". When multiple font families are listed the first one found in the list is used. |
| font-style | normal italic oblique | Set the style of the font |
| font-weight | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 | Sets the boldness or heaviness of the font |
| font-variant | normal small-caps | Allows you to use small caps |
Text
| Property | Values | Description |
| color | color | Set the color of the text |
| direction | ltr rtl | Set the direction of the text. LTR is left-to-right and RTL is right-to-left. |
| text-align | left right center justify | Set the alignment of the text |
| text-decoration | none underline overline blink | Set decoration to the text, allows you to underline or overline text |
| text-indent | length percentage | Set the indent of the text |
| text-transform | none capitalize uppercase lowercase | Modify the text (letters) inside an element. Example: capitalize. |
| word-spacing | normal length | Set the spacing between words |
| white-space | normal pre nowrap | Sets how the text will wrap in an element or if it is to stay the way it looks as it is coded. |
| letter-spacing | normal length | Set the spacing between letters |
| line-height | normal multiplier length percentage | Set the spacing between lines of text |
Background
| Property | Values | Description |
| background | background-color background-image background-repeat background-position background-attachment | shorthand property that defines all background changes in one declaration |
| background-color | transparent color | Set the color of the background |
| background-image | none url(url) | Set the image to use in the background |
| background-repeat | repeat repeat-x repeat-y no-repeat | Set the direction or whether to repeat the background image |
| background-position | top left top center top right center left center center center right bottom left bottom center bottom right x% y% xposition yposition | Set the position of the background image. x% y% is the value as a percentage with a space in between the values. The top left corner is 0% 0%. xposition yposition is the value in pixels or other length with a space between the values. The top left corner is 0px 0px. |
| background-attachment | scroll fixed | Set the background image and define whether it scrolls with the text in the foreground, or to stay in place |
Border
| Property | Values | Description |
| border | border-width border-style border-color | Shorthand property to define all borders in one declaration |
| border-width | thin medium thick length | Set the width of the border |
| border-style | none hidden dotted dashed solid double groove ridge inset outset | Set the style of the border |
| border-color | color | Set the color of the border |
| border-top | border-top-width border-style border-color | Shorthand property to define the aspects of the top border |
| border-right | border-right-width border-style border-color | Shorthand property to define the aspects of the right border |
| border-bottom | border-bottom-width border-style border-color | Shorthand property to define the aspects of the bottom border |
| border-left | border-left-width border-style border-color | Shorthand property to define the aspects of the left border |
| border-top-width | thin medium thick length | Set the width of the top border |
| border-top-style | border-style | Set the style of the top border |
| border-top-color | color | Set the color of the top border |
| border-right-width | thin medium thick length | Set the width of the right border |
| border-right-style | border-style | Set the style of the right border |
| border-right-color | color | Set the color of the right border |
| border-bottom-width | thin medium thick length | Set the width of the bottom border |
| border-bottom-style | border-style | Set the style of the bottom border |
| border-bottom-color | color | Set the color of the bottom border |
| border-left-width | thin medium thick length | Set the width of the left border |
| border-left-style | border-style | Set the style of the left border |
| border-left-color | color | Set the color of the left border |
Position
| Property | Values | Description |
| position | static relative absolute fixed | Set the reference point of your positioning values, the default is "relative" which is the next outer element. If there is no outer element the positon is set relative to the document body. |
| top | auto length percentage | Set the position of the element's top relative to the reference point. |
| right | auto length percentage | Set the position of the element's right side relative to the reference point. |
| left | auto length percentage | Set the position of the element's left side relative to the reference point. |
| bottom | auto length percentage | Set the position of the element's bottom relative to the reference point. |
| overflow | auto hidden scroll visible | Set what to do if the content of the element doesn't fit the defined width or height measurements. |
| z-index | auto number | Set how close or far away an object is from the screen. Think of the screen as a stack of paper. A higher z-index means the object is closer to the top of the stack, lower z-index means it is underneath the higher z-index papers- if they occupy the same screen space the higher z-index will overlap the lower z-index element. |
| clip | auto shape | Sets a shape mask over an element. |
| vertical-align | baseline sub super top text-top middle bottom text-bottom length percentage | Sets the vertical alignment of an element. This allows for super and subscripts also aligns the element based on different aspects of the text. |
Margin
| Property | Values | Description |
| margin | margin-top margin-right margin-bottom margin-left | Shorthand property to define all margins in one declaration. Set the whitespace between the border of the element and the next element |
| margin-top | auto length percentage | Set the whitespace between the top border of the element and the next element |
| margin-right | auto length percentage | Set the whitespace between the right border of the element and the next element |
| margin-bottom | auto length percentage | Set the whitespace between the bottom border of the element and the next element |
| margin-left | auto length percentage | Set the whitespace between the left border of the element and the next element |
Padding
| Property | Values | Description |
| padding | padding-top padding-right padding-bottom padding-left | Shorthand property to define all padding in one declaration. Set the whitespace between the border and the content of the element. |
| padding-top | length percentage | Set the whitespace between the border and the top edge of the content of the element. |
| padding-right | length percentage | Set the whitespace between the border and the right edge of the content of the element. |
| padding-bottom | length percentage | Set the whitespace between the border and the bottom edge of the content of the element. |
| padding-left | length percentage | Set the whitespace between the border and the left edge of the content of the element. |
Good Luck! If you have any problems or just want to show off your site - just send an email and make sure to add "Site Designs" to the subject line. There are a lot more tutorials if you ever want to expand your html knowledge. Have fun and Enjoy!