Basic HTML and CSS Markup for WordPress Themes

Part of the WordPress Web Design For Dummies Cheat Sheet

When you work with WordPress themes to create web designs, you use basic HTML, combined with CSS styling, to accomplish the formatting and styling you desire for your website. Here's a rundown of some basic HTML and CSS markup.

Name Description HTML Markup Example CSS Example
<head>
</head>
Indicates the header portion of a web page that contains invisible, but vital, information about the page, such as the title and keywords. <head>
<title>My Web Site</title>
</head>
N/A
<body>
</body>
Defines the content area of your web page that's visible in your visitor's browser window. <body>
<p>This is my content</p>
</body>
body {background: white; color:black}
<a href="..">
</a>
Inserts a hyperlink for either a word or an image. <a href="http://google.com">Google</a> a {color:blue}
<img src=".."> Inserts an image in a web page. <img src="http://yourdomain.com/image.jpg" /> img {padding 4px; border: 1px solid silver}
<p>
</p>
Defines groupings of text in paragraphs. <p>This text is treated as a paragraph</p> p {margin: 1.2em; line-height: 1.2em; color: red}
<h1>
</h1>
Defines a first-level heading, usually a title or menu heading. You can also use h2, h3, h4, h5, and h6. <h1>This is a title</h1> h1 {font-size: 18px; color: blue; margin: 10px 0;}
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus

SERIES
WordPress Web Design For Dummies Cheat Sheet

Advertisement

Inside Dummies.com