Learn CSS Tips and Tricks for use specifically in WordPress Development/Design

In this article you will learn basic css tips for an intro in WordPress development and design. These are common our team uses on new designs, please contact Tower Agency for more assistance.

A Brief Introduction to CSS

A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. Per usual use your (X)HTML file to arrange the content, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on…) are accomplished within a CSS. In this article, we will discuss a few hints related to some of the trickier CSS aspects of creating a WordPress document. Our goal is to simplify these aspects in order to allow the user to implement them more easily.

1. display:none Property

This action will be commonly used when removing extra visual aspects included in a theme. Hiding an element can be done by setting the display property to “none” or the visibility property to “hidden”.

However, notice that these two methods produce different results:

• visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
• display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there.

2. How to Center an Image

Sometimes you need a section (or image) to be centered. Phrased differently: we want the left and right margin to be equal no matter what screen size is being used. There are many ways to move around an image, but the best way to do it for all screen sizes (responsive) is to set the margins to ‘auto’. This is normally used with a block of fixed width, because if the block itself is flexible, it will simply take up all the available width.
Example:

3. Media Queries (Responsive Design)

Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself. They consist of a media type and at least one expression that limits the style sheets’ scope by using media features, such as width, height, and color. The query is based on the viewing screen size and is great for removing or changing actions for responsive (mobile friendly) web design.

Media queries consist of a media type and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true or false.  The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.

When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. Style sheets with media queries attached to their <link> tags will still download even if their media queries would return false (they will not apply, however).

**Unless you use the not or only operators, the media type is optional and the all type will be implied.

Thanks for reading and we hope these three kinds of CSS tips will be helpful in your WordPress design. Please contact Tower Marketing Agency for more information or read through our blog that has more information for WordPress usage. Now go forth and design!

About Roger Tower

Digital marketing agent by day and amateur crime fighter by night. This ninja ginja writes about technology trends, social media advancements, and light commentary on our digital culture. Founder of Tower Agency, Roger can be found working hard in the office or playing hard outside.

Positivity is a virtue and there is no shortage with this young entrepreneur.

Find Agent on:
• 
• 
•