WordPress CSS Cheat Sheet

There is no question, CSS has become the fundamental building block of web design. And if you are looking into developing any WordPress Theme, you first need to be a complete master of CSS. I mean what good does a bunch of PHP do without a good web design.

If you are looking into creating your first website or first WordPress theme, then the following little CSS Cheat Cheat can help you learn some of the most important basics of CSS coding.

The CSS Cheat Sheet…

In the following WordPress CSS Cheat Sheet I want to give you the basic fundamentals of CSS styling to get you started on building that first site or WordPress theme. I will be covering the following CSS subjects:

1. Padding vs. Margin
2. Div Floating
3. Overflow Property
4. Position
5. Basic Lists

1. Padding vs. Margin

People seem to have trouble telling margin and padding apart and often get them both mixed up. Getting these 2 mixed up can lead to bugs in your design and cross-browser dysfunction. Understanding padding and margin are key to becoming a master at CSS.

What is Padding?

Padding defines the space between an elements content and the elements border.

Look at the example below:

The red line would be the container, the gray box in the middle would be the content, and the blank space around is the padding.

As you see from the previous example, I have padding-left, padding-top, padding-right and padding-bottom. When writing CSS you can define where you want to add padding to your element. You do not necessarily have to put padding all the way around.

What is Margin?

Margin is basically the reverse of padding. Margin would be the space between an element and the content around it. The margin is outside of the container.

Look at the example below:

Margin and Padding Tips

When dealing with margin and padding remember the following:

• The width of an element is the size of the content within the element. So when you add padding, you will adding to the width of your element. Example: If you have a container that is 300px wide but has a 10px padding, the net result would be an element that is 320px wide.
• Padding takes on the properties of the inner container, thus it is affected by the background of the element
• Margin is the area around the element and will not affect the width of the container
• Margin creates a transparent area around the element, it does not have a background color

2. Floating DIVS

If you could not float your elements, CSS would be fairly pointless. Floats are crucial to any web design, because they are used to align your elements, create columns, create layouts and align your images, content and even your adsense.

The float property helps define where a fixed width container should be in respect to the content.

There are 4 important float properties

1. float: inherit;…….. (same float settings as parent element)
2. float: none;………….. (no float properties)
3. float: left;………………..(align element to the left with content flowing around the right and below)
4. float: right;……………(align element to the right with content flowing around the right and below)

Examples:

CSS Floats For Content

Css Floats For Layout

3. CSS Overflow Property

The Overflow property is an important property to understand and can be used for several different tricks.

Over flow main properties:

• overflow: auto;
• overflow: hidden;
• overflow: scroll;

Overflow Auto

The overflow auto property will add a scrollbar to the element if the content inside it becomes larger than that of the containing element.

Overflow Scroll

The Overflow Scroll property will insert scroll-bars to the element, so they will always be there

Overflow Hidden

The Overflow hidden property does not use scroll-bars, rather it “hides” any content that goes past the element’s boundaries.

4. Position

Position properties are awesome. They allow you to use CSS to position any element in the exact coordinates where you want them.

There are 4 basic position properties

• Static
• Absolute
• Relative
• Fixed

Position Static

Static Positioning is the default for any site. These elements are positions always according to the normal flow of the page

Postition Absolute

Absolute position elements are positioned relatively to the first element that does not have a static position or they are positioned relatively to the <html> containing block.

The absolute property can be used to place an element anywhere using x and y co-ordinates, starting from (0,0) which would be the top left corner.

Position Relative

A relative positioned element sits relative to its normal position. You can use coordinates to move it away from this normal position.

Position Fixed

A fixed element is positioned relative to the browser window and can overlap any other elements without disrupting the normal flow. These elements will not move even if the page is scrolled up or down. (see my twitter gadget to the right)

5. Basic Lists

When we think of lists in CSS we normally think of either ordered and unordered lists, both of which are very simple by default, either marked by a number or by a bullet. Lists are very important to WordPress Theme Development, since they play a huge role in the navigation bar and in the sidebar.

Ordered Lists (OL)

Ordered lists are

This is an example of an Ordered list

1. Ordered
2. List
3. Using
4. Numbers

Ordered Lists Basic structure:

<ol>
<li> List item number 1
<li> List item number 2
<li>List item number 3
</ol>

Unordered Lists (UL)

This is an example of an unordered list

• Unordered
• List
• Using
• Bullets

Unordered Lists Basic Structure

<UL>
<LI> … first list item…
<LI> … second list item…
</UL>