What is CSS – A Designer’s Introduction to WordPress and Cascading Style Sheets

by on October 12, 2011 · 1 comment


CSS, short for Cascading Style Sheets, allows you to store style presentation information separate from your HTML structure on your WordPress site. CSS was introduced to replace tables as means to layout a website.

The CSS file controls the fonts, colors, margins, lines, height, width, background images, advanced positions and many other elements of your WordPress website. This gives you, the designer, infinite possibilities for the layout of your WordPress site by knowing how to maneuver Cascading Style Sheets.

What is CSS?

• CSS stands for Cascading Style Sheets.
• Think of CSS as the set of supplies a painter uses to turn a blank canvas into a beautiful work of art. A collection of brushes, different colors and textures of paint that work together to make the painting a unique piece of artwork.
• This compares to how the use of CSS makes a site creative and unique from other web pages.
• CSS defines how HTML elements are going to be displayed on your website.
• CSS is “The style language” for web design.

Why Use CSS?

• CSS gives you the ability to control and edit the layout/style of all your web pages with endless options from one style sheet.
• Without CSS, your site would look like a long list of text instead of an interactive, original layout.
• CSS gives the designer more specific control of the site’s layout.
• Allows the web designer to apply different layouts to different media-types. Media types refer to the type of device that is used to display a webpage. Examples of some media types are: print, intended for printed documents; projection, intended for projected presentations; and screen, intended for computer screens.
• Numerous advanced and sophisticated techniques. (See Cool CSS Tools below!)
• WordPress themes greatly rely on CSS to complete the look and feel of the website.
• CSS saves a lot of work and time simplifying the process of editing your website.

When Working with CSS You Should:

• Keep your code simple. Stay organized by listing the different sections you will be modifying with your CSS.
• Space your code efficiently with block notation and single line notation. Makes it easier to work with and find the areas you will be altering in your CSS.
• Communicate with other developers if you are working with a team.
• If you have a lot of content, use separate style sheets for components such as text.css, layout.css and color.css.

Cool CSS Tools:

These fun, helpful tools are available on the web and generate unique code for your CSS on the spot. These free tools allow the user to experiment with different options until you create the perfect look for your website.

CSS3 Generator – choose what you need help coding from a dropdown box, enter any extra info needed, and watch your CSS code magically appear!
ColorZilla: Ultimate CSS Gradient Generator – design a customized color gradient along with the necessary CSS code, ready to just cut and paste into your WordPress theme!
3D Ribbon Generator – the name says it all…design your own 3D ribbon banner for use on any WordPress website or online sales page.

To learn more about CSS, the CSS Tutorial from W3 Schools offers a tutorial with examples, quizzes and an editor for you to experiment with and become familiar with CSS.

About Eileen

Eileen Lonergan is a WordPress website designer who has a concentration in SEO. To learn more about Eileen and see her work visit http://www.EileenLonergan.com

Article by »

Eileen Lonergan is a WordPress website designer with a focus on SEO. To learn more about Eileen and see her work visit http://www.EileenLonergan.com

Eileen has written 14 articles on Expand2Web

Author Connect » Twitter | |

See my disclosure about advertising and affiliate links

{ 1 comment… read it below or add one }

Learning CSS November 3, 2011 at 9:42 pm

Was CSS created to replace tables as a way for layout? I understood that divs and tables existed at the same time and people just found it easier to use tables to layout a page.

To see a webpage without any css applied to it (warning it’s boring):


Leave a Comment

{ 3 trackbacks }

Previous post:

Next post: