There are a few ways to use CSS.
1. Inline CSS – This is the simplest way to write a style to your HTML element.
| <a style=”color:#000; font-size:12px;” href=”#”>Link</a></pre> |
I always teach myself not to use this method at all the time. I only want to use this method on a site or page that only need simple styles or when I were so lazy to write it in the other method. There are a few reasons why I think this is not the best choice to practise.
– By using this way, we might lose some flexibility in CSS. For example, if we want to apply a two different style on HTML link element which are normal state and hover state then we have no way to do this in inline CSS unless we use the style sheet way.
– This method only suit for a unique style which will not be shared on any other places. In this case, I can save time by writing the style directly to the HTML element without need to open a CSS external file (.css) and write a style on it.
– I will also use this method to overwrite certain style to an HTML element which is already inherit a style from its parent. Once we apply this to the element, it will definitely overwrite the parent’s style but it will not change the parent’s style.
2. External Style Sheets – a very good way to apply style. This method require us to write styles in a .css file as shown in the example below.
<pre lang=”CSS”>
a {
color: blue;
font-size: 12px;
text-decoration: none;
}
a:hover {
color: red;
font-size: 12px;
text-decoration: underline;
}</pre>
After that, we need to include the style.css file above in the HTML <head> as shown below:
<pre lang=”html4strict”>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
</pre>
This method has more advantages compare to the others. Why?
<p style=”padding-left: 30px;”>- because CSS that is included in the HTML <head> will be rendered progressively and earlier before what’s contain in the <body>. This means by using this method will be a good things for loading performance.</p>
<p style=”padding-left: 30px;”>- because we can use back the style in the .css file in many places. Again, this will make our site load faster since the .css file is cached in the header and the site is only read it from the same source.</p>
<p style=”padding-left: 30px;”>- because this method provide more flexibility in using it just like the example I gave above (HTML <a> in two different state).</p>
Below are list of <strong>best practises</strong> in using this method.
<p style=”padding-left: 30px;”>- try to keep all style in one .css file only. This will save some loading time because the site will only look into one single .css file instead of loading multiple file to get the styles.</p>
<p style=”padding-left: 30px;”>- try to optimize the usage of each style. If there are multiple places using a same style, then we make the style in one <em>id</em> or <em>class</em> so the site will only refer to that area for that particular style. It also called as <a title=”Compressing CSS” href=”http://www.handyme.com/#” target=”_self”>compressing the CSS</a>. For this kind of practise, we should then know how to apply the <a title=”Naming convention in CSS” href=”http://www.handyme.com/#” target=”_self”>naming convention</a> to each <em>id</em> or <em>class</em> so we dont get confused ourselves when writing the styles.</p>
3. Put it anywhere – this can be place in both places, either in the <head> or <body> section. Anywhere means put it any place but before the place where we want to apply the style. Use it as shown in the example below:
<pre lang=”html4strict”>
<style>
a {
color: blue;
font-size: 12px;
text-decoration: none;
}
a:hover {
color: red;
font-size: 12px;
text-decoration: underline;
</style>
</pre>
So, got the basic ideas of using CSS? Use any method whenever we need that, but put together some consideration on loading performance to make our site not even looks good but also load faster.
Handy-Me Blog 