CSS online training course

CSS lesson 1, The basics of CSS

What is CSS

CSS stands for Cascading Style Sheets. For this course i asume that the readers do have some knowledge of HTML. But CSS is also used with Joomla. With CSS you can control the look and feel of your website through one file. Because of this the website will also appear faster on the screen. There are 3 possibillities :
Inline style ( inside (x) HTML elements )
Internal Style sheet ( inside the <head> tag )
External style sheet ( another document )
The inline style is allmost never used and is also not really clear, so its wise to use it as little as possible.

There are different advantages to using CSS.
You can control the look and feel of your entire website from one file.
You only need to apply changes to that one file to get a change through the entire website.
All the different pages of a website can all get the same layout. The design of the page, positioning and other elements can be arranged at a pixel level accurancy on the entire website.

Internal stylesheet

At the internal method we place the CSS code inside the <head></head> tags of each (X)HTML file. This method is also known as embedded stylesheet.
A example :

External stylesheet

When the CSS code can apply for multiple files than a external stylesheet is recommended. The undermentioned line we place between the <head> tags and through the link element we make a shortcut to the external stylesheet.

Which way to recommend it depends on what you want to do. If you have only 1 file where you need a layout for than we normaly place it between the <head></head> ( internal stylesheet ). If you plan to use the css on multiple files then i recommend you to use a external stylesheet because it will be easier to use and will also be clearer when the website becomes bigger.

Inline style

We recommend you to only use this style for incidental and individual deviation of a element. In HTML a attribuut style exist which we can apply to a html page. But the rules of CSS dont apply anymore. So we lose the goal to have a central layout CSS. I will give an example but still dont recommend anyone to use this type of CSS alot.
Example in the html page :
<p style=”color:green;”>
There is no selector here and no accolade. But still you can see CSS line between the " ".

The CSS command is : background e4e4e4 (=gray) and textcolor green.
Through <p style> the background color becomes blue and the textcolor white.
Without <p> the default color of html ( black ) becomes activated.