About CSS page layouts/zh-tw
From Joomla! Documentation
This page is a candidate for deletion. The given reason is: This page is orphaned. The information, while relevant and well written, might be better placed elsewhere like https://docs.joomla.org/More_advanced_Joomla!_templates, rather than being an article on its own.
This notice should remain for a minimum of 1 week after it was placed on the page. If discussion is still ongoing, it should remain until a consensus is reached, after which the page will either be deleted or this notice removed. If you disagree with its deletion, please discuss your reasons on its associated talk page, as applicable.
Remember to check if anything links here and the page history before deleting.
Last edit by Shawnhy (talk · contrib) · Last edited on Fri, 12 Feb 2021 03:13:50 +0000
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 extension .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">.