CSS is used to style the logical layout elements of HTML into attractive web sites. It differs from HTML, in that HTML organizes the data on the page into logical containers, and then CSS provides the information needed to then style these containers.
CSS is usually stored in its own file(s) separate to the main HTML document. This is to separate the styling from the logical data structure, so that one of them can be changed or altered without affecting the other, resulting in web sites that are easier to maintain.
Also, if HTML and CSS are in separate files, then one CSS file can be used for many different HTML pages, as opposed to painstakingly putting the styling into each file separately. This allows for site wide changes to the design to be done by editing only a single file. This also naturally saves disk space as well as identical styling information is no longer repeated on every page.
Note
There are times when the CSS code may be required to be written directly into a HTML document. Many of the reasons are the result of dynamic page generation, which we will cover soon. But at these times the CSS should be written between the <head></head> tags.
CSS works via referencing HTML tags and attributes and then applying styles to them.
For example, to style all of our paragraph tags, <p>, to be bold and blue, we could use the following CSS code.
p {
font-weight:bold;
color: blue;
}
Then, all data between any <p> tags on our page would turn bold and blue. As we can see that is much easier than typing the same thing into a style attribute on every single set of <p> tags.
However, sometimes we won't want to style all of the tags on a page identically. What if we want to only style one of our paragraphs, and to give it red text?
If we need to identify individual tags, we can use class and id attributes in our HTML to focus the target for our CSS styles. Class attributes are used for CSS that will style multiple HTML elements in the same way, and id attributes are used for CSS that will only affect unique HTML elements. In other words:
So let's return to our red paragraph and say that it is for a warning box. The chances are that our warning box will only be used once per page, but there is a possibility that it could be used more than once if there are multiple warnings. So we should choose a class for our attribute. It might look like this:
<p class="warningbox">Be careful when doing this!</p>
Now, into our CSS file we will add:
p.warningbox {
color: red;
}
Notice how after our p we now have .warningbox. The full stop before warningbox indicates that we are after a class. If warningbox was an id, then we would use a hash symbol, #, between p and warningbox.
But what about when there are two or more declarations that overlap? Such as:
p {
font-weight:bold;
color: blue;
}
p.warningbox {
color: red;
}
Do we get red or blue <p> tags? Are they all bold or not?
Referring back to the full name of CSS, the C in it stands for Cascading. This is because when several styles attempt to affect the same HTML, a set of rules are applied that give priority to certain styles, and allow others to flow down, in a logical cascade.
Generally, the cascade is dictated by the following rules, with number 4 having the highest priority:
On top of these rules, the more specific a rule is, the higher its priority, with classes outranking basic HTML elements, and ids outranking classes.
So given the above rules, and looking back at our two rules for <p> tags listed above, the following will happen:
All
<p>tags on the page without a class ofwarningboxwill be colored blueAll
<p>tags with a class ofwarningboxwill override the blue color with red because it is more specificAll
<p>tags will be bold, regardless of class, as thefont-weightstyle cascades down
When including CSS styles in the <head> tags of a document we will need to put them inside their own <style> tags such as:
<head>
<style type="text/css">
p {color:blue}
</style>
</head>
Did we notice the type="text/css" attribute? This is not technically required, but is highly encouraged and recommended to future proof a web site. Not doing it is considered bad practice by many developers.
When putting CSS styles into a separate file there is no need to put <style> tags into the CSS file, the styles can just be written directly into the file.
However, in the HTML page we use <link> tags to load the external CSS file, and put these into the site header, similar to what we did above.
<link rel="stylesheet" type="text/css" href="/cssfile.css" />
Usually this tag will be used exactly as it is here and will only need the href attribute changed to point to the correct CSS file.
In a Joomla! site, most of our CSS references will come from one of three places, either from our site template, the frontend or admin template, or the references will come from extensions we have installed. Usually these are components, but modules and plugins can also add their own CSS references in.
Note
As with the HTML section, this is far from a complete guide to CSS, and there are an equally large number of books and online resources available to study CSS. Also I recommended again is the website www.w3schools.com for more detailed information on HTML, and its descendant, XHTML.
CSS gives us a lot of power to style our site, and prevents the same styles from being repeated in the HTML files for every page of the site and consolidates them into one file. But what can be done about repeated HTML? Quite a lot of our site's logical structure will be identical on every page, things such as our company logo, menus, headers, advertisements, and other things all look the same on every page, so why are we wasting time and disk space recoding them over and over?
It was this last type of thinking that lead to the next step in web site evolution, "dynamically generated HTML" via "server-side scripting".