About CSS page layouts

From Joomla! ドキュメンテーション

This page contains changes which are not marked for translation.

Professional websites separate styling from content. There are many reasons for this, the most obvious (to a developer) being the ability to control the appearance of many pages by changing one file. Styling information includes: fonts; backgrounds; images (that recur on every page); position and dimensions of elements on the page. Your HTML file will now be left with: header information; a series of elements; the text of your website. Because you are creating a Joomla! template, you will actually have: some header information; php code to request the rest of the header information; a series of elements; php code to request each module position; php code to request the main content.

Style information is coded in CSS, cascading style sheet, and usually stored in files with the suffix .css. A webpage contains a link to the associated .css file so a browser can find the appropriate style information to apply to the page. CSS can also be placed inside a html file between <style type="text/css"></style> tags.

All CSS code is applied to an element of the html/xml page. If you want a style to encompass a whole page, you would probably apply it to the <body> element. You can apply styles to any html element such as <p>, <table> or <div> elements. To style a particular element it needs to have an ID. For example, to apply styles to the <div> containing the title, you would first include an ID in the html - <div ID="title">.