CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://codex.wordpress.org/CSS","20110624080240","https://web.archive.org/","web","/_static/", "1308902560"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta name="generator" content="MediaWiki 1.15.5"/> <meta name="keywords" content="CSS,CSS Coding Standards,CSS Fixing Browser Bugs,CSS Shorthand,CSS Troubleshooting,Conditional Comment CSS,Creating a Search Page,Creating an Archive Index,FAQ Layout and Design,Finding Your CSS Styles,Glossary"/> <link rel="shortcut icon" href="/web/20110624080240im_/http://codex.wordpress.org/favicon.ico"/> <link rel="search" type="application/opensearchdescription+xml" href="/web/20110624080240/http://codex.wordpress.org/opensearch_desc.php" title="Codex (en)"/> <link rel="alternate" type="application/rss+xml" title="Codex RSS feed" href="/web/20110624080240/http://codex.wordpress.org/index.php?title=Special:RecentChanges&feed=rss"/> <link rel="alternate" type="application/atom+xml" title="Codex Atom feed" href="/web/20110624080240/http://codex.wordpress.org/index.php?title=Special:RecentChanges&feed=atom"/> <title>CSS « WordPress Codex</title> <style type="text/css"> @import url("https://web.archive.org/web/20110624080240cs_/http://s.wordpress.org/style/codex-wp4.css?3"); @import url("https://web.archive.org/web/20110624080240cs_/http://s.wordpress.org/style/wp4.css?10"); </style> <link media="only screen and (max-device-width: 480px)" href="https://web.archive.org/web/20110624080240cs_/http://wordpress.org/style/iphone.css" type="text/css" rel="stylesheet">  <link rel="shortcut icon" href="https://web.archive.org/web/20110624080240im_/http://s.wordpress.org/favicon.ico" type="image/x-icon"/> <script src="https://web.archive.org/web/20110624080240js_/http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript"> _uacct = "UA-52447-1"; urchinTracker(); </script>  <script type="text/javascript" src="/web/20110624080240js_/http://codex.wordpress.org/index.php?title=-&action=raw&gen=js&useskin=codex"></script> <script type="text/javascript">wgBreakFrames=false;wgContentLanguage='en';</script> <script type="text/javascript" src="/web/20110624080240js_/http://codex.wordpress.org/skins/common/wikibits.js"></script> </head> <body id="wordpress-org"> <div id="header"> <div class="wrapper"> <h1><a href="https://web.archive.org/web/20110624080240/http://wordpress.org/" title="WordPress">WordPress.org</a></h1> <form action="https://web.archive.org/web/20110624080240/http://wordpress.org/search/do-search.php" method="get" id="head-search"> <input class="text" name="search" type="text" value="Search the Codex" maxlength="150" onfocus="this.value=(this.value=='Search the Codex') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'Search the Codex' : this.value;"/> <input type="submit" class="button" value="Go"/> </form> <ul> <li><a href="https://web.archive.org/web/20110624080240/http://wordpress.org/" title="Home is where the heart is.">Home</a></li> <li><a href="https://web.archive.org/web/20110624080240/http://wordpress.org/showcase/" title="See some of the sites built on WordPress.">Showcase</a></li> <li><a href="https://web.archive.org/web/20110624080240/http://wordpress.org/extend/" title="Taking WordPress beyond your wildest imagination">Extend</a> <ul class="nav-submenu"> <li><a href="https://web.archive.org/web/20110624080240/http://wordpress.org/extend/plugins/" title="Plugins can extend WordPress to do almost anything you can imagine.">Plugins</a></li> <li><a href="https://web.archive.org/web/20110624080240/http://wordpress.org/extend/themes/" title="Find just the right look for your website.">Themes</a></li> </ul></li> <li><a href="https://web.archive.org/web/20110624080240/http://wordpress.org/about/" title="About the WordPress Organization, and where we're going.">About</a></li> <li><a class="current" href="https://web.archive.org/web/20110624080240/http://codex.wordpress.org/Main_Page" title="Documentation, tutorials, best practices.">Docs</a></li> <li><a href="https://web.archive.org/web/20110624080240/http://wordpress.org/development/" title="Come here for the latest scoop.">Blog</a></li> <li><a href="https://web.archive.org/web/20110624080240/http://wordpress.org/support/" title="Support and discussion forums.">Forums</a></li> <li><a href="https://web.archive.org/web/20110624080240/http://wordpress.org/hosting/" title="Find a home for your blog">Hosting</a></li> <li id="download"><a href="https://web.archive.org/web/20110624080240/http://wordpress.org/download/" title="Get it. Got it? Good.">Download</a></li> </ul> </div> </div> <div id="headline"> <div class="wrapper"> <h2>Codex</h2> <div class="portlet" id="p-personal"> <p class="login">Codex tools: <a href="/web/20110624080240/http://codex.wordpress.org/index.php?title=Special:UserLogin&returnto=CSS">Log in</a> </p> </div> </div> </div> <div id="pagebody"> <div class="wrapper"> <div class="col-10" id="bodyContent"> <h2 class="pagetitle">CSS</h2>  <p>WordPress relies heavily on the presentation styles within CSS. With the use of <a href="/web/20110624080240/http://codex.wordpress.org/Using_Themes" title="Using Themes">Themes</a>, you have an almost infinite choice of layout options. WordPress Themes make it easy to change your website look, and open up the field to help you <a href="/web/20110624080240/http://codex.wordpress.org/Theme_Development" title="Theme Development">create your own Theme</a> and page layout. </p><p><a href="/web/20110624080240/http://codex.wordpress.org/Glossary#CSS" title="Glossary">CSS</a> stands for <b>Cascading Style Sheets</b>. 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. </p><p>This article briefly describes the use of CSS in WordPress, and lists some references for further information. For information on CSS itself, see <a href="/web/20110624080240/http://codex.wordpress.org/Know_Your_Sources#CSS" title="Know Your Sources">Know Your Sources#CSS</a>. </p> <table id="toc" class="toc" summary="Contents"><tr><td><div id="toctitle"><h2>Contents</h2></div> <ul> <li class="toclevel-1"><a href="#WordPress_and_CSS"><span class="tocnumber">1</span> <span class="toctext">WordPress and CSS</span></a></li> <li class="toclevel-1"><a href="#WordPress_Generated_Classes"><span class="tocnumber">2</span> <span class="toctext">WordPress Generated Classes</span></a></li> <li class="toclevel-1"><a href="#Templates_and_CSS"><span class="tocnumber">3</span> <span class="toctext">Templates and CSS</span></a></li> <li class="toclevel-1"><a href="#WordPress_Layout_Help"><span class="tocnumber">4</span> <span class="toctext">WordPress Layout Help</span></a></li> <li class="toclevel-1"><a href="#CSS_Resources"><span class="tocnumber">5</span> <span class="toctext">CSS Resources</span></a></li> </ul> </td></tr></table><script type="text/javascript"> if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); } </script> <a name="WordPress_and_CSS" id="WordPress_and_CSS"></a><h2> <span class="mw-headline">WordPress and CSS</span></h2> <p>WordPress Themes use a combination of <a href="/web/20110624080240/http://codex.wordpress.org/Templates" title="Templates">template files</a>, <a href="/web/20110624080240/http://codex.wordpress.org/Template_Tags" title="Template Tags">template tags</a>, and CSS files to generate your WordPress site's look. </p> <dl><dt>Template Files </dt><dd><a href="/web/20110624080240/http://codex.wordpress.org/Stepping_Into_Templates" title="Stepping Into Templates">Template files</a> are the building blocks which come together to create your site. In the <a href="/web/20110624080240/http://codex.wordpress.org/Site_Architecture_1.5" title="Site Architecture 1.5">WordPress Theme structure</a>, 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, <a href="/web/20110624080240/http://codex.wordpress.org/Creating_an_Archive_Index" title="Creating an Archive Index">archives</a>, and <a href="/web/20110624080240/http://codex.wordpress.org/Creating_a_Search_Page" title="Creating a Search Page">search</a> 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 <a href="/web/20110624080240/http://codex.wordpress.org/The_Loop_in_Action" title="The Loop in Action">choose which parts and pieces appear</a> 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 <a href="/web/20110624080240/http://codex.wordpress.org/Stepping_Into_Templates" title="Stepping Into Templates">Stepping Into Templates</a>. </dd><dt>Template Tags </dt><dd>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 <a href="/web/20110624080240/http://codex.wordpress.org/Stepping_Into_Template_Tags" title="Stepping Into Template Tags">Stepping Into Template Tags</a>. </dd><dt>Stylesheet </dt><dd>The CSS file is where it all comes together. On every template file within your site there are HTML elements wrapped around your template tags and content. In the stylesheet within each Theme are rules to control the design and layout of each HTML element. 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 <tt>style.css</tt> file within each Theme folder. </dd></dl> <a name="WordPress_Generated_Classes" id="WordPress_Generated_Classes"></a><h2> <span class="mw-headline">WordPress Generated Classes</span></h2> <p>Several classes for aligning images and block elements (<tt>div</tt>, <tt>p</tt>, <tt>table</tt> etc.) were introduced in WordPress 2.5: <tt>aligncenter</tt>, <tt>alignleft</tt> and <tt>alignright</tt>. In addition the class <tt>alignnone</tt> is added to images that are not aligned, so they can be styled differently if needed. </p><p>The same classes are used to align images that have a caption (as of WordPress 2.6). Three additional CSS classes are needed for the captions, together the alignment and caption classes are: </p> <pre> /* =WordPress Core -------------------------------------------------------------- */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display:block; margin: 5px auto 5px auto; } .alignright { float:right; margin: 5px 0 20px 20px; } .alignleft { float:left; margin: 5px 20px 20px 0; } .aligncenter { display: block; margin: 5px auto 5px auto; } a img.alignright { float:right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float:left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin:0; max-width: 98.5%; padding:0; width: auto; } .wp-caption p.wp-caption-text { font-size:11px; line-height:17px; margin:0; padding:0 4px 5px; } </pre> <p>Each Theme should have these or similar styles in its <tt>style.css</tt> file to be able to display images and captions properly. The exact HTML elements and class and ID values will depend on the structure of the Theme you are using. </p> <a name="Templates_and_CSS" id="Templates_and_CSS"></a><h2> <span class="mw-headline"> Templates and CSS </span></h2> <p>To help you understand more about how CSS works in relationship to your web page, you may wish to read some of the articles cited in these lists: </p> <ul><li> <a href="/web/20110624080240/http://codex.wordpress.org/Using_Themes" title="Using Themes">Using Themes</a> - There are also many advanced articles in this list. </li><li> <a href="/web/20110624080240/http://codex.wordpress.org/Templates" title="Templates">Templates</a> - Comprehensive list of WordPress Theme and Template articles. </li><li> <a href="/web/20110624080240/http://codex.wordpress.org/Theme_Development" title="Theme Development">Theme Development</a> - WordPress Theme Development guide and code standards. </li></ul> <a name="WordPress_Layout_Help" id="WordPress_Layout_Help"></a><h2> <span class="mw-headline"> WordPress Layout Help </span></h2> <p>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 resources: </p> <ul><li> <a href="/web/20110624080240/http://codex.wordpress.org/WordPress_Lessons#Designing_Your_WordPress_Site" title="WordPress Lessons">Lessons on Designing Your WordPress Site</a> </li><li> <a href="/web/20110624080240/http://codex.wordpress.org/Site_Design_and_Layout" title="Site Design and Layout">Site Design and Layout</a> - Comprehensive list of resources related to site design in WordPress. </li><li> <a href="/web/20110624080240/http://codex.wordpress.org/FAQ_Layout_and_Design" title="FAQ Layout and Design">FAQ Layout and Design</a> </li></ul> <a name="CSS_Resources" id="CSS_Resources"></a><h2> <span class="mw-headline"> CSS Resources </span></h2> <ul><li> <a href="/web/20110624080240/http://codex.wordpress.org/Finding_Your_CSS_Styles" title="Finding Your CSS Styles">Finding Your CSS Styles</a> </li><li> <a href="/web/20110624080240/http://codex.wordpress.org/CSS_Troubleshooting" title="CSS Troubleshooting">CSS Troubleshooting</a> </li><li> <a href="/web/20110624080240/http://codex.wordpress.org/CSS_Fixing_Browser_Bugs" title="CSS Fixing Browser Bugs">CSS Fixing Browser Bugs</a> </li><li> <a href="/web/20110624080240/http://codex.wordpress.org/CSS_Coding_Standards" title="CSS Coding Standards">CSS Coding Standards</a> </li><li> <a href="/web/20110624080240/http://codex.wordpress.org/CSS_Shorthand" title="CSS Shorthand">CSS Shorthand</a> </li><li> <a href="/web/20110624080240/http://codex.wordpress.org/Know_Your_Sources#CSS" title="Know Your Sources">Know Your Sources#CSS</a> </li><li> <a href="/web/20110624080240/http://codex.wordpress.org/Conditional_Comment_CSS" title="Conditional Comment CSS">Conditional Comment CSS</a> </li><li> <a href="/web/20110624080240/http://codex.wordpress.org/Validating_a_Website" title="Validating a Website">Validating a Website</a> </li></ul> <p class="LanguageLinks" style="border:1px solid #CCCCCC; line-height:1.5; text-align:left; color:#333333; font-size:90%; padding:10px;"><span style="white-space:nowrap;"><a href="/web/20110624080240/http://codex.wordpress.org/Multilingual_Codex" title="Multilingual Codex" class="mw-redirect">Languages</a>:</span> <strong class="selflink">English</strong> • <a href="https://web.archive.org/web/20110624080240/http://wpdocs.sourceforge.jp/CSS" class="external text" title="http://wpdocs.sourceforge.jp/CSS">日本語</a> • <a href="https://web.archive.org/web/20110624080240/http://codex.wordthai.com/CSS" class="external text" title="http://codex.wordthai.com/CSS">ไทย</a> • <a href="/web/20110624080240/http://codex.wordpress.org/zh-cn:CSS" title="zh-cn:CSS">中文(简体)</a> • <small>(<a href="/web/20110624080240/http://codex.wordpress.org/Multilingual_Codex#Language_Cross_Reference" title="Multilingual Codex" class="mw-redirect">Add your language</a>)</small> </p>  <div class="printfooter"> Retrieved from "<a href="https://web.archive.org/web/20110624080240/http://codex.wordpress.org/CSS">http://codex.wordpress.org/CSS</a>"</div> <div id="catlinks"><div id="catlinks" class="catlinks"><div id="mw-normal-catlinks"><a href="/web/20110624080240/http://codex.wordpress.org/Special:Categories" title="Special:Categories">Categories</a>: <span dir="ltr"><a href="/web/20110624080240/http://codex.wordpress.org/Category:Design_and_Layout" title="Category:Design and Layout">Design and Layout</a></span> | <span dir="ltr"><a href="/web/20110624080240/http://codex.wordpress.org/Category:WordPress_Development" title="Category:WordPress Development">WordPress Development</a></span></div></div></div>  </div> <div class="col-2"> <ul class="submenu"> <li id="n-mainpage"><a href="/web/20110624080240/http://codex.wordpress.org/Main_Page">Home Page</a></li> <li><a href="/web/20110624080240/http://codex.wordpress.org/WordPress_Lessons">WordPress Lessons</a></li> <li><a href="/web/20110624080240/http://codex.wordpress.org/Getting_Started_with_WordPress">Getting Started</a></li> <li><a href="/web/20110624080240/http://codex.wordpress.org/Working_with_WordPress">Working with WordPress</a></li> <li><a href="/web/20110624080240/http://codex.wordpress.org/Blog_Design_and_Layout">Design and Layout</a></li> <li><a href="/web/20110624080240/http://codex.wordpress.org/Advanced_Topics">Advanced Topics</a></li> <li><a href="/web/20110624080240/http://codex.wordpress.org/Troubleshooting">Troubleshooting</a></li> <li><a href="/web/20110624080240/http://codex.wordpress.org/Developer_Documentation">Developer Docs</a></li> <li><a href="/web/20110624080240/http://codex.wordpress.org/About_WordPress">About WordPress</a></li> </ul> <h3>Codex Resources</h3> <ul class="submenu"> <li id="n-portal"><a href="/web/20110624080240/http://codex.wordpress.org/Codex:Community_Portal">Community portal</a></li> <li id="n-currentevents"><a href="/web/20110624080240/http://codex.wordpress.org/Current_events">Current events</a></li> <li id="n-recentchanges"><a href="/web/20110624080240/http://codex.wordpress.org/Special:RecentChanges">Recent changes</a></li> <li id="n-randompage"><a href="/web/20110624080240/http://codex.wordpress.org/Special:Random">Random page</a></li> <li id="n-help"><a href="/web/20110624080240/http://codex.wordpress.org/Help:Contents">Help</a></li> </ul> </div> </div> </div> <div id="footer"> <div class="wrapper"> <p> <a href="https://web.archive.org/web/20110624080240/http://wordpress.org/about/privacy/">Privacy</a> | <a href="https://web.archive.org/web/20110624080240/http://wordpress.org/about/gpl/">License / GPL</a>     See also: <a href="https://web.archive.org/web/20110624080240/http://wordpress.com/" title="Hassle-free WP hosting">WordPress.com</a> | <a href="https://web.archive.org/web/20110624080240/http://wordpress.tv/" title="Videos, tutorials, WordCamps">WordPress.TV</a> | <a href="https://web.archive.org/web/20110624080240/http://central.wordcamp.org/" title="Find a WordPress event near your home">WordCamp</a> | <a href="https://web.archive.org/web/20110624080240/http://jobs.wordpress.net/" title="Find or post WordPress jobs">WP Jobs</a> | <a href="https://web.archive.org/web/20110624080240/http://ma.tt/" title="Co-founder of WordPress, an example of what WordPress can do">Matt</a> | <a href="https://web.archive.org/web/20110624080240/http://www.facebook.com/WordPress">Fan WP on Facebook</a> | <a href="https://web.archive.org/web/20110624080240/http://wordpress.org/news/feed/" class="rsslink">Blog RSS</a> </p> <h6>Code is Poetry</h6> </div> </div> </body>  </html>