extension joomla, template joomla,banner extension joomla,jomla slider,slider joomla

Examine Your HTML and CSS

In order to determine what is going right or wrong with your web page layout, you have to go to the source. This means looking under the hood.

Under the pretty hood of your web page, the nice layout you see on your Internet browser, is a whole bunch of code with strange and foreign sounding references. At first glance, it's like looking under the hood of a racing car. You know that all of that junk makes the car go, but what the heck is all that mess under the hood?

Viewing HTML

To lift the hood on your page, make sure the page is being viewed from your web browser and from within your web browser's top menu, click VIEW > SOURCE or PAGE SOURCE. Another page will pop-up either inside another browser window or inside of a program that comes with your operating system called Notepad, or some variation thereof. This is your HTML page which structures your page.

Viewing CSS

To view your CSS, either know the actual address (or have it already on your hard drive), or scroll down through the HTML page to the following reference:
<link rel="style sheet" type="text/css" href="/wordpress/wp-content/themes/default/style.css">
This is the link that loads in your attached CSS style sheet. To view your CSS, either double click on the file name or type in the specific link to the file in your web browser such as:

In WordPress, PHP is used to actually generate the HTML page. This is often complex and confusing code. To view the HTML, view a generated page, such as a sample post. To make changes in the HTML structure and CSS references, you will need to modify the appropriate PHP file. The page on using themes has more information on how to view your Theme Templates and find out which Template is associated with which section on your page.


The problem-solving techniques herein describe how to change the CSS to influence the layout of the page. To make actual changes to the Themes, check out Theme Development.


The CLASS is a reference to any element on a page that needs to look a specific way when this reference is used. For example, if you frequently want to highlight a word or two within your text (we'll use red as a highlight color in this instance), you might have aCLASS selector in your style sheet like this:

.hilite { color: red}
and the reference in your HTML might look like this:
...this is some text about something
I want <span class="hilite">in red</span>. And 
some more rambling here...
As you can see, the difference between ID and CLASS selectors in the style sheet is that an ID uses a pound sign (#name) and aCLASS uses a period (.name). ID references must be unique on a page and used once. CLASS references can be used repeatedly in the same page.


If you want to "design" a specific HTML tag reference, such as a blockquote, the code within the web page may look like this:

<blockquote>This is a pithy and brilliant quote 
that I knew you would enjoy.</blockquote>
In the style sheet, the reference to the blockquote would not have a # or period but would just simply list the HTML and then the design elements. This example indents the quote on both sides and puts a blue line on the left side of the quote and makes the text italic.
blockquote { position: relative; margin: 10px 50px 10px 50px;
	padding:5px;  font-style:italic; 
	border-left:solid blue 4px; }
You can apply any design elements to any specific HTML tag such as body, p, H1, H2, H3, ul, li, and more.

For information on modifying IDCLASS, and HTML, check out the resources at WordPress' CSS Tips, Techniques and Resources.

Important note! Certain themes have their css styles in more than once place, the Kubrick theme being one of them. If, after changing css attributes in a css file, you don't see the results you wish, it's possible your theme choice has some embedded css in one of the php files (usually a header file) and the embedded css styles are overriding the linked or imported css stylesheet.