CSS Reference Guide
CSS Reference Guide
| Property | Description | CSS |
|---|---|---|
| background | Sets all the background properties in one declaration | 1 |
| background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page | 1 |
| background-color | Sets the background color of an element | 1 |
| background-image | Sets the background image for an element | 1 |
| background-position | Sets the starting position of a background image | 1 |
| background-repeat | Sets how a background image will be repeated | 1 |
| border | Sets all the border properties in one declaration | 1 |
| border-bottom | Sets all the bottom border properties in one declaration | 1 |
| border-bottom-color | Sets the color of the bottom border | 2 |
| border-bottom-style | Sets the style of the bottom border | 2 |
| border-bottom-width | Sets the width of the bottom border | 1 |
| border-color | Sets the color of the four borders | 1 |
| border-collapse | Specifies whether or not table borders should be collapsed | 2 |
| border-left | Sets all the left border properties in one declaration | 1 |
| border-left-color | Sets the color of the left border | 2 |
| border-left-style | Sets the style of the left border | 2 |
| border-left-width | Sets the width of the left border | 1 |
| border-right | Sets all the right border properties in one declaration | 1 |
| border-right-color | Sets the color of the right border | 2 |
| border-right-style | Sets the style of the right border | 2 |
| border-right-width | Sets the width of the right border | 1 |
| border-spacing | Specifies the distance between the borders of adjacent cells | 2 |
| border-style | Sets the style of the four borders | 1 |
| border-top | Sets all the top border properties in one declaration | 1 |
| border-top-color | Sets the color of the top border | 2 |
| border-top-style | Sets the style of the top border | 2 |
| border-top-width | Sets the width of the top border | 1 |
| border-width | Sets the width of the four borders | 1 |
| bottom | Sets the bottom margin edge for a positioned box | 2 |
| caption-side | Specifies the placement of a table caption | 2 |
| clear | Specifies which sides of an element where other floating elements are not allowed | 1 |
| clip | Clips an absolutely positioned element | 2 |
| color | Sets the color of text | 1 |
| content | Used with the :before and :after pseudo-elements, to insert generated content | 2 |
| counter-increment | Increments one or more counters | 2 |
| counter-reset | Creates or resets one or more counters | 2 |
| cursor | Specifies the type of cursor to be displayed | 2 |
| direction | Specifies the text direction/writing direction | 2 |
| display | Specifies the type of box an element should generate | 1 |
| empty-cells | Specifies whether or not to display borders and background on empty cells in a table | 2 |
| float | Specifies whether or not a box should float | 1 |
| font | Sets all the font properties in one declaration | 1 |
| font-family | Specifies the font family for text | 1 |
| font-size | Specifies the font size of text | 1 |
| font-style | Specifies the font style for text | 1 |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font | 1 |
| font-weight | Specifies the weight of a font | 1 |
| height | Sets the height of an element | 1 |
| left | Sets the left margin edge for a positioned box | 2 |
| letter-spacing | Increase or decrease the space between characters in a text | 1 |
| line-height | Sets the line height | 1 |
| list-style | Sets all the properties for a list in one declaration | 1 |
| list-style-image | Specifies an image as the list-item marker | 1 |
| list-style-position | Specifies if the list-item markers should appear inside or outside the content flow | 1 |
| list-style-type | Specifies the type of list-item marker | 1 |
| margin | Sets all the margin properties in one declaration | 1 |
| margin-bottom | Sets the bottom margin of an element | 1 |
| margin-left | Sets the left margin of an element | 1 |
| margin-right | Sets the right margin of an element | 1 |
| margin-top | Sets the top margin of an element | 1 |
| max-height | Sets the maximum height of an element | 2 |
| max-width | Sets the maximum width of an element | 2 |
| min-height | Sets the minimum height of an element | 2 |
| min-width | Sets the minimum width of an element | 2 |
| orphans | Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element | 2 |
| outline | Sets all the outline properties in one declaration | 2 |
| outline-color | Sets the color of an outline | 2 |
| outline-style | Sets the style of an outline | 2 |
| outline-width | Sets the width of an outline | 2 |
| overflow | Specifies what happens if content overflows an element’s box | 2 |
| padding | Sets all the padding properties in one declaration | 1 |
| padding-bottom | Sets the bottom padding of an element | 1 |
| padding-left | Sets the left padding of an element | 1 |
| padding-right | Sets the right padding of an element | 1 |
| padding-top | Sets the top padding of an element | 1 |
| page-break-after | Sets the page-breaking behavior after an element | 2 |
| page-break-before | Sets the page-breaking behavior before an element | 2 |
| page-break-inside | Sets the page-breaking behavior inside an element | 2 |
| position | Specifies the type of positioning for an element | 2 |
| quotes | Sets the type of quotation marks for embedded quotations | 2 |
| right | Sets the right margin edge for a positioned box | 2 |
| table-layout | Sets the layout algorithm to be used for a table | 2 |
| text-align | Specifies the horizontal alignment of text | 1 |
| text-decoration | Specifies the decoration added to text | 1 |
| text-indent | Specifies the indentation of the first line in a text-block | 1 |
| text-shadow | Specifies the shadow effect added to text | 2 |
| text-transform | Controls the capitalization of text | 1 |
| top | Sets the top margin edge for a positioned box | 2 |
| unicode-bidi | 2 | |
| vertical-align | Sets the vertical alignment of an element | 1 |
| visibility | Specifies whether or not an element is visible | 2 |
| white-space | Specifies how white-space inside an element is handled | 1 |
| widows | Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element | 2 |
| width | Sets the width of an element | 1 |
| word-spacing | Increases or decreases the space between words in a text | 1 |
| z-index | Sets the stack order of an element | 2 |
CSS Pseudo-classes/elements
| Pseudo name | Description | CSS |
|---|---|---|
| :active | Adds a style to an element that is activated | 1 |
| :after | Adds content after an element | 2 |
| :before | Adds content before an element | 2 |
| :first-child | Adds a style to an element that is the first child of another element | 2 |
| :first-letter | Adds a style to the first character of a text | 1 |
| :first-line | Adds a style to the first line of a text | 1 |
| :focus | Adds a style to an element that has keyboard input focus | 2 |
| :hover | Adds a style to an element when you mouse over it | 1 |
| :lang | Adds a style to an element with a specific lang attribute | 2 |
| :link | Adds a style to an unvisited link | 1 |
| :visited | Adds a style to a visited link | 1 |
>>Be the first to rate!
Loading ...Getting Motivated
When striving for goals we quiet often get burnt out or lose motivation. An easy way to help kick you back on track into achieve your goals is to have some motivation quotes posted around various parts of yours house. Here are a few originals that I hope help.
“Talk and you shall be heard. Do and you will be respected.”
“Just Relaxing is an excuse for being weak minded, and incapable of succesing.”
“95% Don’t, 5% Do, Who are you?”
“Fear is for the unsuccessful”
“Dreams become reality through hard work and dedication”
The next part (that can somtimes be the hard part) is detemining what is success for you. What is your primary goal that you plan to reach? When answering this there should be an attainable number to your goals. EX: “I want to be rich” – is a very broad goal. “I want to be rich through selling my paintings and my current goal is to sell 20 by the end of the month and 100 by the end of the year” – Now you have a dirction and attainable goals. You can now formulate a more detailed approch in reaching you goal.
(2 votes, average: 5.00 out of 5) Loading ...Cold Calling 101
The person you are calling is solely interested in themselves / how your product will benefit them directly. If you can identify significant impact for the good you will have their attention.
“Just learn to accept rejection as a normal part of selling.”
(2 votes, average: 4.00 out of 5) Loading ...24hr fitness Freeze
“Don’t simply do what people ask you to do. Help them with what they need to achieve.”
I was on the phone today with 24hr fitness trying to freeze my account because I moved out of the area. The first employee told me that I couldn’t freeze my account because I lived in a 30mi radius… So, if there is another gym literally across the street (walking distance) and it’s a 1hr 30min round trip to the nearest 24hr fitness I am “Still in their area?” After growing upset and digging deeper into what I could do I was transferred to her manager. The manager took a different approach in getting to the bottom of what I needed done. The difference was the first employee simply did what I asked, and the manager was helping me achieve my goal. It gave me the sense that she was on my side working with me. In the end they could not freeze my account because of their rules, but I was less upset because I was helped the right way.
(2 votes, average: 3.00 out of 5) Loading ...Tips To Design Better Banner Ads
- Use the words “Click Here” or “Enter” every time you design a banner.
- You may think that these two words are overused online, but tests have proven that these words are able to increase the effectiveness of a banner ad by 20-30% without changing anything else in the banner. They inspire the reader to click on the ad if the headline of the banner interests them.
- Animate Your Banners.
- An animated banner will increase your banner ads effectiveness by 30-40%. The key in using animation in your banner is keeping it small. The reason that you don’t want big pictures or images that look like live video in your banners is the fact that the banner will load too slowly on people’s pages. The visitors just won’t see it.
- Use an awesome headline in your banner.
- Don’t think that just having a good looking banner will make people click through. The key to effective banner advertising is having a good headline. A good technique to use is to keep the same headline on your banner ad that you have on your entry page. Then when they click through the banner, they will come to see the same headline that sparked an interest in them in the first place.
- The best word to use in your banner headline is “FREE.”
- This doesn’t mean that you just need to put the word “FREE” on your banner without any other text. Tell them exactly what they will be getting for FREE. Using the word “FREE” in virtually any headline will make your response rate increase dramatically.
- Change your banner ads frequently.
- Studies have proven that most banner ads start losing effectiveness after the third time a person has seen it. If they haven’t clicked on it by then, they probably never will. If you are spending a lot of money on advertising and purchasing hundreds of thousands of banner impressions, you will need to come up with a lot of different banners.
- Be clear in your graphics and messaging.
- Your main objective is to have people take a particular action after viewing your ad. A strong, clear message will help capture their interest. Clear communication requires that you understand your message, what you are selling and the benefit that you are offering potential customers. You will often want your primary message to be the strongest visual element in your ad.
- Less really is more.
- As you create your design, remember that less cluttered messages will make a stronger impact with the online viewer. Limit the number of elements — the colours, fonts, graphics and words — that you use in your ad and ask yourself whether your primary message is clear.
- Use contrast to capture attention.
- Your ad will likely include these elements: background colours, a bold text message, and a photograph or drawing, and animated. To be effective you need to have contrast between these elements. Contrast can be achieved using different font sizes and bolds and colours.
(2 votes, average: 5.00 out of 5) Loading ...Designing Effective HTML Emails
- Don’t give up on graphics, but understand that many of your recipients just won’t see them.
- Make sure not to contain any important “Call to Actions” in an image.
- Alt tag copy is an art.
- When Images are not displayed, often time alt text is shown in its place.
- Use alt text to describe the benefit they are missing by not being able to view the image. EX: “50% off our entire stock, July 4th only!”
- Also, be aware not all email clients, such as Hotmail, do not display alt text.
- Make sure your graphics don’t depress response.
- Use graphics to reinforce messaging, not for messaging itself.
- Make sure the reading pane* contains a call-to-action, not just graphics.
- Always state benefits for the reader in the vary top of your email because this text is often used in the “*reading pane” displayed before they open your email.
- If using columns design the smaller less important column on the right. (People read LEFT to right).
- Use your subject lines, sender name and “From” address to their best advantage.
- The sender name should include the name of your company or brand
- Use an email address that makes it clear who you are and what you do. EX: newsletters@mycompany.com
- Use the subject to state a benefit to the reader not you.
- FYI: You have less than 10 words to catch the readers attention
- Use inline CSS, expect the <head></head> to be ignored
- Use a proper width for your email.
- Due to Multiple side bars (inbox, ads…), and standard screen resolutions, expect the width of you email to be between 750-800px.
Overall state the benefit the person reading is getting weather it’s a super deal IE: free shipping / 15% off or a knowledgeable tip you are giving. Make sure this is the forefront because after you have them interested they are more likely to find out what your true call to action is, whether it be making money, generating traffic or providing helpful information.
Have fun with it and everything else you do!
(1 votes, average: 5.00 out of 5) Loading ...4 Easy Steps – Writing Good Copy
- Be passionate about what you’re writing about.
- Depending on your product/topic you should want to buy it, use it, talk to it, love it, and sell it.
- Know who your audience is.
- Don’t use today’s popular slang words when 80% of your readers are 80 year old women. Write to who’s reading and have this target person be your reviewer.
- State benefits for the reader in less than 10sec.
- Not about you, who cares about you? How is it going to immediately benefit the reader?
- Keep it short.
- If you can say the same thing in half the words, then you probably should. Don’t ramble just to fill space, it works against you.
(1 votes, average: 4.00 out of 5) Loading ...The Remote Party Has Ended the Connection :: AT&T Blackjack
If you keep getting the annoying error “The Remote Party Has Ended the Connection” while browsing on your mobile phone then keep reading on for a quick fix to stop getting this error.
On the main screen go to:
Start > Settings > Connections > GPRS > AT&T IMS (WM5 will be cingular IMS)
Make sure the AT&T IMS settings are as follows
Connects to: The Internet
Access point: wap.cingular
User name: should be blank
Password: should be blank
Authentication Type: CHAP
Primary DNS: 0.0.0.0
Secondary DNS: 0.0.0.0
IP address: should be blank
After the settings match the above, click Done (the left soft key) and you are good to go! No more annoying error message.
Hope this helps!
(4 votes, average: 4.75 out of 5) Loading ...Outsourcing, A Magical Unicorn…
In today’s world when it comes to technology outsourcing is an inevitable option. At first I was a bit skeptical, I heard good things about outsourcing, but I also heard a lot more horrendous stories about how outsourced projects would only be 50% completed and the company or coders on the job was non responsive and not as competent as they led you to believe. I have a relative who recommended RentACoder.com (A place to post a job and company’s/coders will bid on your project) at first this was the last direction I wanted to take, but after having my back in a corner I posted my job just to see how the process works (no strings attached). After finding out that you can view the bidders work history and read reviews past clients have posted I began to drop my walls and thought, maybe this will work out. I immediately set some guidelines:
- The coder had to have a rating of at least 9 out of 10.
- The coder had to have at least worked for 30 clients.
After a few days passed I narrowed my bidders down to about 5 coders I was interested in (watch out for the, I’ll do it for dirt cheap no question asked guys). I went with the user ‘MOJO Coder’ also known as Josh over at ibot.tv. I went with Josh because he met my guidelines and had the most experience in my particular project. After locking all the funds in escrow (including Josh’s 20% down to insure his performance) work began and Josh was a dream come true. He was that magical unicorn galloping off in the distance coming my way to save me from the code monster…
Through the entire process Josh was EXTREMELY attentive and always there to answer questions, give great suggestions, and complete the work above and beyond reasonable expectations. If you are looking for PHP coding and more specifically WordPress back end customization look no further, Josh is you man (or white magical unicorn…) check out ibot.tv for more info.
So next time you need work done don’t hesitate to outsource, just make sure you do your research on who you are hiring.
(1 votes, average: 4.00 out of 5) Loading ...Google Simple, Apple Elegant
When designing a website or print work I can’t stress enough to K.I.S.S. (Keep it simple stupid). When somebody comes to your home page it should be clear what you want the visitor to be informed with. A good way of doing this is to give a brief description of each item (max 4-5) making your newest/best item the most prominent, and giving the visitor a CLEAR CALL TO ACTION on how they can reach this information. I’m sure you have heard people say “Where do I click?” or “Where do I go?” take out the guess work, people like things easy. An entrepreneur friend of mine lives by the motto “Google Simple, Apple Elegant” and Apple is a perfect example of the clear call to action. Visit their home page and you will notice there is no confusion on what Apple wants to share with you or how to get to that information.
Revisit your website with a fresh set of eyes and see if your website is overwhelming with content, offering 100 different paths to take or if it’s clear where to go with the important stuff.
When designing for the consumer just remember you can get your design lookin’ darn sexy while keeping the users experience easy by keeping it Google Simple, Apple Elegant.
(2 votes, average: 5.00 out of 5) Loading ...