There are 3 ways recommended by the W3C to add styling to a markup language. You can use all 3 methods in your html document.

External stylesheet
This is the recommended method by me and many other professionals. The main bulk of the css stylesheet is kept in an external document. The document is called in the head of the html document. The document can be called anything but must end in the .css prefix, e.g. styles.css, some-random-file.css.

To call the stylesheet, we add the following code in between the two head tags in the html document.

The biggest advantage of using this method is the css is easily editable. You can link the stylesheet to as many files as you need. You can change the whole design of a whole website from one file.
The css code is also clearer to understand and can also help a website load quicker. This is the recommended method as websites become bulkier and they rely more on CSS.

Internal
This is the method recommended by many tutorial websites, but not by professionals. The css coding is inside the head tags of the html document. If your website uses a lot of css for the design, then this can add quite a few lines of coding to the document.

To use this method, we add the css code inside a style command, like the javascript command.



This method is handy if the document uses it’s own styles e.g. a javascript image gallery. Less css code included using this method is better.

Inline
This method is used quite a lot, as it is when using html. The earlier versions of html used this method to change the basic configurations of the website including fonts and colors.

The only time I recommend using this method is for adding some styling to a script, that cannot utliise stylesheets. This method isn’t recommended as it looks very untidy when reading through the code.

To use this method, we add a style command to an object, such as a paragraph.

Text

All of the above examples are used by websites, the bottom 2 are used more by tutorial websites for ease of use. I always recommend the top option as it makes your html code look neater and makes it easier to edit the css code.

Post to Twitter