CSS
From 워드프레스(WORDPRESS) 한국어 위키
WordPress relies heavily on the presentation styles within CSS. With the introduction of WordPress v1.5 Themes, your layout options haven't just expanded, they've exploded! WordPress has made it easier than ever to change your website look, and opened up the field even more to help you create your own Theme and page layout.
CSS stands for Cascading Style Sheets. It allows you to store style presentation information (like colors and layout) separate from your HTML structure. This allows precision control of your website layout and makes your pages faster and easier to update.
Contents |
WordPress and CSS
WordPress Themes use a combination of template files, template tags, and CSS style sheets to generate your WordPress site's look.
- Template Files
- Template files are the building blocks which come together to create your site. In the WordPress Theme structure, the header, sidebar, content, and footer are all contained within individual files. They join together to create your page. This allows you to customize the building blocks. For example, in the Default WordPress Theme, the multi-post view found on the front page, category, archives, and search web pages on your site, the sidebar is present. Click on any post, you will be taken to the single post view and the sidebar will now be gone. You can choose which parts and pieces appear on your page, and customize them individually, allowing for a different header or sidebar to appear on all pages within a specific category. And more. For a more extensive introduction to Templates, see Stepping Into Templates.
- Template Tags
- Template tags are the bits of code which provide instructions and requests for information stored within the WordPress database. Some of these are highly configurable, allowing you to customize the date, time, lists, and other elements displayed on your website. You can learn more about template tags in Stepping Into Template Tags.
- CSS Style Sheets
- This is where it all comes together. On every template file within your site, there are XHTML tags and CSS references wrapped around your template tags and content. In the style sheet within each Theme are commands for the page's structure. Without these instructions, your page would simply look like a long typed page. With these instructions, you can move the building block structures around, making your header very long and filled with graphics or photographs, or simple and narrow. Your site can "float" in the middle of the viewer's screen with space on the left and right, or stretch across the screen, filling the whole page. Your sidebar can be on the right or left, or even start midway down the page. How you style your page is up to you. But the instructions for styling are found in the style.css file within each Theme folder.
To help you understand more about how CSS works in relationship to your web page, here are some sites that will help you learn more and improve the design layout of your website.
- CSS Resources
- Using Themes
- Blog Design and Layout
- Finding Your CSS Styles
- Stepping Into Templates
- Stepping Into Template Tags
- Templates
- Template Tags
- Styling Lists with CSS
- WordPress Lessons
- Theme Development
- Using Themes
- Lessons on Designing Your WordPress Site
- Upgrade_1.2_to_1.5
- The Loop in Action
- Creating Individual Pages
WordPress Layout Help
If you are having some problems or questions about your WordPress Theme or layout, begin by checking the website of the Theme author to see if there is an upgrade or answers to your questions. Here are some other possible resources:
- Lessons on Designing Your WordPress Site
- Site Architecture 1.5
- CSS Troubleshooting
- CSS Fixing Browser Bugs
- Know Your Sources
- Validating a Website
- FAQ Layout and Design
- Theme Development References and Resources
- WordPress Support Forums
There are many resources for CSS on the Internet and we've listed just a few to help you get started. If you need help with a specific CSS tag or selector, search Google or Yahoo for more specific help.
Introduction to CSS
Whether you are a beginner or advanced web page designer, sometimes going back to the basics can help you with your layout design elements and problems.
- HTML Source's Introduction to CSS Stylesheets
- HTMLdog's Guide to CSS for Beginners
- Web Page Design for Designers - CSS From the Ground Up]
- W3Schools CSS Tutorials
- Westciv's CSS Hands on Tutorial
- Digitalweb's CSS 101
- Official Cascading Style Sheets Level 2 Specification
- The Web Developer's Network
- CSS Vault
- Mezzoblue's CSS Cribsheet
- Community MX free resources
- Brain Bliss
Layout Guides
The following sites will help you learn how to layout your site using CSS in general and help with specific problems such as formating blockquotes, menus and sidebars, graphics, and columns.
- MaxDesign's CSS Layout Examples and Guides
- Positioniseverything.net
- A List Apart's Designing Faux Columns
- Bluerobot's CSS Layouts
- Eric Meyer's Articles on CSS
- Glish CSS Tips, Techniques, and Resources
- CSS Layout Tutorial
- Mandarian Design's CSS Examples, Tips, and Tricks for Bloggers and More
- RuthsarianLayouts's CSS Layout Templates and Tips
- The Noodle Incident's Tutorials on CSS Boxes
- CSSLayouts Tips and Techniques
- Ruthsarian Layouts Examples
- WebColor's WebMaster Kit for CSS Colors
- CSS Tips and Tricks from Camera on the Road
- CSS HowTo at Intensivstation
CSS Inspiration and Motivation
Learning from others includes expanding your horizons, to see beyond what you imagine possible. The following sites will help you to learn more about CSS and expand your imagination.
Forums and Mailing Lists
If you want to learn more about CSS, especially cutting edge CSS and web page designs, visit one of these forums and mailing lists to share your thoughts and learn from others.
Books
The following are some of the best books to help you learn more about CSS and web page design.

